《HTML5+CSS3网页设计任务驱动教程》是针对零基础网页设计人员全新研发的入门教程。在网页制作中，HTML5与CSS3是网页制作技术的核心和基础，也是每个网页制作人员必须要掌握的技术。本书以任务引导的形式，结合课堂需求将HTML5与CSS3的内容项目化，每一个项目均包含多个任务案例。
全书共8个项目，项目1~项目2主要讲了HTML5与CSS3的基础知识。包括基础标签、常用属性和开发工具等。项目3~项目7分别讲解了盒子模型、布局、表格、表单、音频、视频、动画、canvas等内容，这些内容时网页制作的核心。项目8是一个综合项目，结合前面学习的基础知识，带领初学者制作了电商网站的四个页面。
本书附有配套视频、源代码、习题、教学PPT等，教学资源丰富 。本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材，是一本适合网页制作、美工设计、网站开发、网页编程等行业人员阅读与参考的优秀读物
1.任务驱动，案例形式新颖。
2.加入思政元素，注重素质和技能双重教育。
3.配备综合项目，提升实操技能。
项目1 从零构建HTML5页面 【任务1-1】创建HTML5页面 任务目标 任务分析 知识储备 1. 认识网页 2. 浏览器 3. Web标准 4. 网页制作工具 5. Visual Studio Code的安装、设置 6. Visual Studio Code的使用 任务实现 【任务1-2】个人简介 任务目标 任务分析 知识储备 1. 认识HTML 2. HTML文档结构 3. 标签分类 4. 标签属性 5. HTML文档头部相关标签 6. 文本格式化标签 7. 文本样式标签 任务实现 【任务1-3】风云人物 任务目标 任务分析 知识储备 1. 常见图像格式 2. 图像标签 3. 相对路径和绝对路径 4. 特殊字符 任务实现 【任务1-4】电商页面 任务目标 任务分析 知识储备 1. 创建超链接 2. 锚点链接 3. 链接伪类控制超链接 任务实现 【任务1-5】植物科普 任务目标 任务分析 知识储备 1. 无序列表标签 2. 有序列表标签 3. 定义列表标签 4. 列表的嵌套应用 任务实现 项目总结 课下作业 项目2 运用CSS3美化网页 【任务2-1】数字变色 任务目标 任务分析 知识储备 1. 认识CSS 2. CSS样式规则 3. 引入CSS样式表 4. CSS基础选择器 任务实现 【任务2-2】新闻报道 任务目标 任务分析 知识储备 1. 字体样式属性 2. 文本外观属性 3. 列表样式属性 任务实现 【任务2-3】黑马知道 任务目标 任务分析 知识储备 1. CSS复合选择器 2. CSS层叠性和继承性 3. CSS优先级 任务实现 【任务2-4】人物介绍 任务目标 任务分析 知识储备 1. 结构化伪类选择器 2. 伪元素选择器 任务实现 项目总结 课下作业 项目3 运用盒子模型划分网页模块 【任务3-1】音乐模块 任务目标 任务分析 知识储备 1. 认识盒子模型 2. <div>标签 3. 边框属性 任务实现 【任务3-2】用户中心 任务目标 任务分析 知识储备 1. 内边距属性 2. 外边距属性 3. 盒子的宽与高 任务实现 【任务3-3】背景拼图 任务目标 任务分析 知识储备 1. 设置背景颜色 2. 设置背景图像 3. 设置背景图像平铺 4. 设置背景图像的位置 5. 设置背景图像固定 6. 设置背景图像的大小 7. 设置背景的显示区域 8. 设置背景的裁剪区域 9. 设置多重背景图像 10. 综合设置元素的背景 任务实现 【任务3-4】图标导航栏 任务目标 任务分析 知识储备 1. 元素类型 2. <span>标签 3. 元素类型的转换 任务实现 【任务3-5】相框 任务目标 任务分析 知识储备 1. 颜色透明度 2. 阴影 3. 渐变 任务实现 项目总结 课下作业 项目4 运用float、position和flex属性完成网页布局 【任务4-1】商品展示 任务目标 任务分析 知识储备 1. 布局概述 2. 浮动属性 3. 清除浮动 任务实现 【任务4-2】手机页面展示 任务目标 任务分析 知识储备 1. overflow属性 任务实现 【任务4-3】行程定位 任务目标 任务分析 知识储备 1. 元素的定位 2. 静态定位 3. 相对定位 4. 绝对定位 5. 固定定位 6. 层叠等级属性 任务实现 【任务4-4】浮动布局网页 任务目标 任务分析 知识储备 1. 单列布局 2. 两列布局 3. 三列布局 4. 网页模块命名规范 任务实现 【任务4-5】弹性布局导航 任务目标 任务分析 知识储备 1. 认识弹性布局 2. Flex容器属性 3. Flex元素属性 任务实现 项目总结 课下作业 项目5 为网页添加表格和表单 【任务5-1】简历表 任务目标 任务分析 知识储备 1. 创建表格 2. 表格标签的属性 3. 表格的结构 4. CSS控制表格样式 任务实现 【任务5-2】用户调研表 任务目标 任务分析 知识储备 1. 认识表单 2. 创建表单 3. <input />标签 4. <textarea>标签 5. <select>标签 任务实现 【任务5-3】信息登记表 任务目标 任务分析 知识储备 1. 新的input控件类型 2. 新的表单标签 3. 新的<input />标签属性 4. 新的<form>标签属性 5. CSS控制表单样式 任务实现 项目总结 课下作业 项目6 为网页添加视频、音频和动画 【任务6-1】电影播放界面 任务目标 任务分析 知识储备 1. 视频、音频嵌入技术概述 2. 嵌入视频 3. 嵌入音频 4. 浏览器对视频、音频文件的兼容性 5. 控制视频宽度和高度 任务实现 【任务6-2】导航栏渐变 任务目标 任务分析 知识储备 1. transition-property属性 2. transition-duration属性 3. transition-timing-function属性 4. transition-delay属性 5. transition属性 任务实现 【任务6-3】卡片翻转动画 任务目标 任务分析 知识储备 1. 2D变形 2. 3D变形 任务实现 【任务6-4】宝石旋转 任务目标 任务分析 知识储备 1. @keyframes规则 2. animation-name属性 3. animation-duration属性 4. animation-timing-function属性 5. animation-delay属性 6. animation-iteration-count属性 7. animation-direction属性 8. animation属性 任务实现 动手实践 项目7 运用canvas在网页中绘图 【任务7-1】M字母 任务目标 任务分析 知识储备 1. 引入JavaScript文件 2. 变量 3. document对象 4. 认识画布 5. 使用画布 6. 绘制线 任务实现 【任务7-2】火柴人 任务目标 任务分析 知识储备 1. 线的样式 2. 线的路径 3. 填充路径 4. 绘制圆 任务实现 项目总结 课下作业 项目8 HTML5+CSS3网页制作的综合运用 【任务8-1】网站设计规划 1. 确定网站的主题 2. 规划网站结构 3. 收集素材 4. 设计网页效果图 【任务8-2】建立项目文件夹 【任务8-3】切图 【任务8-4】搭建首页 任务分析 首页制作 1. 页面布局 2. 定义公共样式 3. 制作首页的头部和导航 4. 制作banner 5. 制作主体内容 6. 制作底部版权信息部分 【任务8-5】配置用户代码片段 1. 设置公共样式代码 2. 安装和使用Snippet Generator插件 3. 设置公共结构代码 【任务8-6】搭建注册页 任务分析 注册页制作 【任务8-7】搭建个人中心页 任务分析 个人中心页制作 【任务8-8】搭建视频播放页 任务分析 视频播放页制作 项目总结 课下作业
