本书从初学者的角度出发，以"项目导向、任务驱动”的方式，由浅入深，从网页标签语法开始介绍，巧妙融合完整的网页设计流程，将理论与实战紧密相连，助力读者逐步掌握网页实际制作的核心技能。全书共6个项目，项目1和项目2介绍开发工具，以及HTML5和CSS3的基础知识；项目3～项目5分别介绍盒子模型、网页布局、表格、表单、多媒体元素和动画等网页制作的核心内容；项目6综合运用所学知识，带领读者完成浙江金融职业学院图书馆综合服务平台的制作，体验从理论到实战的完整过程。本书结构合理、内容紧凑，每个核心知识点都精心设计了案例。本书既适合作为网页设计初学者、高等院校相关专业学生的学习用书和培训学校的教材，也可以作为网页制作、网站开发等行业人员的自学参考书。

张梅樱，女，浙江金融职业学院讲师，复旦大学硕士。长期深耕信息技术类专业一线教学与研究工作，教学功底扎实，实践经验丰富。主讲《网页设计与制作》等核心课程，主要研究方向为 Web 前端开发。主持完成厅级教学科研课题 4 项，深度参与省级、厅局级课题多项，发表论文6篇；指导学生获省级竞赛一、二等奖 10 余项，兼具扎实的教学能力与丰富的科研实践经验。

项目1 运用HTML5搭建页面 1
任务1.1 创建HTML5欢迎页面 2
1.1.1 认识网页 2
1.1.2 浏览器 3
1.1.3 开发工具 3
1.1.4 认识HTML 5
1.1.5 HTML5文档结构 5
1.1.6 标签分类 6
1.1.7 标签属性 7
任务1.2 制作“金院雕塑”页面 8
1.2.1 HTML文档头部相关标签 9
1.2.2 页面格式化标签 11
1.2.3 文本格式化标签 14
1.2.4 文本样式标签 15
1.2.5 常用的图像格式 16
1.2.6 图像标签 16
1.2.7 绝对路径和相对路径 18
1.2.8 特殊字符 19
任务1.3 制作“楼宇资讯”页面 21
1.3.1 无序列表 22
1.3.2 有序列表 24
1.3.3 定义列表 26
1.3.4 列表的嵌套应用 27
任务1.4 制作“校园景观”页面 30
1.4.1 创建超链接 31
1.4.2 锚点超链接 33
1.4.3 链接伪类控制超链接 35
项目小结 38
课后练习 38
项目2 运用CSS3修饰页面 40
任务2.1 制作“杭州七色地铁”页面 40
2.1.1 什么是CSS及其优势 41
2.1.2 CSS样式规则及特点 42
2.1.3 引入CSS样式 43
2.1.4 CSS基础选择器 48
任务2.2 制作“诗词里的杭州”页面 53
2.2.1 字体样式属性 54
2.2.2 文本外观属性 57
任务2.3 制作“爱国名人介绍”页面 69
2.3.1 CSS复合选择器 70
2.3.2 CSS的层叠性和继承性 73
2.3.3 CSS的优先级 75
2.3.4 结构化伪类选择器 78
2.3.5 伪元素选择器 87
项目小结 92
课后练习 92
项目3 实现网页的布局 93
任务3.1 制作“校园简介”页面 94
3.1.1 认识盒子模型 95
3.1.2 ＜div＞标签 96
3.1.3 边框属性 97
3.1.4 内边距和外边距 106
3.1.5 盒子模型的宽度和高度 109
任务3.2 制作“校园新闻”页面 112
3.2.1 设置背景 113
3.2.2 新增背景属性 117
3.2.3 设置多重背景图像 122
3.2.4 颜色不透明度 123
3.2.5 阴影 123
3.2.6 渐变 125
3.2.7 精灵图 129
3.2.8 iconfont 130
任务3.3 制作校园导航 134
3.3.1 元素类型 135
3.3.2 ＜span＞标签 137
3.3.3 元素类型的转换 139
任务3.4 制作校园风景相册 144
3.4.1 布局概述 145
3.4.2 浮动属性 146
3.4.3 清除浮动 148
3.4.4 overflow属性 154
3.4.5 元素定位 156
3.4.6 常用定位模式 157
3.4.7 层叠等级属性 162
任务3.5 制作“打卡校园景观”浮动布局页面 166
3.5.1 单列布局 167
3.5.2 两列布局 168
3.5.3 三列布局 170
3.5.4 通栏布局 172
任务3.6 制作校园楼宇景观弹性导航 178
3.6.1 弹性布局概念 179
3.6.2 Flex容器属性 180
3.6.3 Flex元素属性 183
项目小结 189
课后练习 190
项目4 为网页添加表格和表单 192
任务4.1 制作图书馆楼层分布示意图 193
4.1.1 表格的定义 194
4.1.2 表格的常用属性 195
4.1.3 单元格跨行、跨列 197
4.1.4 表格相关标签学习时的注意点 197
4.1.5 表格语义化 199
任务4.2 制作某高校食堂问卷调查表 202
4.2.1 认识表单 203
4.2.2 熟悉＜input＞标签 204
4.2.3 熟悉＜label＞标签 205
4.2.4 熟悉＜textarea＞标签 206
4.2.5 熟悉＜select＞和＜option＞标签 206
任务4.3 制作某学院学生信息登记表 210
4.3.1 认识＜form＞标签的新增属性autocomplete和novalidate 211
4.3.2 掌握新增的表单标签＜datalist＞和＜output＞ 213
4.3.3 熟悉＜input＞标签的若干新增属性 214
4.3.4 掌握＜input＞标签的新增类型 215
项目小结 220
课后练习 221
项目5 为网页添加多媒体元素和动画 222
任务5.1 制作“校园视频播放”页面 222
5.1.1 音频、视频嵌入技术概述 224
5.1.2 嵌入视频 224
5.1.3 嵌入音频 226
5.1.4 浏览器对音频、视频文件的兼容性 227
5.1.5 控制视频的宽度和高度 228
任务5.2 制作翻转换景动画 233
5.2.1 CSS3过渡属性 234
5.2.2 CSS3 2D变形 237
5.2.3 CSS3 3D变形 244
任务5.3 制作校园风景轮播动画 252
5.3.1 @keyframes规则 253
5.3.2 animation-name属性 254
5.3.3 animation-duration属性 254
5.3.4 animation-timing-function属性 255
5.3.5 animation-delay属性 255
5.3.6 animation-iteration-count属性 256
5.3.7 animation-direction属性 256
5.3.8 animation属性 257
项目小结 263
课后练习 263
项目6 综合项目 264
任务6.1 网站设计规划 265
6.1.1 确定网站主题 265
6.1.2 确定网站架构 265
6.1.3 搜集素材 266
6.1.4 制作网页效果图 266
任务6.2 创建站点 267
6.2.1 站点分析 267
6.2.2 站点创建和管理 268
任务6.3 制作首页 268
6.3.1 首页分析 268
6.3.2 首页页面布局 269
6.3.3 引入外部公共样式 270
6.3.4 制作首页的头部 270
6.3.5 制作首页的导航和banner 272
6.3.6 制作主体内容 274
任务6.4 制作登录页 275
6.4.1 登录页分析 275
6.4.2 登录页实现 276
任务6.5 制作列表页 279
6.5.1 列表页分析 279
6.5.2 列表页实现 280
任务6.6 制作详情页 284
6.6.1 详情页分析 284
6.6.2 详情页实现 285
任务6.7 制作购物车页 290
6.7.1 购物车页分析 290
6.7.2 购物车页实现 291
项目小结 293
课后练习 293