HTML5网页设计案例课堂PDF电子书下载

第1篇 基础知识 3

第1章 初识HTML5 3

1.1 HTML5简介 4

1.1.1 HTML5简介 4

1.1.2 HTML5文件的基本结构 5

1.2 HTML5文件的编写方法 5

1.2.1 案例1——手工编写HTML5 5

1.2.2 案例2——使用HTML编辑器 6

1.3 使用浏览器查看HTML5文件 10

1.3.1 各大浏览器与HTML5的兼容 11

1.3.2 案例3——查看页面效果 11

1.3.3 案例4——查看源文件 11

1.4 跟我练练手 12

1.4.1 练习目标 12

1.4.2 上机练习 12

1.5 高手甜点 12

第2章 HTML5网页文档结构 15

2.1 Web标准 16

2.1.1 Web标准概述 16

2.1.2 Web标准规定的内容 16

2.2 HTML5文档的基本结构 17

2.2.1 文档类型说明 18

2.2.2 HTML5标记＜HTML＞ 19

2.2.3 头标记＜HEAD＞ 19

2.2.4 网页的主体标记＜BODY＞ 22

2.2.5 页面注释标记＜！--＞ 22

2.3 综合案例——符合W3C标准的HTML5网页制作 23

2.4 跟我练练手 24

2.4.1 练习目标 24

2.4.2 上机练习 25

2.5 高手甜点 25

第3章 HTML5与HTML4的区别 27

3.1 新增的主体结构元素 28

3.1.1 案例1——section元素的使用 28

3.1.2 案例2——article元素的使用 29

3.1.3 案例3——aside元素的使用 32

3.1.4 案例4——nav元素的使用 33

3.1.5 案例5——time元素的使用 36

3.2 新增的非主体结构元素 37

3.2.1 案例6——header元素的使用 37

3.2.2 案例7——hgroup元素的使用 38

3.2.3 案例8——footer元素的使用 40

3.2.4 案例9——figure元素的使用 42

3.2.5 案例10——address元素的使用 45

3.3 新增其他常用元素 46

3.3.1 案例11——mark元素的使用 46

3.3.2 案例12——rp元素、rt元素与ruby元素的使用 48

3.3.3 案例13——progress元素的使用 49

3.3.4 案例14——command元素的使用 50

3.3.5 案例15——embed元素的使用 50

3.3.6 案例16——details元素与summary元素的使用 51

3.3.7 案例17——datalist元素的使用 52

3.4 新增全局属性 53

3.4.1 案例18——contentEditable属性的使用 53

3.4.2 案例19——spellcheck属性的使用 54

3.4.3 案例20——tabIndex属性的使用 55

3.5 新增的其他属性 56

3.5.1 案例21——表单相关属性的使用 56

3.5.2 案例22——链接相关属性的使用 64

3.5.3 案例23——其他属性的使用 66

3.6 HTML5废除的属性 66

3.7 跟我练练手 68

3.7.1 练习目标 68

3.7.2 上机练习 68

3.8 高手甜点 68

第2篇 核心技术 73

第4章 设计网页文本内容 73

4.1 标题文字的建立 74

4.1.1 案例1——标题文字标记 74

4.1.2 案例2——标题文字的对齐方式 75

4.2 设置文字格式 75

4.2.1 案例3——设置文字字体 75

4.2.2 案例4——设置字号 77

4.2.3 案例5——设置文字颜色 78

4.2.4 案例6——设置粗体、斜体、下划线 79

4.2.5 案例7——设置上标与下标 81

4.2.6 案例8——设置字体风格 82

4.2.7 案例9——设置加粗字体 83

4.2.8 案例10——设置字体复合属性 84

4.2.9 案例11——设置阴影文本 85

4.2.10 案例12——控制换行 86

4.3 设置段落格式 88

4.3.1 案例13——设置段落标记 88

4.3.2 案例14——设置换行标记 89

4.4 设置网页水平线 90

