HTML5+CSS3前端开发项目式教程（微课版）

任务驱动：以网站设计与开发的工作任务为主线，按项目化教学方式编排。

目标明确：每个任务给出明晰的知识目标和能力目标。

步骤清晰：详细讲解任务的实现步骤。

随着互联网技术的高速发展，移动智能设备的使用变得普遍，人们可以随时随地获取信息和服务，而网页作为互联网的信息载体之一，可以为用户带来直观的、全面的体验。HTML5和CSS3是Web前端开发的最新技术，大部分浏览器已支持HTML5和CSS3技术。HTML5是最新的HTML标准，是专门为承载丰富的Web内容而设计的，并且无需额外插件，它拥有新的语义、图形和多媒体等元素。CSS3在原有基础上增加了更多的CSS选择器和更多实用的高级属性，可以实现更简单但更为强大的页面效果和网页交互功能。在目前网页制作行业中，HTML5与CSS3技术以它们独有的优点在业内得到了广泛应用。

HTML5和CSS3技术作为前端开发的入门技术，是Web前端开发技术人员必须扎实掌握的职业技能，也是高职高专院校相关专业学生应该熟练掌握的技术。本书是针对高职高专院校互联网应用技术专业学生的培养目标进行编写的，注重学生职业能力与职业技能的培养，通过本书的学习，学生可以熟练掌握HTML5+CSS3前端开发基础知识与应用。本书还参考了《Web前端开发职业技能等级标准》，重构并序化了教学内容，以项目为载体，结合教材内容合理地安排教学任务。本书分为基础项目与综合项目，其中，基础项目主要包括文本类网页、列表类网页、超链接网页、表格类网页、表单类网页、综合布局网页、动画效果网页；综合项目包括网站设计与制作的准备、网站首页、二级页面、三级页面的制作。

全书内容以项目化教学的方式进行编排，全面系统地阐述了HTML5和CSS3的基础知识和实际运用技术。本书以任务驱动的方式安排教学内容，将每个项目按工作流程分为若干任务，每个任务又设计了以下几个模块：

· 任务目标：明确任务的知识目标和能力目标。

· 任务效果：说明任务运用的基础知识及任务完成的最终效果。

· 相关知识：提供完成任务需要掌握的基础知识和实际运用技术。

· 实现步骤：详细讲解任务的实施步骤。

· 思考与练习：根据Web前端开发初级的1+X证书考点整理出任务相关的理论题和操作题。

本书以网站设计与开发的工作任务为主线，内容讲解详细、结构编排科学、语言通俗易懂，以接近真实的网站项目为依托，知识涵盖面广。

本书由河源职业技术学院的谭卫老师组织编写，谭卫、徐文义任主编，安华萍、王玉、钟机灵、段春梅（佛山职业技术学院）任副主编。在本书编写过程中，编者参考了相关技术的资料文献、书籍及网络资源，在此表示感谢。

由于编者水平有限，书中难免存在疏漏甚至错误之处，恳请读者批评指正，以便进一步完善与改进，编者E-mail：99150752@qq.com。

前言

项目1 建立文本类网页 1
任务1 网页内容构建 1
任务目标 1
任务效果 1
相关知识 2
实现步骤 18
任务2 页面样式修饰 21
任务目标 21
任务效果 22
相关知识 22
实现步骤 37
思考与练习 39
项目2 建立列表多媒体类网页 43
任务1 页面内容构建 43
任务目标 43
任务效果 43
相关知识 45
实现步骤 55
任务2 页面样式修饰 58
任务目标 58
任务效果 58
相关知识 59
实现步骤 70
思考与练习 73
项目3 建立超链接 76
任务1 页面内容构建 76
任务目标 76
任务效果 76
相关知识 77
实现步骤 81
任务2 页面样式修饰 84
任务目标 84
任务效果 85
相关知识 85
实现步骤 99
思考与练习 101
项目4 建立表格页 103
任务1 案例展示页制作 103
任务目标 103
任务效果 103
相关知识 104
实现步骤 112
任务2 案例详情页制作 116
任务目标 116
任务效果 117
相关知识 117
实现步骤 126
思考与练习 128
项目5 建立表单类网页 131
任务1 表单页建立 131
任务目标 131
任务效果 131
相关知识 132
实现步骤 139
任务2 表单页验证 141
任务目标 141
任务效果 141
相关知识 142
实现步骤 149
思考与练习 150
项目6 建立综合类网页 154
任务1 网页布局 154
任务目标 154
任务效果 154
相关知识 155
实现步骤 173
任务2 网页头部与尾部制作 174
任务目标 174
任务效果 175
相关知识 175
实现步骤 178
任务3 网页主体部分制作 180
任务目标 180
任务效果 181
相关知识 181
实现步骤 188
思考与练习 193
项目7 网页动画制作 196
任务1 过渡效果制作 196
任务目标 196
任务效果 196
相关知识 197
实现步骤 204
任务2 动画效果制作 204
任务目标 204
任务效果 205
相关知识 205
实现步骤 224
思考与练习 225
项目8 综合实战—企业网站设计与制作 229
任务1 网站设计与制作准备 229
任务2 网站首页制作 234
任务3 网站二级列表页面制作 245
任务4 网站三级内容页面制作 253
思考与练习 256
参考文献 257

1. C语言程序设计实验教程 [张小刚 司春景]
2. 电气控制与PLC程序设计（第二版） [胡冠山]
3. Java Web项目化设计实践教程 [邱云 曾陈萍]
4. C语言程序设计（第三版） [主编 丁红 王立新 蔡开立]
5. Python数据分析 [主编　冯志辉　赵磊　李放]
6. Python程序设计与应用（第二版） [主编 张广渊]
7. C程序设计实践教程 [刘卫国]
8. C程序设计（慕课版） [刘卫国]
9. 程序设计基础实践教程（C/C++语言版） [张桂芬 葛丽娜]
10. C++案例项目精讲 [主编 杨国兴]
11. SwiftUI完全开发 [李智威 著]
12. MySQL数据库项目式教程 [陈亚峰]
13. C语言程序设计习题与实验指导（第二版） [主编 甄增荣 张宾]
14. C语言程序设计（第二版） [主编 甄增荣 田云霞]
15. Unity3D虚拟现实应用开发实践 [主 编 刘龙]
16. Python程序设计 [主编 姜春磊 陈虹洁]
17. C语言程序设计实践教程（活页式） [主编 郑茵 陈巍 滕泓虬]
18. 面向对象程序设计 [主编 张勇 张平华 赵小龙]
19. Python程序设计基础及实战 [主编　刘健]
20. C语言程序设计 [姜雪]
21. Python程序设计实践教程 [王鹤琴 蔡正保]
22. C++程序设计实践教程（第三版） [主编 刘卫国 曹岳辉]
23. C++程序设计（第三版） [主编 曹岳辉 刘卫国]
24. C语言程序设计项目化教程（活页式） [主编 张利华 潘晓利]
25. 机器人流程自动化（RPA）实战——基于UiPath [主编　金鑫]
26. Python 语言程序设计实践指导 [主编　张双狮]
27. Python程序设计案例教程 [主编 毛锦庚 钟肖英 周贤来 ]
28. 基于.NET Core框架的分布式系统架构设计 [汤佳 著]
29. Python语言程序设计教程 [郭其标 房宜汕]
30. Python程序设计 [李国燕 王新强 刘佳 等编著]