网页设计与制作？第2版（省部级获奖教材）

《网页设计与制作 第2版》依照新Web标准（HTML5和CSS3），全程贯穿理论与实践紧密结合的思想，有机整合HTML和CSS，使学习过程更接近实际工作。本书共分为4层次，第1～3章是基础，包括网页设计基础、HTML基础和CSS基础，第4～8章是学生必须重点掌握的内容，包括文本样式与背景、常用Web元素、盒模型（含Flexible Box）、界面设计（含CSS Grid Layout）和表单，第9～12章以进一步提高学生深入学习的能力为目标，包括JavaScript、网页多媒体实现、jQuery和移动优先的Bootstrap 3响应式网页设计，第13章是对前面所学知识的综合实例应用，包括网页仿制实例和基于CMS（Drupal 8）快速构建网站实例。
为了更好地指导读者深入学习，在各章后面的习题中还提供了许多综合性较强的操作题。
《网页设计与制作 第2版》既可作为高等院校本科相关专业教材，也可作为有一定基础的从业人员的参考书。

前言

第1章 网页设计基础
1.1 网页概述
1.2 网站开发流程
1.3 Web设计基础
1.3.1 Web设计原则
1.3.2 网站结构规划
1.4 布局设计
1.4.1 布局设计原则
1.4.2 布局设计类型
1.4.3 布局设计元素
1.4.4 布局设计技术
1.5 内容设计
1.5.1 文本
1.5.2 多媒体
1.5.3 内容排版
1.6 风格设计
1.6.1 网页设计构成要素
1.6.2 网页设计的风格类型
1.7 色彩设计
1.7.1 色彩基础
1.7.2 网页中的色彩
1.7.3 网页配色方案
1.8 小结
1.9 思考与练习
第2章 HTML基础
2.1 HTML文档结构
2.2 HTML基本语法
2.2.1 标记语法28
2.2.2 属性语法29
2.2.3 命名规则30
2.3 块元素与内联元素30
2.4 HTML的格式元素31
2.4.1 字符格式化31
2.4.2 输出32
2.4.3 块级33
2.4.4 wbr和time元素34
2.5 HTML5新增的文档结构元素35
2.5.1 文章语义（article、header、footer）
元素35
2.5.2 内容区块语义（section）元素37
2.5.3 侧栏（aside）与导航（nav）元素37
2.5.4 hgroup元素为标题分组38
2.6 小结38
2.7 思考与练习39
第3章 CSS基础40
3.1 CSS语法与规则40
3.2 样式表的定义与使用42
3.2.1 内联方式42
3.2.2 内部样式块对象42
3.2.3 外部样式表43
3.3 选择器43
3.3.1 基本选择器44
3.3.2 层次选择器45
3.3.3 属性选择器47
3.3.4 伪类选择器48
3.3.5 伪元素选择器52
3.4 小结53
3.5 思考与练习53
第4章 文本样式与背景54
4.1 长度单位与颜色54
4.1.1 长度单位54
4.1.2 颜色设置方法55
4.2 文本排版样式56
4.2.1 文本样式56
4.2.2 排版样式58
4.2.3 文本装饰61
4.3 背景样式62
4.3.1 基本背景属性62
4.3.2 多重背景图像63
4.3.3 CSS3新增背景属性64
4.3.4 渐变背景66
4.4 小结69
4.5 思考与练习70
第5章 常用Web元素71
5.1 添加特殊符号71
5.2 图像71
5.2.1 图像标签72
5.2.2 图像的宽高、间距与边框72
5.2.3 图像的对齐方式72
5.2.4 figure元素73
5.3 超链接73
5.3.1 创建超链接73
5.3.2 链接对象75
5.3.3 网页链接属性设置78
5.3.4 图像映射78
5.4 列表79
5.4.1 无序列表79
5.4.2 有序列表80
5.4.3 嵌套列表82
5.4.4 定义列表82
5.4.5 菜单列表83
5.4.6 图像列表84
5.4.7 列表符号位置84
5.5 表格85
5.5.1 表格元素85
5.5.2 表格修饰87
5.5.3 设置表格行属性88
5.5.4 设置单元格属性88
5.5.5 单线表格的制作89
5.5.6 表格的嵌套90
5.6 内联框架90
5.7 小结91
5.8 思考与练习91
第6章 盒模型92
6.1 盒模型概述92
6.1.1 边框93
6.1.2 填充94
6.1.3 边距95
6.2 边框高级属性95
6.2.1 圆角边框95
6.2.2 盒阴影97
6.2.3 图像边框97
6.3 伸缩盒99
6.3.1 CSS中的布局模式99
6.3.2 Flexbox模型的功能99
6.3.3 Flexbox模型的相关术语100
6.3.4 Flexbox模型的使用102
6.4 小结106
6.5 思考与练习107
第7章 界面设计108
7.1 定位与布局108
7.1.1 定位108
7.1.2 浮动109
7.1.3 显示110
7.1.4 溢出112
7.2 用户界面113
7.2.1 轮廓113
7.2.2 放大113
7.2.3 盒模型组成模式114
7.2.4 允许缩放114
7.3 多列115
7.3.1 多列的基本属性115
7.3.2 列间距116
7.3.3 列边框116
7.3.4 跨列117
7.3.5 列高117
7.3.6 断行118
7.4 CSS网格布局118
7.4.1 重要术语118
7.4.2 网格容器属性119
7.4.3 网格项属性126
7.5 小结129
7.6 思考与练习129
第8章 表单130
8.1 网页表单概述130
8.2 传统表单元素131
8.2.1 传统表单输入类型131
8.2.2 标注元素135
8.2.3 文本区域136
8.2.4 选择域137
8.2.5 域集138
8.3 HTML5表单的新特性139
8.3.1 HTML5新增表单输入类型139
8.3.2 HTML5新增表单元素141
8.3.3 HTML5新增表单属性142
8.4 小结145
8.5 思考与练习145
第9章 JavaScript146
9.1 JavaScript简介146
9.2 JavaScript程序148
9.2.1 语句148
9.2.2 函数149
9.2.3 消息对话框151
9.3 标识符和变量152
9.3.1 命名规定152
9.3.2 数据类型153
9.3.3 变量153
9.3.4 转义字符155
9.4 运算符和表达式155
9.4.1 算术运算符和表达式155
9.4.2 赋值运算符和表达式156
9.4.3 关系运算符和表达式156
9.4.4 逻辑运算符和表达式158
9.4.5 条件运算符和表达式158
9.4.6 其他运算符和表达式159
9.5 JavaScript程序控制结构159
9.5.1 顺序程序159
9.5.2 分支程序160
9.5.3 循环程序163
9.6 常用对象166
9.6.1 对象简介166
9.6.2 核心对象166
9.6.3 文档171
9.6.4 窗口174
9.7 事件编程174
9.7.1 事件简介174
9.7.2 表单事件176
9.7.3 鼠标事件177
9.7.4 键盘事件177
9.7.5 页面载入和离开177
9.8 利用JS实现在线订购178
9.9 小结179
9.10 思考与练习179
第10章 网页多媒体实现180
10.1 HTML多媒体元素180
10.1.1 多媒体元素的基本属性180
10.1.2 多媒体元素的常用方法183
10.1.3 多媒体元素的重要事件186
10.1.4 Flash动画与视频189
10.2 CSS动画设计189
10.2.1 CSS变换189
10.2.2 CSS过渡194
10.2.3 CSS动画195
10.3 HTML绘图197
10.3.1 canvas元素的基本用法197
10.3.2 绘制基本图形198
10.3.3 绘制曲线200
10.3.4 绘制文本203
10.3.5 图像的绘制与裁切204
10.4 HTML拖放206
10.5 小结207
10.6 思考与练习208
第11章 jQuery209
11.1 jQuery概述209
11.2 jQuery选择器211
11.2.1 基本选择器211
11.2.2 层次选择器212
11.2.3 过滤选择器213
11.2.4 表单选择器218
11.3 jQuery操作DOM220
11.3.1 访问元素220
11.3.2 结点操作225
11.3.3 遍历元素229
11.3.4 删除元素230
11.4 jQuery中的事件231
11.4.1 页面载入事件231
11.4.2 绑定事件231
11.4.3 切换事件232
11.4.4 移除事件233
11.4.5 trigger方法234
11.5 jQuery动画与特效234
11.5.1 基本动画234
11.5.2 滑动动画237
11.5.3 淡入淡出动画238
11.5.4 自定义动画240
11.6 jQuery UI插件243
11.6.1 jQuery UI交互性插件243
11.6.2 jQuery UI微型插件246
11.7 小结249
11.8 思考与练习250
第12章 响应式网页设计252
12.1 响应式网页简介252
12.1.1 响应式网页的优点252
12.1.2 响应式的概念253
12.1.3 Viewport253
12.1.4 流式网格254
12.1.5 媒体查询255
12.1.6 图像、视频与字体257
12.2 Bootstrap响应式网页258
12.2.1 布局259
12.2.2 内容263
12.2.3 组件264
12.3 小结272

