《HTML 5+CSS 3网页设计与製作案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，採取“HTML 5网页设计→CSS 3美化网页→高级提升技能→综合案例实战”的讲解模式，深入浅出地讲解HTML 5+CSS 3的各项技术及实战技能。

第I篇HTML5网页设计
第1章新一代Web前端技术 3
1.1HTML的基本概念 4
1.1.1HTML的发展历程 4
1.1.2什幺是HTML 4
1.1.3HTML5档案的基本结构 5
1.2HTML5的优势 5
1.2.1解决了跨浏览器的问题 5
1.2.2增加了多个新特性 5
1.2.3用户优先的原则 6
1.2.4化繁为简的优势 7
1.3HTML5网页的开发环境 7
1.3.1使用记事本手工编写HTML5 7
1.3.2使用DreamweaverCC编写
HTML档案 8
1.4使用浏览器查看HTML5档案 12
1.4.1查看页面效果 12
1.4.2查看源档案 13
1.5疑难解惑 14
第2章HTML5网页的文档结构 15
2.1HTML5档案的基本结构 16
2.1.1HTML5页面的整体结构 16
2.1.2HTML5新增的结构标记 16
2.2HTML5基本标记详解 17
2.2.1文档类型说明 17
2.2.2HTML标记 17
2.2.3头标记 18
2.2.4网页的主体标记 20
2.2.5页面注释标记 21
2.3HTML5语法的变化 22
2.3.1标籤不再区分大小写 22
2.3.2允许属性值不使用引号 22
2.3.3允许部分属性的属性值省略 23
2.4综合案例——符合W3C标準的
HTML5网页 23
2.5跟我学上机——简单的HTML5网页 25
2.6疑难解惑 26
第3章HTML5网页中的文本、超连结
和图像 27
3.1在网页中添加文本 28
3.1.1普通文本的添加 28
3.1.2特殊字元文本的添加 28
3.1.3使用HTML5标记添加特殊
文本 30
3.2文本排版 32
3.2.1换行标记 32
3.2.2段落标记 32
3.2.3标题标记 33
3.3文字列表 34
3.3.1建立无序列表 34
3.3.2建立有序列表 36
3.3.3建立不同类型的无序列表 36
3.3.4建立不同类型的有序列表 37
3.3.5建立嵌套列表 38
3.3.6自定义列表 39
3.4超连结标记 40
3.4.1设定文本和图片的超连结 40
3.4.2创建指向不同目标类型的
超连结 40
3.4.3设定以新视窗显示超连结页面 42
3.4.4连结到同一页面的不同位置 43
3.5创建热点区域 44
3.6网页中的图片 45
3.6.1在网页中插入图像 45
3.6.2设定图像的宽度和高度 47
3.6.3设定图像的提示文字 48
3.6.4将图片设定为网页背景 49
3.6.5排列图像 50
3.7综合案例——图文并茂的房屋装饰
装修网页 50
3.8跟我学上机——线上购物网站的产品
展示效果 52
3.9疑难解惑 53
第4章使用HTML5创建表格 55
4.1表格的基本结构 56
4.2创建表格 57
4.2.1创建普通表格 57
4.2.2创建一个带有标题的表格 58
4.3编辑表格 59
4.3.1定义表格的框线类型 59
4.3.2定义表格的表头 59
4.3.3设定表格背景 60
4.3.4设定单元格的背景 61
4.3.5合併单元格 62
4.3.6排列单元格中的内容 65
4.3.7设定单元格的行高与列宽 66
4.4完整的表格标记 67
4.5综合案例——製作计算机报价表 68
4.6跟我学上机——製作学生成绩表 70
4.7疑难解惑 74
第5章使用HTML5创建表单 75
5.1表单概述 76
5.2表单基本元素的使用 76
5.2.1单行文本输入框 77
5.2.2多行文本输入框 77
5.2.3密码输入框 78
5.2.4单选按钮 78
5.2.5複选框 79
5.2.6列表框 80
5.2.7普通按钮 81
5.2.8提交按钮 81
5.2.9重置按钮 82
5.3表单高级元素的使用 83
5.3.1url属性的使用 83
5.3.2email属性的使用 83
5.3.3date属性和time属性的使用 84
5.3.4number属性的使用 85
5.3.5range属性的使用 86
5.3.6required属性的使用 86
5.4综合案例——创建用户反馈表单 87
5.5跟我学上机——製作用户注册表单 88
5.6疑难解惑 90
第6章HTML5中的音频和视频 91
6.1audio标籤 92
6.1.1audio标籤概述 92
6.1.2audio标籤的属性 93
6.1.3浏览器对audio标籤的支持
情况 93
6.2在网页中添加音频档案 94
6.2.1添加自动播放的音频档案 94
6.2.2添加带有控制项的音频档案 94
6.2.3添加循环播放的音频档案 95
6.2.4添加预播放的音频档案 95
6.3video标籤 96
6.3.1video标籤概述 96
6.3.2video标籤的属性 97
6.3.3浏览器对video标籤的支持
情况 98
6.4在网页中添加视频档案 98
6.4.1添加自动播放的视频档案 98
6.4.2添加带有控制项的视频档案 99
6.4.3添加循环播放的视频档案 99
6.5综合案例——设定视频档案的高度
与宽度 100
6.6跟我学上机——添加预播放的视频
档案 101
6.7疑难解惑 101
第7章使用HTML5绘製图形 103
7.1添加canvas的步骤 104
7.2绘製基本形状 104
7.2.1绘製矩形 105
7.2.2绘製圆形 105
7.2.3使用moveTo与lineTo绘製
直线 107
7.2.4使用bezierCurveTo绘製
贝塞尔曲线 108
7.3绘製渐变图形 109
7.3.1绘製线性渐变 109
7.3.2绘製径向渐变 111
7.4绘製变形图形 112
7.4.1绘製平移效果的图形 112
7.4.2绘製缩放效果的图形 113
7.4.3绘製旋转效果的图形 114
7.4.4绘製组合效果的图形 115
7.4.5绘製带阴影的图形 117
7.5使用图像 118
7.5.1绘製图像 118
7.5.2平铺图像 119
7.5.3裁剪图像 121
7.5.4图像的像素化处理 122
7.6绘製文字 124
7.7图形的保存与恢复 126
7.7.1保存与恢复状态 126
7.7.2保存档案 127
7.8综合案例——绘製火柴棒人物 128
7.9跟我学上机——绘製商标 132
7.10疑难解惑 134
第II篇CSS3美化网页
第8章CSS3概述与基本语法 137
8.1CSS3概述 138
8.1.1CSS3的功能 138
8.1.2浏览器与CSS3 138
8.1.3CSS3的基础语法 139
8.1.4CSS3的常用单位 139
8.2编辑和浏览CSS3 144
8.2.1手工编写CSS3 144
8.2.2用Dreamweaver编写CSS 145
8.3在HTML5中使用CSS3的方法 147
8.3.1行内样式 147
8.3.2内嵌样式 148
8.3.3连结样式 149
8.3.4导入样式 150
8.3.5优先权问题 151
8.4CSS3的常用选择器 154
8.4.1标籤选择器 154
8.4.2类选择器 155
8.4.3ID选择器 155
8.4.4全局选择器 156
8.4.5组合选择器 157
8.4.6继承选择器 158
8.4.7伪类选择器 159
8.5选择器声明 160
8.5.1集体声明 160
8.5.2多重嵌套声明 161
8.6综合案例——製作炫彩网站Logo 161
8.7跟我学上机——製作学生信息
统计表 164
8.8疑难解惑 166
第9章使用CSS3美化网页字型
与段落 167
9.1美化网页文字 168
9.1.1设定文字的字型 168
9.1.2设定文字的字号 169
9.1.3设定字型风格 170
9.1.4设定加粗字型 171
9.1.5将小写字母转为大写字母 171
9.1.6设定字型的複合属性 172
9.1.7设定字型颜色 173
9.2设定文本的高级样式 174
9.2.1设定文本阴影效果 174
9.2.2设定文本的溢出效果 176
9.2.3设定文本的控制换行 177
9.2.4保持字型尺寸不变 177
9.3美化网页中的段落 178
9.3.1设定单词之间的间隔 179
9.3.2设定字元之间的间隔 179
9.3.3设定文字的修饰效果 180
9.3.4设定垂直对齐方式 181
9.3.5转换文本的大小写 183
9.3.6设定文本的水平对齐方式 183
9.3.7设定文本的缩进效果 185
9.3.8设定文本的行高 186
9.3.9文本的空白处理 187
9.3.10文本的反排 188
9.4综合案例——设定网页标题 189
9.5跟我学上机——製作新闻页面 191
9.6疑难解惑 192
第10章使用CSS3美化网页图片 193
10.1图片缩放 194
10.1.1通过描述标记width和height
缩放图片 194
10.1.2使用CSS3中的max-width
和max-height缩放图片 194
10.1.3使用CSS3中的width
和height缩放图片 195
10.2设定图片的对齐方式 196
10.2.1设定图片的横向对齐 196
10.2.2设定图片的纵向对齐 197
10.3图文混排 199
10.3.1设定文字环绕效果 199
10.3.2设定图片与文字的间距 201
10.4综合案例——製作学校宣传单 202
10.5跟我学上机——製作简单的图文
混排网页 204
10.6疑难解惑 206
第11章使用CSS3美化网页背景
与框线 207
11.1使用CSS3美化背景 208
11.1.1设定背景颜色 208
11.1.2设定背景图片 209
11.1.3背景图片重複 210
11.1.4背景图片显示 212
11.1.5背景图片的位置 213
11.1.6背景图片的大小 215
11.1.7背景的显示区域 216
11.1.8背景图像的裁剪区域 217
11.1.9背景複合属性 218
11.2使用CSS3美化框线 219
11.2.1设定框线的样式 220
11.2.2设定框线的颜色 221
11.2.3设定框线的线宽 222
11.2.4设定框线的複合属性 224
11.3设定框线的圆角效果 225
11.3.1设定圆角框线 225
11.3.2指定两个圆角半径 226
11.3.3绘製四个不同角的圆角框线 227
11.3.4绘製不同种类的框线 229
11.4综合案例——製作简单的公司主页 231
11.5跟我学上机——製作简单的生活资讯
主页 234
11.6疑难解惑 235
第12章使用CSS3美化超级连结
和滑鼠 237
12.1使用CSS3来美化超连结 238
12.1.1改变超级连结的基本样式 238
12.1.2设定带有提示信息的超级
连结 239
12.1.3设定超级连结的背景图 240
12.1.4设定超级连结的按钮效果 241
12.2使用CSS3美化滑鼠特效 242
12.2.1使用CSS3控制滑鼠箭头 242
12.2.2设定滑鼠变幻式超连结 244
12.2.3设定网页页面滚动条 244
12.3综合案例1——图片版本的超级
连结 246
12.4综合案例2——关于滑鼠特效 248
12.5跟我学上机——製作一个简单的
导航栏 250
12.6疑难解惑 252
第13章使用CSS3美化表格和表单
的样式 253
13.1美化表格的样式 254
13.1.1设定表格框线的样式 254
13.1.2设定表格框线的宽度 256
13.1.3设定表格框线的颜色 257
13.2美化表单样式 258
13.2.1美化表单中的元素 258
13.2.2美化提交按钮 261
13.2.3美化下拉选单 262
13.3综合案例——製作用户登录页面 263
13.4跟我学上机——製作用户注册页面 265
13.5疑难解惑 268
第14章使用CSS3美化网页选单 269
14.1使用CSS3美化项目列表 270
14.1.1美化无序列表 270
14.1.2美化有序列表 271
14.1.3美化自定义列表 273
14.1.4製作图片列表 274
14.1.5缩进图片列表 276
14.1.6列表的複合属性 277
14.2使用CSS3製作网页选单 278
14.2.1製作无须表格的选单 278
14.2.2製作水平和垂直选单 280
14.3综合案例——模拟SOSO导航栏 282
14.4跟我学上机——将段落转变成列表 285
14.5疑难解惑 287
第15章使用滤镜美化网页元素 289
15.1滤镜概述 290
15.2设定基本滤镜效果 291
15.2.1高斯模糊(blur)滤镜 291
15.2.2明暗度(brightness)滤镜 292
15.2.3对比度(contrast)滤镜 293
15.2.4阴影(drop-shadow)滤镜 294
15.2.5灰度(grayscale)滤镜 295
15.2.6反相(invert)滤镜 296
15.2.7透明度(opacity)滤镜 297
15.2.8饱和度(saturate)滤镜 298
15.2.9深褐色(sepia)滤镜 299
15.3综合案例1——使用複合滤镜效果 300
15.4综合案例2——使用滤镜製作动画
效果 301
15.5跟我学上机——製作色相旋转
(hue-rotate)滤镜 303
15.6疑难解惑 304
第III篇高级提升技能
第16章CSS3中的动画效果 307
16.1了解过渡效果 308
16.2添加过渡效果 308
16.3了解动画效果 310
16.4添加动画效果 311
16.5了解2D转换效果 312
16.6添加2D转换效果 313
16.6.1添加移动效果 313
16.6.2添加旋转效果 314
16.6.3添加缩放效果 315
16.6.4添加倾斜效果 316
16.7添加3D转换效果 318
16.8综合案例——添加综合过渡效果 320
16.9跟我学上机——添加综合变幻效果 321
16.10疑难解惑 322
第17章HTML5中的档案与拖放 323
17.1　选择档案 324
17.1.1　选择单个档案 324
17.1.2　选择多个档案 324
17.2　使用FileReader接口读取档案 325
17.2.1　检测浏览器是否支持
FileReader接口 325
17.2.2　FileReader接口的方法 326
17.2.3　使用readAsDataURL方法预览
图片 326
17.2.4　使用readAsText方法读取文本
档案 328
17.3　使用HTML5实现档案的拖放 329
17.3.1　认识档案拖放的过程 330
17.3.2　浏览器支持情况 330
17.3.3　在网页中拖放图片 331
17.4　综合案例——在网页中来回拖放
图片 332
17.5跟我学上机——在网页中拖放文字 333
17.6疑难解惑 335
第18章定位地理位置技术 337
18.1　GeolocationAPI获取地理位置 338
18.1.1　地理定位的原理 338
18.1.2　获取定位信息的方法 338
18.1.3　常用地理定位方法 338
18.1.4　判断浏览器是否支持HTML5
获取地理位置信息 339
18.1.5　指定纬度和经度坐标 340
18.1.6　获取当前位置的经度与纬度 341
18.1.7　处理错误和拒绝 343
18.2　目前浏览器对地理定位的支持情况 343
18.3　综合案例——在网页中调用Google
地图 344
18.4　跟我学上机——持续获取用户移动后
的位置 346
18.5　疑难解惑 348
第19章Web存储和通信技术 349
19.1　认识Web存储 350
19.1.1　本地存储和Cookies的区别 350
19.1.2　Web存储方法 350
19.2　使用HTML5WebStorageAPI 350
19.2.1　测试浏览器的支持情况 351
19.2.2　使用sessionStorage方法创建
对象 352
19.2.3　使用localStorage方法创建
对象 353
19.2.4　WebStorageAPI的其他操作 355
19.2.5　使用JSON对象存取数据 355
19.3　在本地建立资料库 358
19.3.1本地资料库概述 358
19.3.2　用executeSql来执行查询 358
19.3.3　使用transaction方法处理
事件 359
19.4　目前浏览器对Web存储的支持
情况 359
19.5跨文档讯息传输 359
19.5.1跨文档讯息传输的基本知识 359
19.5.2案例1——跨文档通信套用
测试 360
19.6WebSocketAPI 362
19.6.1什幺是WebSocketAPI 362
19.6.2WebSocket通信基础 362
19.6.3案例2——伺服器端使用
WebSocketAPI 364
19.6.4案例3——客户机端使用
WebSocketAPI 367
19.7综合案例——製作简单Web
留言本 367
19.8跟我学上机——编写简单的
WebSocket伺服器 370
19.9　疑难解惑 374
第20章处理执行绪和伺服器传送事件 375
20.1　WebWorker 376
20.1.1　WebWorker概述 376
20.1.2　执行绪中常用的变数、函式
与类 376
20.1.3　案例1——前台与后台执行绪
进行数据的互动 377
20.2　执行绪嵌套 379
20.2.1　案例2——单执行绪嵌套 379
20.2.2　案例3——多个子执行绪中的
数据互动 381
20.3　伺服器传送事件概述 383
20.4　伺服器传送事件的实现过程 383
20.4.1　检测浏览器是否支持
Server-SentEvent 383
20.4.2　使用EventSource对象 384
20.4.3　编写伺服器端代码 384
20.5　综合案例——创建WebWorker
计数器 385
20.6跟我学上机——伺服器传送事件实战
套用 386
20.7疑难解惑 388
第21章CSS3定位与DIV布局核心
技术 389
21.1了解块级元素和行内级元素 390
21.1.1块级元素和行内级元素的
套用 390
21.1.2div标记和span标记的区别 392
21.2盒子模型 392
21.2.1盒子模型的概念 393
21.2.2定义网页的border区域 393
21.2.3定义网页的padding区域 394
21.2.4定义网页的margin区域 395
21.3CSS3新增的弹性盒模型 399
21.3.1定义盒子的布局取向
(box-orient) 399
21.3.2定义盒子的布局顺序
(box-direction) 400
21.3.3定义盒子布局的位置
(box-ordinal-group) 402
21.3.4定义盒子的弹性空间
(box-flex) 403
21.3.5管理盒子空间(box-pack
和box-align) 405
21.3.6盒子空间的溢出管理
(box-lines) 407
21.4综合案例——图文排版效果 408
21.5跟我学上机——淘宝导购选单 411
21.6疑难解惑 414
第IV篇综合案例实战
第22章网页布局剖析与製作 417
22.1固定宽度网页剖析与布局 418
22.1.1网页单列布局模式 418
22.1.2网页1-2-1型布局模式 421
22.1.3网页1-3-1型布局模式 425
22.2自动缩放网页1-2-1型布局模式 428
22.2.1“1-2-1”等比例变宽布局 428
22.2.2“1-2-1”单列变宽布局 429
22.3自动缩放网页1-3-1型布局模式 430
22.3.1“1-3-1”三列宽度等比例
布局 430
22.3.2“1-3-1”单侧列宽度固定的
变宽布局 430
22.3.3“1-3-1”中间列宽度固定的
变宽布局 434
22.3.4“1-3-1”双侧列宽度固定的
变宽布局 437
22.4分列布局背景色的使用 440
22.4.1设定固定宽度布局的列
背景色 440
22.4.2设定特殊宽度变化布局的列
背景色 441
22.4.3设定单列宽度变化布局的列
背景色 443
22.5综合案例——设定多列等比例宽度
变化布局的列背景 445
22.6跟我学上机——“1-3-1”中列和
左侧列宽度固定的变宽布局 447
22.7疑难解惑 450
第23章设计企业门户类网页 451
23.1构思布局 452
23.1.1设计分析 452
23.1.2排版架构 452
23.2模组分割 453
23.2.1Logo与导航选单 453
23.2.2左侧的文本介绍 455
23.2.3右侧的导航连结 457
23.2.4版权资讯 458
23.3整体调整 459
23.4疑难解惑 460
第24章设计线上购物类网页 461
24.1整体布局 462
24.1.1设计分析 462
24.1.2排版架构 462
24.2模组分割 463
24.2.1Logo与导航区 463
24.2.2Banner与资讯区 465
24.2.3产品类别区域 466
24.2.4页脚区域 468
24.3设定连结 468
24.4疑难解惑 468