前言

移动互联网时代，基于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月于苏州大学