4.4.1 案例15——添加水平线 90

4.4.2 案例16——设置水平线的宽度与高度 91

4.4.3 案例17——设置水平线的颜色 92

4.4.4 案例18——设置水平线的对齐方式 92

4.4.5 案例19——去掉水平线阴影 93

4.5 综合案例——成才教育网文本设计 94

4.6 跟我练练手 95

4.6.1 练习目标 95

4.6.2 上机练习 95

4.7 高手甜点 95

第5章 网页列表与段落设计 97

5.1 网页文字列表设计 98

5.1.1 案例1——建立无序列表＜ul＞ 98

5.1.2 案例2——建立有序列表＜ol＞ 99

5.1.3 案例3——建立不同类型的无序列表 100

5.1.4 案例4——建立不同类型的有序列表 101

5.1.5 案例5——嵌套列表 102

5.1.6 案例6——自定义列表＜dl＞ 103

5.2 网页段落格式的设计 104

5.2.1 案例7——设计单词间隔word-spacing 104

5.2.2 案例8——设计字符间隔letter-spacing 105

5.2.3 案例9——设计文字修饰text-decoration 106

5.2.4 案例10——设计垂直对齐方式vertical-align 107

5.2.5 案例11——设计文本转换text-transform 109

5.2.6 案例12——设计水平对齐方式text-align 110

5.2.7 案例13——设计文本缩进text-indent 112

5.2.8 案例14——设计文本行高line-height 113

5.2.9 案例15——处理空白white-space 114

5.2.10 案例16——文本反排unicode-bidi 115

5.3 综合案例——制作图文混排型旅游网页 117

5.4 跟我练练手 118

5.4.1 练习目标 118

5.4.2 上机练习 118

5.5 高手甜点 118

第6章 HTML5网页中的图像 121

6.1 网页中的图像＜img＞ 122

6.1.1 网页中支持的图片格式 122

6.1.2 图像中的路径 122

6.2 在网页中插入图像 124

6.2.1 案例1——插入图像 124

6.2.2 案例2——从不同位置插入图像 125

6.3 编辑网页中的图像 126

6.3.1 案例3——设置图像的宽度和高度 126

6.3.2 案例4——设置图像的提示文字 127

6.3.3 案例5——将图片设置为网页背景 128

6.3.4 案例6——排列图像 129

6.4 实战演练——图文并茂房屋装饰装修网页 130

6.5 跟我练练手 131

6.5.1 练习目标 131

6.5.2 上机练习 131

6.6 高手甜点 131

第7章 使用HTML5建立超链接 133

7.1 网页超链接的概念 134

7.1.1 什么是网页超链接 134

7.1.2 超链接中的URL 134

7.1.3 超链接的URL类型 135

7.2 建立网页超级链接 135

7.2.1 案例1——创建超文本链接 135

7.2.2 案例2——创建图片链接 137

7.2.3 案例3——创建下载链接 138

7.2.4 案例4——使用相对路径和绝对路径 139

7.2.5 案例5——设置以新窗口显示超链接页面 140

7.2.6 案例6——设置电子邮件链接 142

7.3 案例7——浮动框架iframe的使用 143

7.4 案例8——精确定位热点区域 145

7.5 综合案例——使用锚链接制作电子书阅读网页 148

7.6 跟我练练手 151

7.6.1 练习目标 151

7.6.2 上机练习 151

7.7 高手甜点 151

第8章 使用HTML5创建表单 153

8.1 案例1——认识表单 154

8.2 表单基本元素的使用 155

8.2.1 案例2——单行文本输入框text的使用 155

8.2.2 案例3——多行文本输入框textarea的使用 156

8.2.3 案例4——密码域password的使用 156

8.2.4 案例5——单选按钮radio的使用 157

8.2.5 案例6——复选框checkbox的使用 158

8.2.6 案例7——下拉列表框select的使用 159

8.2.7 案例8——普通按钮button的使用 160

8.2.8 案例9——提交按钮submit的使用 161

