HTML5+CSS3+JavaScript网页设计陈婉凌

　　有人说：“Web 3.0将是技术与Internet紧密结合的时代。”Web 3.0除了让浏览者能够共享信息并与其他用户及社区交互之外，还包含了云与移动网络服务。设计网页要跟上Web 3.0的脚步，除基本的HTML之外，CSS与JavaScript技术也是不可缺少的，支持移动设备的网页更是未来的趋势。这么多技术，对一个网页设计新手来说，往往不得其门而入。

　　其实，大部分的网页技术都是以HTML为基础的，学习各种动态网页技术之前，需要先熟悉HTML语法，才能达到事半功倍的效果。发展HTML5的主要目的是希望能够减少浏览器对于外挂程序（如Adobe Flash、Microsoft Silverlight）的需求，并且提供更多网络应用的标准，让不同浏览器具有遵循的依据。虽然目前仍然无法实现这样的理想，但是随着HTML5标准的不断发展与更新，期待有一天真的能做到不同浏览器相兼容。

　　HTML5新增了一些网页应用程序的API，同时还增加了绘图的canvas标记，这些功能都必须和JavaScript语言一起使用。另外，网页美化的部分，如文字字形、大小与颜色等，以前可以使用标记属性进行设置，现在HTML5已经确定停用这些样式美化的标记属性，改由CSS语法负责。因此，从广义上来说，HTML5包含了HTML、JavaScript和CSS 三个部分。

　　本书以HTML与CSS为主体，配合JavaScript语法，从基础到高级循序渐进地进行介绍，并提供具体的范例让读者能够立即练习。章节安排如下：

　　第1篇：HTML5基础入门（第1~6章）

　　第1章详细介绍网站与网页，就算完全不了解网站相关概念的初学者也能快速入门；从第2章开始介绍HTML5的操作及语法，将HTML5语法分门别类，包括文字与排版、多媒体素材、表格与表单、建立超链接等内容，让读者系统地学习HTML5语法。

　　第2篇：CSS美化（第7~10章）

　　本篇开始先介绍一些CSS样式表基础知识，后面将常用的CSS语法区分为基本语法与排版技巧两大章节，在本篇最后一章（第10章）安排一个完整的范例，将HTML5与CSS3语法整合应用。

　　第3篇：HTML5进阶（第11~14章）

　　本篇将进入程序语言部分，一开始先介绍JavaScript语言，由于HTML5新增的canvas绘图功能必须与JavaScript搭配才能发挥最佳功能，因此将canvas绘图安排在此篇进行介绍。Web Storage也是HTML5新增的功能，让使用者可以在本地存储资料。在本篇的最后一章（第14章）安排完整的Web Storage操作购物车。

　　第4篇：HTML5应用（第15~17章）

　　本篇介绍目前最热门的移动设备网页（Web APP），特别加入了jQuery Mobile章节，读者不需要学习复杂的程序，就能轻轻松松地构建移动设备网页，在本篇末同样安排了综合操作，让读者能完成完整的移动设备网页。

　　“工欲善其事，必先利其器”，网页制作前的首要工作就是准备好相关的软件工具，例如想要设计个人专用图案或影片就必须借助图像编辑软件、多媒体剪辑软件，虽然这些软件工具可以在市面上买到，但是对于经费有限的读者来说却是一大负担，读者可以参考书中列举的实用免费工具或自由软件，从中找到合适的工具。

　　除实用的内容之外，本书每章最后都提供了“本章小结”与“习题”。相信本书是读者网页制作入门的最佳工具书，同时也适合教师作为相关课程的教材使用。

　　本书范例与习题的素材和代码下载地址为：http://pan.baidu.com/s/1eRLAasU（注意区分数字和英文字母大小写）。

　　编 者

第1篇 HTML5基础入门

第1章 认识网站与网页 2

1.1 Internet与WWW 2

1.1.1 万维网 2

1.1.2 什么是网站及网页 3

1.1.3 网址的组成 5

1.2 构建网站的流程 7

1.2.1 拟定网站主题 8

1.2.2 规划网站架构与内容 9

1.2.3 搜集相关资料 10

1.2.4 开始制作网页 10

1.2.5 上传与测试 11

1.2.6 网站的推广与更新维护 13

1.3 认识网页文件和命名规则 13

