内容简介

本书以零基础讲解为宗旨，用实例引导读者深入学习，采取“HTML 5网页设计→CSS 3美化网页→高级提升技能→综合案例实战”的讲解模式，深入浅出地讲解HTML 5+CSS 3的各项技术及实战技能。

本书第I篇“HTML 5网页设计”主要内容包括新一代Web前端技术，HTML 5网页的文档结构，HTML 5网页中的文本、超链接和图像，使用HTML 5创建表格，使用HTML 5创建表单，HTML 5中的音频和视频，使用HTML 5绘制图形等；第II篇“CSS 3美化网页”主要内容包括CSS 3概述与基本语法，使用CSS 3美化网页字体与段落，使用CSS 3美化网页图片，使用CSS 3美化网页背景与边框，使用CSS 3美化超级链接和鼠标，使用CSS 3美化表格和表单的样式，使用CSS 3美化网页菜单，使用滤镜美化网页元素等；第III篇“高级提升技能”主要内容包括CSS 3中的动画效果，HTML 5中的文件与拖放，定位地理位置技术，Web存储和通信技术，处理线程和服务器发送事件，CSS 3定位与DIV布局核心技术等；第IV篇“综合案例实战”主要内容包括网页布局剖析与制作，设计企业门户类网页，设计在线购物类网页。

 

本书适合任何想学习前台网页设计与布局的人员，无论您是否从事计算机相关行业，无论您是否接触过HTML 5和CSS 3，通过学习本书均可快速掌握网页的设计方法和技巧。

 

前    言

　　“网站开发案例课堂”系列图书是专门为提高办公技能和网页设计初学者量身定制的一套学习用书，涵盖高效办公、网站开发、数据库设计等方面。整套书具有以下特点。

前沿科技

　　无论是网站建设、数据库设计，还是HTML 5、CSS 3，我们都精选较为前沿或者用户群较大的领域进行介绍，帮助读者认识和了解最新动态。

权威的作者团队

　　组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。

学习型案例设计

　　以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度，提升学习效率。

为什么要写这样一本书

　　随着用户对页面体验要求的提高，页面前端技术日趋重要。HTML 5技术成熟，在各大浏览器厂商的支持下将会更加盛行，因此本书致力于帮助读者完全掌握HTML 5+ CSS 3技术。本书可以让读者掌握目前流行的最新前端技术，使前端从外观上变得更炫、技术上更简易。通过本书的案例实训，读者可以很快地上手流行的工具，提高职业技能，从而帮助解决公司与求职者的双重需求问题。

本书特色

零基础、入门级的讲解

　　无论您是否从事计算机相关行业，无论您是否接触过网页制作和设计，都能从本书中找到最佳起点。

超多、实用、专业的范例和项目

　　本书在编排上紧密结合深入学习网页制作技术的先后过程，从HTML 5的基本概念开始，逐步带领大家深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。

随时检测自己的学习成果

　　大部分章后都设置了“跟我学上机”板块，均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。

细致入微、贴心提示

　　本书在讲解过程中，使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。

专业创作团队和技术支持

　　您在学习过程中遇到任何问题，均可加入QQ群(案例课堂VIP)451102631进行提问，专家人员会在线答疑。

超值资源大放送

全程同步教学录像

　　涵盖本书所有知识点，详细讲解每个实例及项目的过程和技术关键点。可以使读者比看书更轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分能使读者获得比书中讲解更多的收获。

超多容量王牌资源

　　赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、HTML 5标记速查手册、精选的JavaScript实例、CSS 3属性速查表、JavaScript函数速查手册、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)451102631获取赠送资源，也可以扫描二维码，下载本书资源。

读者对象

没有任何网页设计基础的初学者。

有一定的HTML 5和CSS 3基础，想精通网页制作和设计的人员。

有一定的HTML 5和CSS 3基础，没有项目经验的人员。

正在进行毕业设计的学生。

大专院校及培训学校的老师和学生。

创作团队

　　本书由刘春茂编著，参加编写的人员还有刘玉萍、张金伟、蒲娟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中，我们竭尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。若您在学习中遇到困难或疑问，或有任何建议，可写信至信箱357975357@qq.com。

　　

　　                                                      编  者  

 

 

 

目    录

第I篇  HTML 5网页设计

 

第1章  新一代Web前端技术 3

1.1  HTML的基本概念 4

1.1.1  HTML的发展历程 4

1.1.2  什么是HTML 4

1.1.3  HTML 5文件的基本结构 5

