Web前端开发项目实践教程

近年来，随着物联网、人工智能、大数据等新技术的崛起，对Web前端开发人才的需求日益增多，同时要求从业人员必须与时俱进地更新知识结构，提升职业素养。2018年是国家的本科教学工作年，先后发布了《关于加快建设高水平本科教育全面提高人才培养能力的意见》(教高〔2018〕2 号)和《关于狠抓新时代全国高等教育本科教育工作会议精神落实的通知》(教高〔2018〕8 号)等文件，强调要为本科“增负”，严把出口关，打造有挑战度、有难度、有深度的“金课”，全面提高本科教学质量。
编者根据提出的打造“金课”的要求，结合多年来从事Web前端开发相关课程的教学经验，编写了本教材。教材体系结构如下图所示。

教材特色： 
(1) 项目驱动。教材以Web前端核心技术HTML5、CSS3与 JavaScript为知识主线，以项目需求重构知识体系，通过项目描述
→项目分析→项目知识点分解→知识点解析→知识点检测→项目实现→项目总结→能力拓展，在项目实践中强化知识的理解与创新应用，从而提升学习者的问题解决能力、项目开发能力和创新实践能力。
(2) 思政特色。坚持“育人为本、德育为先”。教材中项目的设置融入了职业素养、中国传统文化、铁军精神、交流协作等思政内容，实现了课程思政与专业学习深度融合，使学生在潜移默化中树立正确的职业观念、政治信念和积极的人生态度等。
(3) 资源丰富。编者在中国大学MOOC平台建有SPOC课程，项目案例的素材及源文件、重点知识点对应的微视频、知识点检测、项目拓展训练等资源丰富。

教学方法建议： 
(1) 案例教学法。赏析教材中的案例，构建问题情境，解读网站内容并剖解分析技术要点，引导学生完成具有一定思想性的案例开发。
(2) 项目驱动法。在项目实施过程中，以任务或问题为驱动，组织学生积极参与既定的前端职业素养和要求、中国传统文化、地区特色文化等项目网站素材的搜集，引起学生的情感共鸣，激发学生对网站内容和表现技术的积极探究。
(3) 翻转课堂教学方法。课前通过中国大学MOOC或蓝墨云班课等在线学习平台知晓项目任务，自主学习知识点微视频，完成微习题、讨论等； 课中通过头脑风暴对网站素材进一步优化，协作解决问题，促进知识内化与应用，并进行项目开发； 课后进行拓展创新、项目评价。
学习方法建议： 
(1) 在线学习，提升自主学习能力。教材依托中国大学MOOC平台建设了SPOC课程，有丰富的视频、课件、富文本、讨论、测验等资源，学习者可以联系作者申请加入，自主学习。
(2) 项目实践，提升实践创新能力。教材设计的项目情境真实，利于知识的理解与应用。建议学习者从教材提供的项目中学会提出问题、解决问题，并能应用知识进行项目的创新拓展，提升职业能力和素养。
(3) 协作学习，提升交流协作能力。建议组建2~3人的协作学习小组，小组成员通过项目研讨、任务分解、疑难问题探究、项目拓展创新等协作，提升学习热情。
本教材由陈劲新总体策划，拟定大纲与体系设计。张德成、张辉负责课程思政策划，第六、七模块部分内容由徐华平编写，其余部分由陈劲新编写，并由陈劲新进行*后的统稿。教材编写中得到了王植青、万小霞、余群等
的帮助，项目代码的检查得到了庞蕴奇、徐诚、李玟涵等的帮助，在此表示感谢！
本教材在编写过程中，参考和引用了相关的教材和期刊论文资料，其中的主要来源在参考文献中列出，如有遗漏， 恳请原谅，在此对这些书刊、文章的作者表示衷心的感谢！
本教材是2020年江苏省教育科学“十三五”规划课题“基于SPOC课程的混合式教学模式在高校时代新人培育中的应用研究”(项目编号： Cc/2020/01/06)、2018年江苏高校哲学社会科学研究基金项目“新工科背景下一般地方本科院校人才培养方案重构研究”(项目编号： 2018SJA1524)、2019年江苏省高等教育教改立项研究课题“产教融合背景下一般地方高校新工科人才培养体系探索与实践”(项目编号： 2019JSJG160)的成果。
由于编者水平有限，加之编写时间仓促，书中难免存在疏漏和不足，恳请广大读者批评指正。

陈劲新
2020年8月

于盐城师范学院

本教材介绍web前端开发技术理念，以项目为导向，实施项目过程中讲解前端开发技术和策略，包括HTML5语义化标签、文本、图像、表单、画布、音视频标签等；CSS3基础知识、引入方法以及背景、阴影和渐变、圆角边框、过渡和变形效果等设置；JavaScript基础知识、函数、对象、事件等的使用等。

