目　录
第1章 走进网页设计——基础知识 1
内容概览 1
课程导学 1
1.1 相关概念 2
1.1.1 问题1：茫茫网海，网页在哪里？如何工作？ 2
1.1.2 问题2：千姿百媚的网页由哪些元素组成？ 5
1.1.3 问题3：为什要进行网页设计？包含哪些环节？ 6
1.1.4 问题4：网站只是由很多网页组成吗？ 8
1.1.5 问题5：要成为网页设计师，如何规则自己？ 8
1.2 开始准备 9
1.2.1 问题6：制作网页需要做好哪些准备工作？ 9
1.2.2 问题7：有没有推荐的好工具？ 10
1.2.3 问题8：作为“准设计师”良好的习惯是什么？ 11
1.3 基础语法 11
1.3.1 问题9：如何创建站点及页面？ 12
1.3.2 问题10：新页面中的默认代码什么意思？ 14
1.3.3 问题11：网页的代码有哪些特点？ 15
1.3.4 问题12：如何在网页上放置内容？ 16
1.3.5 问题13：如何让网页上的内容变漂亮？ 17
1.4 项目练习任务单 28
章节总结 29
巩固问答 30
第2章 基本应用——文本 31
内容概览 31
课程导学 31
2.1 添加文本 32
2.1.1 问题1：什么是文本？ 32
2.1.2 问题2：如何给页面添加文本？ 34
2.2 修饰文本 40
2.2.1 问题3：如何修饰文本的字体样式？ 40
2.2.2 问题4：如何优化文本的排版效果？ 48
2.2.3 问题5：如何撰写一个文本修饰页面？ 56
2.3 认识列表 63
2.3.1 问题6：什么是列表？ 63
2.3.2 问题7：如何实现不同类型的列表？ 64
2.3.3 问题8：美化列表的常用样式有哪些？ 66
2.3.4 问题9：如何撰写一个美化的列表？ 66
2.4 字幕应用 68
2.4.1 问题10：什么是字幕？ 68
2.4.2 问题11：如何实现字幕？ 69
2.5 项目练习任务单 70
章节总结 71
巩固回答 71
第3章 多媒体元素——图片、音频、视频 72
内容概览 72
课程导学 72
3.1 图片应用 73
3.1.1 问题1：什么是图片？ 73
3.1.2 问题2：如何在网页中插入图片？ 75
3.1.3 问题3：图片显示效果欠佳，用什么样式修饰？ 80
3.1.4 问题4：如何设置网页图片背景？ 88
3.1.5 问题5：图片背景“不听话”如何控制？ 89
3.2 音频应用 94
3.2.1 问题6：什么是音频？ 94
3.2.2 问题7：如何在网页中插入音频？ 94
3.2.3 问题8：修饰音频的常用样式有哪些？ 95
3.2.4 问题9：如何使用HTML5 audio标签播放音频？ 96
3.2.5 问题10：浏览器音频播放不兼容怎么办？ 98
3.3 视频应用 99
3.3.1 问题11：什么是视频？ 99
3.3.2 问题12：如何在网页中插入视频？ 99
3.3.3 问题13：修饰视频的常用样式有哪些？ 100
3.3.4 问题14：如何使用HTML5 video标签播放视频？ 101
3.3.5 问题15：浏览器视频播放不兼容怎么办？ 102
3.4 项目练习任务单 103
章节总结 104
巩固问答 104
第4章 导航利器——超链接 105
内容概览 105
课程导学 105
4.1 超链接的作用 106
4.1.1 问题1：什么是超链接？ 106
4.1.2 问题2：超链接分为哪几种类型？ 107
4.1.3 问题3：“多态”超链接如何在网页中应用？ 108
4.2 超链接的修饰 117
4.2.1 问题4：什么是伪类样式？为什么需要伪类样式？ 117
4.2.2 问题5：如何让超链接更“体贴”？ 117
4.3 项目练习任务单 119
章节总结 123
巩固问答 123
第5章 数据展示——表格 124
内容概览 124
课程导学 124
5.1 认识表格 125
5.1.1 问题1：为什么需要表格？ 125
5.1.2 问题2：结构化数据如何显示在网页中？ 126
5.2 美化表格 129
5.2.1 问题3：表格调试看不到怎么办？如何让它“现身”？ 129
5.2.2 问题4：如何解决表格的双边框问题？ 130
5.2.3 问题5：如何实现单元格的合并？ 132
5.2.4 问题6：如何美化表格的样式？ 133
5.3 项目练习任务单 138
章节总结 139
巩固回答 139
第6章 核心应用——排版布局 140
内容概览 140
课程导学 140
6.1 布局的基本概念 142
6.1.1 问题1：什么是网页布局？ 142
6.1.2 问题2：常用的网页布局方式有哪些？ 143
6.2 DIV+CSS 144
6.2.1 问题3：如何分块管理网页中的元素和内容？ 144
6.2.2 问题4：网页设计中常说的“留白”是什么？如何设置
“留白”？ 150
6.2.3 问题5：为什么有些元素的尺寸“不听话”？你知道盒子
模型吗？ 153
6.3 浮动布局 157
6.3.1 问题6：如何让多个“块元素”显示在同一行？ 157
6.3.2 问题7：元素浮动后，为什么高度会塌陷？影响后面的元素
怎么办？ 161
6.4 定位布局 163
6.4.1 问题8：如何更精准、更自由地摆放元素？ 163
6.4.2 问题9：如何选择定位元素的参照物？ 174
6.5 弹性布局 175
6.5.1 问题10：如何快速实现多元素在水平方向上的间隔布局？ 175
6.5.2 问题11：如何快速实现多元素“区域等分”或“按比例分割”的
布局？ 178
6.5.3 问题12：如何快速实现多元素垂直居中问题？ 182
6.6 网格布局 185
6.6.1 问题13：如何快速整齐地“按行列”摆放内容？ 185
6.6.2 问题14：如何快速实现“不规则行列”布局？ 192
6.7 响应式布局 193
6.7.1 问题15：移动化时代带来怎样的布局挑战？ 193
6.7.2 问题16：如何实现“多终端自适应”布局？ 194
6.8 项目练习任务单 203
章节总结 204
巩固问答 204
第7章 交互接口——表单 206
内容概览 206
课程导学 206
7.1 表单 207
7.1.1 问题1：在网页上如何提交数据？ 207
7.1.2 问题2：一个完整的表单应包含哪些内容？ 210
7.2 表单元素 212
7.2.1 问题3：在表单中如何采集各种类型的数据？ 212
7.2.2 问题4：各种类型的按钮如何选择？ 221
7.2.3 问题5：如何实现时间、颜色等精准快速输入？ 222
7.2.4 问题6：如何实现在按钮中加入图标效果？ 224
7.2.5 问题7：如何实现既能输入又能下拉选择的效果？ 225
7.3 表单修饰 227
7.3.1 问题8：原生表单页面不好看，如何让它更美观？ 227
7.3.1 问题9：如何给表单元素添加自定义样式？ 230
7.4 表单验证 231
7.4.1 问题10：为什么表单不填写也能提交？ 231
7.4.2 问题11：如何让表单符合格式要求后才能提交？ 232
7.5 项目练习任务单 237
章节总结 238
巩固问答 238
第8章 学以致用——项目实践 239
内容概览 239
课程导学 239
8.1 项目1——楷模典范专题网 240
8.2 项目2——大美清河乡村振兴网 243
8.3 项目3——蜀道剑门宣传专题网 246
8.4 项目4——党史学习教育成果展 249
附录 252
内容概览 252
附录A 常用HTML一览 252
A.1 页面元素 252
A.2 文本元素 253
A.3 媒体元素 254
A.4 超链接元素 254
A.5 布局元素 255
A.6 表单元素 256
附录B 常用CSS修饰一览 257
B.1 文字修饰 257
B.2 文本修饰 257
B.3 列表修饰 258
B.4 超链接伪类样式修饰 258
B.5 块元素修饰 259
B.6 布局样式 260
B.7 其他 261