12.4 思考与练习272
第13章 综合实例273
13.1 网页仿制实例273
13.1.1 导航条274
13.1.2 轮播275
13.1.3 自定义区域276
13.1.4 Services区域278
13.1.5 Portfolio区域279
13.1.6 Contact区域281
13.2 基于CMS快速构建网站实例282
13.2.1 CMS与Drupal282
13.2.2 Drupal基本应用284
13.2.3 导入与导出站点294
13.2.4 主题296
13.2.5 内容类型300
13.2.6 制作首页轮播303
13.2.7 自定义首页区域311
13.2.8 制作分类列表页312
13.2.9 添加视频功能317
13.3 小结318
13.4 思考与练习319
参考文献320

前 言
随着移动互联网络的普及，H5这个称呼在互联网和日常生活中被广泛使用，但并没有官方或学术界对其进行过严格定义，根据目前情况来看，大概是指HTML5在移动方面的应用，所以本次改版的理由为：一方面要全面升级为HTML5 CSS3，另一方面要全面兼容移动应用。通过改版，在以下几个方面得到了提升：编入了版浏览器支持的HTML5 CSS3的绝大部分有用的知识点，增加了移动优先的Bootstrap 4响应式网页设计内容以兼顾移动终端，还有一个基于CMS（Drupal 8）的综合实例。
本教材版是市重点建设教材，现在的修订版被立项为首批浙江省普通高校新形态教材项目。本课程还是省精品在线开放课程，该平台对所有国内的高校都开放，需要使用该平台的读者请联系作者。
编写本书的初衷是按照新的Web标准既要实现网页的结构与表现分离，又要贯彻有机整合HTML和CSS并融入整个学习过程这一思想，使学习过程更接近实际工作。编写本书的第二个目的就是想做成一本经典教材，而不是自学教程，叙述力求精练，尽量涵盖更多的知识点，有不断深入的入口，有充分发挥老师能动性、主导性的机制。全程实验要求学生动手，自然突出了学生主体性。书中设置了很多思考点，可以激发学生学习的积极性，也凸显了探究式教学方法的自然呈现，每章后都配有操作题型，供学生自主学习和练习。
本书全程贯穿理论与实践紧密结合的思想，不仅每个知识点都有相应的实例，只要扫描书中的各二维码即可观看操作视频。本书紧跟学科发展前沿，遵循Web标准（HTML5和CSS3），书中大量采用这些新技术，所以希望使用者尽量采用各大浏览器（Chrome、Firefox、Edge、Safari或Opera）的版，本书所有实例都通过了这些浏览器的兼容性测试。
本书除“第 1 章网页设计基础”是理论外，后面各章的知识点都是结合在实例中的。各个高校根据自己学生的层次和专业不同，可灵活地搭配授课内容，有些内容也可以作为选学。
本书由朱金华、胡秋芬、刘均和何跃编写。参与本书翻译、调试工作的还有李玉仙等，在此一并表示感谢。另外还要感谢学校领导和老师给予的大力支持和帮助，特别感谢多年来使用本教材第1版的老师，你们提出的很多宝贵意见都是我们继续坚持的动力。
本书PPT和源代码将提供给出版社供下载，知识点视频可通过扫描书中的二维码观看。读者可以使用移动设备的相关软件（如微信、QQ）中的“扫一扫”功能扫描书中的二维码，在线查看知识点视频（音频建议用耳机收听）。如果“扫一扫”后，在微信端无法打开相关资源，请选择用手机浏览器或其他软件的“扫一扫”功能扫描查看。
本书的其他视频（实验指导视频和直播视频）和相关资料放在浙江省高等学校在线开放课程共享平台上，网址http://zjedu.moocollege.com/。需要在浙江省高等学校在线开放课程共享平台上开课的学校可以联系本书作者。
书中的源代码不依赖于任何网页编辑器，实验指导对应视频基于Dreamweaver CC 2018.1的实时视图，知识点视频基于Visual Studio Code版制作。
由于新技术发展太快，教材出版始终有滞后性，所以本书会及时提供更新内容。请关注浙江省高等学校在线开放课程共享平台，或者联系出版社索取更新内容。
由于时间仓促，书中难免存在不妥之处，请读者原谅，并提出宝贵意见。