精選內(nèi)容——以HTML+CSS+JavaScript三大核心技術(shù)的知識點為主線，以建設(shè)一個旅游資訊網(wǎng)站為任務(wù)驅(qū)動，將復(fù)雜的網(wǎng)站設(shè)計操作轉(zhuǎn)化為多個通俗易懂的任務(wù)。

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

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

適應(yīng)面廣——可用作計算機相關(guān)專業(yè)的前端技術(shù)基礎(chǔ)課程教材、非計算機專業(yè)的網(wǎng)頁制作選修課教材，社會人員學(xué)習(xí)網(wǎng)頁前端的基礎(chǔ)教材，也可供其他計算機專業(yè)人員參考使用。

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

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

本教材的特點如下：

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

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

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

視頻資源 微信公眾號

本書可用作計算機相關(guān)專業(yè)的前端技術(shù)基礎(chǔ)課程教材、非計算機專業(yè)的網(wǎng)頁制作選修課教材，社會人員學(xué)習(xí)網(wǎng)頁前端的基礎(chǔ)教材，也可供其他計算機專業(yè)人員參考使用。

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

編 者

2017年6月

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

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