本书面向中、高职初学者，以精心设计的实用案例和通俗易懂的语言详细介绍了使用HTML5与CSS3进行网页设计与制作的各方面内容和技巧，以项目为依托，用任务进行驱动，将基础知识巧妙地融入案例中，着力体现了教、学、做一体化和职业教育的特色。编写过程运用了模块化思路，以学生小斌从“菜鸟”开始学习网页设计到能够独立完成个人网站建设为引导线，将教学内容分为HTML5、CSS3、HTML5和CSS3高级应用三个教学模块。同时，从学生认知规律的角度，将教学内容分为10个教学任务，每一个任务都包括学习目标、任务描述、知识准备、任务实施、知识拓展、知识巩固六个环节。希望学生能够综合运用所学到的网页设计与制作的知识和技巧，在巩固基本知识点和技能点的基础上，实战能力得到进一步提升。
目录
任务一 网页和网站的认识 1
学习目标 1
任务描述 学习网页相关知识 1
知识准备 1
一、网页和网站简介 1
二、网站制作流程 5
任务实现 6
一、网站的配色方案 7
二、网站首页的页面布局 7
知识拓展 网页制作工具使用技巧 7
一、Dreamweaver CC 使用技巧 7
二、HBuilder的使用技巧 9
任务二 制作简单的网页 11
学习目标 11
任务描述 人物简介网页制作 11
知识准备 11
一、认识HTML5 11
二、文本控制标签 16
三、图像标签 21
四、结构性标签 24
五、分组标签 27
六、页面交互性标签 29
七、行内语义性标签 30
任务实现 人物简介网页结构制作 32
一、任务解析 32
二、具体实现 32
知识拓展 34
一、<ruby>标签 34
二、<mark>标签 35
三、<cite>标签 35
知识巩固 36
任务三 运用CSS3美化网页 38
学习目标 38
任务描述 人物简介网页样式设置 38
知识准备 38
一、认识CSS3 38
二、CSS3核心基础 39
三、CSS3文本样式 52
四、CSS3高级属性 67
任务实现 美化人物简介网页 71
一、解析任务 71
二、任务实施 72
知识拓展 73
一、属性选择器 74
二、关系选择器 75
三、伪类选择器 75
知识巩固 78
任务四 运用盒子模型划分网页模块 80
学习目标 80
任务描述 科技引领未来网页布局的制作 80
知识准备 80
一、盒模型 80
二、盒子模型相关属性 84
三、元素概念及类型 103
四、块元素垂直外边距的合并 108
任务实现 科技引领未来网页的布局 109
一、任务解析 109
二、具体实现 109
知识拓展 114
一、图片边框 114
二、阴影效果box-shadow 115
三、box-sizing属性 117
知识巩固 118
任务五 为网页添加列表和超链接 120
学习目标 120
任务描述 制作学生工作部水平导航条 120
知识准备 120
一、列表标签 120
二、CSS控制列表样式 125
三、超链接标签 129
四、CSS伪类定义超链接状态 132
任务实现 制作学生工作部导航条 134
一、任务解析 134
二、任务实施 135
知识拓展 137
一、制作垂直导航条 137
二、导航栏内的下拉菜单 139
知识巩固 142
任务六 为网页添加表格 143
学习目标 143
任务描述 制作革命景区旅游一览表 143
知识准备 143
一、表格标签 143
二、CSS3控制表格样式 158
任务实现 革命景区旅游统计表 163
一、解析任务 164
二、简单表格制作 164
三、使用CSS3样式美化表格 165
知识拓展 167
一、表格的分组标签 167
二、表格内嵌入标签 168
知识巩固 170
任务七 设计表单 171
学习目标 171
任务描述 注册表单的制作 171
知识准备 171
一、认识表单 171
二、表单控件 176
三、CSS3控制表单样式 188
任务实现 制作注册表单 191
一、解析任务 191
二、设计表单样式 192
三、制作简单表单 192
四、美化制作的表单 193
知识拓展 195
知识巩固 196
任务八 运用浮动和定位布局网页 197
学习目标 197
任务描述 时代印记主页制作 197
知识准备 197
一、布局的概述 197
二、布局常用属性 198
三、布局其他属性 212
四、布局和导航 215
五、网页模块命名规范 220
任务实现 制作美丽中国主页 221
一、任务分析 221
二、任务实施 222
知识拓展 225
一、box-sizing 属性 225
二、flexbox属性 226
知识巩固 229
任务九 全新的页面试听技术 230
学习目标 230
任务描述 在网页中插入音视频 230
知识准备 230
一、多媒体对象基础知识 230
二、插入多媒体对象 231
三、CSS控制视频尺寸 237
知识拓展 238
知识巩固 239
任务十 运用特殊效果 240
学习目标 240
任务描述 在展示个人摄影作品中使用特殊效果 240
知识准备 240
一、转换 240
二、过渡 247
任务实现 在展示的摄影作品中使用特殊效果 252
一、页面结构分析 252
二、具体代码实现 252
三、运行后网页的布局效果 254
知识拓展 255
任务十一 综合项目实战 258
任务描述 “光影之旅，逐梦行”网站制作 258
任务实现 258
一、网页设计规划 258
二、使用Hbuilder建立站点项目 260
三、切图 261
四、制作首页 261
五、制作子网页 280
参考文献 292
