教材内容由五个项目组成，第一个概貌体验项目中，将网站开发的环境搭建、编辑调试以及发布测试等能力，html5、css3、javascript等基本技术，网页设计的工具等做一个全方位的阐述；项目二到项目五以递增的方式逐任务地介绍前台设计的方法、技术和工具，使学习者在做中学，学中做。

本书打破传统学科体系构建教材篇章的固有模式，采用以项目为载体、以任务驱动的方式展开叙述，使读者可以在项目实践中学习理论与技术，构建知识体系。本书由6个项目组成，每个项目根据开发的路线分若干工作任务，每个工作任务又划分为技术理论、任务实施和知识拓展等小节，项目工作任务之后还安排了“项目进阶”和“课外实践”，提高读者对项目进行创新改进和自主学习拓展知识的能力。

项目1为概貌体验项目，围绕一个体验网站的配置、调试、部署，介绍了网页设计中的开发环境及工具，网页设计、调试的过程与方法，网站发布的操作步骤等，让读者对网页及设计的相关技术有一个感性认识；项目2到项目6以递增的方式逐任务地介绍网页设计的方法、技术和工具，使读者在做中学、学中做，循序渐进地掌握网页设计的主要技术要点。项目2是一个单页面的个人主页，指导读者学习网页中基本元素的使用方法和CSS格式化网页元素的方法；项目3是一个较为完整的多页面静态网站，使用了Bootstrap进行响应式网页设计，页面采用了目前流行的扁平化风格，简洁大方；项目4通过一个购物车页面的制作，比较全面地讲解了JavaScript的基本语法和应用；项目5则是一个十分有趣的游戏软件开发，学习的重点是jQuery技术；项目6是一个手机网页应用项目，充分体现了HTML5在移动应用开发方面的优势，其中穿插的知识点则是HTML5本地存储和JSON数据格式等新技术。

本书是第二版，在第一版的基础上做了较大的改进，主要内容如下。

（1） 本书为微课版教材，配套了80余个制作精良的微课。微课的内容基本覆盖了教学的重点和难点，特别是代码编写中的困难之处。微课是以比赛要求制作的，保证画面和音质的清晰程度。

（2） 本书中项目式的内容是新增加的，主要覆盖的知识点是JavaScript基础知识和应用。

（3） 加强了基础知识的讲解，除知识准备以外，在部分章节中增加了“关联知识”的小节，以便把涉及的知识点讲解透彻。

（4） 更改了第一版中的错误。

本书的第一版得到了许多同行的认可，被三十几所大专院校选为教材，在此，我们对这些同人深表感谢，这也鞭策我们更加尽心尽力地做好改编工作。现在我们希望第二版能够继续得到广大同人和读者的认可。

学习本书建议安排的总学时数为90学时，编者根据自己教学的经验安排了一个大概的学时分配，供广大教师或学员参考，同时附上学时分配与微课数量表，目前各章节配套的微课数量如下表所示。学时分配与微课数量表

项目学 时 分 配微 课 数 量项目186项目21225项目32017项目41611项目5127项目61815实训4合计9081本书微课观看方法： 先扫描书后刮刮卡的二维码，再扫描正文中对应的微课二维码。

本书由李琳、冯益斌主编，由教材团队完成编写工作。在编写过程中得到许多专家、同事和企业同人的帮助，在此要特别感谢车金庆、严正宇、邵姣及企业专家李军等人。

在本书编写过程中，我们力求科学、严谨，但由于精力、人力有限，疏漏之外在所难免，敬请广大读者批评、指正。

编者2020年4月

项目1概貌体验项目： 初识网站1

11项目介绍1

12任务1开发环境搭建1

1.2.1工作任务1

1.2.2技术理论1

1.2.3任务实施2

1.2.4知识拓展4

13任务2认识网站与网页5

1.3.1工作任务5

1.3.2技术理论5

1.3.3任务实施14

1.3.4知识拓展16

14任务3编辑与调试18

1.4.1工作任务18

1.4.2任务实施18

15任务4发布与测试19

1.5.1工作任务19

1.5.2任务实施19

1.5.3知识拓展21

16技术要点23

17项目进阶24

18课外实践24

项目2入门项目： 个人主页网站设计25

21项目介绍25

22知识准备25

2.2.1HTML及HTML文件26

2.2.2HTML5及其文件基本结构30

2.2.3CSS基础352.2.4CSS选择器36

2.2.5CSS盒子模型38