8.2.9 案例10——重置按钮reset的使用 162

8.3 表单高级元素的使用 163

8.3.1 案例11——url属性的应用 163

8.3.2 案例12——email属性的应用 164

8.3.3 案例13——date属性和times属性的应用 165

8.3.4 案例14——number属性的应用 166

8.3.5 案例15——range属性的应用 167

8.3.6 案例16——required属性的应用 167

8.4 综合案例——创建用户反馈表单 168

8.5 跟我练练手 170

8.5.1 练习目标 170

8.5.2 上机练习 170

8.6 高手甜点 170

第9章 使用HTML5创建表格 171

9.1 表格的基本结构 172

9.2 使用HTML5创建表格 173

9.2.1 案例1——创建普通表格 174

9.2.2 案例2——创建一个带有标题的表格 175

9.2.3 案例3——定义表格的边框类型 176

9.2.4 案例4——定义表格的表头 177

9.2.5 案例5——设置表格背景 178

9.2.6 案例6——设置单元格背景 180

9.2.7 案例7——合并单元格 181

9.2.8 案例8——排列单元格中的内容 185

9.2.9 案例9——设置单元格的行高与列宽 186

9.3 案例10——创建完整的表格 187

9.4 综合案例——制作商品报价表 189

9.5 跟我练练手 191

9.5.1 练习目标 191

9.5.2 上机练习 191

9.6 高手甜点 191

第10章 HTML5中的多媒体 193

10.1 网页音频标签audio 194

10.1.1 audio标签概述 194

10.1.2 audio标签的属性 194

10.1.3 音频解码器 195

10.1.4 audio标签浏览器的支持情况 195

10.2 网页视频标签video 195

10.2.1 video标签概述 195

10.2.2 video标签的属性 195

10.2.3 视频解码器 196

10.2.4 video标签浏览器的支持情况 196

10.3 添加网页音频文件 197

10.3.1 案例1——设置背景音乐 197

10.3.2 案例2——设置音乐循环播放 198

10.4 添加网页视频文件 198

10.4.1 案例3——为网页添加视频文件 198

10.4.2 案例4——设置自动运行 199

10.4.3 案例5——设置视频文件的循环播放 200

10.4.4 案例6——设置视频窗口的高度与宽度 201

10.5 添加网页滚动文字 202

10.5.1 案例7——滚动文字标签的使用 202

10.5.2 案例8——滚动方向属性的应用 203

10.5.3 案例9——滚动方式属性的应用 204

10.5.4 案例10——滚动速度属性的应用 205

10.5.5 案例11——滚动延迟属性的应用 206

10.5.6 案例12——滚动循环属性的应用 206

10.5.7 案例13——滚动范围属性的应用 207

10.5.8 案例14——滚动背景颜色属性的应用 208

10.5.9 案例15——滚动空间属性的应用 209

10.6 跟我练练手 210

10.6.1 练习目标 210

10.6.2 上机练习 210

10.7 高手甜点 210

第11章 使用HTML5绘制图形 213

11.1 什么是canvas 214

11.2 绘制基本形状 215

11.2.1 案例1——绘制矩形 215

11.2.2 案例2——绘制圆形 216

11.2.3 案例3——使用moveTo与lineTo绘制直线 217

11.2.4 案例4——使用bezierCurveTo绘制贝济埃曲线 219

11.3 绘制渐变图形 221

11.3.1 案例5——绘制线性渐变 221

11.3.2 案例6——绘制径向渐变 222

11.4 绘制变形图形 223

11.4.1 案例7——变换原点坐标 223

11.4.2 案例8——图形缩放 225

11.4.3 案例9——旋转图形 226

11.5 绘制其他样式的图形 227

11.5.1 案例10——图形组合 227

11.5.2 案例11——绘制带阴影的图形 229

11.5.3 案例12——绘制文字 230

11.6 使用图像 232

11.6.1 案例13——绘制图像 232