1.2  HTML 5的优势 5

1.2.1  解决了跨浏览器的问题 5

1.2.2  增加了多个新特性 5

1.2.3  用户优先的原则 6

1.2.4  化繁为简的优势 7

1.3  HTML 5网页的开发环境 7

1.3.1  使用记事本手工编写HTML 5 7

1.3.2  使用Dreamweaver CC编写

HTML文件 8

1.4  使用浏览器查看HTML 5文件 12

1.4.1  查看页面效果 12

1.4.2  查看源文件 13

1.5  疑难解惑 14

第2章  HTML 5网页的文档结构 15

2.1  HTML 5文件的基本结构 16

2.1.1  HTML 5页面的整体结构 16

2.1.2  HTML 5新增的结构标记 16

2.2  HTML 5基本标记详解 17

2.2.1  文档类型说明 17

2.2.2  HTML标记 17

2.2.3  头标记 18

2.2.4  网页的主体标记 20

2.2.5  页面注释标记 21

2.3  HTML 5语法的变化 22

2.3.1  标签不再区分大小写 22

2.3.2  允许属性值不使用引号 22

2.3.3  允许部分属性的属性值省略 23

2.4  综合案例——符合W3C标准的

 HTML 5网页 23

2.5  跟我学上机——简单的HTML 5网页 25

2.6  疑难解惑 26

第3章  HTML 5网页中的文本、超链接

和图像 27

3.1  在网页中添加文本 28

3.1.1  普通文本的添加 28

3.1.2  特殊字符文本的添加 28

3.1.3  使用HTML 5标记添加特殊

文本 30

3.2  文本排版 32

3.2.1  换行标记 32

3.2.2  段落标记 32

3.2.3  标题标记 33

3.3  文字列表 34

3.3.1  建立无序列表 34

3.3.2  建立有序列表 36

3.3.3  建立不同类型的无序列表 36

3.3.4  建立不同类型的有序列表 37

3.3.5  建立嵌套列表 38

3.3.6  自定义列表 39

3.4  超链接标记 40

3.4.1  设置文本和图片的超链接 40

3.4.2  创建指向不同目标类型的

超链接 40

3.4.3  设置以新窗口显示超链接页面 42

3.4.4  链接到同一页面的不同位置 43

3.5  创建热点区域 44

3.6  网页中的图片 45

3.6.1  在网页中插入图像 45

3.6.2  设置图像的宽度和高度 47

3.6.3  设置图像的提示文字 48

3.6.4  将图片设置为网页背景 49

3.6.5  排列图像 50

3.7  综合案例——图文并茂的房屋装饰

装修网页 50

3.8  跟我学上机——在线购物网站的产品

展示效果 52

3.9  疑难解惑 53

第4章  使用HTML 5创建表格 55

4.1  表格的基本结构 56

4.2  创建表格 57

4.2.1  创建普通表格 57

4.2.2  创建一个带有标题的表格 58

4.3  编辑表格 59

4.3.1  定义表格的边框类型 59

4.3.2  定义表格的表头 59

4.3.3  设置表格背景 60

4.3.4  设置单元格的背景 61

4.3.5  合并单元格 62

4.3.6  排列单元格中的内容 65

4.3.7  设置单元格的行高与列宽 66

4.4  完整的表格标记 67

4.5  综合案例——制作计算机报价表 68

4.6  跟我学上机——制作学生成绩表 70

4.7  疑难解惑 74

第5章  使用HTML 5创建表单 75

5.1  表单概述 76

5.2  表单基本元素的使用 76

5.2.1  单行文本输入框 77

5.2.2  多行文本输入框 77

5.2.3  密码输入框 78

5.2.4  单选按钮 78

5.2.5  复选框 79

5.2.6  列表框 80

5.2.7  普通按钮 81

5.2.8  提交按钮 81

5.2.9  重置按钮 82

5.3  表单高级元素的使用 83

5.3.1  url属性的使用 83

5.3.2  email属性的使用 83

5.3.3  date属性和time属性的使用 84

5.3.4  number属性的使用 85

5.3.5  range属性的使用 86

5.3.6  required属性的使用 86

5.4  综合案例——创建用户反馈表单 87

5.5  跟我学上机——制作用户注册表单 88

5.6  疑难解惑 90

第6章  HTML 5中的音频和视频 91

6.1  audio标签 92

6.1.1  audio标签概述 92

6.1.2  audio标签的属性 93

6.1.3  浏览器对audio标签的支持

情况 93

6.2  在网页中添加音频文件 94

