内容简介
本书面向中、高职初学者，以精心设计的实用案例和通俗易懂的语言详细介绍了使用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
前言/序言
前言
随着互联网的迅猛发展，计算机相关技术更新速度不断加快，社会对互联网人才的要求越来越高、越来越精。无论是专业的网站设计人员，还是网站的设计与制作爱好者，都迫切需要掌握一门网站设计与制作的技术。为了能使初学者少走弯路，找到学习网站相关知识和技术的有力“武器”，我们几位长期从事网页设计与制作的一线教师，编写了此书。
为了学习者能够比较容易理解并快速掌握这门技术，本书站在初学者的角度，从中、高职学生易于学习的角度进行选材，以精心设计的实用案例和通俗易懂的语言详细介绍了使用HTML5与CSS3进行网页设计与制作的各方面内容和技巧，以项目为依托，用任务进行驱动，将基础知识巧妙地融入案例中，着力体现了教、学、做一体化和职业教育的特色。在编写过程中运用了模块化思路，以学生小斌从“菜鸟”开始学习网页设计到能够独立完成个人网站建设为引导线，将教学内容分为HTML5、CSS3、HTML5和CSS3高级应用三个教学模块，从学生认知规律的角度，又将教学内容分为了11个教学任务。
本书具有以下特色：
（1）本书内容对接课程标准，紧跟时代步伐。在任务选取和案例设计，以及知识点和技能点的讲授中，融入了党的二十大所提出的“教育是国之大计、党之大计”的思想。培养什么人、怎样培养人、为谁培养人是教育的根本问题，以此弘扬正能量，引导学生树立正确的人生观和价值观，遵纪守法，爱国敬业。
（2）深入浅出，通俗易懂。编者充分考虑到学生的基础现状，在内容的安排上遵循由浅到深、循序渐进的原则，并与职业能力培养相结合，实现理论与实践一体化，真正做到从零基础开始，使学生掌握一门技能。
（3）本书针对性强、适用范围广。本书适合作为中、高职院校计算机相关专业程序设计类课程的教学使用，也可供网站设计人员、网站爱好者自学使用。通过本书的学习，可以掌握Web前端网页设计技术，为后端（服务器端）技术的学习打下良好的基础。
为方便教师教学，有效提高教学质量，本书配备了教学课件、知识巩固答案、案例代码和素材等丰富的教学资源。
本书虽经过几次修改，但由于编者能力所限，难免会有不妥之处，敬请专家和读者批评指正，如发现书中有任何问题，可以以电子邮件的形式发送至邮箱61341394@qq.com与我们联系，我们将不胜感激。
编者