11.6.2 案例14——图像平铺 234

11.6.3 案例15——图像裁剪 235

11.6.4 案例16——像素处理 237

11.7 图形的保存与恢复 239

11.7.1 案例17——保存与恢复状态 239

11.7.2 案例18——保存文件 240

11.8 实战演练——绘制图形商标 241

11.9 跟我练练手 243

11.9.1 练习目标 243

11.9.2 上机练习 243

11.10 高手甜点 244

第12章 HTML5中的文件与拖放 245

12.1 选择文件 246

12.1.1 案例1——选择单个文件 246

12.1.2 案例2——选择多个文件 246

12.2 使用FileReader接口读取文件 247

12.2.1 案例3——检测浏览器是否支持FileReader接口 247

12.2.2 案例4——FileReader接口的方法 248

12.2.3 案例5——使用readAsDataURL方法预览图片 248

12.2.4 案例6——使用readAsText方法读取文本文件 250

12.3 使用HTML5实现文件的拖放 252

12.3.1 案例7——认识文件拖放的过程 252

12.3.2 浏览器支持情况 253

12.3.3 案例8——在网页中拖放图片 253

12.3.4 案例9——在网页中拖放文字 254

12.4 综合案例——在网页中来回拖放图片 256

12.5 跟我练练手 258

12.5.1 练习目标 258

12.5.2 上机练习 258

12.6 专家甜点 258

第3篇 高级应用 261

第13章 获取地理位置 261

13.1 Geolocation API获取地理位置 262

13.1.1 地理地位的原理 262

13.1.2 获取定位信息的方法 262

13.1.3 常用地理定位方法 262

13.1.4 案例1——判断浏览器是否支持HTML5获取地理位置信息 263

13.1.5 案例2——指定纬度和经度坐标 264

13.1.6 案例3——获取当前位置的经度与纬度 265

13.2 目前浏览器对地理定位的支持情况 267

13.3 综合案例——在网页中调用Google地图 268

13.4 跟我练练手 271

13.4.1 练习目标 271

13.4.2 上机练习 271

13.5 高手甜点 271

第14章 Web通信新技术 273

14.1 跨文档消息传输 274

14.1.1 跨文档消息传输的基本知识 274

14.1.2 案例1——跨文档通信应用测试 274

14.2 WebSockets API 277

14.2.1 什么是WebSocket API 277

14.2.2 WebSockets通信基础 277

14.2.3 案例2——服务器端使用Web Sockets API 279

14.2.4 案例3——客户机端使用WebSockets API 282

14.3 综合案例——编写简单的WebSocket服务器 283

14.4 跟我练练手 287

14.4.1 练习目标 287

14.4.2 上机练习 287

14.5 高手甜点 287

第15章 数据存储技术 289

15.1 认识Web存储 290

15.1.1 本地存储和Cookies的区别 290

15.1.2 Web存储方法 290

15.2 使用HTML5 Web Storage API 290

15.2.1 案例1——测试浏览器的支持情况 291

15.2.2 案例2——使用session Storage方法创建对象 291

15.2.3 案例3——使用localStorage方法创建对象 293

15.2.4 案例4——Web Storage API的其他操作 295

15.2.5 案例5——使用JSON对象存取数据 296

15.3 在本地建立数据库 299

15.3.1 本地数据库概述 299

15.3.2 用executeSql来执行查询 299

15.3.3 使用transaction方法处理事件 300

15.4 目前浏览器对Web存储的支持情况 300

15.5 综合案例——制作简单Web留言本 300

15.6 跟我练练手 303

15.6.1 练习目标 303

15.6.2 上机练习 304

15.7 高手甜点 304

第16章 使用Web Worker处理线程 305

16.1 Web Workers 306

16.1.1 Web Workers概述 306

16.1.2 线程中常用的变量、函数与类 307

16.1.3 案例1——与线程进行数据的交互 307

16.2 线程嵌套 310

16.2.1 案例2——单线程嵌套 310

