第1部分 了解网页设计基础知识 3
第1天 网页与网站基础知识 3
1.1认识网页和网站 3
1.1.1什么是网页 3
1.1.2什么是网站 4
1.2网页的相关概念 6
1.2.1浏览器 6
1.2.2网页与HTML 7
1.2.3URL、域名与IP地址 8
1.2.4网站上传和下载 9
1.3网页的HTML构成 10
1.3.1文档标记 11
1.3.2头部标记 12
1.3.3主体标记 13
1.4HTML常用标记 14
1.4.1链接标记〈LINK〉 14
1.4.2段落标记〈P〉 15
1.4.3通用块标记〈DIV〉 17
1.4.4行内标记〈SPAN〉 18
1.4.5元数据标记〈META〉 19
1.4.6图像标记〈IMG〉 20
1.4.7框架容器标记〈FRAMESET〉 22
1.4.8子框架标记〈FRAME〉 22
1.4.9表格标记〈TABLE〉 24
1.4.10浮动帧标记〈Iframe〉 26
1.4.11滚动标记〈marquee〉 27
1.5技能训练1——制作日程表 29
1.6技能训练2——保存整站 32
第2天 认识Web新面孔——HTML 5新增元素与属性速览 36
2.1新增的主体结构元素 36
2.1.1section元素 36
2.1.2article元素 36
2.1.3aside元素 37
2.1.4nav元素 37
2.2新增的非主体结构元素 37
2.2.1header元素 37
2.2.2hgroup元素 38
2.2.3footer元素 38
2.2.4figure元素 39
2.3新增的其他元素 39
2.3.1新增input元素的类型 39
2.3.2其他元素 39
2.4新增的属性和废除的属性 42
2.4.1新增的表单属性 42
2.4.2新增的链接相关属性 45
2.4.3新增的其他属性 45
2.4.4废除的属性 45
2.5新增的全局属性 47
2.5.1contentEditable属性 47
2.5.2designMode属性 48
2.5.3hidden属性 48
2.5.4spellcheck属性 48
2.5.5tabIndex属性 49
第3天 读懂样式表密码——网页设计中的CSS 3 51
3.1认识CSS 3 51
3.1.1CSS 3简介 51
3.1.2CSS 3发展历史 52
3.1.3浏览器与CSS 3 52
3.2样式表的基本用法 53
3.2.1在HTML中插入样式表 53
3.2.2单独的链接CSS文件 53
3.3CSS 3新增的选择器 54
3.3.1属性选择器 55
3.3.2结构伪类选择器 56
3.3.3UI元素状态伪类选择器 57
3.4技能训练——制作彩色标题 59
第2部分 使用HTML 5的高级应用 66
第4天 网页将变得更加活泼——网页表单技术应用 66
4.1新增HTML5表单 66
4.1.1基本表单元素 68
4.1.2高级表单元素 75
4.1.3新增表单元素 84
4.2新增表单属性 86
4.2.1autocomplete属性 86
4.2.2min.max和step属性 87
4.2.3multiple属性 88
4.2.4placeholder属性 88
4.2.5required属性 89
4.3技能训练——创建用户注册页面 90
第5天 让页面从此告别单调——网页多媒体应用 92
5.1音/视频容器与视频编/解码器 92
5.1.1视频容器 92
5.1.2音频和视频编/解码器 93
5.1.3audio和video元素的浏览器支持情况 93
5.1.4在HTML 4和HTML 5中播放多媒体的异同 94
5.2属性与方法 94
5.2.1理解媒体元素 94
5.2.2使用audio元素 95
5.2.3使用video元素 96
5.3事件触发机制 97
5.3.1事件概述 97
5.3.2事件处理应用 99
5.4技能训练——为网页添加背景音乐 103
第6天 网页中的北斗星——获取地理位置 104
6.1Geolocation API获取地理位置 104
6.1.1地理定位的原理 104
6.1.2地理定位的方法 105
6.1.3指定纬度和经度坐标 105
6.1.4如何获取位置信息 108
6.2技能训练——在网页中调用百度地图 109
第7天 通信不再是件难事儿——Web通信新技术 112
7.1跨文档消息传输 112
7.1.1跨文档消息传输的基本知识 112
7.1.2跨文档通信应用测试 113
7.2Web Sockets API 114
7.2.1Web Sockets通信基础 115
7.2.2服务器端使用Web Sockets API 117
7.2.3客户端使用Web Sockets API 120
7.3技能训练——编写简单的Web Socket服务器 120
第8天 把数据放至客户端——本地存储技术 126
8.1认识Web Storage 126
8.2使用HTML 5 Web Storage API 126
8.2.1sessionStorage对象应用 127
8.2.2localStorage对象应用 128
8.2.3Web Storage API的其他操作 130
8.3在本地建立数据库 133
8.3.1本地数据库概述 133
8.3.2用executeSql来插入数据 134
8.3.3使用transaction方法处理事件 134
8.4技能训练——制作简单的Web留言本 134
第9天 让通信更顺畅——线程处理 138
9.1Web Worker概述 138
9.2线程中常用的变量、函数与类 139
9.3与线程进行数据交互 140
9.4线程嵌套 142
9.4.1技能训练1——单线程嵌套 142
9.4.2技能训练2——多个子线程中的数据交互 145
第10天 浏览页面更快捷——构建离线应用程序 147
10.1HTML 5离线应用程序 147
10.1.1本地缓存 147
10.1.2浏览器网页缓存与本地缓存的区别 147
10.1.3目前浏览器对Web离线应用的支持情况 148
10.1.4支持离线行为 148
10.2了解manifest（清单）文件 149
10.3了解applicationCache API 150
10.4技能训练——离线定位跟踪 152
第3部分 使用CSS 3控制网页样式 160
第11天 网页上温暖的光芒——CSS 3控制网页文本样式 160
11.1CSS 3文字样式 160
11.1.1定义文字的颜色 160
11.1.2定义文字的字体 161
11.1.3定义文字的字号 162
11.1.4加粗字体 163
11.1.5定义文字的风格 165
11.1.6文字的阴影效果 165
11.1.7控制溢出文本 166
11.1.8控制换行 168
11.1.9字体复合属性 169
11.1.10文字修饰效果 170
11.2CSS 3段落文字 171
11.2.1设置字符间隔 171
11.2.2设置单词间隔 172
11.2.3水平对齐方式 173
11.2.4垂直对齐方式 174
11.2.5文本缩进 176
11.2.6文本行高 177
11.3技能训练——网页图文混排效果 178
第12天 同一张图却有着不一样的风景——CSS 3控制网页图像样式 180
12.1图片缩放 180
12.1.1通过标记设置图片大小 180
12.1.2使用CSS 3中的width和height 181
12.1.3使用CSS 3中的max-width和max-height 181
12.2设置图片的边框 183
12.3图片的对齐方式 184
12.3.1横向对齐方式 184
12.3.2纵向对齐方式 185
12.4图文混排效果 187
12.4.1设置图片与文字间距 187
12.4.2文字环绕效果 188
12.5技能训练——酒店宣传单 189
第13天 不可思议的杰作——CSS 3控制表格、表单与菜单样式 193
13.1CSS 3与表格 193
13.1.1表格的基本样式 193
13.1.2表格边框宽度 196
13.1.3表格边框颜色 197
13.1.4技能训练1——隔行变色 199
13.1.5技能训练2——鼠标悬浮变色表格 202
13.2CSS 3与表单 205
13.2.1美化表单中的元素 206
13.2.2美化下拉菜单 207
13.2.3美化提交按钮 209
13.2.4技能训练3——美化注册表单 211
13.2.5技能训练4——美化登录表单 214
13.3CSS 3与菜单 216
13.3.1美化无序列表 216
13.3.2美化有序列表 218
13.3.3图片列表 220
13.3.4列表缩进 222
13.3.5无须表格的菜单 223
13.3.6菜单的横竖转换 226
13.4技能训练5——制作soso导航栏 228
第14天 风景这边独好——CSS 3控制鼠标与超链接样式 232
14.1鼠标特效 232
14.1.1如何控制鼠标箭头 232
14.1.2鼠标变换效果 234
14.2超链接特效 235
14.2.1改变超链接基本样式 235
14.2.2设置超链接背景图 238
14.2.3超链接按钮效果 239
14.3技能训练1——制作图片鼠标放置特效 240
14.4技能训练2——制作图片超链接 242
第15天 让一切趋近于完美——CSS 3滤镜样式应用 245
15.1什么是CSS滤镜 245
15.2通道（Alpha） 246
15.3模糊（Blur） 248
15.4透明色（Chroma） 249
15.5翻转变换（Flip） 250
15.6光晕（Glow） 252
15.7灰度（Gray） 253
15.8反色（Invert） 254
15.9遮罩（Mask） 255
15.10阴影（Shadow） 256
15.11 X射线（X-ray） 257
15.12图像切换（RevealTrans） 258
15.13波浪（Wave） 260
15.14渐隐渐现（BlendTrans） 261
15.15 立体阴影（DropShadow） 263
15.16灯光滤镜（Light） 264
第16天 创造力不再是神话——CSS 3完善的网页美化设计 267
16.1增强的边框属性 267
16.1.1 border-color属性 267
16.1.2 border-image属性 269
16.2增强的背景图像属性 271
16.2.1 background属性 271
16.2.2 background-origin属性 272
16.2.3 background-clip属性 274
16.2.4 background-size属性 276
16.2.5 overflow-x和overflow-y属性 279
16.3增强的其他属性 281
16.3.1 border-radius属性 281
16.3.2 box-shadow属性 282
16.3.3 box-sizing属性 283
16.3.4 resize属性 284
16.3.5 outline属性 285
16.3.6 nav-index属性 287
16.3.7 content属性 289
第4部分 HTML 5+CSS 3综合实战 293
第17天 服务类网站设计 293
17.1网站规划与分析 293
17.1.1网站框架设计 293
17.1.2网站栏目划分 293
17.1.3网站模块划分 294
17.1.4网站色彩搭配 296
17.2修改样式表确定网站风格 296
17.2.1修改网站通用样式 296
17.2.2修改网站布局样式 297
17.3借用其他网站优秀模块 299
17.3.1导航条模块实现 299
17.3.2首页主体布局模块实现 301
17.3.3网页特效显示模块实现 305
第18天 休闲旅游类网站设计 309
18.1休闲旅游类网站主页规划 309
18.1.1旅游网站主页配色规划 309
18.1.2网页整体架构布局规划 310
18.1.3用DIV+CSS布局网页框架 310
18.2制作网站的步骤 311
18.2.1使用HTML 5设计网站 311
18.2.2定义网站CSS样式 311
18.2.3设计页面头部模块 318
18.2.4设计页面中间部分模块 320
18.2.5设计页面底部模块 322
18.2.6微调网站细节并预览 323
第19天 时尚音乐类网站设计 324
19.1时尚音乐类网站的构思布局 324
19.1.1设计分析 324
19.1.2排版架构 325
19.2制作网站的步骤 327
19.2.1页头部分 327
19.2.2左侧内容列表 329
19.2.3中间内容列表 331
19.2.4右侧内容列表 333
19.2.5页脚部分 334
19.3完善网站的效果 335
19.3.1页面内容主体调整 335
19.3.2页面整体调整 337
第20天 商业门户类网站设计 339
20.1商业门户类网站整体设计 339
20.1.1颜色应用分析 340
20.1.2架构布局分析 340
20.2制作网站的步骤 341
20.2.1网页整体样式插入 341
20.2.2网页局部样式 343
20.2.3顶部模块样式代码分析 350
20.2.4中间主体代码分析 351
20.2.5底部模块分析 355
20.3完善网站的效果 355
20.3.1部分内容调整 355
20.3.2模块调整 356
20.3.3调整后预览测试 358
第21天 网页设计模块化重组秘籍 359
21.1网站类型分析与重组 359
21.2网站建站特点分析 360
21.2.1用户群分析 360
21.2.2建站设计分析 361
21.3网站设计布局 361
21.3.1整体布局设计分析 362
21.3.2各模块化设计分析 362
21.3.3颜色搭配分析 362
21.4网站制作详细步骤 363
21.4.1CSS样式表分析 363
21.4.2网页头部设计分析 364
21.4.3主体第一通栏 368
21.4.4主体第二通栏 373
21.4.5主体第三通栏 380
21.4.6网页底部模块分析 383