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

第二版加入 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. 信息技術基礎（麒麟操作系統+WPS Office） [主編　芮雪　蔣莉　王亮亮]
2. Office高級應用項目式教程（第2版） [主編 李觀金 張倩文 黎夏克 ]
3. 巧用翻譯學英語：英漢互譯500例 [王學文 著]
4. 高等教育多維評價體系構建與高質量發展研究 [張妍 著]
5. 系統規劃與管理師章節習題與考點特訓（第二版） [主編 薛大龍]
6. 計算機操作系統實踐指導（openEuler版） [主編 秦光 曾陳萍 岳付強]
7. 信息系統管理工程師真題及模考卷精析（適用機考） [主 編 薛大龍 程 剛 上官緒]
8. 航海類院校體育教育教學研究 [張利超 李寧 著]
9. 新時代背景下我國職業教育產教融合長效機制建設研究 [王玉賢 著]
10. 電路分析 [主編 李飛 毛先柏]
11. 信息系統管理工程師（適用第2版大綱）一站通關 [指尖瘋　編著]
12. 傳統山水畫論解讀與實踐 [陳鈉 著]
13. 網絡工程師備考一本通（適配第6版考綱） [夏杰 編著]
14. 陳孝云的職教理想與情懷 [祝吉太 江傳瑞 張義廷 著]
15. 地方本科院校電子信息學科課程思政案例集 [王甫]
16. Excel數據處理與分析（第二版） [主編 張志明 鄒 蕾]
17. 網絡工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
18. 倉儲管理實務（第二版） [周寧武 編著]
19. 基于AE與C#的地理信息系統二次開發 [李小根 賈艷昌 喬翠平 姜彤 ]
20. 2023年長沙市文化和旅游業發展報告 [主編 陳莉]
21. 舞臺化妝造型設計 [主編 劉思彤 張 濤 張憶雨]
22. 產教融合視角高校體育專業實踐教學體系構建研究 [楊柳青 葉華兵 著]
23. 知識圖譜及應用案例 [張善文 黃文準 于長青 陳明淑]
24. Python程序設計案例教程（微課版） [主編　石利平　田輝平　余以勝]
25. 皓月繁星：青少年兒童心理成長手冊 [主　編　林贊歌 副主編　杜志南]
26. 材料力學 [章寶華 趙新勝 徐斌]
27. 系統集成項目管理工程師考試32小時通關（第3版） [主編　薛大龍 副主編　上官緒陽]
28. 軟考論文高分特訓與范文10篇——系統分析師（第二版） [薛大龍 鄒月平 施游]
29. 黃河海勃灣水利樞紐防凌安全運行 [王戰領 王叢發 范瑜彬 著]
30. 大學生心理健康教育 [方雄 著]