精通HTML5网页设计
2013-10
清华大学出版社
刘玉萍,刘增杰
本书循序渐进地介绍了HTML 5网页设计的基础知识和技能,提供了大量的HTML 5应用实例供读者实践,并清晰阐述代码如何工作方式及作用,使读者能在最短的时间内掌握HTML 5的应用技能。
全书共分20章,分别介绍HTML 5基本概念、HTML 5中的新增元素、认识网页和网站、HTML 5中的文档结构、HTML 5中的文本和图像、使用HTML 5建立超链接、使用HTML 5建立表格、使用HTML 5建立表单、使用HTML 5绘制图像、HTML 5中的音频和视频、如何在HTML 5获取地理位置、Web通信新技术、本地存储技术、线程处理技术、构造离线Web应用程序、使用CSS3修饰网页样式、JavaScript快速入门和HTML 5、CSS3和JavaScript的搭配应用等,最后通过开发两个综合案例——企业门户网站和HTML 5游戏,使读者进一步巩固所学的知识,提高综合实战能力。
本书适合HTML 5网页设计初学者、网站设计人员和网站开发人员使用。
第1章 HTML 5概述 1
1.1 HTML 5简介 1
1.1.1 HTML 1
1.1.2 HTML 5 2
1.1.3 HTML 5文件的基本结构 3
1.2 HTML 5文件的编写方法 3
1.2.1 手工编写HTML 5 4
1.2.2 使用HTML编辑器 5
1.3 使用浏览器查看HTML 5文件 9
1.3.1 与HTML 5兼容的浏览器 9
1.3.2 查看页面效果 9
1.3.3 查看源文件 10
1.4 问题解答 11
第2章 HTML 5中的新增元素 12
2.1 新增的主体结构元素 12
2.1.1 section元素 12
2.1.2 article元素 13
2.1.3 aside元素 16
2.1.4 nav元素 18
2.1.5 time元素 21
2.2 新增的非主体结构元素 22
2.2.1 header元素 22
2.2.2 hgroup元素 24
2.2.3 footer元素 25
2.2.4 figure元素 28
2.2.5 address元素 30
2.3 新增其他常用元素 32
2.3.1 mark元素 32
2.3.2 rp、rt与ruby元素 33
2.3.3 progress元素 34
2.3.4 command元素 35
2.3.5 embed元素 36
2.3.6 details与summary元素 37
2.3.7 datalist元素 38
2.4 新增全局属性 39
2.4.1 contenteditable属性 39
2.4.2 spellcheck属性 40
2.4.3 tabIndex属性 41
2.5 新增的其他属性 42
2.5.1 表单相关的属性 42
2.5.2 链接相关属性 51
2.5.3 其他属性 53
2.6 废除的属性 53
2.7 问题解答 55
第3章 认识网页与网站 56
3.1 网站的基本概念 56
3.1.1 什么是网页 56
3.1.2 什么是网站 56
3.2 网页基本构成元素 57
3.3 网页设计 58
3.3.1 网页设计概述 58
3.3.2 网页设计特点 59
3.3.3 网页设计相关术语 62
3.3.4 网页设计原则 63
3.3.5 网页设计的成功要素 65
3.3.6 网页设计风格及色彩搭配 66
3.4 网页设计师应具备的素质 67
3.4.1 艺术素质 68
3.4.2 技能素质 68
3.4.3 综合素质 68
3.5 网站制作流程 69
3.5.1 前期策划 69
3.5.2 页面细化及实施 69
3.5.3 网站上传 69
3.5.4 后期维护 70
3.6 综合实例——搜集网页素材 71
3.7 问题解答 72
第4章 HTML 5中的文档结构 74
4.1 Web标准 74
4.1.1 Web标准概述 74
4.1.2 Web标准规定的内容 75
4.2 HTML 5文档的基本结构 76
4.2.1 HTML 5结构 76
4.2.2 文档类型说明 77
4.2.3 HTML 5标记 77
4.2.4 头标记 77
4.2.5 网页的主体标记 80
4.2.6 页面注释标记 81
4.3 综合实例——符合W3C标准的HTML 5网页 82
4.4 问题解答 83
第5章 HTML 5中的文本和图像 84
5.1 添加文本 84
5.1.1 普通文本 84
5.1.2 特殊字符文本 84
5.1.3 文本特殊样式 86
5.2 排版文本 88
5.2.1 段落标记与换行标记 88
5.2.2 标题标记 91
5.3 建立文本列表 92
5.3.1 建立无序列表 92
5.3.2 建立有序列表 93
5.3.3 建立不同类型的无序列表 94
5.3.4 建立不同类型的有序列表 96
5.3.5 嵌套列表 96
5.3.6 自定义列表 97
5.4 添加图像 98
5.4.1 网页支持的图片格式 98
5.4.2 在网页中使用路径 99
5.4.3 在网页中插入图像 101
5.5 编辑图像 102
5.5.1 设置图像的宽度和高度 102
5.5.2 设置图像的提示文字 103
5.5.3 设置图片为网页背景 104
5.5.4 排列图像 105
5.6 综合实例——图文并茂的房屋装饰装修网页 106
5.7 问题解答 107
第6章 使用HTML 5建立超链接 109
6.1 URL 109
6.1.1 URL的格式 109
6.1.2 URL的类型 110
6.2 创建超链接 111
6.2.1 设置文本和图片的超链接 111
6.2.2 设置超链接指向的目标类型 112
6.2.3 用新窗口显示超链接页面 115
6.2.4 如何链接到同一页面的不同位置 116
6.3 创建热点区域 118
6.4 创建浮动框架 118
6.5 综合实例——用Dreamweaver精确定位热点区域 120
6.6 问题解答 122
第7章 使用HTML 5创建表格 124
7.1 表格的基本结构 124
7.2 表格的基本操作 126
7.2.1 创建表格 126
7.2.2 定义表格的边框类型 128
7.2.3 定义表格的表头 129
7.2.4 设置表格背景 131
7.2.5 设置单元格背景 132
7.2.6 合并单元格 133
7.2.7 排列单元格中的内容 138
7.2.8 设置单元格的行高与列宽 139
7.3 完整的表格标记 140
7.4 综合实例——制作计算机报价表 142
7.5 问题解答 145
第8章 使用HTML 5创建表单 146
8.1 表单概述 146
8.2 表单基本元素的使用 147
8.2.1 单行文本输入框 147
8.2.2 多行文本输入框 148
8.2.3 密码域 149
8.2.4 单选按钮 150
8.2.5 复选框 151
8.2.6 下拉选择框 152
8.2.7 普通按钮 153
8.2.8 提交按钮 154
8.2.9 重置按钮 155
8.3 表单高级元素的使用 156
8.3.1 url属性 157
8.3.2 email属性 157
8.3.3 date和time 158
8.3.4 number属性 160
8.3.5 range属性 161
8.3.6 required属性 162
8.4 综合实例——创建用户反馈表单 163
8.5 问题解答 164
第9章 使用HTML 5绘制图形 166
9.1 canvas概述 166
9.1.1 添加canvas元素 166
9.1.2 绘制矩形 167
9.2 绘制基本形状 168
9.2.1 绘制圆形 168
9.2.2 使用moveTo与lineTo绘制直线 169
9.2.3 使用bezierCurveTo绘制贝济埃曲线 171
9.3 绘制渐变图形 173
9.3.1 绘制线性渐变 173
9.3.2 绘制径向渐变 175
9.4 绘制变形图形 176
9.4.1 变换原点坐标 176
9.4.2 图形缩放 178
9.4.3 旋转图形 179
9.5 图形组合 180
9.6 绘制带阴影的图形 182
9.7 使用图像 184
9.7.1 绘制图像 184
9.7.2 图像平铺 185
9.7.3 图像裁剪 187
9.7.4 像素处理 189
9.8 绘制文字 191
9.9 图形的保存与恢复 193
9.9.1 保存与恢复状态 193
9.9.2 保存文件 194
9.9.3 绘制图形综合应用 195
9.10 综合实例——绘制火柴棒人物 197
9.11 问题解答 201
第10章 HTML 5中的音频和视频 202
10.1 audio标签 202
10.1.1 audio标签概述 202
10.1.2 audio标签的属性 203
10.1.3 音频解码器 204
10.1.4 浏览器对audio标签的支持情况 204
10.2 video标签 204
10.2.1 video标签概述 204
10.2.2 video标签的属性 205
10.2.3 视频解码器 206
10.2.4 浏览器对video标签的支持情况 206
10.3 问题解答 207
第11章 获取地理位置 208
11.1 用Geolocation API获取地理位置 208
11.1.1 地理定位的原理 208
11.1.2 获取定位信息的方法 208
11.1.3 常用地理定位方法 209
11.1.4 如何判断浏览器是否支持HTML 5获取地理位置信息 209
11.1.5 指定纬度和经度坐标 210
11.2 浏览器对地理定位的支持情况 214
11.3 综合实例——在网页中调用Google地图 214
11.4 问题解答 217
第12章 Web通信新技术 218
12.1 跨文档消息传输 218
12.1.1 跨文档消息传输的基本知识 218
12.1.2 跨文档通信应用测试 218
12.2 Web Sockets API 221
12.2.1 什么是WebSocket API 221
12.2.2 Web Sockets通信基础 221
12.2.3 在服务器端使用Web Sockets API 223
12.2.4 在客户端使用Web Sockets API 227
12.3 综合实例——编写简单的Web Socket服务器 227
12.4 问题解答 232
第13章 本地存储技术 233
13.1 认识Web 存储 233
13.3.1 本地存储和Cookie的区别 233
13.3.2 Web存储方法 233
13.2 HTML 5 Web Storage API 234
13.2.1 测试浏览器的支持情况 234
13.2.2 sessionStorage方法 235
13.2.3 localStorage 方法 237
13.2.4 Web Storage API的其他操作 238
13.3 在本地建立数据库 242
13.3.1 本地数据库概述 243
13.3.2 用executeSql来执行查询 243
13.3.3 使用transaction方法处理事件 243
13.4 浏览器对Web存储的支持情况 244
13.5 综合实例——制作简单Web留言本 244
13.6 问题解答 248
第14章 线程处理技术 249
14.1 Web Workers 249
14.1.1 Web Workers 概述 249
14.1.2 线程中常用的变量、函数与类 250
14.1.3 与线程进行数据的交互 250
14.2 线程嵌套 253
14.2.1 单线程嵌套 253
14.2.2 多个子线程中的数据交互 256
14.3 综合实例——创建Web Worker计数器 258
14.4 问题解答 259
第15章 构建离线Web应用程序 260
15.1 HTML 5离线应用程序 260
15.1.1 本地缓存 260
15.1.2 本地缓存与浏览器网页缓存的区别 260
15.1.3 支持离线行为 260
15.2 了解Manifest(清单)文件 261
15.3 了解applicationcache API 262
15.4 浏览器对Web离线应用的支持情况 264
15.5 综合实例——离线定位跟踪 264
15.6 问题解答 270
第16章 HTML 5的拖放功能 271
16.1 一个简单的拖放实例 271
16.2 分析拖放的实现过程 273
16.3 浏览器对拖放功能的支持情况 274
16.4 综合实例1——在网页中拖放文字 274
16.5 综合实例2——在网页中来回拖放图片 277
16.6 问题解答 278
第17章 HTML 5服务器发送事件 279
17.1 服务器发送事件概述 279
17.2 服务器发送事件的实现过程 279
17.2.1 检测浏览器是否支持Server-Sent Event 279
17.2.2 EventSource 对象 280
17.2.3 服务器端代码 280
17.3 综合实例——向服务器端发送事件 281
17.4 问题解答 283
第18章 HTML 5、CSS3和 JavaScript搭配应用 284
18.1 综合实例1——打字效果的文字 284
18.2 综合实例2——文字升降特效 286
18.3 综合实例3——跑马灯效果 288
18.4 综合实例4——闪烁图片 291
18.5 综合实例5——左右移动的图片 293
18.6 综合实例6——向上滚动菜单 295
18.7 综合实例7——跟随鼠标移动的图片 297
18.8 综合实例8——树形菜单 299
18.9 综合实例9——时钟特效 305
18.10 综合实例10——颜色选择器 308
18.11 问题解答 310
第19章 综合实战——企业门户网站 312
19.1 构思布局 312
19.1.1 设计分析 312
19.1.2 排版架构 313
19.2 模块分割 314
19.2.1 Logo与导航菜单 314
19.2.2 左侧文本介绍 316
19.2.3 右侧导航链接 318
19.2.4 版权信息 320
19.3 整体调整 321
19.4 问题解答 322
第20章 综合实战——HTML 5游戏 323
20.1 游戏概述 323
20.2 游戏需求分析 324
20.3 HTML 5、CSS和JavaScript搭配实现 325
20.3.1 基本的HTML 5结构和标记 325
20.3.2 使用CSS修改页面 326
20.3.3 JavaScript编程 328