以建設旅游資訊網站為任務驅動，將復雜的網站設計轉化為多個通俗易懂的任務。

第二版加入 flex 布局內容并對部分案例進行優化，使得案例編排更合理。

配備豐富的立體化教學資源，包括源代碼、教學課件、配套視頻等。

隨著互聯網的快速發展和競爭日漸激烈，網站用戶體驗成為了重要的關注點，專業的前端工程師隨之成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。在各大人才招聘網站上都能看到不斷更新的前端工程師的崗位招聘需求，因此學好前端技術對就業和發展都非常有用。前端工程師的職責是制作標準優化的代碼，增加交互動態功能，并進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。前端工程師需要掌握的技術有HTML、JavaScript、CSS，以及最新出現的各種框架如node.js、AngularJS、vue.js等。雖然未來會出現更多新技術和新框架來幫助前端工程師完成各種復雜的任務，但是它們都離不開三大核心技術：HTML、JavaScript、CSS。

本書以HTML、CSS、JavaScript 三大核心技術的知識點為主線，以建設一個旅游資訊網站為任務驅動，將復雜的網站設計操作轉化為多個通俗易懂的任務，最后匯總成一個綜合案例—“黃姚古鎮旅游網”網站開發。全書共分11個模塊、32個案例，每個案例以實例為引導，操作步驟清晰，有利于初學者系統地學習前端網頁設計的基礎知識，掌握網站開發的方法與過程。本書采用“案例驅動”編寫方式，將知識點巧妙地設計到相應案例中，使讀者在實現案例效果的同時掌握基礎知識。本書案例具有連貫性，最后把前面所有案例串聯起來形成一個綜合案例，讓學生的學習更有成就感。第二版加入了flex布局內容，并對部分案例進行了優化，使得案例編排更合理，使用更方便。

本書由黃華升任主編（負責統稿工作），羅蘭花、袁淑丹、巫湘林、任子亭任副主編，另外參與編寫的還有韋小梧、吳繼軍、陳楊明、張琴芳、胡世洋、殷玉玲、胡元闖、陳醒基、王珍珍、黃江鑫、張紅軍等。

本書配有案例源代碼、電子教案、操作視頻等教學資源。在“學習通”平臺（https://mooc1.chaoxing.com/course/201676611.html）提供了慕課資源，方便開展混合式教學。

在本書編寫過程中，編者得到了賀州學院領導和中國水利水電出版社的幫助與支持，在此一并表示感謝。由于時間倉促，加之編者水平有限，書中疏漏甚至錯誤之處在所難免，懇請讀者批評指正。

編 者

2022年3月

