精選內容——以HTML+CSS+JavaScript三大核心技術的知識點為主線，以建設一個旅游資訊網站為任務驅動，將復雜的網站設計操作轉化為多個通俗易懂的任務。

案例驅動——采用“案例驅動式”編寫方式，將知識點融入到案例中，使得讀者在實現案例效果的同時，就能掌握基礎知識。

循序漸進——內容條理清楚、實例豐富、通俗易懂、實用性強，案例有連貫性，在最后一章把前面的案例串聯起來形成一個綜合案例，讓學生有成就感。

適應面廣——可用作計算機相關專業的前端技術基礎課程教材、非計算機專業的網頁制作選修課教材，社會人員學習網頁前端的基礎教材，也可供其他計算機專業人員參考使用。

隨著互聯網的快速發展和激烈競爭，用戶體驗成為了一個重要的關注點，使得專業的前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。在各大人才招聘網站上都能看到不斷更新的招聘前端工程師的崗位需求，學好前端技術對就業和發展都非常有用。

前端工程師的職責是制作標準優化的代碼，增加交互動態功能，并進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。要求掌握的主要技術包含：HTML、JavaScript、CSS，以及最新出現的各種框架如node.js、AngularJS、vue.js等等。雖然以后會有各種各樣的新技術新框架幫助前端工程師完成各種復雜的任務，但是所有這些新技術新框架都離不開三大核心技術HTML、JavaScript、CSS。作為一本前端工程師基礎課程的教程，本書以HTML、JavaScript、CSS為知識點，適合所有將要進入前端技術領域的初學者。

本教材的特點如下：

根據對前端工程師的技術要求分析，以HTML+CSS+JavaScript三大核心技術的知識點為主線，以建設一個旅游資訊網站為任務驅動，將復雜的網站設計操作轉化為多個通俗易懂的任務，最后匯總成一個大的綜合實例—“黃姚古鎮旅游網”。全書共分為11個模塊，每個模塊又細分為多個案例，全書共有32個案例。每個案例以實例為引導，操作步驟清晰，有利于初學者比較系統地學習前端網頁設計的基礎知識，掌握網站開發的方法與過程。教材采用“案例驅動式”編寫方式，將知識點巧妙地設計到相應案例中，將每次要簡述的基礎知識融入到案例中，使讀者在實現案例效果的同時，就能掌握基礎知識。每個案例的教與學難度基本控制在1個學時到2個學時之間，方便老師開展課堂教學。案例具有連貫性，在最后一章把所有前面的案例串聯起來形成一個綜合案例，讓學生有成就感。

本書由黃華升任主編，任子亭、袁淑丹、巫湘林任副主編。黃華升主持了全書的編寫及審稿工作，并編寫了第9～11章內容；袁淑丹編寫了第1～4章內容；任子亭編寫了第5～8章內容；巫湘林編寫了第12章內容。

本書精心配置了源代碼、教學課件、配套視頻等教學資源，并將演示視頻發布到網絡上生成了二維碼，在書中的案例部分附加了操作視頻二維碼，讀者可以使用手機掃一掃二維碼，即可一邊閱讀書本的講解一邊看著手機觀看視頻分解，實現“書+碼”的學習互動。本書配有微信公眾號，提供在線答疑服務及更多資源。

視頻資源 微信公眾號

本書可用作計算機相關專業的前端技術基礎課程教材、非計算機專業的網頁制作選修課教材，社會人員學習網頁前端的基礎教材，也可供其他計算機專業人員參考使用。

由于作者水平有限，書中疏漏和錯誤之處在所難免，歡迎廣大讀者提出寶貴意見。

編 者

2017年6月

