精選內容——以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. 輸水管線工程風險管理 [張勇 黨亥生 著]
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. 網絡規劃設計師備考一本通 [夏杰 編著]