考點(diǎn)導(dǎo)向： 緊扣等級標(biāo)準(zhǔn)考點(diǎn)

循序漸進(jìn)： 內(nèi)容全面由淺入深

知行合一：理論實(shí)踐緊密結(jié)合

直觀易學(xué)：圖文并茂效果清晰

前 言

新一輪科技革命與信息技術(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ā)展對新時代產(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é)生的必修課，同時也可以作為非計(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)化，使讀者容易掌握相關(guān)知識，使學(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í)效率。

本書由黑龍江農(nóng)業(yè)職業(yè)技術(shù)學(xué)院的李佼輝、于新奇任主編，欒奕娜、聶樹成、車延雪、任雪冬任副主編，王樹軍任主審。本書的第1、2、8章由李佼輝編寫，第3章及附錄由欒奕娜編寫，第4章由任雪冬編寫，第5、6章由于新奇編寫，第7章由聶樹成、車延雪編寫，參與編寫的還有東軟教育科技集團(tuán)元宇宙研究院副院長張明寶教授，對全書實(shí)訓(xùn)項(xiàng)目的代碼進(jìn)行驗(yàn)證、校對和補(bǔ)充。審校工作由王樹軍完成，李佼輝、于新奇對全書進(jìn)行了內(nèi)容統(tǒng)籌、章節(jié)結(jié)構(gòu)設(shè)計(jì)和統(tǒng)稿。

由于編者水平有限，書中難免存在不足之處，還懇請廣大讀者不吝賜教。

本書線上課程總碼

編 者

2025年1月

前言

第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 Dreamweaver的基本操作 17
本章小結(jié) 19
第3章 文本與文檔 20
3.1 網(wǎng)頁文本編輯 20
案例1 制作一個含文本的網(wǎng)頁 20
案例2 給網(wǎng)頁文本編輯樣式 24
實(shí)戰(zhàn)1 制作一個百度詩詞頁面 31
實(shí)戰(zhàn)2 制作一個騰訊新聞網(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 制作一個寵物狗網(wǎng)店網(wǎng)頁 59
實(shí)戰(zhàn)2 制作準(zhǔn)媽媽課堂網(wǎng)頁 60
本章小結(jié) 60
第5章 超鏈接 61
5.1 超鏈接的基本用法 61
案例1 制作一個文本的超鏈接 61
案例2 制作圖片超鏈接 64
案例3 制作商品信息展示 65
實(shí)戰(zhàn) 制作手機(jī)商品展示 73
5.2 錨鏈接的應(yīng)用 73
案例1 制作錨鏈接 74
案例2 制作電子郵件鏈接 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. 信息技術(shù)基礎(chǔ)（麒麟操作系統(tǒng)+WPS Office） [主編　芮雪　蔣莉　王亮亮]
2. Office高級應(yīng)用項(xiàng)目式教程（第2版） [主編 李觀金 張倩文 黎夏克 ]
3. 巧用翻譯學(xué)英語：英漢互譯500例 [王學(xué)文 著]
4. 高等教育多維評價體系構(gòu)建與高質(zhì)量發(fā)展研究 [張妍 著]
5. 系統(tǒng)規(guī)劃與管理師章節(jié)習(xí)題與考點(diǎn)特訓(xùn)（第二版） [主編 薛大龍]
6. 計(jì)算機(jī)操作系統(tǒng)實(shí)踐指導(dǎo)（openEuler版） [主編 秦光 曾陳萍 岳付強(qiáng)]
7. 信息系統(tǒng)管理工程師真題及�？季砭�析（適用機(jī)考） [主 編 薛大龍 程 剛 上官緒]
8. 航海類院校體育教育教學(xué)研究 [張利超 李寧 著]
9. 新時代背景下我國職業(yè)教育產(chǎn)教融合長效機(jī)制建設(shè)研究 [王玉賢 著]
10. 電路分析 [主編 李飛 毛先柏]
11. 信息系統(tǒng)管理工程師（適用第2版大綱）一站通關(guān) [指尖瘋　編著]
12. 傳統(tǒng)山水畫論解讀與實(shí)踐 [陳鈉 著]
13. 網(wǎng)絡(luò)工程師備考一本通（適配第6版考綱） [夏杰 編著]
14. 陳孝云的職教理想與情懷 [祝吉太 江傳瑞 張義廷 著]
15. 地方本科院校電子信息學(xué)科課程思政案例集 [王甫]
16. Excel數(shù)據(jù)處理與分析（第二版） [主編 張志明 鄒 蕾]
17. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
18. 倉儲管理實(shí)務(wù)（第二版） [周寧武 編著]
19. 基于AE與C#的地理信息系統(tǒng)二次開發(fā) [李小根 賈艷昌 喬翠平 姜彤 ]
20. 2023年長沙市文化和旅游業(yè)發(fā)展報(bào)告 [主編 陳莉]
21. 舞臺化妝造型設(shè)計(jì) [主編 劉思彤 張 濤 張憶雨]
22. 產(chǎn)教融合視角高校體育專業(yè)實(shí)踐教學(xué)體系構(gòu)建研究 [楊柳青 葉華兵 著]
23. 知識圖譜及應(yīng)用案例 [張善文 黃文準(zhǔn) 于長青 陳明淑]
24. Python程序設(shè)計(jì)案例教程（微課版） [主編　石利平　田輝平　余以勝]
25. 皓月繁星：青少年兒童心理成長手冊 [主　編　林贊歌 副主編　杜志南]
26. 材料力學(xué) [章寶華 趙新勝 徐斌]
27. 系統(tǒng)集成項(xiàng)目管理工程師考試32小時通關(guān)（第3版） [主編　薛大龍 副主編　上官緒陽]
28. 軟考論文高分特訓(xùn)與范文10篇——系統(tǒng)分析師（第二版） [薛大龍 鄒月平 施游]
29. 黃河海勃灣水利樞紐防凌安全運(yùn)行 [王戰(zhàn)領(lǐng) 王叢發(fā) 范瑜彬 著]
30. 大學(xué)生心理健康教育 [方雄 著]