HTML5+CSS3网页设计基础

本书根据培养高技能人才的需求，结合高职高专学生的学习特点，依据职业教育培养目标
的要求，以爱德照明网站的开发为主线，以案例为引导，将介绍知识与案例设计、制作、分析
融于一体。在案例的设计与制作过程中，把各章节的知识点融于其中，使读者能快速掌握相关
的知识和技术。设计的案例由小到大、由简到繁，这样能够引导学生循序渐进地学习制作网页
的知识和技术。*后，本书通过爱德照明网站前台页面的设计介绍网站项目开发、网页设计制
作的整个流程。
本书从网页的基本结构出发，由浅入深地讲述HTML5 文档的基本结构和创建方法、网页
基本元素、CSS 样式的定义规则及优先级、应用CSS 修饰页面元素、属性选择器的知识及应用、
CSS3 盒子模型的大小和边框设置、盒子的内外边距设置、网页两列布局技术、典型的三列布
局技术、网页上横向导航菜单和纵向导航菜单的设计、页面交互元素表单、HTML5 CSS3 简单
动画技术、页面音频和视频嵌入技术、网站开发流程等知识。在讲述网页制作的各种技术时，
以爱德照明网站的网页制作为案例进行教学，并运用丰富的实例来讲解知识点，注重培养读者
解决实际问题的能力。
本书内容丰富、结构合理、语言简洁流畅、示例翔实。每一章的引言部分都概述了该章的
学习目标。在每一章的正文中，结合案例讲解基础知识和关键技术，并穿插大量示例，*后通
过实训对本章及前面章节所学的知识进行综合训练。每一章末尾都安排了有针对性的练习题，
有助于读者巩固所学的知识、掌握实际应用技术、培养解决实际问题的能力。
本书既可作为高等职业院校计算机、网络、软件等专业及相关专业的网站开发和网页制作
教材，也可作为网页制作爱好者、网站开发人员及维护人员的学习参考书。 

《HTML5 CSS3网页设计基础》全面介绍HTML5和CSS3的基本知识以及应用HTML5 CSS3制作网页的技术。全书共分为12章，详细介绍网页的基本结构、网页基本元素、CSS基本知识、如何定义页面元素的样式、属性选择器、盒子模型、元素背景、CSS布局技术、链接和导航的设计、网页交互元素表单、CSS3动画制作、多媒体嵌入技术、网站开发流程、网站前台页面制作技术等内容。
《HTML5 CSS3网页设计基础》内容丰富、结构合理、语言简洁流畅、示例翔实，主要面向网页制作初学者，既可作为高等职业院校计算机、网络、软件等专业及相关专业的网站开发和网页制作教材，也可作为网页制作爱好者、网站开发人员及维护人员的学习参考书。
《HTML5 CSS3网页设计基础》对应的电子课件和实例源代码可以到http://www.tupwk.com.cn/downpage网站下载，也可以通过扫描前言中的二维码下载。

目    录
 
第1章  HTML5网页基础   1
1.1  网页的基本元素   1
1.2  网页的布局结构   3
1.3  创建HTML5页面   4
1.3.1  案例分析   4
1.3.2  用记事本创建网页   4
1.3.3  用Hbuilder创建网页   5
1.4  HTML5基础   7
1.4.1  HTML5概述   7
1.4.2  HTML5文档结构   8
1.4.3  HTML5语句结构   9
1.4.4  HTML5语法规范   10
1.5  实训   10
1.6  本章小结   11
1.7  练习题   11
第2章  网页基本元素   13
2.1  文本控制标签   13
2.1.1  案例分析   13
2.1.2  (标题标签)   14
2.1.3 

(段落标签)   15
2.1.4 
(换行标签)   15
2.1.5 

---

