前言
移动互联网时代，基于HTML5技术的Web应用得到快速发展，传统设计已经无
法满足多元化需求，网页设计人才缺口巨大。本书旨在培养Web前端开发技术人才，
为后续复杂的Web应用、移动应用开发打下坚实的基础。
Web前端开发涉及的知识和技术广泛，具有很强的操作性和综合实践性，本书
强调实践教学，并且兼顾理论知识。在项目导向和任务驱动模式下，本书内容围绕
职业活动，从实际出发，模拟真实工作情境，采用“逆向推导”的思维方法，根据
实际工作任务讲解相关理论知识，重在培养学生的职业岗位能力。同时通过9个项
目，由浅及深、较为全面地介绍Web前端开发的相关理论，包括HTML5、CSS3和
ECMAScript中最新定义的标准。
本书适用于零基础读者。“授之以鱼，不如授之以渔”。知识在不断地更新变化，
要及时掌握新知识，学习的方式方法尤为重要。本书通过项目教学引导读者入门，旨
在引导读者掌握Web前端开发的基本方法和技巧。
本书主要特色是源代码教学、项目导向和任务驱动、分阶段教学。
1.源代码教学
本书侧重源代码教学，突出介绍HTML、CSS、JavaScript，使读者能够熟练使用
HTML代码设计网站内容，使用CSS设计页面样式，使用JavaScript实现网站的动态性。
希望读者通过学习，能做到“知其然，知其所以然”。
2.项目导向和任务驱动
本书重点突出项目式教学，书中9个项目从个人到企业，从PC端到移动端，涵
盖了目前常见的Web应用场景。每个项目搭载若干任务，以任务驱动学习，由浅及深、
较为全面地介绍Web前端开发的相关知识及技巧。本书注重知识内容的实用性和综合
性，侧重实用设计方法、设计技能和设计过程的讲述。
3.分阶段教学
本书内容共5篇，分别是开篇、个人网站设计篇、企业网站设计篇、行业网站设
计篇以及响应式网站设计篇。分阶段的教学内容使读者能在不同的阶段掌握不同的技
能要求，以适应不同的岗位需求。
Web
II
前端开发与项目实践
●开篇：旨在让读者建立起网页设计技术的基本认识，使读者能够搭建并制作一
个简单的网站。
●个人网站设计篇：侧重静态网页的基础教学，重点介绍HTML与CSS的基
础知识。通过该篇的学习，可使读者掌握界面风格较为简单的静态网页设计
方法。
●企业网站设计篇：侧重静态网页的进阶教学，重点介绍HTML与CSS的进阶
知识。通过该篇的学习，使读者能够设计出界面风格更复杂、灵活的网页。
●行业网站设计篇：侧重动态网页的教学，重点介绍HTML与JavaScript的相关
知识。通过该篇的学习，使读者可以掌握交互性网站的设计方法，为今后复杂
的Web应用开发的学习打好基础。
●响应式网站设计篇：该篇属于拓展知识，主要介绍如何利用主流的前端开发技
术快速设计出适应不同设备的网站。
本书项目1、2、6、7由魏慧编写，项目4、5、8、9由胡沁涵编写，项目3由魏慧、
胡沁涵共同编写，由魏慧负责统稿。本书的编写得到苏州大学计算机科学与技术学院
和苏州城市学院的大力支持。由于作者水平有限，不足之处在所难免，恳请广大读者
和同行提出宝贵意见，在此深表感谢！
作 者
2023年1月于苏州大学