任務(wù)驅(qū)動：以網(wǎng)站設(shè)計(jì)與開發(fā)的工作任務(wù)為主線，按項(xiàng)目化教學(xué)方式編排。

目標(biāo)明確：每個任務(wù)給出明晰的知識目標(biāo)和能力目標(biāo)。

步驟清晰：詳細(xì)講解任務(wù)的實(shí)現(xiàn)步驟。

隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，移動智能設(shè)備的使用變得普遍，人們可以隨時隨地獲取信息和服務(wù)，而網(wǎng)頁作為互聯(lián)網(wǎng)的信息載體之一，可以為用戶帶來直觀的、全面的體驗(yàn)。HTML5和CSS3是Web前端開發(fā)的最新技術(shù)，大部分瀏覽器已支持HTML5和CSS3技術(shù)。HTML5是最新的HTML標(biāo)準(zhǔn)，是專門為承載豐富的Web內(nèi)容而設(shè)計(jì)的，并且無需額外插件，它擁有新的語義、圖形和多媒體等元素。CSS3在原有基礎(chǔ)上增加了更多的CSS選擇器和更多實(shí)用的高級屬性，可以實(shí)現(xiàn)更簡單但更為強(qiáng)大的頁面效果和網(wǎng)頁交互功能。在目前網(wǎng)頁制作行業(yè)中，HTML5與CSS3技術(shù)以它們獨(dú)有的優(yōu)點(diǎn)在業(yè)內(nèi)得到了廣泛應(yīng)用。

HTML5和CSS3技術(shù)作為前端開發(fā)的入門技術(shù)，是Web前端開發(fā)技術(shù)人員必須扎實(shí)掌握的職業(yè)技能，也是高職高專院校相關(guān)專業(yè)學(xué)生應(yīng)該熟練掌握的技術(shù)。本書是針對高職高專院校互聯(lián)網(wǎng)應(yīng)用技術(shù)專業(yè)學(xué)生的培養(yǎng)目標(biāo)進(jìn)行編寫的，注重學(xué)生職業(yè)能力與職業(yè)技能的培養(yǎng)，通過本書的學(xué)習(xí)，學(xué)生可以熟練掌握HTML5+CSS3前端開發(fā)基礎(chǔ)知識與應(yīng)用。本書還參考了《Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)》，重構(gòu)并序化了教學(xué)內(nèi)容，以項(xiàng)目為載體，結(jié)合教材內(nèi)容合理地安排教學(xué)任務(wù)。本書分為基礎(chǔ)項(xiàng)目與綜合項(xiàng)目，其中，基礎(chǔ)項(xiàng)目主要包括文本類網(wǎng)頁、列表類網(wǎng)頁、超鏈接網(wǎng)頁、表格類網(wǎng)頁、表單類網(wǎng)頁、綜合布局網(wǎng)頁、動畫效果網(wǎng)頁；綜合項(xiàng)目包括網(wǎng)站設(shè)計(jì)與制作的準(zhǔn)備、網(wǎng)站首頁、二級頁面、三級頁面的制作。

全書內(nèi)容以項(xiàng)目化教學(xué)的方式進(jìn)行編排，全面系統(tǒng)地闡述了HTML5和CSS3的基礎(chǔ)知識和實(shí)際運(yùn)用技術(shù)。本書以任務(wù)驅(qū)動的方式安排教學(xué)內(nèi)容，將每個項(xiàng)目按工作流程分為若干任務(wù)，每個任務(wù)又設(shè)計(jì)了以下幾個模塊：

· 任務(wù)目標(biāo)：明確任務(wù)的知識目標(biāo)和能力目標(biāo)。

· 任務(wù)效果：說明任務(wù)運(yùn)用的基礎(chǔ)知識及任務(wù)完成的最終效果。

· 相關(guān)知識：提供完成任務(wù)需要掌握的基礎(chǔ)知識和實(shí)際運(yùn)用技術(shù)。

· 實(shí)現(xiàn)步驟：詳細(xì)講解任務(wù)的實(shí)施步驟。

