八维教育 网页设计 课间笔记 祝老师精简版

网页设计

一单元

1.什么是网（页）
2.网站
3.制作网页
制作网页中的内容 1-5单元 html_超文本标记语言
美化网页 6-9单元 css_层叠样式表
4.如何在电脑中建立网页
先建立一个文本文档
修改扩展名 /.html
5.文件扩展名（后缀名）
.doc
.mp3
.zip .rar 压缩文件
.mp4
.exe 应用程序
.html .shtml .htm 网页文件
图片：.jpg 常用的 .gif 动态图 .png 无损压缩
6.学习html
html超文本标记语言
html就是利用不同的功能标签来实现网页中的不同内容。
7.学习标签：
用<>抱起来的字母或者单词都是标签
但标签<标签名/>
双标签<标签名></标签名> /（代表标签的结束）
/1. 换行的标签：br一个br标签换一行
/2.加粗的标签：b
8.html的基本框架：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>--声明文档类型
<html lang="en">--控制整个网页
<head>--控制网页的头部
 <meta charset="UTF-8">--控制网页的编码方式
 UTF-8   国际通用
 gb2312  简体中文
 <title>china</title>--网页的标题
</head>
<body>--控制网页的主体             
 as <b> <br>
dasd</b>
</body>
</html>

敲！+TAB

9.专业制作网页的步骤：
/先建立一个文件夹（建立站点）
/在文件夹在建立3个文件夹喝一个网页文件
/文件夹分别是：
css 美化
html 网页
img（images） 图片
首页网页的名字最好是：index和default
10. 网页的的文件，文件夹命名规范：
/不能是汉字
/不能数字开头
/只能是字母，数字，下划线
11. 学习ps的基本操作：
ps的使用快捷键：
按住 alt+鼠标滚轮 ctrl+ (和) + 放大 ctrl+ (和)- 缩小
1.提取颜色
2.测量
3.切题

二单元

1.换行标签：br
2.加粗的标签：b
3.倾斜的标签：i
4.标签与标签之间可以任意的包含嵌套，但是一定要一一对应，不可交叉

1
<b><i>2403A </i><b>

5.下划线的标签：u
6.标题标签：h1-h6 实现网页中加大加粗的文字（自带换行效果）
h1最大的标题 h6最小的标题
属性：进一步展示标签的特性
属性的使用方法：
<标签名 属性=”属性值“></标签名>
<标签名 属性=”属性值“>
h标题标签的属性：
/aling 控制标题文字水平对齐方式
属性值：left左默认 right右 center中间 /
7.段落标签：p 实现成段落文字
8.空格：

1
2
3
4
5
6
7
&nbsp; — “nb空格”是半个空格的宽度
&ensp; — “en空格”宽度是两个普通空格的宽度
&emsp; — “em空格”大概是四个普通空格的宽度
&lt; — <
&gt;  —>
&copy;
&reg;

9.水平线的标签：hr
属性：
color 文字颜色
width 控制线的长短
aling 控制水平对齐方式
10. 字体的标签 font
/color 文字颜色
/size 文字大小
11.图签的标签 img
固定格式： 

<img src=“图片的路径”>

属性：
1.src 找图的
图片的路径： 相对路径
绝对路径
区分相对和绝对？
绝对：只要带有盘符，C, D; 或者是带有http：// 属于绝对路径
/2.alt 图片非正常显示的提示文字
/3.title 图片正常显示的提示文字
/4.width 宽度
/5.height 高度
/6. border 边框

三单元

超链接和列表
1.超链接的标签 a 双标签
固定格式： 想点击的内容
属性：
1. herf 链接地址
2. target 跳转方式（窗口的打开方式）
属性值：_blank 新增窗口
_self 不新增原窗口
_parent 父级框架
_top 顶部框架
2.顶部超链接：

3.空链接：

二．列表 分为无序列表，有序列表自定义列表

  1. 无序列表 的标签： ul和li
    ul 负责整个无序列表
    li 负责列表中的一行行的文字
    格式：

      ----负责整个无序列表
    • ----控制一行行文字

ul的属性： type 修改列表前面的符号
属性值：
disc，默认值，实心圆“⚫”
square，小方块“■“
circle，空心圆”⚪“
2. 有序列表 的标签：ol和li
ol的属性type：
属性值： 1 数字类
a absd
A
I
i，
ol的属性start：控制列表符号的开始值
属性值只能是数字
3.自定义列表 dl里边套dt和dd

<dl>
    <dt>定义项</dt>
    <dd>描述项</dd>
</dl>

三．标签的分类：
根据个数分类：
单标签
双标签
根据标签在网页中显示的效果进行分类：
块元素：能自动换行的标签
/h1-h6 p 所有列表（ul li ol li dl dt dd）
行内元素：不自动换行标签
。a b img ………

四单元 表格

