第2版前言

前端开发是创立Web页面或APP等前端界面呈现给用户的过程，经过HTML、CSS、

JavaScript以及衍生出来的各种技术和框架等，来完成互联网产品的用户界面交互。随着互

联网和数字经济的快速发展，企业对Web前端技术岗位的需求越来越大。虽然Web前端

开发技术和框架层出不穷，但是无论是PC端还是移动端，HTML、CSS和JavaScript都是

学习的基础。

结合Web技术的最新发展，本书在第1版的基础上进行了修订，精简了部分内容和案

例，增加了对主流Web前端框架技术的介绍，增加了综合案例项目，使得教材更加符合学

生的学习特点，更好地满足教师的授课需求。

修订后的教材具有以下特点：

（1）突出课程思政特色。坚持“知识探究—能力构建—价值引领”三位一体的教学

目标，增加了对中国优秀企业网站、国产Web前端技术和框架、网络信息内容生态治理等

内容的介绍，明确了每个项目的思政目标。引导学生形成Web前端开发的职业道德、工匠

精神、法治意识、审美素养和创新思维，为学生在基于互联网的技术和商业融合实践中，

形成正确的理想信念、价值取向和社会责任等打下基础。

（2）倡导科技自立自强。党的二十大报告指出：“加快推进科技自立自强。”国产

HBuilder、Vue框架等已经成为Web前端主流的开发工具和技术。书中加入了对国产Web

前端开发工具HBuilder和Vue的介绍，引导学生认识国产软件的优势，让学生更加尊重和

信任我们自己的技术，倡导科技自立自强，增强民族自豪感和自信心。

（3）强化综合应用能力。基于学生的学习特点和教师的授课要求，在原有4个项目

的基础上，增加了网站设计与开发综合案例，通过一个完整的项目串联Web前端开发的主

要知识和技能点，培养学生的实践应用能力。综合案例既可以作为前面4个项目的同步学

习案例，也可以作为本课程的综合实训项目。

（4）体例新颖。基于 Web 前端设计工作过程，将网站建设项目逐步分解，提取典

型任务，内容由浅入深，循序渐进。每个学习任务均包括学习目标、学习任务结构图、关

键知识点、典型案例、拓展案例、任务小结、技能训练等板块，结构清晰。学习任务结构

图有助于读者将零散知识点归纳为系统的知识结构，技能训练可以帮助读者巩固所学知识

和技能。

Web前端设计基础（第2版）

II

（5）案例丰富。本书是中国大学 MOOC“Web 前端设计基础”的配套教材，线上慕

课学习资源丰富，可以为教师开展混合式教学提供支持。在每个学习任务中，本书结合关

键技术和难点，穿插了大量的示例并配有效果图，扫描二维码即可观看相应知识点示例的

视频操作和讲解。本书提供所有案例的程序源代码，可帮助读者快速地理解与掌握相关

内容。

本书的分工如下：项目1由北京联合大学李丹丹副教授编写和修订，项目2由北京联

合大学李立威教授编写和修订，项目3由北京联合大学王晓红教授编写和修订，项目4由

北京联合大学王艳娥老师编写和修订，项目5由北京联合大学薛晓霞副教授编写和修订。

李立威教授负责全书的统稿和修改工作。

本书的编写得到了北京联合大学电子商务国家级一流本科专业建设点的大力支持，在

此表示衷心的感谢。由于编写时间仓促，作者水平有限，书中难免有不妥之处，恳请各位

读者和专家批评指正。

 编者

 2023年2月