第一章 網頁制作基礎知識 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 使用Dreamweaver編輯網頁 7
第二章 建設基本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
第三章 使用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 相關知識 43
3.2.3 實現過程 49
3.3 案例7：黃姚古鎮美食推薦 50
3.3.1 案例描述 50
3.3.2 相關知識 51
3.3.3 實現過程 55
3.4 案例綜合練習 56
第四章 CSS盒子模型 58
4.1 案例8：黃姚風景圖文欣賞 58
4.1.1 案例描述 58
4.1.2 相關知識 59
4.1.3 實現過程 65
4.2 案例9：黃姚最受歡迎的土特產推介 67
4.2.1 案例描述 67
4.2.2 相關知識 68
4.2.3 實現過程 72
4.3 案例10：黃姚風景明信片 74
4.3.1 案例描述 74
4.3.2 相關知識 74
4.3.3 實現過程 79
4.4 案例綜合練習 81
第五章 CSS的定位布局 84
5.1 案例11：友情鏈接 84
5.1.1 案例描述 84
5.1.2 相關知識 84
5.1.3 實現過程 90
5.2 案例12：黃姚門票網絡票面 91
5.2.1 案例描述 91
5.2.2 相關知識 92
5.2.3 實現過程 98
5.3 案例13：首頁的廣告、宣傳區 100
5.3.1 案例描述 100
5.3.2 相關知識 100
5.3.3 實現過程 106
5.4 案例14：首頁的布局定位 108
5.4.1 案例描述 108
5.4.2 相關知識 109
5.4.3 實現過程 113
5.5 案例綜合練習 116
第六章 列表與超鏈接 117
6.1 案例15：新聞頁面列表 117
6.1.1 案例描述 117
6.1.2 相關知識 117
6.1.3 實現過程 121
6.2 案例16：黃姚微信二維碼名片 124
6.2.1 案例描述 124
6.2.2 相關知識 124
6.2.3 實現過程 126
6.3 案例17：旅游產品推薦 128
6.3.1 案例描述 128
6.3.2 相關知識 129
6.3.3 實現過程 135
6.4 案例18：首頁旅游攻略導航 137
6.4.1 案例描述 137
6.4.2 相關知識 137
6.4.3 實現過程 142
6.5 案例綜合練習 144
第七章 表格與表單 145
7.1 案例19：黃姚土特產銷售表 145
7.1.1 案例描述 145
7.1.2 相關知識 145
7.1.3 實現過程 154
7.2 案例20：注冊界面 157
7.2.1 案例描述 157
7.2.2 相關知識 158
7.2.3 實現過程 167
7.3 案例綜合練習 170
第八章 CSS3基礎應用 171
8.1 案例21：黃姚風景照片墻 171
8.1.1 案例描述 171
8.1.2 相關知識 171
8.1.3 實現過程 182
8.2 案例22：動態導航效果 186
8.2.1 案例描述 186
8.2.2 相關知識 186
8.2.3 實現過程 195
第九章 JavaScript基礎 201
9.1 案例23：與網頁對話 201
9.1.1 案例描述 201
9.1.2 相關知識 201
9.1.3 實現過程 204
9.2 案例24：控制字體大小 206
9.2.1 案例描述 206
9.2.2 相關知識 206
9.2.3 實現過程 214
9.3 案例25：商品詳情提示 215
9.3.1 案例描述 215
9.3.2 相關知識 216
9.3.3 實現過程 221
9.4 案例26：照片集 223
9.4.1 案例描述 223
9.4.2 相關知識 223
9.4.3 實現過程 229
9.5 案例27：選項卡 233
9.5.1 案例描述 233
9.5.2 相關知識 233
9.5.3 實現過程 237
9.6 案例綜合練習 241
第十章 JavaScript核心對象 242
10.1 案例28：秒殺商品 242
10.1.1 案例描述 242
10.1.2 相關知識 243
10.1.3 實現過程 250
10.2 案例29：抽取幸運觀眾 253
10.2.1 案例描述 253
10.2.2 相關知識 254
10.2.3 實現過程 257
10.3 案例30：文章的展開與收縮 259
10.3.1 案例描述 259
10.3.2 相關知識 260
10.3.3 實現過程 263
10.4 案例綜合練習 265
第十一章 事件處理 267
11.1 案例31：旅游商品展示 267
11.1.1 案例描述 267
11.1.2 相關知識 268
11.1.3 實現過程 272
11.2 案例32：追隨鼠標的公告框 274
11.2.1 案例描述 274
11.2.2 相關知識 274
11.2.3 實現過程 278
11.3 案例綜合練習 279
第十二章 綜合案例 280
12.1 網站開發流程 280
12.2 “黃姚古鎮旅游網”網站開發 281
12.2.1 準備工作 282
12.2.2 網站公共部分模板開發 287
12.2.3 網站主要頁面開發 290
12.3 網站發布 298
參考文獻 301

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年長沙市會展業發展報告 [主編 周棟良]