網(wǎng)頁設(shè)計(jì)與制作

引入《Web 前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)》的考點(diǎn)，案例豐富、突出實(shí)踐

詳細(xì)介紹Web 前端開發(fā)中涉及的HTML 和CSS 的內(nèi)容及技巧

大部分案例代碼配有運(yùn)行結(jié)果圖，效果直觀、易于理解

通過各種案例將理論知識與實(shí)踐操作結(jié)合起來

突出技能訓(xùn)練，符合1+X 精神

新一輪科技革命與信息技術(shù)革命的到來，推動了產(chǎn)業(yè)結(jié)構(gòu)調(diào)整與經(jīng)濟(jì)轉(zhuǎn)型升級發(fā)展新業(yè)態(tài)的出現(xiàn)。戰(zhàn)略型新興產(chǎn)業(yè)的快速爆發(fā)式發(fā)展對新時(shí)代產(chǎn)業(yè)人才的培養(yǎng)提出了新的要求與挑戰(zhàn)。目前，企業(yè)對Web前端開發(fā)工程師的需求量極大，全國總?cè)笨诿磕杲�百萬人。隨著移動互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，網(wǎng)站在靜態(tài)頁面的基礎(chǔ)上添加了各類桌面軟件，網(wǎng)頁不再只承載單一的文字和圖片，而且要求具備炫酷的頁面交互和跨終端的適配兼容功能，使用富媒體使網(wǎng)頁內(nèi)容更加生動，從而讓用戶有更好的使用體驗(yàn)，這些都是基于Web前端技術(shù)來實(shí)現(xiàn)的。

“網(wǎng)頁設(shè)計(jì)與制作”是Web前端技術(shù)的基礎(chǔ)，也是計(jì)算機(jī)專業(yè)課程體系中的專業(yè)基礎(chǔ)課，其涉及的內(nèi)容和技術(shù)是應(yīng)用面比較廣且比較容易學(xué)習(xí)和掌握的。“網(wǎng)頁設(shè)計(jì)與制作”是大專院校計(jì)算機(jī)專業(yè)學(xué)生的必修課，同時(shí)也可以作為非計(jì)算機(jī)專業(yè)學(xué)生的選修課或限選課。

本書以《Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)》中要求的職業(yè)素養(yǎng)和崗位技術(shù)技能為重點(diǎn)，以專業(yè)技能為模塊，以工作任務(wù)為驅(qū)動進(jìn)行編寫，使讀者對Web前端開發(fā)的技術(shù)體系有更系統(tǒng)、更清晰的認(rèn)識。

通過本書的學(xué)習(xí)，初學(xué)者可學(xué)會并掌握網(wǎng)頁設(shè)計(jì)和網(wǎng)站開發(fā)的實(shí)用技能。全書共分8章，內(nèi)容涉及網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識、網(wǎng)頁制作工具Dreamweaver、文本與文檔、圖像和多媒體、超鏈接、表格和層、表單及CSS等。本書知識全面、概念清晰，以實(shí)用為目的，通過淺顯易懂的知識講解，再配以典型案例進(jìn)行知識技能的強(qiáng)化，使讀者容易掌握內(nèi)容，使學(xué)習(xí)不再枯燥。

本書主要有以下幾方面特色。

1．引入《Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)》的考點(diǎn)

以《Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)》的考點(diǎn)為知識點(diǎn)，以項(xiàng)目案例為載體，系統(tǒng)講解考取Web前端開發(fā)職業(yè)技能等級證書所需的知識考點(diǎn)和技能考點(diǎn)。

2．內(nèi)容全面，由淺入深

本書詳細(xì)介紹了Web前端開發(fā)中涉及的HTML和CSS的內(nèi)容和技巧，并重點(diǎn)講解了學(xué)習(xí)過程中難以理解和掌握的知識點(diǎn)，降低了讀者的學(xué)習(xí)難度。

3．理論和實(shí)踐相結(jié)合

本書每章都配有一定數(shù)量的實(shí)用案例，在全面、系統(tǒng)介紹各章知識內(nèi)容的基礎(chǔ)上，還提供了可以整合綜合知識的案例。通過各種案例將理論知識和實(shí)踐結(jié)合起來。

4．圖文并茂

本書的案例代碼大部分都配有相應(yīng)的運(yùn)行結(jié)果圖，效果直觀，使讀者可以獲得感性認(rèn)識，提高學(xué)習(xí)效率。