1.3.1 主文件名与扩展名 13

1.3.2 常见的图片格式 15

1.3.3 常见的声音格式 16

1.3.4 网页文件命名规则 17

1.4 网页宽度与屏幕分辨率 17

1.4.1 屏幕分辨率 18

1.4.2 确定网页宽度 19

本章小结 20

习题 22

第2章 HTML5入门 24

2.1 认识HTML5 24

2.1.1 HTML5与HTML4的差异 24

2.1.2 HTML5废除的标记 25

2.2 学习HTML前的准备工作 26

2.2.1 建立HTML文件 26

2.2.2 预览HTML网页 28

2.3 HTML语法的概念与架构 29

2.3.1 HTML的标记类型 29

2.3.2 HTML的组成 29

2.3.3 标记属性的应用 30

2.4 HTML5文件结构与语义标记 30

2.4.1 结构化的语义标记 30

2.4.2 HTML5声明与编码设置 34

本章小结 36

习题 36

第3章 文字与排版技巧 37

3.1 段落效果——使用排版标记 37

3.1.1 设置段落样式的标记 37

3.1.2 设置对齐与缩进的标记 39

3.1.3 添加分隔线 41

3.1.4 设置段落标题 42

3.2 文字效果——使用文字标记 43

3.2.1 设置字形样式的标记 43

3.3.2 设置上标、下标 45

3.3 项目符号与编号——使用列表标记 45

3.3.1 符号列表 45

3.3.2 编号列表 46

3.3.3 定义列表 49

3.4 注释与特殊符号 50

3.4.1 加入注释 50

3.4.2 使用特殊符号 51

3.5 新增中继标记—— 52

3.5.1 meta标记语法 52

3.5.2 认识meta标记的http-equiv属性 53

3.5.3 认识meta标记的name属性 56

3.6 div标记与span标记 57

3.6.1 认识div标记 58

3.6.2 认识span标记 59

本章小结 60

习题 61

第4章 多媒体素材的运用 63

4.1 网页图片使用须知 63

4.1.1 图片的尺寸与分辨率 63

4.1.2 图片的来源 64

4.2 图片的使用 64

4.2.1 嵌入图片 65

4.2.2 路径表示法 66

4.3 图像处理软件 67

4.3.1 初识Photoshop 67

4.3.2 改变图片格式 68

4.3.3 更改图片大小和分辨率 70

4.3.4 切割大图为数张小图 72

4.4 多媒体素材的来源 76

4.4.1 利用现有的多媒体元素 76

4.4.2 自己制作多媒体元素 77

4.5 添加影音特效 77

4.5.1 在网页中加入音乐 77

4.5.2 添加影音动画 79

4.5.3 添加Flash动画 81

4.5.4 传统影音播放器 81

4.5.5 使用iframe嵌入优酷视频 82

本章小结 84

习题 85

第5章 表格与表单 87

5.1 制作基本表格 87

5.1.1 表格的基本架构 87

5.1.2 设置表格标题 89

5.2 表格的编辑技巧 91

5.2.1 合并单元格 91

5.2.2 利用表格组合图片 93

5.3 什么是表单 96

5.4 创建表单 98

5.4.1 表单的基本架构 98

5.4.2 输入组件 101

5.4.3 列表组件 105

5.4.4 选择组件 107

5.4.5 按钮组件 109

5.4.6 表单分组 111

5.5 操作范例——教学意见调查表 111

本章小结 113

习题 114

第6章 创建超链接 116

6.1 认识超链接 116

6.1.1 什么是超链接 116

6.1.2 规划超链接 117

6.2 加入超链接 117

6.2.1 超链接的用法 117

6.2.2 站外网页链接 118

6.2.3 站内网页链接 119

6.2.4 链接到E-Mail邮箱 122

6.2.5 链接到文件 125

本章小结 126

习题 126

第2篇 CSS美化

第7章 认识CSS样式表 130

7.1 什么是CSS样式表 130

7.1.1 CSS的由来 130

7.1.2 CSS的优势 131

7.1.3 CSS的应用 132

7.2 建立CSS样式表 133

7.2.1 CSS基本格式 133

7.2.2 应用CSS样式表 134

7.2.3 认识CSS选择器 140

本章小结 145

习题 145

第8章 CSS基本语法 147

8.1 控制文字样式 147

