HTML5网页设计案例课堂 刘春茂 编著 专业科技 文轩网

第Ⅰ篇基础入门
第1章新一代Web前端
技术HTML53
1.1HTML的基本概念4
1.1.1HTML的发展历程4
1.1.2什么是HTML4
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案例1——使用记事本手工
编写HTML57
1.3.2案例2——使用DreamweaverCC
编写HTML文件8
1.4使用浏览器查看HTML5文件11
1.4.1案例3——查看页面效果11
1.4.2案例4——查看源文件12
1.5高手解惑12
第2章HTML5网页的文档结构13
2.1HTML5文件的基本结构14
2.1.1HTML5页面的整体结构14
2.1.2HTML5新增的结构标记14
2.2HTML5基本标记详解15
2.2.1文档类型说明15
2.2.2HTML标记15
2.2.3头标记head16
2.2.4网页的主体标记body18
2.2.5页面注释标记＜！----＞19
2.3HTML5语法的变化20
2.3.1标签不再区分大小写20
2.3.2允许属性值不使用引号20
2.3.3允许部分属性值的属性省略20
2.4必知必会——HTML5代码规范21
2.5综合案例——符合W3C标准的
HTML5网页22
2.6跟我学上机——简单的HTML5网页22
2.7高手解惑23
第3章HTML5与HTML4的区别25
3.1新增的主体结构元素26
3.1.1案例1——section元素的使用26
3.1.2案例2——article元素的使用26
3.1.3案例3——aside元素的使用29
3.1.4案例4——nav元素的使用31
3.1.5案例5——time元素的使用32
3.2新增的非主体结构元素34
3.2.1案例6——header元素的使用34
3.2.2案例7——hgroup元素的使用34
3.2.3案例8——footer元素的使用36
3.2.4案例9——figure元素的使用37
3.2.5案例10——address元素的使用39
3.3新增其他常用元素40
3.3.1案例11——mark元素的使用40
3.3.2案例12——rp元素、rt元素与
ruby元素的使用41
3.3.3案例13——progress元素的
使用42
3.3.4案例14——command元素的
使用42
3.3.5案例15——embed元素的
使用43
3.3.6案例16——details元素与
summary元素的使用43
3.3.7案例17——datalist元素的
使用44
3.4新增全局属性45
3.4.1案例18——contentEditable
属性的使用45
3.4.2案例19——spellcheck属性的
使用46
3.4.3案例20——tabIndex属性的
使用46
3.5新增的其他属性47
3.5.1案例21——表单相关属性的
使用47
3.5.2案例22——链接相关属性的
使用54
3.5.3案例23——其他新增属性的
使用55
3.6HTML5废除的属性56
3.7高手解惑57
第Ⅱ篇核心技术
第4章设计网页文本内容61
4.1标题文字的建立62
4.1.1案例1——标题文字标记62
4.1.2案例2——标题文字的
对齐方式63
4.2设置文字格式63
4.2.1案例3——设置文字字体63
4.2.2案例4——设置字号64
4.2.3案例5——设置文字颜色66
4.2.4案例6——设置粗体、斜体、
下画线67
4.2.5案例7——设置上标与下标68
4.2.6案例8——设置字体风格68
4.2.7案例9——设置加粗字体69
4.2.8案例10——设置字体
复合属性70
4.2.9案例11——设置阴影文本71
4.2.10案例12——控制换行72
4.3设置段落格式73
4.3.1案例13——设置段落标记73
4.3.2案例14——设置换行标记74
4.4设置网页水平线75
4.4.1案例15——添加水平线75
4.4.2案例16——设置水平线的
宽度与高度75
4.4.3案例17——设置水平线的颜色76
4.4.4案例18——设置水平线的
对齐方式76
4.4.5案例19——去掉水平线阴影77
4.5综合案例——成才教育网文本设计77
4.6高手解惑78
第5章设计网页列表与段落79
5.1网页文字列表的设计80
5.1.1案例1——建立无序列表＜ul＞80
5.1.2案例2——建立有序列表＜ol＞81
5.1.3案例3——建立不同类型的
无序列表82
5.1.4案例4——建立不同类型的
有序列表82
5.1.5案例5——嵌套列表83
5.1.6案例6——自定义列表＜dl＞83
5.2网页段落格式的设计84
5.2.1案例7——设计单词间隔
word-spacing84
5.2.2案例8——设计字符间隔
letter-spacing85
5.2.3案例9——设计文字修饰
text-decoration86
5.2.4案例10——设计垂直
对齐方式vertical-align87
5.2.5案例11——设计文本转换
text-transform88
5.2.6案例12——设计水平对齐
方式text-align89
5.2.7案例13——设计文本缩进
text-indent91
5.2.8案例14——设计文本行高
line-height92
5.2.9案例15——处理空白
white-space93
5.2.10案例16——文本反排
unicode-bidi94
5.3综合案例——制作图文混排型
旅游网页96
5.4高手解惑97
第6章HTML5网页中的图像99
6.1网页中的图像＜img＞100
6.1.1网页中支持的图片格式100
6.1.2图像中的路径100
6.2在网页中插入图像102
6.2.1案例1——插入图像102
6.2.2案例2——从不同位置插入
图像103
6.3编辑网页中的图像103
6.3.1案例3——设置图像的
宽度和高度104
6.3.2案例4——设置图像的
提示文字104
6.3.3案例5——将图片设置为
网页背景105
6.3.4案例6——排列图像106
6.4综合案例——图文并茂的房屋装饰
装修网页107
6.5高手解惑108
第7章使用HTML5建立超链接109
7.1网页超链接的概念110
7.1.1什么是网页超链接110
7.1.2超链接中的URL110
7.1.3超链接的URL类型111
7.2建立网页超级链接111
7.2.1案例1——创建超文本链接111
7.2.2案例2——创建图片链接113
7.2.3案例3——创建下载链接114
7.2.4案例4——使用相对路径和
绝对路径115
7.2.5案例5——设置以新窗口显示
超链接页面115
7.2.6案例6——设置电子邮件链接116
7.3案例7——浮动框架iframe的使用117
7.4综合案例——使用锚链接制作电子书
阅读网页119
7.5高手解惑122
第8章使用HTML5创建表单123
8.1案例1——认识表单124
8.2表单基本元素的使用124
8.2.1案例2——单行文本输入框
text125
8.2.2案例3——多行文本输入框
textarea125
8.2.3案例4——密码域password126
8.2.4案例5——单选按钮radio127
8.2.5案例6——复选框checkbox128
8.2.6案例7——列表框select128
8.2.7案例8——普通按钮button129
8.2.8案例9——提交按钮submit130
8.2.9案例10——重置按钮reset131
8.3表单高级元素的使用132
8.3.1案例11——url属性的使用132
8.3.2案例12——email属性的使用132
8.3.3案例13——date和time属性的
使用133
8.3.4案例14——number属性的
使用134
8.3.5案例15——range属性的使用135
8.3.6案例16——required属性的
使用136
8.4综合案例——创建用户反馈表单137
8.5跟我学上机——制作用户注册表单138
8.6高手解惑139
第9章使用HTML5创建表格141
9.1案例1——表格的基本结构142
9.2创建表格143
9.2.1案例2——创建普通表格143
9.2.2案例3——创建一个带有标题的
表格144
9.3编辑表格145
9.3.1案例4——定义表格的
边框类型145
9.3.2案例5——定义表格的表头146
9.3.3案例6——设置表格背景147
9.3.4案例7——设置单元格的背景148
9.3.5案例8——合并单元格148
9.3.6案例9——排列单元格中的
内容152
9.3.7案例10——设置单元格的
行高与列宽153
9.4案例11——完整的表格标记153
9.5综合案例——制作计算机报价表154
9.6跟我学上机——制作学生成绩表157
9.7高手解惑160
第10章HTML5中的音频和视频161
10.1audio标签概述162
10.1.1案例1——认识audio标签162
10.1.2audio标签的属性163
10.1.3浏览器对audio标签的
支持情况163
10.2在网页中添加音频文件163
10.2.1案例2——添加自动播放的
音频文件163
10.2.2案例3——添加带有控件的
音频文件164
10.2.3案例4——添加循环播放的
音频文件165
10.2.4案例5——添加预播放的
音频文件165
10.3video标签概述166
10.3.1案例6——认识video标签166
10.3.2video标签的属性167
10.3.3浏览器对video标签的
支持情况167
10.4在网页中添加视频文件168
10.4.1案例7——添加自动播放的
视频文件168
10.4.2案例8——添加带有控件的
视频文件169
10.4.3案例9——添加循环播放的
视频文件169
10.5综合案例——设置视频文件的
高度与宽度170
10.6跟我学上机——添加预播放的
视频文件171
10.7高手解惑172
第11章使用HTML5绘制图形173
11.1添加canvas的步骤174
11.2绘制基本形状174
11.2.1案例1——绘制矩形175
11.2.2案例2——绘制圆形176
11.2.3案例3——使用moveTo与
lineTo绘制直线177
11.2.4案例4——使用bezierCurveTo
绘制贝济埃曲线178
11.3绘制渐变图形179
11.3.1案例5——绘制线性渐变179
11.3.2案例6——绘制径向渐变181
11.4绘制变形图形182
11.4.1案例7——绘制平移效果的
图形182
11.4.2案例8——绘制缩放效果的
图形183
11.4.3案例9——绘制旋转效果的
图形185
11.4.4案例10——绘制组合效果的
图形186
11.4.5案例11——绘制带阴影的
图形188
11.5使用图像189
11.5.1案例12——绘制图像189
11.5.2案例13——平铺图像190
11.5.3案例14——裁剪图像192
11.5.4案例15——图像的
像素化处理193
11.6案例16——绘制文字195
11.7图形的保存与恢复196
11.7.1案例17——保存与
恢复状态196
11.7.2案例18——保存文件197
11.8综合案例——绘制火柴棒人物199
11.9跟我学上机——绘制商标201
11.10高手解惑203
第Ⅲ篇高级技能
第12章HTML5中的文件与拖放207
12.1选择文件208
12.1.1案例1——选择单个文件208
12.1.2案例2——选择多个文件208
12.2使用FileReader接口读取文件209
12.2.1检测浏览器是否支持
FileReader接口209
12.2.2FileReader接口的方法210
12.2.3案例3——使用readAsDataURL
方法预览图片210
12.2.4案例4——使用readAsText方法
读取文本文件212
12.3使用HTML5实现文件的拖放213
12.3.1认识文件拖放的过程214
12.3.2浏览器支持情况214
12.3.3案例5——在网页中拖放
图片215
12.4综合案例——在网页中来回拖放
图片216
12.5跟我学上机——在网页中拖放文字217
12.6高手解惑219
第13章定位地理位置技术221
13.1GeolocationAPI获取地理位置222
13.1.1地理地位的原理222
13.1.2获取定位信息的方法222
13.1.3常用地理定位方法222
13.1.4判断浏览器是否支持HTML5
获取地理位置信息223
13.1.5指定纬度和经度坐标224
13.1.6获取当前位置的经度与
纬度225
13.1.7处理错误和拒绝227
13.2目前浏览器对地理定位的
支持情况227
13.3综合案例——在网页中调用Google
地图228
13.4跟我学上机——持续获取用户
移动后的位置230
13.5高手解惑231
第14章Web存储和通信技术233
14.1认识Web存储234
14.1.1本地存储和Cookies的区别234
14.1.2Web存储方法234
14.2使用HTML5WebStorageAPI234
14.2.1测试浏览器的支持情况235
14.2.2案例1——使用sessionStorage
方法创建对象236
14.2.3案例2——使用localStorage
方法创建对象237
14.2.4案例3——WebStorageAPI的
其他操作238
14.2.5案例4——使用JSON对象
存取数据239
14.3目前浏览器对Web存储的
支持情况241
14.4跨文档消息传输242
14.4.1跨文档消息传输的基本知识242
14.4.2案例5——跨文档通信应用
测试242
14.5WebSocketAPI245
14.5.1什么是WebSocketAPI245
14.5.2WebSocket通信基础245
14.5.3案例6——服务器端使用Web
SocketAPI247
14.5.4案例7——客户端使用
WebSocketAPI250
14.6综合案例——制作简单
Web留言本250
14.7跟我学上机——编写简单的
WebSocket服务器253
14.8高手解惑257
第15章处理线程和服务器
发送事件259
15.1WebWorker260
15.1.1WebWorker概述260
15.1.2线程中常用的变量、
函数与类260
15.1.3案例1——与线程进行
数据的交互261
15.2线程嵌套263
15.2.1案例2——单线程嵌套263
15.2.2案例3——多个子线程中的
数据交互265
15.3服务器发送事件概述267
15.4服务器发送事件的实现过程267
15.4.1案例4——检测浏览器是否
支持Server-Sent事件267
15.4.2案例5——使用EventSource
对象268
15.4.3案例6——编写服务器端
代码268
15.5综合案例——创建WebWorker
计数器269
15.6跟我学上机——服务器发送事件
实战应用270
15.7高手解惑272
第16章构建离线的Web应用273
16.1HTML5离线Web应用概述274
16.2案例1——使用HTML5离线
Web应用API274
16.2.1检查浏览器的支持情况274
16.2.2搭建简单的离线应用程序275
16.2.3支持离线行为275
16.2.4Manifest文件276
16.2.5ApplicationCacheAPI277
16.3案例2——使用HTML5离线
Web应用构建应用278
16.3.1创建记录资源的manifest
文件278
16.3.2创建构成界面的HTML和
CSS279
16.3.3创建离线的JavaScript279
16.3.4检查ApplicationCache的
支持情况281
16.3.5为Update按钮添加
处理函数281
16.3.6添加Storage功能代码282
16.3.7添加离线事件处理程序282
16.4综合案例——离线定位跟踪283
16.5高手解惑287
第IV篇移动开发
第17章jQueryMobile基础291
17.1认识jQueryMobile292
17.2跨平台移动设备网页
jQueryMobile292
17.2.1案例1——移动设备模拟器292
17.2.2案例2——jQueryMobile的
安装294
17.2.3案例3——jQueryMobile
网页的架构296
17.3案例4——创建多页面的
jQueryMobile网页297
17.4案例5——将页面作为对话框使用298
17.5案例6——绚丽多彩的页面切换
效果299
17.6高手解惑301
第18章jQueryMobileUI组件303
18.1套用UI组件304
18.1.1案例1——表单组件304
18.1.2案例2——按钮和组按钮311
18.1.3案例3——按钮图标313
18.1.4案例4——弹窗315
18.2列表316
18.2.1案例5——列表视图316
18.2.2案例6——列表内容319
18.2.3案例7——列表过滤320
18.3面板和可折叠块322
18.3.1案例8——面板322
18.3.2案例9——可折叠块323
18.4案例10——导航条325
18.5综合案例——使用jQueryMobile
主题328
18.6高手解惑331
第19章jQueryMobile事件333
19.1页面事件334
19.1.1案例1——初始化事件334
19.1.2案例2——外部页面加载
事件336
19.1.3案例3——页面过渡事件338
19.2触摸事件340
19.2.1案例4——点击事件340
19.2.2案例5——滑动事件342
19.3案例6——滚屏事件344
19.4案例7——定位事件347
19.5高手解惑349
第20章数据存储和读取技术351
20.1WebSQLDatabase概述352
20.2数据库的基本操作352
20.3数据表的基本操作353
20.4数据的基本操作355
20.5综合案例——WebSQLDatabase的
综合操作技能356
20.6高手解惑359
第Ⅴ篇综合案例实战
第21章制作休闲娱乐类网页363
21.1整体布局364
21.1.1设计分析364
21.1.2排版架构365
21.2模块组成365
21.3制作步骤366
21.3.1制作样式表366
21.3.2Logo与导航菜单373
21.3.3搜索条374
21.3.4左侧视频模块374
21.3.5评论模块375
21.3.6右侧热门推荐377
21.3.7底部模块378
第22章制作企业门户类网页381
22.1整体布局382
22.1.1设计分析382
22.1.2排版架构383
22.2模块组成383
22.3制作步骤384
22.3.1样式表384
22.3.2网页头部385
22.3.3导航菜单栏386
22.3.4中间主体第一栏386
22.3.5中间主体第二栏390
22.3.6中间主体第三栏393
22.3.7中间主体第四栏398
22.3.8中间主体第五栏402
22.3.9网页底部407
第23章制作电子商务类网页409
23.1整体布局410
23.1.1设计分析410
23.1.2排版架构411
23.2模块组成411
23.3制作步骤411
23.3.1样式表411
23.3.2网页头部419
23.3.3主体第一通栏420
23.3.4主体第二通栏420
23.3.5主体第三通栏421
23.3.6网页底部422
第24章开发连锁酒店订购系统425
24.1连锁酒店订购的需求分析426
24.2网站的结构426
24.3连锁酒店订购系统的代码实现427
24.3.1设计首页427
24.3.2订购页面428
24.3.3连锁分店页面433
24.3.4查看订单页面434
24.3.5酒店介绍页面436