· 思考與練習(xí)：根據(jù)Web前端開發(fā)初級的1+X證書考點(diǎn)整理出任務(wù)相關(guān)的理論題和操作題。

本書以網(wǎng)站設(shè)計(jì)與開發(fā)的工作任務(wù)為主線，內(nèi)容講解詳細(xì)、結(jié)構(gòu)編排科學(xué)、語言通俗易懂，以接近真實(shí)的網(wǎng)站項(xiàng)目為依托，知識涵蓋面廣。

本書由河源職業(yè)技術(shù)學(xué)院的譚衛(wèi)老師組織編寫，譚衛(wèi)、徐文義任主編，安華萍、王玉、鐘機(jī)靈、段春梅（佛山職業(yè)技術(shù)學(xué)院）任副主編。在本書編寫過程中，編者參考了相關(guān)技術(shù)的資料文獻(xiàn)、書籍及網(wǎng)絡(luò)資源，在此表示感謝。

由于編者水平有限，書中難免存在疏漏甚至錯誤之處，懇請讀者批評指正，以便進(jìn)一步完善與改進(jìn)，編者E-mail：[email protected]。

前言

項(xiàng)目1 建立文本類網(wǎng)頁 1
任務(wù)1 網(wǎng)頁內(nèi)容構(gòu)建 1
任務(wù)目標(biāo) 1
任務(wù)效果 1
相關(guān)知識 2
實(shí)現(xiàn)步驟 18
任務(wù)2 頁面樣式修飾 21
任務(wù)目標(biāo) 21
任務(wù)效果 22
相關(guān)知識 22
實(shí)現(xiàn)步驟 37
思考與練習(xí) 39
項(xiàng)目2 建立列表多媒體類網(wǎng)頁 43
任務(wù)1 頁面內(nèi)容構(gòu)建 43
任務(wù)目標(biāo) 43
任務(wù)效果 43
相關(guān)知識 45
實(shí)現(xiàn)步驟 55
任務(wù)2 頁面樣式修飾 58
任務(wù)目標(biāo) 58
任務(wù)效果 58
相關(guān)知識 59
實(shí)現(xiàn)步驟 70
思考與練習(xí) 73
項(xiàng)目3 建立超鏈接 76
任務(wù)1 頁面內(nèi)容構(gòu)建 76
任務(wù)目標(biāo) 76
任務(wù)效果 76
相關(guān)知識 77
實(shí)現(xiàn)步驟 81
任務(wù)2 頁面樣式修飾 84
任務(wù)目標(biāo) 84
任務(wù)效果 85
相關(guān)知識 85
實(shí)現(xiàn)步驟 99
思考與練習(xí) 101
項(xiàng)目4 建立表格頁 103
任務(wù)1 案例展示頁制作 103
任務(wù)目標(biāo) 103
任務(wù)效果 103
相關(guān)知識 104
實(shí)現(xiàn)步驟 112
任務(wù)2 案例詳情頁制作 116
任務(wù)目標(biāo) 116
任務(wù)效果 117
相關(guān)知識 117
實(shí)現(xiàn)步驟 126
思考與練習(xí) 128
項(xiàng)目5 建立表單類網(wǎng)頁 131
任務(wù)1 表單頁建立 131
任務(wù)目標(biāo) 131
任務(wù)效果 131
相關(guān)知識 132
實(shí)現(xiàn)步驟 139
任務(wù)2 表單頁驗(yàn)證 141
任務(wù)目標(biāo) 141
任務(wù)效果 141
相關(guān)知識 142
實(shí)現(xiàn)步驟 149
思考與練習(xí) 150
項(xiàng)目6 建立綜合類網(wǎng)頁 154
任務(wù)1 網(wǎng)頁布局 154
任務(wù)目標(biāo) 154
任務(wù)效果 154
相關(guān)知識 155
實(shí)現(xiàn)步驟 173
任務(wù)2 網(wǎng)頁頭部與尾部制作 174
任務(wù)目標(biāo) 174
任務(wù)效果 175
相關(guān)知識 175
實(shí)現(xiàn)步驟 178
任務(wù)3 網(wǎng)頁主體部分制作 180
任務(wù)目標(biāo) 180
任務(wù)效果 181
相關(guān)知識 181
實(shí)現(xiàn)步驟 188
思考與練習(xí) 193
項(xiàng)目7 網(wǎng)頁動畫制作 196
任務(wù)1 過渡效果制作 196
任務(wù)目標(biāo) 196
任務(wù)效果 196
相關(guān)知識 197
實(shí)現(xiàn)步驟 204
任務(wù)2 動畫效果制作 204
任務(wù)目標(biāo) 204
任務(wù)效果 205
相關(guān)知識 205
實(shí)現(xiàn)步驟 224
思考與練習(xí) 225
項(xiàng)目8 綜合實(shí)戰(zhàn)—企業(yè)網(wǎng)站設(shè)計(jì)與制作 229
任務(wù)1 網(wǎng)站設(shè)計(jì)與制作準(zhǔn)備 229
任務(wù)2 網(wǎng)站首頁制作 234
任務(wù)3 網(wǎng)站二級列表頁面制作 245
任務(wù)4 網(wǎng)站三級內(nèi)容頁面制作 253
思考與練習(xí) 256
參考文獻(xiàn) 257

