引入《Web 前端開發職業技能等級標準》的考點，案例豐富、突出實踐

詳細介紹Web 前端開發中涉及的HTML 和CSS 的內容及技巧

大部分案例代碼配有運行結果圖，效果直觀、易于理解

通過各種案例將理論知識與實踐操作結合起來

突出技能訓練，符合1+X 精神

新一輪科技革命與信息技術革命的到來，推動了產業結構調整與經濟轉型升級發展新業態的出現。戰略型新興產業的快速爆發式發展對新時代產業人才的培養提出了新的要求與挑戰。目前，企業對Web前端開發工程師的需求量極大，全國總缺口每年近百萬人。隨著移動互聯網技術的高速發展，網站在靜態頁面的基礎上添加了各類桌面軟件，網頁不再只承載單一的文字和圖片，而且要求具備炫酷的頁面交互和跨終端的適配兼容功能，使用富媒體使網頁內容更加生動，從而讓用戶有更好的使用體驗，這些都是基于Web前端技術來實現的。

“網頁設計與制作”是Web前端技術的基礎，也是計算機專業課程體系中的專業基礎課，其涉及的內容和技術是應用面比較廣且比較容易學習和掌握的。“網頁設計與制作”是大專院校計算機專業學生的必修課，同時也可以作為非計算機專業學生的選修課或限選課。

本書以《Web前端開發職業技能等級標準》中要求的職業素養和崗位技術技能為重點，以專業技能為模塊，以工作任務為驅動進行編寫，使讀者對Web前端開發的技術體系有更系統、更清晰的認識。

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

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

1．引入《Web前端開發職業技能等級標準》的考點

以《Web前端開發職業技能等級標準》的考點為知識點，以項目案例為載體，系統講解考取Web前端開發職業技能等級證書所需的知識考點和技能考點。

2．內容全面，由淺入深

本書詳細介紹了Web前端開發中涉及的HTML和CSS的內容和技巧，并重點講解了學習過程中難以理解和掌握的知識點，降低了讀者的學習難度。

3．理論和實踐相結合

本書每章都配有一定數量的實用案例，在全面、系統介紹各章知識內容的基礎上，還提供了可以整合綜合知識的案例。通過各種案例將理論知識和實踐結合起來。

4．圖文并茂

本書的案例代碼大部分都配有相應的運行結果圖，效果直觀，使讀者可以獲得感性認識，提高學習效率。

本書非常適合初學者學習和使用，可作為普通高校、高等職業院校“網頁設計與制作”課程的教學用書，同時，也可作為相關學科的培訓教材和從事網頁設計、網站開發及網站編程人員的自學指導書和參考書。

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

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

前言

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

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