(水平线标签)   15
2.1.6  文本格式化标签   16
2.1.7  (范围标签)   17
2.1.8  (注释标签)   17
2.1.9  特殊符号   17
2.1.10  案例制作   18
2.2  图像标签   19
2.2.1  案例分析   19
2.2.2  常用图像格式   19
2.2.3  图像标签及其属性   20
2.2.4  绝对路径与相对路径   23
2.2.5  案例制作   23
2.3  超链接标签   24
2.3.1  案例分析   24
2.3.2  超链接简介   25
2.3.3  超链接的应用   25
2.3.4  案例制作   29
2.4  列表   30
2.4.1  案例分析   30
2.4.2  无序列表   30
2.4.3  有序列表   31
2.4.4  定义列表   32
2.4.5  嵌套列表   33
2.4.6  案例制作   34
2.5  表格   35
2.5.1  案例分析   35
2.5.2  表格的结构   35
2.5.3  表格的基本语法   36
2.5.4  表格的修饰   37
2.5.5  不规范表格   39
2.5.6  案例制作   40
2.6  页面交互标签   41
2.6.1  details和summary元素   41
2.6.2  progress元素   42
2.6.3  meter元素   42
2.7  实训   43
2.7.1  任务分析   44
2.7.2  任务实现   44
2.8  本章小结   45
2.9  练习题   46
第3章  CSS入门   47
3.1  CSS的定义与使用   47
3.1.1  CSS概述   47
3.1.2  CSS的定义和引用   48
3.2  CSS选择器   51
3.2.1  案例分析   51
3.2.2  CSS样式规则   51
3.2.3  CSS基础选择器   53
3.2.4  案例——制作企业简介页面   58
3.3  CSS属性单位   59
3.3.1  长度与百分比单位   59
3.3.2  色彩单位   60
3.4  CSS高级特性   61
3.4.1  案例分析   61
3.4.2  CSS的层叠性和继承性   61
3.4.3  CSS的优先级   64
3.4.4  案例——制作工程案例局部页面   64
3.5  实训   66
3.6  本章小结   68
3.7  练习题   68
第4章  元素外观修饰   71
4.1  文本样式   71
4.1.1  案例分析   71
4.1.2  字体样式   72
4.1.3  文本外观属性   75
4.1.4  案例制作   81
4.2  图像样式   82
4.2.1  案例分析   83
4.2.2  设置图像样式   83
4.2.3  案例制作   85
4.3  列表样式   86
4.3.1  案例分析   86
4.3.2  设置列表项的标记类型   86
4.3.3  设置列表项的标记位置   88
4.3.4  案例制作   89
4.4  表格样式   92
4.4.1  案例分析   92
4.4.2  border-collapse(设置表格边框合并)   92
4.4.3  border-spacing(设置单元格间距)   93
4.4.4  empty-cells(设置是否显示单元格边框)   94
4.4.5  caption-side(设置表格标题的位置)   95
4.4.6  案例制作   95
4.5  实训   97
4.5.1  任务分析   97
4.5.2  任务实现   97
4.6  本章小结   100
4.7  练习题   100
第5章  CSS3选择器   103
5.1  属性选择器   103
5.1.1  案例分析   103
5.1.2  E[attribute^=value]选择器   104
5.1.3  E[attribute$=value]选择器   104
5.1.4  E[attribute*=value]选择器   104
5.1.5  案例制作   105
5.2  伪类选择器   106
5.2.1  案例分析   106
5.2.2  :first-child和:last-child选择器   107
5.2.3  :nth-child(n)和:nth-last-child(n)选择器   109
5.2.4  :nth-of-type(n)和:nth-last-of-type(n)选择器   109
5.2.5  :empty选择器   111
5.2.6  :target选择器   112
5.2.7  案例制作   113
5.3  伪元素选择器   116
5.3.1  案例分析   116
5.3.2  :before选择器   116
5.3.3  :after选择器   117
5.3.4  案例制作   118
5.4  链接伪类   119
5.4.1  案例分析   119
5.4.2  案例制作   119
5.5  实训   120
5.5.1  任务分析   121
5.5.2  任务完成   121
5.6  本章小结   125
5.7  练习题   125
第6章  CSS盒子模型   127
6.1  盒子模型简介   127
6.2  盒子的外观属性   128
6.2.1  案例分析   128
6.2.2  盒子模型的宽和高   129
6.2.3  盒子边框属性   132
6.2.4  盒子模型的边距属性   137
6.2.5  案例制作   139
6.3  背景属性   142
6.3.1  案例分析   142
6.3.2  background属性   142
6.3.3  CSS渐变背景   150
6.3.4  背景和图像不透明度设置   153
6.3.5  案例制作   154
6.4  实训   155
6.4.1  任务分析   155
6.4.2  任务实现   156
6.5  本章小结   158
6.6  练习题   158
第7章  网页布局设计   161
7.1  网页布局标签   161
7.1.1  布局标签 CSS布局的优点   161
7.1.2  页面分块   162
7.1.3  页面结构标签   163
7.2  浮动与定位   167
7.2.1  案例分析   167
7.2.2  元素的浮动   167
7.2.3  清除浮动   171
7.2.4  定位属性   172
7.2.5  定位方式   173
7.2.6  overflow属性   177
7.2.7  案例制作   178
7.3  典型的CSS布局   181
7.3.1  两列布局   181
7.3.2  三列布局   185
7.3.3  三列自适应布局   189
7.4  实训   190
7.4.1  任务分析   191
7.4.2  任务实现   191
7.5  本章小结   195
7.6  练习题   196
第8章  链接与导航   199
8.1  链接样式   199
8.1.1  案例分析   199
8.1.2  设置文字链接样式   200
8.1.3  设置图像链接样式   202
8.1.4  案例——制作产品中心-景观路灯局部   203
8.2  纵向导航菜单的设计   205
8.2.1  案例分析   205
8.2.2  纵向导航菜单   206
8.2.3  案例——制作产品中心页面的左侧导航   207
8.3  横向导航菜单的设计   209
8.3.1  案例分析   209
8.3.2  网站主导航菜单的设计   210
8.3.3  案例——制作产品中心页面的页码导航   212
8.4  实训   213
8.4.1  任务分析   213
8.4.2  任务实现   214
8.5  本章小结   223
8.6  练习题   223
第9章  表单   225
9.1  表单标签   225
9.2  表单元素   226
9.2.1  案例分析   226
9.2.2  input元素及其属性   227
9.2.3  其他表单元素   232
9.2.4  案例制作   234
9.3  用CSS控制表单样式   235
9.4  实训   238
9.4.1  任务分析   238
9.4.2  任务实现   239
9.5  本章小结   242
9.6  练习题   242
第10章  CSS3简单动画   245
10.1  CSS3过渡   245
10.1.1  transition-property属性   245
10.1.2  transition-duration属性   247
10.1.3  transition-timing-function属性   247
10.1.4  transition-delay属性   248
10.1.5  transition属性   248
10.2  变形   249
10.2.1  案例展示   249
10.2.2  认识变形   249
10.2.3  2D转换   250
10.2.4  3D转换   256
10.2.5  案例实现   260
10.3  动画设计   262
10.3.1  @keyframes规则   262
10.3.2  animation属性   263
10.4  实训   266
10.5  本章小结   270
10.6  练习题   270
第11章  多媒体技术   273
11.1  HTML5多媒体特性   273
11.1.1  多媒体格式   273
11.1.2  支持多媒体的浏览器   274
11.2  嵌入视频和音频   275
11.2.1  在HTML5中嵌入视频   275
11.2.2  在HTML5中嵌入音频   277
11.2.3  音视频中的source元素   278
11.3  用CSS控制视频的宽高   279
11.4  视频和音频的方法和事件   281
11.4.1  video和audio元素的方法   281
11.4.2  video和audio元素的事件   281
11.5  实训   282
11.5.1  任务分析   283
11.5.2  任务实现   284
11.6  本章小结   285
11.7  练习题   285
第12章  网页设计基础   287
12.1  网站的开发流程   287
12.1.1  需求分析   288
12.1.2  站点规划   288
12.1.3  网站制作   289
12.1.4  测试发布   289
12.2  用HBulider创建Web项目   290
12.3  案例：制作爱德照明网站首页   290
12.4  案例：制作公司新闻页面   302
12.5  案例：制作联系方式页面   308
12.6  本章小结   310
12.7  练习题   310
参考文献   312

 