本書非常適合初學(xué)者學(xué)習(xí)和使用，可作為普通高校、高等職業(yè)院校“網(wǎng)頁設(shè)計(jì)與制作”課程的教學(xué)用書，同時(shí)，也可作為相關(guān)學(xué)科的培訓(xùn)教材和從事網(wǎng)頁設(shè)計(jì)、網(wǎng)站開發(fā)及網(wǎng)站編程人員的自學(xué)指導(dǎo)書和參考書。

本書由黑龍江農(nóng)業(yè)職業(yè)技術(shù)學(xué)院李佼輝、聶樹成任主編，欒奕娜、車延雪、任雪冬任副主編，王樹軍任主審，趙金利任參編并參與了部分章節(jié)的編寫工作。本書的第1、2、8章由李佼輝編寫，第3章及附錄由欒奕娜編寫，第4章由任雪冬編寫，第5、6章由聶樹成編寫，第7章由車延雪編寫。審校工作由王樹軍完成，李佼輝、聶樹成對全書進(jìn)行了內(nèi)容統(tǒng)籌、章節(jié)結(jié)構(gòu)設(shè)計(jì)和統(tǒng)稿。在本書編寫過程中，趙金利也提供了一定的幫助。

由于編者水平有限，書中難免存在不足之處，懇請廣大讀者不吝賜教并提出寶貴意見。

前言

第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識 1
1.1 互聯(lián)網(wǎng)基礎(chǔ)知識 1
1.1.1 Internet與Web 1
1.1.2 URI、URL、URN 2
1.1.3 服務(wù)器與瀏覽器 2
1.2 網(wǎng)頁的基礎(chǔ)知識 3
1.2.1 網(wǎng)頁的基本元素 3
1.2.2 靜態(tài)網(wǎng)頁 5
1.2.3 動態(tài)網(wǎng)頁 5
1.3 常見的網(wǎng)站類型 6
1.4 網(wǎng)頁制作軟件及標(biāo)準(zhǔn)技術(shù) 9
1.4.1 常用的網(wǎng)頁制作軟件 9
1.4.2 網(wǎng)頁制作標(biāo)準(zhǔn)技術(shù) 10
本章小結(jié) 11
第2章 網(wǎng)頁制作工具Dreamweaver 12
2.1 Dreamweaver簡介 12
2.2 DW的基本使用方法 17
本章小結(jié) 19
第3章 文本與文檔 20
3.1 網(wǎng)頁文本編輯 20
案例1 制作一個(gè)含文本的網(wǎng)頁 20
案例2 給網(wǎng)頁文本編輯樣式 24
實(shí)戰(zhàn)1 制作一個(gè)百度詩詞頁面 31
實(shí)戰(zhàn)2 制作一個(gè)騰訊新聞網(wǎng)菜單 31
3.2 網(wǎng)頁文檔編輯 31
案例1 制作“古詩詞譯文”網(wǎng)頁 31
案例2 使用項(xiàng)目編號制作“排行榜”
網(wǎng)頁 36
實(shí)戰(zhàn)1 制作“公司簡介”網(wǎng)頁 38
實(shí)戰(zhàn)2 制作“美容護(hù)膚”網(wǎng)頁 39
本章小結(jié) 40
第4章 圖像和多媒體 41
案例1 在網(wǎng)頁中插入圖像 41
案例2 在網(wǎng)頁中插入多媒體 47
實(shí)戰(zhàn)1 制作一個(gè)寵物狗網(wǎng)店網(wǎng)頁 59
實(shí)戰(zhàn)2 制作準(zhǔn)媽媽課堂網(wǎng)頁 60
本章小結(jié) 60
第5章 超鏈接 61
5.1 超鏈接的基本用法 61
案例1 制作一個(gè)文本的超鏈接 61
案例2 制作圖片超鏈接 64
案例3 制作商品信息展示 65
實(shí)戰(zhàn) 制作iPhone11商品展示 73
5.2 錨鏈接的應(yīng)用 73
案例1 制作錨鏈接 74
案例2 制作電子郵件鏈接（在案例1基礎(chǔ)上
完成） 78
5.3 超鏈接的綜合應(yīng)用 79
案例 制作網(wǎng)頁小說 79
實(shí)戰(zhàn) 制作網(wǎng)上教程 84
本章小結(jié) 85
第6章 表格和層 86
6.1 表格在網(wǎng)頁中的應(yīng)用 86
案例1 創(chuàng)建表格 86
案例2 跨行、跨列的表格 89
案例3 制作表格圖文混排—商品展示欄
頁面 93
實(shí)戰(zhàn)1 制作學(xué)生成績表 95
實(shí)戰(zhàn)2 進(jìn)行簡單的圖文混排 96
6.2 層布局 96
案例1 簡單的層布局 96
案例2 使用混合布局實(shí)現(xiàn)家裝網(wǎng)站 104
實(shí)戰(zhàn) 混合布局 108
本章小結(jié) 109
第7章 表單 110
案例1 用戶注冊網(wǎng)頁 110
案例2 會員注冊網(wǎng)頁 122
實(shí)戰(zhàn)1 用戶注冊頁面 138
實(shí)戰(zhàn)2 健康測試網(wǎng)頁 139
實(shí)戰(zhàn)3 國際航空網(wǎng)頁 140
本章小結(jié) 140
第8章 CSS 141
8.1 CSS選擇器 141
案例1 標(biāo)簽選擇器 141
案例2 類選擇器 145
案例3 ID選擇器 148
案例4 背景及偏移量 151
實(shí)戰(zhàn)1 文本屬性樣式 156
實(shí)戰(zhàn)2 背景屬性 156
8.2 CSS的應(yīng)用及優(yōu)先級 156
案例1 外部樣式表 156
案例2 行內(nèi)樣式表 161
案例3 樣式表優(yōu)先級 163
案例4 CSS優(yōu)先級 165
本章小結(jié) 170
Web前端開發(fā)（1+X）考試的考點(diǎn)知識 171
Web前端開發(fā)初級（1+X）理論考試樣題 176
Web前端開發(fā)初級（1+X）實(shí)操考試樣題 182
Web前端開發(fā)初級（1+X）理論考試樣題答案 194
Web前端開發(fā)初級（1+X）實(shí)操考試樣題答案 195
參考文獻(xiàn) 197