6.2.1  添加自动播放的音频文件 94

6.2.2  添加带有控件的音频文件 94

6.2.3  添加循环播放的音频文件 95

6.2.4  添加预播放的音频文件 95

6.3  video标签 96

6.3.1  video标签概述 96

6.3.2  video标签的属性 97

6.3.3  浏览器对video标签的支持

情况 98

6.4  在网页中添加视频文件 98

6.4.1  添加自动播放的视频文件 98

6.4.2  添加带有控件的视频文件 99

6.4.3  添加循环播放的视频文件 99

6.5  综合案例——设置视频文件的高度

与宽度 100

6.6  跟我学上机——添加预播放的视频

文件 101

6.7  疑难解惑 101

第7章  使用HTML 5绘制图形 103

7.1  添加canvas的步骤 104

7.2  绘制基本形状 104

7.2.1  绘制矩形 105

7.2.2  绘制圆形 105

7.2.3  使用moveTo与lineTo绘制

直线 107

7.2.4  使用bezierCurveTo绘制

贝塞尔曲线 108

7.3  绘制渐变图形 109

7.3.1  绘制线性渐变 109

7.3.2  绘制径向渐变 111

7.4  绘制变形图形 112

7.4.1  绘制平移效果的图形 112

7.4.2  绘制缩放效果的图形 113

7.4.3  绘制旋转效果的图形 114

7.4.4  绘制组合效果的图形 115

7.4.5  绘制带阴影的图形 117

7.5  使用图像 118

7.5.1  绘制图像 118

7.5.2  平铺图像 119

7.5.3  裁剪图像 121

7.5.4  图像的像素化处理 122

7.6  绘制文字 124

7.7  图形的保存与恢复 126

7.7.1  保存与恢复状态 126

7.7.2  保存文件 127

7.8  综合案例——绘制火柴棒人物 128

7.9  跟我学上机——绘制商标 132

7.10  疑难解惑 134

 

　　

第II篇  CSS 3美化网页

 

第8章  CSS 3概述与基本语法 137

8.1  CSS 3概述 138

8.1.1  CSS 3的功能 138

8.1.2  浏览器与CSS 3 138

8.1.3  CSS 3的基础语法 139

8.1.4  CSS 3的常用单位 139

8.2  编辑和浏览CSS 3 144

8.2.1  手工编写CSS 3 144

8.2.2  用Dreamweaver编写CSS 145

8.3  在HTML 5中使用CSS 3的方法 147

8.3.1  行内样式 147

8.3.2  内嵌样式 148

8.3.3  链接样式 149

8.3.4  导入样式 150

8.3.5  优先级问题 151

8.4  CSS 3的常用选择器 154

8.4.1  标签选择器 154

8.4.2  类选择器 155

8.4.3  ID选择器 155

8.4.4  全局选择器 156

8.4.5  组合选择器 157

8.4.6  继承选择器 158

8.4.7  伪类选择器 159

8.5  选择器声明 160

8.5.1  集体声明 160

8.5.2  多重嵌套声明 161

8.6  综合案例——制作炫彩网站Logo 161

8.7  跟我学上机——制作学生信息

统计表 164

8.8  疑难解惑 166

第9章  使用CSS 3美化网页字体

与段落 167

9.1  美化网页文字 168

9.1.1  设置文字的字体 168

9.1.2  设置文字的字号 169

9.1.3  设置字体风格 170

9.1.4  设置加粗字体 171

9.1.5  将小写字母转为大写字母 171

9.1.6  设置字体的复合属性 172

9.1.7  设置字体颜色 173

9.2  设置文本的高级样式 174

9.2.1  设置文本阴影效果 174

9.2.2  设置文本的溢出效果 176

9.2.3  设置文本的控制换行 177

9.2.4  保持字体尺寸不变 177

9.3  美化网页中的段落 178

9.3.1  设置单词之间的间隔 179

9.3.2  设置字符之间的间隔 179

9.3.3  设置文字的修饰效果 180

9.3.4  设置垂直对齐方式 181

9.3.5  转换文本的大小写 183

9.3.6  设置文本的水平对齐方式 183

9.3.7  设置文本的缩进效果 185

9.3.8  设置文本的行高 186

9.3.9  文本的空白处理 187

9.3.10  文本的反排 188

9.4  综合案例——设置网页标题 189

9.5  跟我学上机——制作新闻页面 191

9.6  疑难解惑 192

第10章  使用CSS 3美化网页图片 193

10.1  图片缩放 194