1. Python語言程序設(shè)計(jì)教程 [郭其標(biāo) 房宜汕]
2. Python程序設(shè)計(jì) [李國燕 王新強(qiáng) 劉佳 等編著]
3. Python程序設(shè)計(jì)項(xiàng)目化教程（活頁式） [主編　盧鳳偉]
4. Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
5. Python語言同步案例習(xí)題精解 [主編 肖朝暉]
6. Unity應(yīng)用開發(fā)與實(shí)戰(zhàn)（微課版） [主 編 程永恒]
7. PHP程序設(shè)計(jì)項(xiàng)目化教程 [主 編 杜海穎]
8. 簡單易懂的Python入門教程 [［日］大澤文孝　著]
9. Python數(shù)據(jù)分析之道——Thinking in Pandas [[美]漢娜·斯捷潘內(nèi)克（Hannah S]
10. 深入淺出OpenHarmony——架構(gòu)、內(nèi)核、驅(qū)動及應(yīng)用開發(fā)全棧 [李傳釗 著]
11. MySQL數(shù)據(jù)庫項(xiàng)目化教程（第二版） [主編　鄭小蓉]
12. python青少年趣味編程 [千鋒教育 編著]
13. 程序員5天修煉 [施游 鄒月平 曾哲軍 編著]
14. Python程序設(shè)計(jì)應(yīng)用教程 [王敏 李光正]
15. Java面向?qū)ο蟪绦蛟O(shè)計(jì)（微課版） [主編　謝先偉　王海洋]
16. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張立敏 鄒海濤]
17. 工業(yè)機(jī)器人編程及應(yīng)用 [主編 向艷芳 胡月霞]
18. C語言程序設(shè)計(jì)（微課版） [主編　夏啟壽]
19. C語言程序設(shè)計(jì)實(shí)踐教程 [夏啟壽]
20. 單片機(jī)應(yīng)用技術(shù)項(xiàng)目教程（C語言版）（第三版） [主編　郭志勇]
21. Python語言程序設(shè)計(jì) [張雙獅]
22. 火球-UML大戰(zhàn)需求分析（第二版） [張傳波 著]
23. Python 程序設(shè)計(jì)（微課版） [楊智勇　廖丹]
24. 數(shù)據(jù)結(jié)構(gòu)——C語言（微課版） [主編 梁海英]
25. UI界面設(shè)計(jì)與制作教程 [主 編 黎 婭 任勁松]
26. UML系統(tǒng)建模及系統(tǒng)分析與設(shè)計(jì)（第二版） [王欣 張毅 編著]
27. Android高級程序設(shè)計(jì) [主編　周雯　舒松]
28. C程序設(shè)計(jì)簡明教程 [黃能耿 黃致遠(yuǎn) 編著]
29. Java程序設(shè)計(jì)簡明教程 [黃能耿 黃致遠(yuǎn) 編著]
30. Visual Basic程序設(shè)計(jì)實(shí)驗(yàn)指導(dǎo) [主編 孫穎馨]