任務驅動：以網站設計與開發的工作任務為主線，按項目化教學方式編排。

目標明確：每個任務給出明晰的知識目標和能力目標。

步驟清晰：詳細講解任務的實現步驟。

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

HTML5和CSS3技術作為前端開發的入門技術，是Web前端開發技術人員必須扎實掌握的職業技能，也是高職高專院校相關專業學生應該熟練掌握的技術。本書是針對高職高專院校互聯網應用技術專業學生的培養目標進行編寫的，注重學生職業能力與職業技能的培養，通過本書的學習，學生可以熟練掌握HTML5+CSS3前端開發基礎知識與應用。本書還參考了《Web前端開發職業技能等級標準》，重構并序化了教學內容，以項目為載體，結合教材內容合理地安排教學任務。本書分為基礎項目與綜合項目，其中，基礎項目主要包括文本類網頁、列表類網頁、超鏈接網頁、表格類網頁、表單類網頁、綜合布局網頁、動畫效果網頁；綜合項目包括網站設計與制作的準備、網站首頁、二級頁面、三級頁面的制作。

全書內容以項目化教學的方式進行編排，全面系統地闡述了HTML5和CSS3的基礎知識和實際運用技術。本書以任務驅動的方式安排教學內容，將每個項目按工作流程分為若干任務，每個任務又設計了以下幾個模塊：

· 任務目標：明確任務的知識目標和能力目標。

· 任務效果：說明任務運用的基礎知識及任務完成的最終效果。

· 相關知識：提供完成任務需要掌握的基礎知識和實際運用技術。

· 實現步驟：詳細講解任務的實施步驟。

· 思考與練習：根據Web前端開發初級的1+X證書考點整理出任務相關的理論題和操作題。

本書以網站設計與開發的工作任務為主線，內容講解詳細、結構編排科學、語言通俗易懂，以接近真實的網站項目為依托，知識涵蓋面廣。

本書由河源職業技術學院的譚衛老師組織編寫，譚衛、徐文義任主編，安華萍、王玉、鐘機靈、段春梅（佛山職業技術學院）任副主編。在本書編寫過程中，編者參考了相關技術的資料文獻、書籍及網絡資源，在此表示感謝。

由于編者水平有限，書中難免存在疏漏甚至錯誤之處，懇請讀者批評指正，以便進一步完善與改進，編者E-mail：99150752@qq.com。

前言

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

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