移動互聯(lián)網(wǎng)時代，基于HTML5技術的Web應用得到快速發(fā)展，傳統(tǒng)設計已經無
法滿足多元化需求，網(wǎng)頁設計人才缺口巨大。本書旨在培養(yǎng)Web前端開發(fā)技術人才，
為后續(xù)復雜的Web應用、移動應用開發(fā)打下堅實的基礎。

Web前端開發(fā)涉及的知識和技術廣泛，具有很強的操作性和綜合實踐性，本書
強調實踐教學，并且兼顧理論知識。在項目導向和任務驅動模式下，本書內容圍繞
職業(yè)活動，從實際出發(fā)，模擬真實工作情境，采用逆向推導的思維方法，根據(jù)
實際工作任務講解相關理論知識，重在培養(yǎng)學生的職業(yè)崗位能力。同時通過9個項
目，由淺及深、較為全面地介紹Web前端開發(fā)的相關理論，包括HTML5、CSS3和
ECMAScript中最新定義的標準。

本書適用于零基礎讀者。授之以魚，不如授之以漁。知識在不斷地更新變化，
要及時掌握新知識，學習的方式方法尤為重要。本書通過項目教學引導讀者入門，旨
在引導讀者掌握Web前端開發(fā)的基本方法和技巧。

本書主要特色是源代碼教學、項目導向和任務驅動、分階段教學。

1.源代碼教學

本書側重源代碼教學，突出介紹HTML、CSS、JavaScript，使讀者能夠熟練使用
HTML代碼設計網(wǎng)站內容，使用CSS設計頁面樣式，使用JavaScript實現(xiàn)網(wǎng)站的動態(tài)性。
希望讀者通過學習，能做到知其然，知其所以然。

2.項目導向和任務驅動

本書重點突出項目式教學，書中9個項目從個人到企業(yè)，從PC端到移動端，涵
蓋了目前常見的Web應用場景。每個項目搭載若干任務，以任務驅動學習，由淺及深、
較為全面地介紹Web前端開發(fā)的相關知識及技巧。本書注重知識內容的實用性和綜合
性，側重實用設計方法、設計技能和設計過程的講述。

3.分階段教學

本書內容共5篇，分別是開篇、個人網(wǎng)站設計篇、企業(yè)網(wǎng)站設計篇、行業(yè)網(wǎng)站設
計篇以及響應式網(wǎng)站設計篇。分階段的教學內容使讀者能在不同的階段掌握不同的技
能要求，以適應不同的崗位需求。

Web

II

前端開發(fā)與項目實踐

●開篇：旨在讓讀者建立起網(wǎng)頁設計技術的基本認識，使讀者能夠搭建并制作一
個簡單的網(wǎng)站。
●個人網(wǎng)站設計篇：側重靜態(tài)網(wǎng)頁的基礎教學，重點介紹HTML與CSS的基
礎知識。通過該篇的學習，可使讀者掌握界面風格較為簡單的靜態(tài)網(wǎng)頁設計
方法。
●企業(yè)網(wǎng)站設計篇：側重靜態(tài)網(wǎng)頁的進階教學，重點介紹HTML與CSS的進階
知識。通過該篇的學習，使讀者能夠設計出界面風格更復雜、靈活的網(wǎng)頁。
●行業(yè)網(wǎng)站設計篇：側重動態(tài)網(wǎng)頁的教學，重點介紹HTML與JavaScript的相關
知識。通過該篇的學習，使讀者可以掌握交互性網(wǎng)站的設計方法，為今后復雜
的Web應用開發(fā)的學習打好基礎。
●響應式網(wǎng)站設計篇：該篇屬于拓展知識，主要介紹如何利用主流的前端開發(fā)技
術快速設計出適應不同設備的網(wǎng)站。

本書項目1、2、6、7由魏慧編寫，項目4、5、8、9由胡沁涵編寫，項目3由魏慧、
胡沁涵共同編寫，由魏慧負責統(tǒng)稿。本書的編寫得到蘇州大學計算機科學與技術學院
和蘇州城市學院的大力支持。由于作者水平有限，不足之處在所難免，懇請廣大讀者
和同行提出寶貴意見，在此深表感謝！

作　者

2023年1月于蘇州大學