一．表格 table 表格中的文字默认水平居左
实现表格的固定代码：table>tr几行>td几列
属性：
1.border 边框线
2.width 宽度
3.height 高度
4.cellspacing 单元格间距 简称 cc
解决线的双层问题设置 cc=”0”
5.bordercolor边框线的颜色
6.bgcolor 背景色
给 table 加就是整个表格有背景色
给tr加，加给那个 tr，具体的哪一行有背景色
给 td 加，加给那个 td，具体的哪一单元格有背景色
7.aling 控制水平对齐方式
属性值：left 左 right 右 center 中间
8.Valign 控制垂直对齐方式
属性值：
二．行 tr
三．单元格 td
一个4行5列的表格
合并：只能是相邻的单元格的合并
水平合并：左右相邻的单元格的合并 colspan
垂直合并：上下相邻的单元格的合并 rowspan
合并的步骤：

五单元 表单

一、表单的标签: form
二、表单控件的标签:input
属性:type 区分表单中的各种框和按钮
属性值:一种值决定一种框
固定格式: 

<input type="值">

Text 文本框
Textarea 多行文本
Password 密码框
Radio 单选框
Checkbox 多选框（复选框）
Checked 默认选择
File 文件域
Submit 提交按钮
Reset 重置按钮
Button 普通按钮
Value 更改按钮名字
Placeholder 输入提示
select 下拉输入框
（option 选项）

三、选择框：（下拉菜单）

1
2
3
<select>----只负责实现拉框
    <option>选项一</option>----实现选项
</select>

四、多行输入框（文本域）

1
<textarea></textarea>--文本域

HTML完结…步入css

六单元

css 层叠样式表

一.如何让网页和css建立联系？
1.外部链接
在css文件夹中建立一个css文件，在需要的美化的网页中的head中，书写link来建立联系

 <link rel="stylesheet" href="css/style.css">

二.css如何去美化网页中具体的标签？
利用各种选择器
1.标签选择器；利用标签来选择标签的一种选择方式
例如p{

}选择页面的所有p标签
2.cass选择器（类选择器）；
通过用class来起名选择标签的一种方式

1
<p class="a">一个段落</p>
1
2
3
.p {
    text-align: center;
}

3.id选择器
通过用id来起名选择标签的一种方式

1
<p id="cc">一个段落</p>
1
2
3
#cc{
    color: green;
}

4.通配符选择器（全局选择器）；
选择页面所有

1
2
3
*{

}

5.包含选择器；

1
2
3
<p>一个段落 
    <b>加粗红色</b>
</p>
1
2
3
    p b{
    color: red;
}

6.伪类选择器；主要针对超链接的一款选择器
：link 原始状态/未点击的状态
；visited 点击之后
；hover 鼠标经过
；active 鼠标点击时
四个状态书写顺序不可改变，必须是 L V H A

7.群主选择器；

1
2
3
4
5
6
<h1>标题</h1>
<p>一个段落 </p>
<b>加粗红色</b>
<i>倾斜</i>
<u>下划线</u>
<a href="#">超链接</a>
1
2
3
a,p,b,i,{
    color: red;
}

七单元

css 美化指令: css属性
格式 属性:属性值;
一、文字属性:
1.color 文字颜色 简称 C
2.font-size 文字大小 简称 fz
属性值:数字+px

3.font-family 改字体 简称 ff

4.font-weight 控制文字粗细 简称 fw
属性值: bold 加粗
normal 不加粗正常
属性值:还可以是整百的数字，100-500不加粗，600及以上代表是加粗

5.font-style 控制文字是否倾斜 简称 fs

属性值:italic 倾斜
normal不倾斜正常

line-height 行高、行间距简称 lh
属性值:数字+px
纯数字，代表的是倍数
百分比

7.text-align 控制文字水平对齐方式 简称 ta

属性值:left左
center 中
right右

8.text-indent 首行缩进 简称 ti
属性值:数字+px
数字+em (em 是文字的单位)
百分比

9.text-decaration 文本修饰 简称td
(给文字加线)
属性值: overline 上划线
underline 下划线
line-through 删除线
none 没有线，去掉线

二、列表属性:
1.list-style-type 简称lst 修改列表符号的
属性值:square方块
circle 空心圆
disc 圆点 默认的
none 去掉点简称
2.list-style-image 简称 lsi 将图来作为列表符号
属性值:url(../img)
3.list-style-position 简称lsp 控制列表符号的位置的
4.list-style 简称ls 列表的万能属性

三、背景属性:
1.background 简称bg 背景的万能属性
2.background-color 背景色
3.background-image 背景图
属性值:url(../img)
4.background-repeat 控制背景图平铺方式、重复方式
属性值: no-repeat 不平铺 只一张
repeat-x 水平平铺
repeat-y 垂直平铺
repeat 全铺满 默认的

5.background-position 控制背景图的位置
属性值:两个值。 第一个值控制水平，第二个值垂直。
值可以用方位单词，例如:leftright top bottom center
也可以是百分比，数字+px