第一篇 基础知识篇 1
第1章 网页设计技术基础 1
1.1 认识网页和网站 1
1.1.1 网页 1
1.1.2 网站 2
1.1.3 网站制作流程 3
1.1.4 网页设计流程 3
1.1.5 发布站点 4
1.2 Web标准布局介绍 4
1.2.1 当前的Web开发标准 4
1.2.2 为什么使用Web标准 5
1.2.3 CSS布局标准 6
1.3 常用的网页制作工具 7
1.3.1 Dreamweaver简介 7
1.3.2 安装Dreamweaver 9
1.4 HTML5的新功能 13
1.5 初次体验HTML 5的魅力 13
第二篇 核心技术篇 15
第2章 HTML 5的整体架构 15
2.1 设置网页头部元素 15
2.1.1 设置文档类型 15
2.1.2 设置所有链接规定默认地址或默认目标 17
2.1.3 链接标签 17
2.1.4 设置有关页面的元信息 19
2.1.5 定义客户端脚本 20
2.1.6 定义HTML文档的样式信息 21
2.1.7 设置页面标题 22
2.2 设置页面正文 23
2.3 注释是一种说明 25
2.4 和页面结构相关的新元素 25
2.4.1 定义区段的标签 26
2.4.2 定义独立内容的标签 26
2.4.3 定义导航链接标签 27
2.4.4 定义其所处内容之外的内容 27
2.4.5 定义页脚内容的标签 28
第3章 体验基本元素 29
3.1 在页面中输出一段文字 29
3.2 对页面进行分栏设计 30
3.3 使用<details>标记元素实现交互 32
3.3.1 常用属性 33
3.3.2 实现下拉弹出效果 34
3.4 使用<summary>标记元素实现交互 36
3.5 使用<menu>标记元素 37
3.5.1 属性介绍 37
3.5.2 实现右键菜单功能 39
3.6 使用<command>标记元素 41
3.7 使用<progress>标记元素 44
3.8 使用<meter>标记元素 46
3.9 使用树节点标记元素 49
3.9.1 <section>元素 49
3.9.2 <nav>元素 49
3.9.3 <hgroup>元素 49
3.10 使用分组标记元素 51
3.10.1 <ul>元素 51
3.10.2 <ol>元素 52
3.11 使用文本层次语义标记 53
3.11.1 <time>元素 53
3.11.2 <mark>元素 54
3.11.3 <cite>元素 54
3.12 使用图片标记元素 55
3.13 使用框架标记元素 57
3.14 使用<object>标记元素 58
第4章 使用表单元素 60
4.1 表单元素的类型 60
4.1.1 email类型 60
4.1.2 url类型 62
4.1.3 number类型 64
4.1.4 range类型 65
4.1.5 Date Pickers(数据检出器) 68
4.1.6 search类型 70
4.2 表单元素中的属性 72
4.2.1 记住表单中的数据 72
4.2.2 验证表单中输入的数据是否合法 74
4.2.3 在文本框中显示提示信息 75
4.2.4 验证文本框中的内容是否为空 77
4.2.5 开启表单的自动完成功能 78
4.2.6 重写表单中的某些属性 79
4.2.7 自动设置表单中传递数字 81
4.2.8 在表单中选择多个上传文件 82
4.3 新的表单元素 83
4.3.1 在表单中自动提示输入文本 83
4.3.2 一个简单的乘法计算器 85
4.3.3 在网页中生成一个密钥 86
第5章 音频和视频应用详解 88
5.1 处理视频 88
5.1.1 使用<video>标记 88
5.1.2 <video>标记的属性 89
5.2 处理音频 93
5.2.1 <audio>标记 93
5.2.2 <audio>标记的属性 94
5.3 高级应用 97
5.3.1 为播放的视频准备一幅素材图片 97
5.3.2 显示加载视频的状态 100
5.3.3 出错时在播放屏幕中显示出错信息 101
5.3.4 检测浏览器是否支持这个媒体类型 103
5.3.5 显示视频的播放状态 105
5.3.6 显示播放视频的时间信息 107
第6章 绘图应用详解 110
6.1 使用<canvas>标记 110
6.2 HTML DOM Canvas对象 111
6.3 HTML 5绘图实践 113
6.3.1 在指定位置绘制指定角度的相交线 113
6.3.2 绘制一个圆 114
6.3.3 在画布中显示一幅指定的图片 115
6.3.4 绘制一个指定大小的正方形 116
6.3.5 绘制一个带边框的矩形 118
6.3.6 绘制一个渐变图形 119
6.3.7 绘制不同的圆形 121
6.3.8 绘制一个渐变圆形 125
6.3.9 移动、缩放和旋转网页中的正方形 127
6.3.10 使用组合的方式显示图形 129
6.3.11 使用不同的方式平铺指定的图像 131
6.3.12 切割指定的图像 133
6.3.13 绘制文字 135
6.3.14 制作一个简单的动画 137
第三篇 技术提高篇 140
第7章 数据存储应用详解 140
7.1 Web存储 140
7.1.1 什么是Web存储 140
7.1.2 Web存储的影响 140
7.2 HTML 5中的两种存储方法 141
7.2.1 使用localStorage方法 141
7.2.2 使用sessionStorage方法 142
7.3 数据存储对象 143
7.3.1 使用sessionStorage对象 143
7.3.2 使用localStorage对象 148
7.3.3 使用localStorage对象中的clear()方法 151
7.3.4 使用localStorage对象中的属性 153
7.4 WebDB存储方式 156
7.4.1 WebDB存储基础 156
7.4.2 执行事务操作 158
7.4.3 调用执行SQL语句 159
7.5 实现一个日记式事务提醒系统 162
7.6 使用sessionStorage来实现客户端的session功能 166
第8章 使用Web Sockets API 180
8.1 安装jWebSocket服务器 180
8.2 实现跨文档传输数据 181
8.3 使用WebSocket传送数据 185
8.3.1 使用Web Sockets API的方法 185
8.3.2 实战演练 186
8.4 处理JSON对象 188
8.5 jWebSocket框架 191
8.5.1 使用j WebSocketTest框架进行通信 192
8.5.2 使用j WebSocketTest开发一个聊天系统 196
第9章 使用Geolocation API 204
9.1 Geolocation API介绍 204
9.1.1 对浏览器的支持情况 204
9.1.2 使用API 205
9.2 获取当前地理位置 206
9.3 使用getCurrentPosition()方法 209
9.4 在网页中使用地图 211
9.4.1 在网页中调用地图 212
9.4.2 在地图中显示当前的位置 214
9.4.3 在网页中居中显示定位地图 216
9.4.4 利用百度地图实现定位处理 219
9.5 在弹出框中显示定位信息 221
第10章 使用Web Workers API 224
10.1 Web Workers API基础 224
10.1.1 使用HTML5 Web Workers API 224
10.1.2 需要使用.js文件 225
10.1.3 与Web Worker进行双向通信 225
10.2 Worker线程处理 227
10.2.1 使用Worker处理线程 228
10.2.2 使用线程传递JSON对象 231
10.2.3 使用线程嵌套交互数据 233
10.2.4 通过JSON发送消息 236
10.3 执行大计算量任务 238
10.4 在后台运行耗时较长的运算 245
第11章 在Android手机中使用HTML5 249
11.1 搭建开发环境 249
11.1.1 搭建Android开发环境 249
11.1.2 搭建网页运行环境 251
11.2 先看一段代码 254
11.2.1 实现主页 254
11.2.2 编写CSS文件 255
11.2.3 实现页面自动缩放 258
11.3 添加Android的CSS 258
11.3.1 编写基本的样式 258
11.3.2 添加视觉效果 260
11.4 添加JavaScript 261
11.4.1 jQuery框架介绍 261
11.4.2 具体实践 263
11.5 使用Ajax 265
11.5.1 编写HTML文件 266
11.5.2 编写JavaScript文件 269
11.5.3 最后的修饰 270
11.6 让网页动起来 271
11.6.1 一个开源框架———jQTouch 272
11.6.2 一个简单应用 272
第四篇 实战演练篇 280
第12章 游戏实战 280
12.1 开发一个躲避小游戏 280
12.2 开发一个迷宫游戏 285
12.3 开发一个网页版的贪吃蛇游戏 290
12.4 开发一个网页版的俄罗斯方块游戏 294
12.5 开发一个网页版的抽奖游戏 305
第13章 统计图实战 310
13.1 使用插件RGraph制作柱状图 310
13.2 改变选中柱状图的颜色 311
13.3 在网页中绘制分组柱状图 314
13.4 将柱状图的同一根柱子设置为不同的颜色 316
13.5 在网页中绘制一个折线图 317
13.6 在网页中实现一个显示提示的折线图 319
13.7 在网页中绘制多根折线 322
13.8 绘制范围折线图 324
13.9 在一个折线图中使用左右两根不同单位的垂直坐标轴 325
13.10 在一个统计图中同时绘制柱状图与折线图 327
13.11 在HTML 5网页中绘制动态折线图 329
13.12 在HTML 5网页中绘制一个饼图 332
13.13 点击饼块后呈现白色半透明效果 333
13.14 在HTML 5网页中绘制横向柱状图 335
13.15 在网页中绘制分组横向柱状图 337
第14章 特效实战 339
14.1 实现星级评论功能 339
14.2 实现无刷新验证 342
14.3 使用jQuery实现的表单特效 345
14.4 在网页中动态操作表格 348
14.5 在文本框中实现层效果 351
14.6 实现五彩连珠网页特效 354
14.7 让网页中的图片div竖向滑动 368
14.8 实现滑动门特效 371
14.9 实现上下可拖动效果 374
14.10 在网页中实现粒子特效效果 377
第15章 Web设计中的典型模块 384
15.1 一个项目引发的问题 384
15.2 JavaScript特效的应用 385
15.3 文字处理 387
15.3.1 实例概述 387
15.3.2 定义文本颜色 388
15.3.3 指定文本内容 388
15.3.4 文本增亮处理 388
15.3.5 文本减亮处理 389
15.3.6 定义变换频率 389
15.4 时间处理模块 390
15.5 图像处理模块 392
15.5.1 实例概述 392
15.5.2 设置图像属性 393
15.5.3 亮度增加处理 393
15.5.4 亮度减小处理 394
15.6 背景处理 396
15.7 鼠标处理 397
15.7.1 实例概述 397
15.7.2 指定跟随文本 397
15.7.3 文本效果处理 398
15.7.4 页面显示 399
15.8 菜单处理 399
15.8.1 实例概述 400
15.8.2 设置菜单元素内容 400
15.8.3 设置滚动区域属性 400
第16章 文件操作实战 402
16.1 选择一个上传文件 402
16.2 选择多个上传文件 405
16.3 获取文件的类型和大小 406
16.4 过滤出非图片格式的文件 409
16.5 过滤上传文件的类型 410
16.6 预览上传的图片 412
16.7 读取某个文本文件的内容 414
16.8 监听事件 416
16.9 使用拖拽的方式上传图片 419
16.10 拖拽上传图片到表单并显示预览 421
16.11 IE浏览器支持的上传图片预览程序 424
16.12 使用拖拽的方式在相簿中对照片进行排序 426
第五篇 综合实战篇 430
第17章 使用HTML 5+CSS 3开发商业站点实例 430
17.1 CSS 3基础 430
17.1.1 CSS概述 430
17.1.2 基本语法 431
17.1.3 选择符的使用 432
17.1.4 CSS属性的简介 435
17.1.5 几个常用值 436
17.1.6 网页中的CSS应用 440
17.1.7 CSS的编码规范 443
17.1.8 CSS调试 445
17.2 开发一个商业站点 447
17.2.1 网站规划 447
17.2.2 站点需求分析 447
17.2.3 预期效果分析 448
17.2.4 站点结构规划 450
17.2.5 设计系统首页文件 450
17.2.6 设计产品展示页面 453
17.2.7 设计关于我们页面 455
17.2.8 设计CSS 3样式文件 457