8.1.1 字形属性 147

8.1.2 段落属性 150

8.1.3 文字效果属性 154

8.2 控制背景 157

8.2.1 设置背景颜色 157

8.2.2 设置背景图片 158

8.2.3 设置背景渐变 167

本章小结 170

习题 171

第9章 CSS排版技巧 173

9.1 控制边界与边框 173

9.1.1 边界 173

9.1.2 边框 175

9.1.3 边界间距 182

9.2 网页组件的定位 184

9.2.1 一般定位 184

9.2.2 图层定位 191

9.3 超链接与鼠标光标特效 193

9.3.1 超链接特效 193

9.3.2 鼠标光标特效 196

本章小结 198

习题 199

第10章 HTML5+CSS3综合应用 201

10.1 操作网页内容 201

10.2 使用语义标记排版 202

10.3 叠字标题 208

10.4 网页背景和鼠标光标 209

10.5 菜单超链接特效 210

10.6 主内容区样式 211

第3篇 HTML5进阶

第11章 认识JavaScript 216

11.1 什么是JavaScript 216

11.1.1 JavaScript架构 216

11.1.2 JavaScript对象与函数 218

11.1.3 JavaScript事件 221

11.2 JavaScript流程控制 223

11.2.1 运算符号 223

11.2.2 if…else语句 225

11.2.3 for循环 225

本章小结 226

习题 227

第12章 canvas在线绘图 229

12.1 认识canvas 229

12.1.1 基本canvas语法 229

12.1.2 绘制各种图形 232

12.2 设置图形样式 238

12.2.1 指定图形颜色 238

12.2.2 指定线条粗细 241

12.2.3 渐变填充 244

本章小结 248

习题 249

第13章 网页数据存储Web Storage 250

13.1 认识Web Storage 250

13.1.1 Web Storage基本概念 250

13.1.2 检测浏览器是否支持Web Storage 250

13.2 localStorage和sessionStorage 251

13.2.1 访问localStorage 251

13.2.2 删除localStorage 254

13.2.3 访问sessionStorage 256

13.3 Web Storage实例练习 257

13.3.1 操作步骤 257

13.3.2 隐藏

及组件 259

13.3.3 登录 259

13.3.4 注销 260

本章小结 261

习题 262

第14章 Web Storage操作购物车 263

第4篇 HTML5应用

第15章 JavaScript的好帮手——jQuery 276

15.1 认识jQuery 276

15.1.1 引用jQuery函数库 276

15.1.2 jQuery基本架构 277

15.1.3 jQuery选择器 278

15.2 表格排序软件——tablesorter 281

15.2.1 下载与应用 281

15.2.2 进阶应用 283

15.3 行事历软件——FullCalendar 286

15.3.1 下载与应用 286

15.3.2 进阶应用 287

本章小结 295

习题 295

第16章 开发跨平台移动设备网页jQuery Mobile 297

16.1 jQuery Mobile基础 297

16.1.1 认识jQuery Mobile 297

16.1.2 第一个jQuery Mobile网页 301

16.2 jQuery Mobile的UI组件 306

16.2.1 认识UI组件 306

16.2.2 按钮 308

16.2.3 组按钮 313

16.2.4 列表 314

16.3 网页导航与布景主题 316

16.3.1 jQuery Mobile网页导航 316

16.3.2 ThemeRoller快速应用布景主题 319

本章小结 326

习题 327

第17章 移动设备版网页操作 329

17.1 网站架构 329

17.2 订购流程 332

17.3 查订单 341

17.4 找店家 344

　　《HTML5+CSS3+JavaScript网页设计》以HTML与CSS为主体，配合JavaScript语法，从基础到高级循序渐进地进行介绍，并提供具体的范例让读者能够立即练习。

　　全书共17章，首先介绍了HTML5基础入门方面的内容，包括文字变化与排版、多媒体素材、表格与表单、建立超链接等；然后介绍了CSS美化方面的内容，包括CSS样式表基础知识、常用的CSS语法等；接下来对Canvas、JavaScript、Web Storage等内容进行了介绍；最后详细说明了使用jQuery Mobile建立移动设备的Web开发方法。

　　本书既适合作为网页设计或手机开发的初中级用户参考书，也适合作为职业技术学校计算机专业程序设计课程的教材。