陈劲新，讲师，研究生，硕士。
参编教材：《现代教育技术》，2014.7，浙江大学出版社；
参编教材：《现代教育技术》，2017.8，上海交通大学出版社。
公开发表论文10多篇，主持校级课题多项。
长期从事网页设计与制作等相关课程的理论教学与实践指导工作。

模块一Web前端开发基本认识

项目1.1“走进Web前端开发”网站“欢迎页”设计

1.1.1项目描述

1.1.2项目分析

1.1.3项目知识点分解

1.1.4知识点解析

1.1.5知识点检测

1.1.6项目实现

1.1.7项目总结

项目1.2“走进Web前端开发”网站首页设计

1.2.1项目描述

1.2.2项目分析

1.2.3项目知识点分解

1.2.4知识点解析

1.2.5知识点检测

1.2.6项目实现

1.2.7项目总结

1.2.8能力拓展

模块二文本类网页

项目2.1“走进Web前端开发”网站“职业认识”页面设计

2.1.1项目描述

2.1.2项目分析

2.1.3项目知识点分解

2.1.4知识点解析

2.1.5知识点检测

2.1.6项目实现

2.1.7项目总结

项目2.2“走进Web前端开发”网站“核心概念”页面设计

2.2.1项目描述

2.2.2项目分析

2.2.3项目知识点分解

2.2.4知识点解析

2.2.5知识点检测

2.2.6项目实现

2.2.7项目总结

2.2.8能力拓展

模块三图文类网页

项目3.1“盐城文化风情”网站首页设计

3.1.1项目描述

3.1.2项目分析

3.1.3项目知识点分解

3.1.4知识点解析

3.1.5知识点检测

3.1.6项目实现

3.1.7项目总结

项目3.2“图说我们盐城”页面设计

3.2.1项目描述

3.2.2项目分析

3.2.3项目知识点分解

3.2.4知识点解析

3.2.5知识点检测

3.2.6项目实现

3.2.7项目总结

3.2.8能力拓展

模块四网页布局

项目4.1“人民铁军”网站首页设计

4.1.1项目描述

4.1.2项目分析

4.1.3项目知识点分解

4.1.4知识点解析

4.1.5知识点检测

4.1.6项目实现

4.1.7项目总结

项目4.2“人民铁军”网站“铁军由来”页面设计

4.2.1项目描述

4.2.2项目分析

4.2.3项目知识点分解

4.2.4知识点解析

4.2.5知识点检测

4.2.6项目实现

4.2.7项目总结

4.2.8能力拓展

项目4.3“人民铁军”网站“战斗历程”页面设计

4.3.1项目描述

4.3.2项目分析

4.3.3项目知识点分解

4.3.4知识点解析

4.3.5项目实现

4.3.6项目总结

4.3.7能力拓展

模块五表单页面

项目5.1“走进Web前端开发”网站“登录”表单设计

5.1.1项目描述

5.1.2项目分析

5.1.3项目知识点分解

5.1.4知识点解析

5.1.5知识点检测

5.1.6项目实现

5.1.7项目总结

项目5.2“走进Web前端开发”网站“联系我们”表单设计

5.2.1项目描述

5.2.2项目分析

5.2.3项目知识点分解

5.2.4知识点解析

5.2.5知识点检测

5.2.6项目实现

5.2.7项目总结

5.2.8能力拓展

模块六音视频页面

项目6.1“中国淮剧”网站“流派艺术”页面设计

6.1.1项目描述

6.1.2项目分析

6.1.3项目知识点分解

6.1.4知识点解析

6.1.5知识点检测

6.1.6项目实现

6.1.7项目总结

项目62“中国淮剧”网站“经典剧目”页面设计

6.2.1项目描述

6.2.2项目分析

6.2.3项目知识点分解

6.2.4知识点解析

6.2.5知识点检测

6.2.6项目实现

6.2.7项目总结

6.2.8能力拓展

模块七响应式网页布局

项目7.1“课程学习汇报交流”网站首页设计

7.1.1项目描述

7.1.2项目分析

7.1.3项目知识点分解

7.1.4知识点解析

7.1.5知识点检测

7.1.6项目实现

7.1.7项目总结

7.1.8能力拓展

项目7.2“中国淮剧”网站首页Bootstrap重构

7.2.1项目描述

7.2.2项目分析

7.2.3项目知识点分解

7.2.4知识点解析

7.2.5知识点检测

7.2.6项目实现

7.2.7项目总结

7.2.8能力拓展

参考文献