目 录
第1章 Internet和Web基础 1
1.1 Internet和Web 2
Internet 2
Internet的诞生 2
Internet的发展 2
Web的诞生 3
第一个图形化浏览器 3
各种技术的聚合 3
1.2 Web标准和无障碍访问 4
W3C推荐标准 4
Web标准和无障碍访问 4
无障碍访问和法律 4
Web通用设计 5
1.3 网上的信息 6
信息和可靠性 6
有道德地使用网上信息的道德使用 7
1.4 浏览器和服务器 7
网络概述 7
客户端/服务器模型 8
1.5 Internet协议 9
电子邮件协议 9
超文本传输协议 9
文件传输协议 10
IP地址 10
1.6 统一资源标识符(URI)和域名 11
URI和URL 11
域名 12
1.7 HTML概述 13
什么是HTML 13
什么是XML 13
什么是XHTML 14
HTML5——HTML的最新版本 14
1.8 网页幕后揭秘 14
文档类型定义(DTD) 15
网页模板 15
html元素 15
页头部分 15
主体部分 16
1.9 第一个网页 16
动手实作1.1 16
创建文件夹 17
保存文件 18
测试网页 18
复习和练习 19
复习题 19
动手练习 20
Web研究 20
聚焦Web设计 20
第2章 HTML基础 23
2.1 标题元素 24
动手实作2.1 24
HTML5更多的标题选项 25
2.2 段落元素 25
动手实作2.2 26
对齐 26
2.3 换行和水平标尺 27
换行元素 27
动手实作2.3 27
水平标尺元素 28
动手实作2.4 28
2.4 块引用元素 29
动手实作2.5 29
2.5 短语元素 30
2.6 有序列表 31
type，start和reversed属性 32
动手实作2.6 32
2.7 无序列表 33
动手实作2.7 33
2.8 描述列表 34
动手实作2.8 35
2.9 特殊字符 36
动手实作2.9 36
2.10 HTML语法校验 37
动手实作2.10 38
2.11 结构性元素 39
div元素 39
HTML5结构性元素 40
header元素 40
nav元素 40
footer元素 40
动手实作2.11 40
2.12 锚元素 42
动手实作2.12 42
链接目标 43
绝对链接 43
相对链接 43
block anchor 43
2.13 练习使用链接 44
站点地图 44
动手实作2.13 44
2.14 电子邮件链接 47
动手实作2.14 48
复习和练习 48
复习题 48
动手练习 49
聚焦Web设计 50
案例学习：Pacific Trails Resort 50
案例学习：JavaJam Coffee House 53
第3章 网页设计基础 57
3.1 为目标受众设计 58
浏览器友好性 59
屏幕分辨率 59
3.2 网站组织 59
分级式组织 60
线性组织 60
随机组织 61
3.3 视觉设计原则 61
重复：在整个设计中重复视觉元素 62
对比：添加视觉刺激和吸引注意力 62
近似：分组相关项目 63
对齐：对齐元素实现视觉上的统一 63
3.4 提供无障碍访问 63
无障碍设计的受益者 63
无障碍设计有助于提高在搜索
引擎中的排名 64
法律规定 64
无障碍设计的热潮 64
3.5 文本的使用 65
文本设计的注意事项 65
3.6 Web调色板 66
十六进制颜色值 67
Web安全颜色 67
无障碍设计和颜色 67
3.7 颜色的运用 68
面向儿童 68
面向年轻人 69
面向所有人 69
面向老年人 70
3.8 使用图形和多媒体 71
文件大小和图片尺寸 71
抗锯齿/锯齿化文本的问题 71
只使用必要的多媒体 71
提供替代文本 72
3.9 更多设计上的考虑 73
感觉到的加载时间 73
第一屏 74
适当留白 74
水平滚动 74
3.10 导航设计 74
网站要易于导航 74
导航栏 74
面包屑导航 75
图片导航 76
动态导航 76
站点地图 76
站点搜索功能 76
3.11 线框和页面布局 77
3.12 固定和流动布局 79
固定布局 79
流动布局 80
3.13 为移动网络设计 81
三种方式 81
移动设备设计考虑 81
桌面和移动网站的例子 82
移动设计小结 83
3.14 响应式网页设计 83
3.15 Web设计最佳实践 85
复习和练习 87
复习题 87
动手练习 88
聚焦Web设计 89
案例学习：Web项目 89
项目里程碑 89
第4章 CSS基础知识(一) 93
4.1 CSS概述 94
层叠样式表的优点 94
配置CSS的方法 95
层叠样式表的“层叠” 95
4.2 CSS选择符和声明 96
CSS语法基础 96
background-color属性 96
color属性 96
配置背景色和文本色 96
4.3 CSS颜色值语法 97
4.4 配置内联CSS 99
style属性 99
动手实作4.1 99
4.5 配置嵌入CSS 100
style元素 100
动手实作4.2 101
4.6 配置外部CSS 103
link元素 103
动手实作4.3 103
4.7 CSS的class、ID和上下文选择符 104
class选择符 104
id选择符 105
后代选择符 105
动手实作4.4 105
4.8 span元素 106
span元素 106
动手实作4.5 106
4.9 练习使用CSS 108
动手实作4.6 108
将嵌入CSS转换为外部CSS 109
将网页与外部CSS文件关联 109
4.10 CSS语法校验 111
动手实作4.7 111
复习和练习 113
复习题 113
动手练习 114
聚焦网页设计 114
案例学习：Pacific Trails Resort 115
案例学习：JavaJam Coffee House 118
第5章 图片样式基础 121
5.1 图片 122
GIF图 122
JPEG图片 123
PNG图片 124
新的WebP图像格式 124
5.2 img元素 125
动手实作5.1 125
5.3 图片链接 126
动手实作5.2 127
无障碍访问和图片链接 128
5.4 配置背景图片 128
background-image属性 128
同时使用背景颜色和背景图片 128
浏览器如何显示背景图片 129
background-attachment属性 129
5.5 定位背景图片 130
background-repeat属性 130
定位背景图片 130
动手实作5.3 131
5.6 用CSS3配置多张背景图片 132
渐进式增强 133
动手实作5.4 133
5.7 收藏图标 134
配置收藏图标 135
动手实作5.5 135
5.8 用CSS配置列表符号 136
用图片代替列表符号 136
动手实作5.6 137
5.9 图像映射 137
map元素 137
area元素 137
探究矩形图像映射 138
复习和练习 139
复习题 139
动手练习 140
聚焦Web设计 141
案例学习：Pacific Trails Resort 141
案例学习：JavaJam Coffee House 143
第6章 CSS基础知识(二) 147
6.1 字体 148
动手实作6.1 148
6.2 文本属性 150
font-size属性 150
font-weight属性 151
font-style属性 151
text-transform属性 151
line-height属性 151
动手实作6.2 151
6.3 对齐和缩进 152
text-align属性 153
text-indent属性 153
动手实作6.3 153
6.4 CSS的宽度和高度 154
width属性 154
min-width属性 155
max-width属性 155
height属性 155
动手实作6.4 156
6.5 CSS的框模型 156
框模型实例 157
6.6 CSS的边距和填充 158
margin属性 158
padding属性 158
6.7 CSS的边框 159
动手实作6.5 160
6.8 CSS3的圆角 161
动手实作6.6 162
6.9 CSS的页面内空居中设置居中
页面内容 163
动手实作6.7 164
6.10 CSS3的边框阴影和文本阴影 165
CSS3的box-shadow属性 165
CSS3的text-shadow属性 166
动手实作6.8 166
6.11 CSS3的background-clip和
background-origin属性 167
CSS3的background-clip属性 167
CSS3 background-origin属性 168
6.12 CSS3背景大小和缩放 168
6.13 CSS3的opacity属性 170
动手实作6.9 170
6.14 CSS3 RGBA颜色 172
动手实作6.10 173
6.15 CSS3 HSLA颜色 173
色调、饱和度、亮度和alpha 173
HSLA颜色示例 174
动手实作6.11 175
6.16 CSS3的渐变 175
CSS3线性渐变语法 176
CSS3渐变和渐进式增强 176
配置CSS3渐变 176
复习和练习 177
复习题 177
动手练习 178
聚焦Web设计 179
案例学习：Pacific Trails Resort 179
案例学习：JavaJam Coffee House 181
第7章 页面布局基础 185
7.1 正常流动 186
动手实作7.1 186
7.2 浮动 188
float属性 188
动手实作7.2 189
浮动元素和正常流动 189
7.3 清除浮动 190
clear属性 190
7.4 溢出 191
overflow属性 191
7.5 CSS的双栏页面布局 194
左侧导航的双栏布局 194
顶部logo左侧导航的双栏布局 195
还不算完美 195
7.6 用无序列表实现垂直导航 196
用CSS配置无序列表 196
用CSS text-decoration属性消除
下划线 196
动手实作7.3 197
7.7 用无序列表实现垂直导航 198
CSS display属性 198
动手实作7.4 199
7.8 用伪类实现CSS交互性 200
动手实作7.5 201
7.9 CSS双栏布局练习 202
动手实作7.6 202
7.10 用CSS进行定位 205
static定位 205
fixed定位 205
相对定位 206
绝对定位 207
7.11 定位练习 208
动手实作7.7 208
7.12 CSS精灵 210
动手实作7.8 211
复习和练习 212
复习题 212
动手练习 212
聚焦网页设计 213
案例学习：Pacific Trails Resort 213
案例学习：JavaJam Coffee House 214
第8章 链接、布局和移动开发进阶 217
8.1 深入了解相对链接 218
相对链接的例子 218
动手实作8.1 219
8.2 区段标识符 220
动手实作8.2 221
8.3 figure元素和figcaption元素 222
figure元素 222
figcaption元素 222
添加图题 222
动手实作8.3 223
8.4 图片浮动练习 224
动手实作8.4 224
8.5 更多HTML5元素 226
8.5 更多HTML5元素 227
hgroup元素 227
section元素 227
article元素 227
aside元素 227
time元素 227
动手实作8.5 227
8.6 HTML5与旧浏览器的兼容性 229
配置CSS块显示 229
HTML5 Shim 230
动手实作8.6 230
8.7 CSS对打印的支持 231
打印样式最佳实践 231
动手实作8.7 232
8.8 移动网页设计 233
移动网页设计要考虑的问题 234
为移动使用优化布局 234
优化移动导航 234
优化移动图片 235
优化移动文本 235
为One Web而设计 235
8.9 viewport meta标记 235
8.10 CSS3媒体查询 238
什么是媒体查询 238
使用link元素的媒体查询例子 238
使用@media规则的媒体查询示例 239
8.11 媒体查询练习 240
动手实作8.8 240
8.12 灵活的图像 242
动手实作8.9 243
8.13 测试移动显示 244
用桌面浏览器测试 245
针对专业开发人员 246
复习和练习 247
复习题 247
动手练习 248
聚焦网页设计 248
案例学习：Pacific Trails Resort 249
案例学习：JavaJam Coffee House 252
第9章 表格基础 257
9.1 表格概述 258
table元素 258
border属性 259
表格标题 259
9.2 表行、单元格和表头 260
动手实作9.1 261
9.3 跨行和跨列 261
动手实作9.2 262
9.4 配置无障碍访问表格 263
9.5 用CSS配置表格样式 265
动手实作?9.3 265
9.6 CSS3结构性伪类 267
动手实作9.4 267
配置首字母 268
9.7 配置表格区域 268
复习和练习 270
复习题 270
动手练习 271
聚焦Web设计 271
案例学习：Pacific Trails Resort 272
案例学习：JavaJam Coffee House 273
第10章 表单基础 275
10.1 概述 276
form元素 277
表单控件 277
10.2 文本框 278
10.3 提交按钮和重置按钮 279
提交按钮 279
重置按钮 279
示例表单 279
动手实作10.1 280
10.4 复选框和单选钮 281
复选框 281
单选钮 282
10.5 隐藏字段和密码框 283
隐藏字段 283
密码框 283
10.6 textarea元素 284
动手实作10.2 285
10.7 select和option元素 286
select元素 287
option元素 287
10.8 label元素 288
动手实作10.3 288
10.9 fieldset元素和legend元素 289
fieldset元素 289
legend元素 289
前瞻：用CSS配置fieldset分组
样式 290
10.10 用CSS配置表单样式 291
10.11 服务器端处理 292
隐私和表单 293
10.12 表单练习 294
动手实作10.4 294
10.13 HTML5文本表单控件 295
E-mail地址输入表单控件 295
URL表单输入控件 296
电话号码表单输入控件 296
搜索词输入表单控件 296
HTML5文本框表单控件的
有效属性 296
10.14 HTML5的datalist元素 297
10.15 HTML5的slider控件和
spinner控件 298
slider表单输入控件 298
spinner表单输入控件 299
HTML5和渐进式增强 300
10.16 HTML5日历和颜色池控件 300
日历输入表单控件 300
颜色池表单控件 301
10.17 HTML5表单练习 302
动手实作10.5 302
复习和练习 304
复习题 304
动手练习 305
聚焦Web设计 305
案例学习：Pacific Trails Resort 305
案例学习：JavaJam Coffee House 309
第11章 媒体和交互性基础 313
11.1 插件、容器和codec 314
辅助应用程序和插件 314
11.2 配置音频和视频 315
访问音频或视频文件 315
动手实作11.1 316
多媒体和浏览器兼容问题 316
11.3 Flash和HTML5 embed元素 317
embed元素 317
动手实作11.2 318
11.4 HTML5的audio元素和source元素 318
audio元素 318
source元素 319
动手实作11.3 320
11.5 HTML5的video元素和
source元素 320
video元素 321
source元素 321
11.6 HTML5视频练习 322
动手实作11.4 322
11.7 嵌入YouTube视频 323
iframe元素 323
动手实作11.5 324
11.8 CSS3的transform属性 325
CSS3旋转变换 325
动手实作11.6 326
11.9 CSS3的transition属性 327
动手实作11.7 328
11.10 CSS过渡练习 329
动手实作11.8 329
11.11 HTML5的canvas元素 331
复习和练习 333
复习题 333
动手练习 333
聚焦Web设计 334
案例学习：Pacific Trails Resort 334
案例学习：JavaJam Coffee House 336
第12章 上网发布 339
12.1 注册域名 340
选择域名 340
注册域名 341
12.2 选择主机 341
主机的类型 342
选择虚拟主机 342
12.3 用FTP发布 344
FTP应用程序 344
用FTP连接 344
使用FTP 344
12.4 提交到搜索引擎 345
搜索引擎的组成 346
在搜索引擎中列出你的网站 347
12.5 搜索引擎优化 347
链接 349
图片和多媒体 349
有效代码 349
有价值的内容 349
12.6 无障碍访问测试 349
通用设计和无障碍访问 349
网络无障碍访问标准 349
测试无障碍设计相容性 350
12.7 使用性测试 351
进行使用性测试 351
动手实作12.1 352
复习和练习 353
复习题 353
动手练习 354
聚焦Web设计 354
案例学习：Pacific Trails Resort 354
案例学习：JavaJam Coffee House 355
附录A 复习和练习答案 357
附录B HTML5速查表 358
附录C CSS速查表 362
附录D XHTML速查表 366
附录E 对比XHTML和HTML5 369
附录F WCAG 2.0快速参考 375
鄂公网安备 42010302001612号 