16.2.2 案例3——多个子线程中的数据交互 312

16.3 综合案例—创建Web Worker计数器 314

16.4 跟我练练手 315

16.4.1 练习目标 315

16.4.2 上机练习 315

16.5 高手甜点 316

第17章 HTML5服务器发送事件 317

17.1 服务器发送事件概述 318

17.2 服务器发送事件的实现过程 318

17.2.1 案例1——检测浏览器是否支持Server-Sent事件 318

17.2.2 案例2——使用EventSource对象 319

17.2.3 案例3——编写服务器端代码 319

17.3 综合案例——服务器发送事件实战应用 320

17.4 跟我练练手 321

17.4.1 练习目标 321

17.4.2 上机练习 321

17.5 高手甜点 322

第18章 构建离线的Web应用 323

18.1 HTML5离线Web应用概述 324

18.2 实例1——使用HTML5离线Web应用API 324

18.2.1 检查浏览器的支持情况 324

18.2.2 搭建简单的离线应用程序 325

18.2.3 支持离线行为 325

18.2.4 Manifest文件 326

18.2.5 ApplicationCache API 327

18.3 实例2——使用HTML5离线Web应用构建应用 329

18.3.1 创建记录资源的manifest文件 329

18.3.2 创建构成界面的HTML和CSS 329

18.3.3 创建离线的JavaScript 330

18.3.4 检查applicationCache的支持情况 331

18.3.5 为Update按钮添加处理函数 332

18.3.6 添加Storage功能代码 332

18.3.7 添加离线事件处理程序 333

18.4 综合案例——离线定位跟踪 333

18.5 跟我练练手 338

18.5.1 练习目标 338

18.5.2 上机练习 338

18.6 高手甜点 338

第4篇 项目案例实战 341

第19章 HTML5、CSS3和JavaScript的搭配应用案例 341

19.1 案例1——打字效果的文字的制作 342

19.2 案例2——文字升降特效的制作 344

19.3 案例3——跑马灯效果的制作 345

19.4 案例4——闪烁图片的制作 347

19.5 案例5——左右移动的图片的制作 349

19.6 案例6——向上滚动菜单的制作 351

19.7 案例7——跟随鼠标移动的图片的制作 353

19.8 案例8——树形菜单的制作 355

19.9 案例9——时钟特效的制作 360

19.10 案例10——颜色选择器的制作 362

19.11 案例11——绘制火柴棒人物 364

19.12 跟我练练手 367

19.12.1 练习目标 367

19.12.2 上机练习 367

19.13 高手甜点 368

第20章 制作电子商务类网页 369

20.1 整体布局 370

20.1.1 设计分析 370

20.1.2 排版架构 370

20.2 模块组成 371

20.3 制作步骤 371

20.3.1 样式表 371

20.3.2 网页头部 379

20.3.3 主体第一通栏 381

20.3.4 主体第二通栏 382

20.3.5 主体第三通栏 383

20.3.6 网页底部 384

第21章 制作休闲娱乐类网页 387

21.1 整体布局 388

21.1.1 设计分析 388

21.1.2 排版架构 389

21.2 模块组成 389

21.3 制作步骤 390

21.3.1 制作样式表 390

21.3.2 Logo与导航菜单 398

21.3.3 搜索条 399

21.3.4 左侧视频模块 399

21.3.5 评论模块 400

21.3.6 右侧热门推荐 402

21.3.7 底部模块 404

第22章 制作企业门户类网页 407

22.1 整体布局 408

22.1.1 设计分析 408

22.1.2 排版架构 408

22.2 模块组成 409

22.3 制作步骤 409

22.3.1 样式表 409

22.3.2 网页头部 411

22.3.3 导航菜单栏 412

22.3.4 中间主体第一栏 412

22.3.5 中间主体第二栏 416

22.3.6 中间主体第三栏 419

22.3.7 中间主体第四栏 425

22.3.8 中间主体第五栏 430

22.3.9 网页底部 435