第1章 網頁制作基礎知識 1
1.1 網站建設基本概念 1
1.1.1 名詞解釋 1
1.1.2 Web標準概述 3
1.2 網頁制作入門 4
1.2.1 HTML簡介 4
1.2.2 CSS簡介 5
1.2.3 JavaScript簡介 5
1.3 案例1：歡迎來到黃姚古鎮 5
1.3.1 常用編輯工具對比 5
1.3.2 使用HBuilder編輯網頁 7
第2章 建設基本HTML頁面 11
2.1 案例2：黃姚古鎮簡介 11
2.1.1 案例描述 11
2.1.2 相關知識 12
2.1.3 實現過程 17
2.2 案例3：黃姚古鎮簡介引文注釋 18
2.2.1 案例描述 18
2.2.2 相關知識 19
2.2.3 實現過程 21
2.3 案例4：醉黃姚—圖文黃姚簡介 22
2.3.1 案例描述 22
2.3.2 相關知識 22
2.3.3 實現過程 28
2.4 案例綜合練習 29
第3章 使用CSS技術美化網頁 31
3.1 案例5：黃姚古鎮多彩標題 31
3.1.1 案例描述 31
3.1.2 相關知識 31
3.1.3 實現過程 42
3.2 案例6：黃姚古文化遺跡簡介 43
3.2.1 案例描述 43
3.2.2 相關知識 44
3.2.3 實現過程 50
3.3 案例7：黃姚古鎮美食推薦 51
3.3.1 案例描述 51
3.3.2 相關知識 51
3.3.3 實現過程 55
3.4 案例綜合練習 57
第4章 CSS盒子模型 59
4.1 案例8：黃姚風景圖文欣賞 59
4.1.1 案例描述 59
4.1.2 相關知識 60
4.1.3 實現過程 66
4.2 案例9：黃姚最受歡迎的土特產推介 68
4.2.1 案例描述 68
4.2.2 相關知識 69
4.2.3 實現過程 73
4.3 案例10：黃姚風景明信片 75
4.3.1 案例描述 75
4.3.2 相關知識 75
4.3.3 實現過程 80
4.4 案例綜合練習 82
第5章 CSS的定位布局 85
5.1 案例11：友情鏈接 85
5.1.1 案例描述 85
5.1.2 相關知識 85
5.1.3 實現過程 91
5.2 案例12：黃姚門票網絡票面 92
5.2.1 案例描述 92
5.2.2 相關知識 93
5.2.3 實現過程 99
5.3 案例13：首頁的廣告宣傳區 101
5.3.1 案例描述 101
5.3.2 相關知識 101
5.3.3 實現過程 107
5.4 案例14：首頁的布局定位 109
5.4.1 案例描述 109
5.4.2 相關知識 110
5.4.3 實現過程 114
5.5 案例15：黃姚古鎮熱銷美食 117
5.5.1 案例描述 117
5.5.2 相關知識 118
5.5.3 實現過程 123
5.6 案例綜合練習 125
第6章 列表與超鏈接 126
6.1 案例16：新聞頁面列表 126
6.1.1 案例描述 126
6.1.2 相關知識 126
6.1.3 實現過程 132
6.2 案例17：旅游產品推薦 136
6.2.1 案例描述 136
6.2.2 相關知識 136
6.2.3 實現過程 142
6.3 案例18：首頁旅游攻略導航 144
6.3.1 案例描述 144
6.3.2 相關知識 145
6.3.3 實現過程 150
6.4 案例綜合練習 151
第7章 表格與表單 152
7.1 案例19：黃姚土特產銷售表 152
7.1.1 案例描述 152
7.1.2 相關知識 152
7.1.3 實現過程 161
7.2 案例20：注冊界面 164
7.2.1 案例描述 164
7.2.2 相關知識 165
7.2.3 實現過程 174
7.3 案例綜合練習 177
第8章 CSS3基礎應用 178
8.1 案例21：黃姚風景照片墻 178
8.1.1 案例描述 178
8.1.2 相關知識 178
8.1.3 實現過程 189
8.2 案例22：動態導航效果 193
8.2.1 案例描述 193
8.2.2 相關知識 193
8.2.3 實現過程 202
第9章 JavaScript基礎 208
9.1 案例23：與網頁對話 208
9.1.1 案例描述 208
9.1.2 相關知識 209
9.1.3 實現過程 212
9.2 案例24：控制字體大小 213
9.2.1 案例描述 213
9.2.2 相關知識 214
9.2.3 實現過程 221
9.3 案例25：商品詳情提示 222
9.3.1 案例描述 222
9.3.2 相關知識 223
9.3.3 實現過程 228
9.4 案例26：照片集 230
9.4.1 案例描述 230
9.4.2 相關知識 230
9.4.3 實現過程 236
9.5 案例27：選項卡 240
9.5.1 案例描述 240
9.5.2 相關知識 240
9.5.3 實現過程 244
9.6 案例綜合練習 248
第10章 JavaScript核心對象 249
10.1 案例28：秒殺商品 249
10.1.1 案例描述 249
10.1.2 相關知識 250
10.1.3 實現過程 257
10.2 案例29：抽取幸運觀眾 260
10.2.1 案例描述 260
10.2.2 相關知識 261
10.2.3 實現過程 264
10.3 案例30：文章的展開與收縮 266
10.3.1 案例描述 266
10.3.2 相關知識 267
10.3.3 實現過程 270
10.4 案例綜合練習 272
第11章 事件處理 274
11.1 案例31：旅游商品展示 274
11.1.1 案例描述 274
11.1.2 相關知識 275
11.1.3 實現過程 279
11.2 案例32：追隨鼠標的公告框 281
11.2.1 案例描述 281
11.2.2 相關知識 281
11.2.3 實現過程 285
11.3 案例綜合練習 286
第12章 綜合案例 287
12.1 網站開發流程 287
12.2 “黃姚古鎮旅游網”網站開發 288
12.2.1 準備工作 289
12.2.2 網站公共部分模板開發 294
12.2.3 網站主要頁面開發 297
12.3 網站發布 305
參考文獻 308

1. 零基礎玩轉國產大模型DeepSeek [徐永冰 張帥 編著]
2. 網絡工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統項目管理師考試32小時通關（適用第4版考綱） [薛大龍]
4. 信息系統管理工程師考試32小時通關（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測實訓 [洪曉江 達則曉麗 錢波]
6. 科技信息檢索與論文寫作實用教程 [李振華]
7. 傳統山水畫論解讀與實踐 [陳鈉 著]
8. Python數據庫編程 [主編 殷樹友 邢 翀]
9. 計算機基礎實訓指導 [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術應用（數字教材） [主編 胡娜 楊國勇 晏廷榮]
11. Vienna整流器技術 [桂存兵 著]
12. 變頻器與伺服應用 [陳剛 葉云飛]
13. 物聯網工程設計與實踐 [湯琳 李敏]
14. 爐邊夜話——深入淺出話AI [汪建　著]
15. 電商運營與管理 [鐘肖英 陳瀟]
16. Java面向對象程序設計 [主編 姜春磊 陳虹潔]
17. 信息技術基礎（Windows 10+WPS Office）（微課版） [主編　石利平　田輝平　謝盛嘉]
18. 人工智能應用 [主編　陳　萍　劉培培　陳孟軍]
19. 大學生職業發展與就業指導 [主編　劉志堅]
20. 高級辦公應用項目教程 [主編 屈晶 趙成麗]
21. 微信小程序開發項目實戰（微課版） [主編 黃龍泉 郭峰 朱倩]
22. 企業檔案工作實戰寶典百問百答 [華俊 盧秀英 邵甜甜 著]
23. 計算機網絡原理及應用 [主編 唐繼勇 葉坤 孫夢娜]
24. 大學生創業基礎 [主編 王麗莉 王 楊]
25. 船舶輔機 [主編 王連海 于洋 姜淑翠]
26. 大學生就業指導 [主編 王麗莉 董宴廷]
27. 系統架構設計師章節習題與考點特訓 [主編 薛大龍 鄒月平]
28. 高校學生工作探索與實踐 [郭亮 著]
29. 大學生情商管理 [方雄 著]
30. 2023年長沙市會展業發展報告 [主編 周棟良]