前    言

随着信息技术的发展，网站已成为用户浏览信息的平台和展示企业形象及文化的重要窗口，开发Web网站和手机APP也随之成了热门技术。而作为网页制作基础的HTML5和CSS3，也在2014年发布后迅速流行，受到各大浏览器的支持。HTML5的目标就是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画及用户与电脑的交互都被标准化。HTML5开创了互联网的新时代。
《HTML5 CSS3网页设计基础》根据培养高技能人才的需求，结合高职高专学生的学习特点，依据职业教育培养目标的要求，以爱德照明网站的开发为主线，以案例为引导，将介绍知识与案例设计、制作、分析融于一体。在案例的设计与制作过程中，把各章节的知识点融于其中，使读者能快速掌握相关的知识和技术。设计的案例由小到大、由简到繁，这样能够引导学生循序渐进地学习制作网页的知识和技术。最后，《HTML5 CSS3网页设计基础》通过爱德照明网站前台页面的设计介绍网站项目开发、网页设计制作的整个流程。
《HTML5 CSS3网页设计基础》从网页的基本结构出发，由浅入深地讲述HTML5文档的基本结构和创建方法、网页基本元素、CSS样式的定义规则及优先级、应用CSS修饰页面元素、属性选择器的知识及应用、CSS3盒子模型的大小和边框设置、盒子的内外边距设置、网页两列布局技术、典型的三列布局技术、网页上横向导航菜单和纵向导航菜单的设计、页面交互元素表单、HTML5 CSS3简单动画技术、页面音频和视频嵌入技术、网站开发流程等知识。在讲述网页制作的各种技术时，以爱德照明网站的网页制作为案例进行教学，并运用丰富的实例来讲解知识点，注重培养读者解决实际问题的能力。
《HTML5 CSS3网页设计基础》内容丰富、结构合理、语言简洁流畅、示例翔实。每一章的引言部分都概述了该章的学习目标。在每一章的正文中，结合案例讲解基础知识和关键技术，并穿插大量示例，最后通过实训对本章及前面章节所学的知识进行综合训练。每一章末尾都安排了有针对性的练习题，有助于读者巩固所学的知识、掌握实际应用技术、培养解决实际问题的能力。
《HTML5 CSS3网页设计基础》既可作为高等职业院校计算机、网络、软件等专业及相关专业的网站开发和网页制作教材，也可作为网页制作爱好者、网站开发人员及维护人员的学习参考书。

除封面署名的作者外，参与《HTML5 CSS3网页设计基础》编写的人员还有陈露露、崔维群、董昌艳、黄萌、焦广霞、刘春燕、刘玉霞、钱玉霞、宋雅静、王海明、王海涛、许崇武、肖凤霞、辛全仓、杨辉、张入文等人。由于作者水平有限，《HTML5 CSS3网页设计基础》难免有不足之处，欢迎广大读者批评指正。我们的信箱为[email protected]，电话为010-62796045。
《HTML5 CSS3网页设计基础》对应的电子课件和实例源代码可以到http://www.tupwk.com.cn/downpage网站下载，也可通过扫描如下二维码下载。
 

作　者　　　
2018年9月