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

第二版加入 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. 輸水管線工程風險管理 [張勇 黨亥生 著]
2. 民用航空飛機標準線路施工 [主編　王志敏　陳明]
3. 不息的水脈—大運河講談錄 [趙珩　著]
4. 實用運籌學 [主編　邢育紅　于晉臣]
5. 三峽梯級電站水資源決策支持系統研究與開發 [姚華明 潘紅忠 湯正]
6. 海南黎族民俗文化鑒賞 [龐國華　著]
7. 石墨烯在太赫茲及中紅外頻段電磁器件設計中的應用 [李艷秀 莊華偉 著]
8. 電子技術（第二版） [主編 覃愛娜 李飛]
9. 辦公自動化高級應用 [陳萍 朱曉玉]
10. 信息處理技術員考試32小時通關 [薛大龍]
11. 電子產品設計案例教程（微課版）—基于嘉立創EDA（專業版） [王靜 莫志宏 陳學昌 丁紅]
12. C程序設計實踐教程 [劉衛國]
13. C程序設計（慕課版） [劉衛國]
14. Web技術開發教程（基于.NET開源MVC框架） [王合闖 韓紅玲 王青正 陳海蕊]
15. 商務英語翻譯教程（筆譯）（第四版） [主編 王軍平]
16. 智慧零售技術與應用 [洪旭 著]
17. 建設工程法規實務 [主編 余瀅]
18. 商務秘書理論與實務（第三版） [主編 張同欽]
19. 程序設計基礎實踐教程（C/C++語言版） [張桂芬 葛麗娜]
20. C++案例項目精講 [主編 楊國興]
21. 勞動爭議處理實務 [主編 王秀卿 羅靜]
22. 工程數學 [主編 郭立娟 王海]
23. 語音識別理論與實踐 [主編　莫宏偉]
24. 信息系統項目管理師章節習題與考點特訓（第二版） [主編 薛大龍]
25. 武術基礎教程 [主編 李代勇 謝志民]
26. 計算機網絡實訓教程 [主編 張浩軍 趙玉娟]
27. 畫法幾何與機械制圖習題集（多學時） [主編 趙軍]
28. HCIA-Datacom認證題庫分類精講 [主 編 韓立剛]
29. SwiftUI完全開發 [李智威 著]
30. 網絡規劃設計師備考一本通 [夏杰 編著]