第1篇 网页结构与Web标准 2
第1章 网页的构成与Web标准 2
1.1什么是网页 2
1.2网页的构成 2
1.2.1页面显示的信息 3
1.2.2构成页面的结构HTML 3
1.2.3显示效果的控制 5
1.3 Web标准的概念 5
1.3.1什么是Web标准 6
1.3.2页面的内容 6
1.3.3页面的结构 7
1.3.4页面的表现 7
1.3.5 Web标准的优势 7
1.4 Web标准网站欣赏 7
1.5小结 9
1.6习题 10
第2章 使用CSS构建页面的原理 11
2.1什么是CSS 11
2.2 CSS应该定义在哪里 12
2.3 CSS的优先等级 12
2.3.1元素内部的CSS 12
2.3.2页面头部的CSS 13
2.3.3外部的CSS 14
2.4调用CSS样式的优先级 15
2.5使用CSS控制表现效果带来的好处 17
2.6实例演练——一个简单的登录页面 17
2.6.1效果图的分析 18
2.6.2页面结构部分的制作 18
2.6.3 CSS部分的编写 19
2.7小结 23
2.8习题 23
第3章 CSS布局的一般步骤 25
3.1分析和切割效果图 25
3.1.1分析效果图 26
3.1.2切分效果图 26
3.1.3整理切分图像 27
3.2制作页面的结构和内容 27
3.2.1确定页面的内容 27
3.2.2制作页面的结构 28
3.3添加表现部分 28
3.4完成简单的交互行为 29
3.5整站布局的步骤 29
3.6小结 30
3.7习题 30
第2篇 结构语言HTML 32
第4章 HTML基础 32
4.1 HTML页面结构 32
4.2元素的书写格式和属性 34
4.2.1元素的书写格式 35
4.2.2元素的属性 36
4.3 HTML语法规范 37
4.4选择文档类型 39
4.4.1什么是文档类型 39
4.4.2选择什么样的DOCTYPE 39
4.5名字空间 40
4.6小结 41
4.7习题 41
第5章 定义页面头部信息 42
5.1页面基础元素——<html> 42
5.1.1控制文本的显示方向 42
5.1.2指定页面的语言 43
5.2页面头部元素——<head> 43
5.3显示页面标题——<title> 43
5.4基本设置元素——<base> 44
5.5定义页面的信息——<meta> 45
5.6创建页面的样式——<style> 48
5.7链接元素——<link> 50
5.7.1指定链接路径 50
5.7.2链接样式文件 50
5.7.3制作收藏夹图标 51
5.8脚本元素——<script> 52
5.9小结 53
5.10习题 53
第6章 页面主体元素的设置 55
6.1页面主体元素——<body> 55
6.2定义主体元素的背景和文本属性 56
6.3定义页面主体元素的边界 58
6.3.1定义左边界 58
6.3.2定义上边界 59
6.4定义页面主体元素的链接属性 60
6.4.1定义未访问过的链接属性 60
6.4.2定义已访问过的链接属性 60
6.4.3定义激活的链接属性 61
6.5设置页面主体元素的样式 62
6.5.1在主体元素中使用样式 62
6.5.2在主体元素中调用样式 62
6.6使用背景音乐 63
6.7小结 63
6.8习题 64
第7章 使用文本元素 65
7.1文本元素简介 65
7.2使用区域元素——<div> 65
7.2.1区域元素的对齐 66
7.2.2使用样式 66
7.2.3定义唯一标记 67
7.2.4取消自动换行 68
7.3使用段落元素——<p> 69
7.4使用标题元素 69
7.5使用基于内容的文本元素 69
7.6使用基于物理样式的文本元素 71
7.7使用文本的间隔和布局元素 73
7.8使用水平分隔线元素——<hr> 75
7.9小结 75
7.10习题 76
第8章 使用图像元素 77
8.1图像的格式 77
8.1.1 JPEG格式 77
8.1.2 GIF格式 78
8.2图像元素——<img> 78
8.2.1定义图像元素的显示大小 80
8.2.2定义代替图片的文本 81
8.2.3定义图像元素的边框 81
8.2.4定义图像元素的对齐 81
8.2.5定义图像元素的边距 82
8.3小结 83
8.4习题 83
第9章 使用表格元素 84
9.1表格元素的基本构成 84
9.2表格元素的显示效果 87
9.2.1定义边框 87
9.2.2定义表格的大小 88
9.2.3定义内容的对齐 88
9.2.4定义背景 89
9.2.5定义边框效果 90
9.2.6定义单元格间距 90
9.2.7定义单元格补白 91
9.2.8制作边框为1像素的表格 91
9.3定义行元素的显示效果 92
9.4定义单元格的显示效果 93
9.4.1定义对齐 93
9.4.2定义单元格的背景 94
9.4.3定义单元格的大小 94
9.4.4定义单元格的边框 95
9.4.5行和列的合并 95
9.5表格中使用的其他元素 96
9.6小结 98
9.7习题 98
第10章 使用链接元素 100
10.1链接元素简介 100
10.2定义链接元素 101
10.2.1指定路径 101
10.2.2显示链接目标 103
10.2.3定义链接的热键 104
10.2.4定义当前文档中的链接 104
10.3图像中的链接 104
10.3.1创建链接区域元素——<map> 105
10.3.2定义图像内链接的示例 105
10.4小结 107
10.5习题 107
第11章 使用列表和表单元素 109
11.1列表元素的分类 109
11.1.1无序列表元素——<ul> 109
11.1.2有序列表元素——<ol> 110
11.1.3列表条目元素——<li> 111
11.1.4定义列表元素——<dl> 111
11.2表单元素概述 112
11.3表单元素——<form> 113
11.4表单控件元素——<input> 114
11.4.1文本域 114
11.4.2密码区域 115
11.4.3提交按钮 115
11.4.4复位按钮 116
11.4.5图像按钮 116
11.4.6单击按钮 117
11.4.7复选框 117
11.4.8单选按钮 118
11.4.9隐藏区域 119
11.5定义表单控件的效果 119
11.5.1设置只读属性 119
11.5.2设置不可用属性 120
11.6选择列表元素——<select> 120
11.7按钮元素——<button> 122
11.8文本区域元素——<textarea> 122
11.9表单标记元素——<label> 123
11.10小结 123
11.11习题 124
第3篇 表现语言CSS 126
第12章 CSS的语法基础 126
12.1 CSS的基本写法 126
12.2选择符 128
12.2.1 id选择符 128
12.2.2类选择符 130
12.2.3类型选择符 130
12.2.4伪类 131
12.2.5子选择符 132
12.2.6群组选择符 133
12.2.7选择符的优先级 134
12.3属性 135
12.4属性值 136
12.4.1长度值 136
12.4.2百分比值 137
12.4.3颜色值 137
12.4.4 URL值 138
12.5默认值 139
12.6继承 139
12.7小结 140
12.8习题 141
第13章 控制元素的显示效果 142
13.1盒子模型的概念 142
13.1.1块元素和内联元素 143
13.1.2元素宽度的计算 145
13.2元素内容的大小 147
13.2.1定义宽度 147
13.2.2定义高度 148
13.2.3内容与宽度、高度属性的关系 149
13.2.4定义最大和最小宽度 150
13.2.5定义最大和最小高度 151
13.3元素的背景 153
13.3.1定义背景颜色 153
13.3.2定义背景图片 155
13.3.3定义背景图片的重复 156
13.3.4定义背景图片位置 157
13.3.5定义背景图片滚动 159
13.3.6定义背景的综合效果 161
13.3.7背景颜色和背景图片的优先级 162
13.4元素的补白 163
13.4.1定义顶部补白 163
13.4.2定义右侧补白 164
13.4.3定义底部补白 165
13.4.4定义左侧补白 166
13.4.5定义综合补白 167
13.4.6补白与背景的关系 169
13.5元素的边框 170
13.5.1定义单侧边框样式 170
13.5.2定义单侧边框颜色 172
13.5.3定义单侧边框宽度 172
13.5.4统一定义边框样式 173
13.5.5统一定义边框颜色 174
13.5.6统一定义边框宽度 174
13.5.7单侧边框综合设置 175
13.5.8定义边框综合效果 176
13.6元素的边界 177
13.6.1定义单侧边界 177
13.6.2定义边界综合效果 178
13.6.3边界与背景的关系 180
13.7小结 180
13.8习题 180
第14章 控制元素的位置 182
14.1元素的定位 182
14.1.1元素的定位属性 182
14.1.2边偏移属性 183
14.2绝对定位 185
14.2.1绝对定位与父元素 185
14.2.2绝对定位与相邻元素 186
14.3相对定位 188
14.3.1相对定位元素位置的确定 188
14.3.2相对定位与相邻元素 190
14.4定位元素的层叠 192
14.4.1层叠定位属性 192
14.4.2简单嵌套元素中的层叠定位 194
14.4.3包含子元素的复杂层叠定位 195
14.5定位属性的优势和问题 196
14.5.1定位属性的优势 197
14.5.2绝对定位的问题 198
14.5.3相对定位的问题 199
14.6小结 201
14.7习题 201
第15章 控制元素的布局 202
15.1元素的浮动 202
15.1.1定义元素的浮动效果 202
15.1.2浮动元素和固定元素的关系 204
15.1.3浮动的顺序 205
15.2浮动的清除 207
15.3内容的剪切 210
15.4溢出内容的控制 212
15.4.1总体溢出 212
15.4.2单向溢出 213
15.5元素的显示方式 215
15.5.1定义显示方式 215
15.5.2元素的隐藏 216
15.6元素的可视性 218
15.6.1定义可视性 218
15.6.2可视性属性与显示方式属性的关系 219
15.7小结 220
15.8习题 220
第16章 控制文本的显示 221
16.1控制字体的显示 221
16.1.1选择字体 221
16.1.2设置字体颜色 222
16.1.3定义字体大小 224
16.1.4定义字体样式 226
16.1.5加粗显示 227
16.1.6修饰字体 229
16.1.7使用小型大写字母 232
16.1.8转换大小写 233
16.1.9设置字母间隔 234
16.1.10定义单词间隔 235
16.1.11定义行高 236
16.1.12定义字体综合显示效果 240
16.2控制文本的显示 241
16.2.1控制文本缩进 241
16.2.2控制文本空白 244
16.2.3控制文本溢出 245
16.2.4设置水平对齐 247
16.2.5设置垂直对齐 248
16.2.6定义文本流向 250
16.2.7定义文本方向 252
16.2.8对文本排序 253
16.2.9设置单词换行 254
16.2.10设置文本断开换行 256
16.3小结 257
16.4习题 257
第17章 控制列表和表格元素的显示 258
17.1控制列表元素的显示 258
17.1.1定义列表符号 258
17.1.2使用列表图片 260
17.1.3定义标记位置 262
17.1.4标记位置属性与列表高度 263
17.1.5综合定义列表的显示效果 266
17.2列表元素的补白和边界 267
17.3控制表格元素的显示 270
17.3.1合并边框 270
17.3.2定义表格边框间距 272
17.3.3定义表格标题位置 274
17.3.4设置表格的布局 277
17.4小结 278
17.5习题 279
第18章 控制其他元素的显示 280
18.1控制滚动条的显示 280
18.1.1定义滚动条三角箭头的颜色 280
18.1.2定义滑块颜色 281
18.1.3定义滚动条亮边框颜色 282
18.1.4定义滚动条的高亮颜色 283
18.1.5定义滚动条阴影颜色 284
18.1.6定义滚动条暗部阴影颜色 285
18.1.7定义滚动条背景颜色 285
18.1.8定义滚动条基准色 286
18.1.9定义滚动条的颜色 287
18.2控制光标的显示 288
18.3控制打印的显示 291
18.3.1对象后插入分页符号属性 291
18.3.2对象前插入分页符号属性 291
18.4控制元素的缩放 292
18.5控制链接的显示 294
18.5.1定义链接未访问的显示效果 294
18.5.2定义链接鼠标悬停的显示效果 295
18.5.3定义链接激活的显示效果 296
18.5.4定义链接访问后的显示效果 297
18.5.5定义链接效果的顺序 298
18.6小结 300
18.7习题 300
第4篇 CSS布局 302
第19章 关于整站样式表的分析 302
19.1站点页面的分析 302
19.1.1规划样式表的原则 302
19.1.2规划样式表的方法 302
19.1.3实例分析 303
19.2站点二级页面的制作 304
19.2.1日志内容页面结构的规划 304
19.2.2日志内容页面CSS部分的制作 305
19.2.3日志列表页的制作 308
19.3小结 310
19.4习题 311
第20章 关于标准的校验 312
20.1为什么要进行标准的校验 312
20.2怎样进行标准的校验 312
20.2.1 XHTML校验的方法 312
20.2.2 CSS校验的方法 316
20.2.3 XHTML校验常见错误 317
20.2.4 CSS校验常见错误 317
20.3实例页面的校验 318
20.3.1实例首页的校验 318
20.3.2一个二级页面的校验 319
20.4小结 320
20.5习题 321
第21章 制作企业宣传类网页 322
21.1企业宣传类网页介绍 322
21.1.1企业宣传类网页的作用 322
21.1.2企业宣传类网页的构成及特点 322
21.2效果图的分析 323
21.2.1界面设计分析 323
21.2.2规划页面布局 324
21.3切图与划分页面内容 325
21.3.1隐藏页面中的文本内容 325
21.3.2切取页面中的背景 326
21.3.3切取页面中的内容 326
21.3.4保存各种图片 327
21.4页面头部及导航栏的布局 327
21.4.1制作头部的结构代码 327
21.4.2定义页面的相关信息 328
21.4.3导入样式表文件 329
21.4.4头部内容结构分析 329
21.4.5对头部文件整体添加样式 329
21.4.6制作页面logo和菜单部分 331
21.4.7制作页面的导航栏 332
21.4.8制作页面的Banner 335
21.5制作新闻列表部分 336
21.5.1制作新闻列表的结构代码 336
21.5.2新闻列表的修饰 337
21.5.3制作侧栏栏目 339
21.6页面底部的布局设计 340
21.6.1制作底部的结构代码 340
21.6.2制作底部信息的显示效果 341
21.7制作二级页面(公司新闻) 343
21.7.1二级页面效果图的分析 344
21.7.2切图并制作素材图片 344
21.7.3分析二级页面结构和样式 345
21.7.4制作侧栏栏目 345
21.7.5制作新闻列表 347
21.8小结 350
21.9习题 350