《Web前端開發與項目實踐》具有如下特點：教材內容針對性強，滿足高校課程設置與教學要求；內容精簡實用，符合對Web前端開發方向的培養目標；方法與時俱進，縮短了教學與生產實際的距離；本教材主要特色是：源代碼教學、項目導向、任務驅動、分階段教學。
（1）源代碼教學。突出HTML5、CSS3、Javascript、jQuery代碼的教學，對于編輯工具則要求會用即可。
（2）項目導向、任務驅動。突出項目式教學，書中八個項目從個人到企業、從PC端到移動端，涵蓋了目前常見的網站類型。每個項目搭載若干任務，以任務驅動學習。
（3）分階段教學。內容分為四篇：個人與企業網站設計篇、門戶型網站設計篇以及響應式與移動端網站設計篇、綜合實例篇。
移動互聯網時代，基于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月于蘇州大學
開 篇
項目1 網頁入門003
任務1-1 基本概念004
任務1-2 制作第一個頁面006
個人網站設計篇
項目2 個人簡歷017
任務2-1 基本概念019
任務2-2 文本023
任務2-3 圖像029
任務2-4 表格031
任務2-5 個人簡歷頁面037
項目3 個人博客043
任務3-1 利用區塊標簽進行簡單布局045
任務3-2 CSS樣式的基本概念（1）048
任務3-3 CSS樣式的基本概念（2）054
任務3-4 文本樣式062
任務3-5 個人博客頁面分析072
任務3-6 個人博客頁面頁首、頁腳模塊的實現075
任務3-7 個人博客頁面博客內容模塊的實現077
IV
企業網站設計篇
項目4 企業網站首頁085
任務4-1 盒子模型087
任務4-2 盒子模型進階089
任務4-3 顯示類型設置098
任務4-4 定位設置104
任務4-5 背景設置114
任務4-6 CSS3新增效果設置129
任務4-7 企業網站首頁分析143
任務4-8 導航模塊的實現146
任務4-9 巨幕、服務和產品介紹模塊的實現148
任務4-10 浮動圖標和頁腳模塊的實現154
行業網站設計篇
項目5 用戶注冊頁面159
任務5-1 表單的基本概念161
任務5-2 表單控件164
任務5-3 表單樣式設計182
任務5-4 企業用戶注冊頁面分析194
任務5-5 表單模塊的實現197
項目6 酒店客房預訂網站205
任務6-1 JavaScript概念207
任務6-2 JavaScript的基本使用210
任務6-3 控制流程216
任務6-4 函數223
任務6-5 設計酒店客房預訂頁面228
目 錄
V
任務6-6 頁首模塊的實現232
任務6-7 酒店介紹模塊的實現233
任務6-8 客房預訂模塊的實現240
任務6-9 酒店客房預訂網站腳本的實現248
項目7 視頻播放網站255
任務7-1 JavaScript對象257
任務7-2 事件278
任務7-3 多媒體283
任務7-4 地理位置288
任務7-5 視頻播放網站頁面分析291
任務7-6 頁首模塊的實現294
任務7-7 視頻播放模塊的實現297
任務7-8 熱門視頻模塊的實現310
任務7-9 視頻播放網站腳本的實現313
響應式網站設計篇
項目8 在線訂餐頁面319
任務8-1 響應式設計320
任務8-2 媒體查詢323
任務8-3 彈性布局327
任務8-4 使用彈性布局進行響應式設計337
任務8-5 在線訂餐頁面分析341
任務8-6 在線訂餐頁面中導航和訂單模塊的實現344
任務8-7 在線訂餐頁面中菜單模塊的實現348
任務8-8 在線訂餐頁面中業務邏輯的實現354
項目9 快遞柜取件頁面359
任務9-1 網格布局360
任務9-2 網格容器屬性的設置364
任務9-3 網格項目屬性的設置373
任務9-4 使用網格布局實現響應式設計377
任務9-5 快遞柜取件頁面分析382
任務9-6 快遞柜取件頁面中導航模塊的實現384
任務9-7 快遞柜取件頁面中取件模塊的實現386
任務9-8 快遞柜取件頁面中業務邏輯的實現390
參考文獻392
附錄A HTML常用標簽簡介393
附錄B CSS屬性值簡介395
新書資訊