10.1.1  通过描述标记width和height

 缩放图片 194

10.1.2  使用CSS 3中的max-width

 和max-height缩放图片 194

10.1.3  使用CSS 3中的width

 和height缩放图片 195

10.2  设置图片的对齐方式 196

10.2.1  设置图片的横向对齐 196

10.2.2  设置图片的纵向对齐 197

10.3  图文混排 199

10.3.1  设置文字环绕效果 199

10.3.2  设置图片与文字的间距 201

10.4  综合案例——制作学校宣传单 202

10.5  跟我学上机——制作简单的图文

 混排网页 204

10.6  疑难解惑 206

第11章  使用CSS 3美化网页背景

 与边框 207

11.1  使用CSS 3美化背景 208

11.1.1  设置背景颜色 208

11.1.2  设置背景图片 209

11.1.3  背景图片重复 210

11.1.4  背景图片显示 212

11.1.5  背景图片的位置 213

11.1.6  背景图片的大小 215

11.1.7  背景的显示区域 216

11.1.8  背景图像的裁剪区域 217

11.1.9  背景复合属性 218

11.2  使用CSS 3美化边框 219

11.2.1  设置边框的样式 220

11.2.2  设置边框的颜色 221

11.2.3  设置边框的线宽 222

11.2.4  设置边框的复合属性 224

11.3  设置边框的圆角效果 225

11.3.1  设置圆角边框 225

11.3.2  指定两个圆角半径 226

11.3.3  绘制四个不同角的圆角边框 227

11.3.4  绘制不同种类的边框 229

11.4  综合案例——制作简单的公司主页 231

11.5  跟我学上机——制作简单的生活资讯

 主页 234

11.6  疑难解惑 235

第12章  使用CSS 3美化超级链接

 和鼠标 237

12.1  使用CSS 3来美化超链接 238

12.1.1  改变超级链接的基本样式 238

12.1.2  设置带有提示信息的超级

 链接 239

12.1.3  设置超级链接的背景图 240

12.1.4  设置超级链接的按钮效果 241

12.2  使用CSS 3美化鼠标特效 242

12.2.1  使用CSS 3控制鼠标箭头 242

12.2.2  设置鼠标变幻式超链接 244

12.2.3  设置网页页面滚动条 244

12.3  综合案例1——图片版本的超级

 链接 246

12.4  综合案例2——关于鼠标特效 248

12.5  跟我学上机——制作一个简单的

 导航栏 250

12.6  疑难解惑 252

第13章  使用CSS 3美化表格和表单

 的样式 253

13.1  美化表格的样式 254

13.1.1  设置表格边框的样式 254

13.1.2  设置表格边框的宽度 256

13.1.3  设置表格边框的颜色 257

13.2  美化表单样式 258

13.2.1  美化表单中的元素 258

13.2.2  美化提交按钮 261

13.2.3  美化下拉菜单 262

13.3  综合案例——制作用户登录页面 263

13.4  跟我学上机——制作用户注册页面 265

13.5  疑难解惑 268

第14章  使用CSS 3美化网页菜单 269

14.1  使用CSS 3美化项目列表 270

14.1.1  美化无序列表 270

14.1.2  美化有序列表 271

14.1.3  美化自定义列表 273

14.1.4  制作图片列表 274

14.1.5  缩进图片列表 276

14.1.6  列表的复合属性 277

14.2  使用CSS 3制作网页菜单 278

14.2.1  制作无须表格的菜单 278

14.2.2  制作水平和垂直菜单 280

14.3  综合案例——模拟SOSO导航栏 282

14.4  跟我学上机——将段落转变成列表 285

14.5  疑难解惑 287

第15章  使用滤镜美化网页元素 289

15.1  滤镜概述 290

15.2  设置基本滤镜效果 291

15.2.1  高斯模糊(blur)滤镜 291

15.2.2  明暗度(brightness)滤镜 292

15.2.3  对比度(contrast)滤镜 293

15.2.4  阴影(drop-shadow)滤镜 294

15.2.5  灰度(grayscale)滤镜 295

15.2.6  反相(invert)滤镜 296

15.2.7  透明度(opacity)滤镜 297

15.2.8  饱和度(saturate)滤镜 298

15.2.9  深褐色(sepia)滤镜 299

15.3  综合案例1——使用复合滤镜效果 300

15.4  综合案例2——使用滤镜制作动画

 效果 301

15.5  跟我学上机——制作色相旋转

 (hue-rotate)滤镜 303

15.6  疑难解惑