2.2.6常用CSS属性39

2.2.7CSS3简介48

23任务1网站规划与设计50

2.3.1个人主页的布局分析50

2.3.2相关知识： 网页布局简介51

2.3.3个人主页的布局的实现53

24任务2个人简介模块55

2.4.1个人简介模块的制作55

2.4.2关联知识： 相对路径和绝对路径58

25任务3教育经历模块58

2.5.1关联知识： 表格元素与样式58

2.5.2教育经历模块的制作60

26任务4个人专长模块63

2.6.1个人专长模块的制作63

2.6.2关联知识： CSS定位机制66

27任务5工作经历模块69

28任务6作品图集模块69

29任务7与我联系模块72

2.9.1关联知识： 列表元素及样式72

2.9.2与我联系模块的制作74

210任务8导航模块76

2.10.1关联知识： 超链接元素及样式76

2.10.2导航模块的制作77

211项目进阶79

212课外实践79

项目3进阶项目： 教育门户网站前台设计80

31项目介绍80

32知识准备80

3.2.1Bootstrap基础80

3.2.2CSS3多媒体查询92

33任务1网站规划与设计93

3.3.1网站设计需求93

3.3.2网站风格定位94

3.3.3网站结构布局94

34任务2学院首页94

3.4.1标题区域设计95

3.4.2导航区域设计98

3.4.3巨屏区域设计102

3.4.4图文区域1设计105

3.4.5图文区域2设计109

3.4.6图文区域3设计110

3.4.7版权区域设计113

35任务3专业介绍页面115

3.5.1标题区域设计115

3.5.2图文区域设计117

3.5.3分页区域设计119

36任务4“关于我们”页面120

37任务5“最新资讯”页面123

3.7.1资讯区域设计123

3.7.2侧边区域设计127

38任务6“联系我们”页面129

3.8.1联系方式设计130

3.8.2在线提问设计131

39项目进阶134

310课外实践134

项目4提高项目： 购物车页面设计135

41项目介绍135

42知识准备136

43任务1项目规划与设计147

44任务2界面设计148

45任务3编写JavaScript代码150

46项目进阶153

47课外实践153

项目5自主项目： 打地鼠游戏设计154

51项目介绍154

52知识准备155

5.2.1JavaScript数组155

5.2.2jQuery基础156

53任务1系统流程分析166

54任务2设计用户界面167

5.4.1网页布局167

5.4.2地鼠和锤子图片引入169

55任务3系统编码实现169

5.5.1初始化处理169

5.5.2显示和隐藏地鼠函数170

5.5.3敲击函数171

5.5.4开始按钮处理事件171

5.5.5结束按钮处理事件172

5.5.6震动效果函数172

5.5.7绑定事件处理函数172

5.5.8最终实现代码173

56项目进阶177

57课外实践177

项目6综合项目： 个人记账助手设计178

61项目介绍178

62知识准备179

6.2.1Bootstrap 4技术179

6.2.2JSON数据格式179

6.2.3HTML5本地存储（localStorage）技术182

6.2.4AJAX183

63任务1网站规划与设计184

6.3.1网页布局184

6.3.2账目登记表单设计185

6.3.3账目记录列表设计186

6.3.4用户操作流程设计187

64任务2数据结构设计188

6.4.1收支事项列表188

6.4.2账目记录项188

6.4.3账目记录列表189

65任务3系统编码实现190

6.5.1初始化处理190

6.5.2新增账目记录192

6.5.3加载账目列表192

6.5.4编辑和更新账目记录194

6.5.5删除账目记录195

6.5.6用户体验改进195

66项目进阶197

67课外实践197

参考文献198

本书配有微课，以项目任务式编写，教材内容由五个项目组成，第一个概貌体验项目中，将网站开发的环境搭建、编辑调试以及发布测试等能力，html5、css3、javascript等基本技术，网页设计的工具等做一个全方位的阐述；项目二到项目五以递增的方式逐任务地介绍前台设计的方法、技术和工具，使学习者在做中学，学中做。

李琳，工学硕士，副教授，教研室主任，从事计算机专业教学20年，先后教授过《C#程序设计》、《数据结构与算法》、《桌面软件开发》等等多门计算机专业课程。

2008年与邵顺增老师共同主编的，由清华大学出版社出版的高职高专教材《C#程序设计-Windows项目开发》获江苏省精品教材；主编《HTML5+CSS3网站前台设计项目化教程》。