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

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

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

本書主要特色是源代碼教學(xué)、項(xiàng)目導(dǎo)向和任務(wù)驅(qū)動(dòng)、分階段教學(xué)。

1.源代碼教學(xué)

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

2.項(xiàng)目導(dǎo)向和任務(wù)驅(qū)動(dòng)

本書重點(diǎn)突出項(xiàng)目式教學(xué)，書中9個(gè)項(xiàng)目從個(gè)人到企業(yè)，從PC端到移動(dòng)端，涵
蓋了目前常見(jiàn)的Web應(yīng)用場(chǎng)景。每個(gè)項(xiàng)目搭載若干任務(wù)，以任務(wù)驅(qū)動(dòng)學(xué)習(xí)，由淺及深、
較為全面地介紹Web前端開發(fā)的相關(guān)知識(shí)及技巧。本書注重知識(shí)內(nèi)容的實(shí)用性和綜合
性，側(cè)重實(shí)用設(shè)計(jì)方法、設(shè)計(jì)技能和設(shè)計(jì)過(guò)程的講述。

3.分階段教學(xué)

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

Web

II

前端開發(fā)與項(xiàng)目實(shí)踐

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

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

作　者

2023年1月于蘇州大學(xué)