1. 庭院風(fēng)骨—樹、灌、籬 [創(chuàng)意房主 著]
2. Python語言程序設(shè)計(jì)教程 [郭其標(biāo) 房宜汕]
3. 微積分（經(jīng)管類）教程篇（下冊） [曹海軍 王海棠 周玲麗]
4. 微積分（經(jīng)管類）教程篇（上冊） [曹海軍 王海棠 周玲麗]
5. 微積分（經(jīng)管類）導(dǎo)學(xué)篇（上冊） [王海棠 曹海軍 周玲麗]
6. 網(wǎng)站前端技術(shù)案例教程（HTML+CSS+JavaScript）（第二版） [黃華升]
7. 線性代數(shù) [主編 史昱 陳鳳欣]
8. 電力電子技術(shù)課程學(xué)習(xí)及實(shí)驗(yàn)指導(dǎo) [主編 陳榮]
9. 成長對話：青春的榜樣 [主編　施端銀　黃武剛　應(yīng)巨林]
10. 人工智能應(yīng)用基礎(chǔ) [主編 楊纓 李佳]
11. 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
12. 電路與電子技術(shù)Ⅱ——電路分析基礎(chǔ) [主編 陳曉 金哲]
13. 飛機(jī)維修專業(yè)英語——飛機(jī)系統(tǒng)（第二版） [趙迎春]
14. 英語大爆炸：跟趣味情景劇學(xué)口語（微課版） [秦然　編著]
15. 機(jī)械工程制圖任務(wù)跟蹤訓(xùn)練 [主編 王瑞清 趙金考 周彥云 ]
16. 機(jī)械工程制圖 [主編 覃國萍 劉百順 禹晨]
17. 平面設(shè)計(jì)與制作項(xiàng)目化教程 [主編　李晨]
18. 后期影像剪輯技術(shù) [主編　郭建偉]
19. 人工智能概論（第二版） [主編　任云暉　丁紅　徐迎春 ]
20. 信息時(shí)代美育之道 [主編　劉宏宇　黎婭]
21. 數(shù)字媒體交互設(shè)計(jì)項(xiàng)目式教程（微課版） [主編　蘇陸]
22. 動畫運(yùn)動規(guī)律項(xiàng)目實(shí)例解析（微課版） [孫珊珊　袁維坤]
23. 自然語言處理 [主編　馮建周]
24. 新媒體內(nèi)容創(chuàng)作實(shí)務(wù)（微課版） [主編　覃思源]
25. 人工智能基礎(chǔ) [主編 余平 張春陽]
26. 人工智能導(dǎo)論 [主編 王飛 潘立武]
27. Amazing！兒童英語自然拼讀分級教材（全8冊） [王玲　編著]
28. Spark大數(shù)據(jù)處理技術(shù) [主編　劉仁山　周洪翠　莊新妍]
29. 毫無PS痕跡—你的第一本Photoshop書（第二版） [趙鵬 著]
30. 電視新聞制作（活頁式） [主編 王曉翠 劉傳琳]