“網(wǎng)頁設(shè)計與制作”是一門專業(yè)必修課，以培養(yǎng)學(xué)生的網(wǎng)頁設(shè)計與制作能力為出發(fā)點，本書參考《Web前端開發(fā)》職業(yè)技能證書標(biāo)準(zhǔn)，對接1+X Web前端開發(fā)等級考試和Web前端開發(fā)崗位需求，重構(gòu)課程內(nèi)容，以學(xué)習(xí)導(dǎo)航為點、學(xué)習(xí)環(huán)節(jié)為線、思政案例為面，介紹使用HTML、CSS及JavaScript進(jìn)行網(wǎng)頁設(shè)計與制作的一般技巧。全書共十一個情境，從邏輯上可分為三大部分，前五個情境為第一篇基礎(chǔ)篇，主要介紹網(wǎng)頁中的主要組成元素—文本、圖片、表格和超鏈接等知識；情境六至情境九為第二篇進(jìn)階篇，主要介紹模板、表單、CSS、JavaScript等知識；最后兩個情境為第三篇應(yīng)用篇，主要從實際應(yīng)用的角度出發(fā)，綜合前面所學(xué)的知識進(jìn)行綜合網(wǎng)站的實現(xiàn)、測試及發(fā)布。本書以實用為基本出發(fā)點，不僅包括各種網(wǎng)頁設(shè)計與制作的基礎(chǔ)理論，還強調(diào)了它們的具體應(yīng)用，使讀者既能打下堅實的理論基礎(chǔ)，又能掌握實際的操作技能。本書內(nèi)容經(jīng)過了長期的教學(xué)檢驗，證明是符合當(dāng)下職業(yè)教育發(fā)展要求的。本書可作為高職院校、成人高校和培訓(xùn)班的“網(wǎng)頁設(shè)計與制作”“Web前端開發(fā)”等課程的教材或參考書，也適合廣大網(wǎng)頁制作愛好者或相關(guān)從業(yè)人員使用。本書配套教學(xué)PPT、案例代碼、教學(xué)視頻等資源，可登錄華信教育資源網(wǎng)（http://www.hxedu.com.cn）注冊后免費下載，如有問題可與電子工業(yè)出版社聯(lián)系（E-mail：hxedu@phei.com.cn）。
劉磊，男，副教授，江西南昌人，現(xiàn)就職于江西工業(yè)職業(yè)技術(shù)學(xué)院，曾以主編、副主編身份分別出版教材《C語言程序設(shè)計》《計算機應(yīng)用基礎(chǔ)》。
目 錄
第一篇 基礎(chǔ)篇
情境一 網(wǎng)頁設(shè)計與制作概述 3
【學(xué)習(xí)導(dǎo)航】 3
1 制作第一個網(wǎng)頁 3
2 職業(yè)技能與知識點要求 3
3 素質(zhì)目標(biāo) 3
【學(xué)習(xí)環(huán)節(jié)】 3
1 學(xué)習(xí)路線 3
2 知識小天地 4
2.1 認(rèn)識網(wǎng)頁 4
2.2 網(wǎng)頁概念 4
2.3 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 5
2.4 Web服務(wù)器和客戶端 5
2.5 統(tǒng)一資源定位器（URL） 6
2.6 網(wǎng)頁制作的基本技術(shù) 6
2.7 常見網(wǎng)頁制作工具 7
【考核評價】 12
【同步技能考點測試】 12
【課后拓展】 12
情境二 制作純文本網(wǎng)頁 13
【學(xué)習(xí)導(dǎo)航】 13
1 制作革命根據(jù)地網(wǎng)頁 13
2 職業(yè)技能與知識點要求 13
3 素質(zhì)目標(biāo) 13
【學(xué)習(xí)環(huán)節(jié)】 13
1 學(xué)習(xí)路線 13
2 知識小天地 14
2.1 HTML發(fā)展歷程 14
2.2 HTML特點 14
2.3�。�!DOCTYPE＞標(biāo)記 15
2.4 ＜html＞＜/html＞標(biāo)記 15
2.5�。糷ead＞＜/head＞標(biāo)記 15
2.6�。糾eta /＞標(biāo)記—設(shè)置編碼格式 15
2.7 ＜meta /＞標(biāo)記—設(shè)置網(wǎng)頁描述 15
2.8�。糾eta /＞標(biāo)記—設(shè)置作者信息 16
2.9 ＜meta /＞標(biāo)記—設(shè)置頁面自動刷新和跳轉(zhuǎn) 16
2.10�。紅itle＞＜/title＞標(biāo)記 16
2.11�。糽ink /＞標(biāo)記 16
2.12 ＜script＞＜/script＞標(biāo)記 17
2.13�。糱ody＞＜/body＞標(biāo)記 17
2.14�。糷n＞＜/hn＞標(biāo)題標(biāo)記 17
2.15�。紁＞＜/p＞段落標(biāo)記 18
2.16�。糷r /＞水平線標(biāo)記 19
2.17�。糱r /＞換行標(biāo)記 19
2.18 ＜font＞＜/font＞字體標(biāo)記 20
2.19 字體樣式標(biāo)記 21
【考核評價】 24
【同步技能考點測試】 25
【課后拓展】 25
情境三 制作圖文混排網(wǎng)頁 26
【學(xué)習(xí)導(dǎo)航】 26
1 制作中國古代科技文化成就介紹網(wǎng)頁 26
2 職業(yè)技能與知識點要求 26
3 素質(zhì)目標(biāo) 26
【學(xué)習(xí)環(huán)節(jié)】 26
1 學(xué)習(xí)路線 26
2 知識小天地 27
2.1 無序列表 27
2.2 有序列表 28
2.3 自定義列表 29
2.4 常用圖片格式 30
2.5�。糹mg＞圖片標(biāo)記 31
2.6 圖片路徑的表示方法 33
【考核評價】 39
【同步技能考點測試】 40
【課后拓展】 40
情境四 制作表格布局的網(wǎng)頁 41
【學(xué)習(xí)導(dǎo)航】 41
1 制作歷史人物故事網(wǎng)頁 41
2 職業(yè)技能與知識點要求 41
3 素質(zhì)目標(biāo) 41
【學(xué)習(xí)環(huán)節(jié)】 41
1 學(xué)習(xí)路線 41
2 知識小天地 42
2.1 表格標(biāo)記 42
2.2 合并單元格 45
【考核評價】 51
【同步技能考點測試】 52
【課后拓展】 52
情境五 制作包含超鏈接的網(wǎng)頁 53
【學(xué)習(xí)導(dǎo)航】 53
1 綠水青山網(wǎng)站的設(shè)計與制作 53
2 職業(yè)技能與知識點要求 53
3 素質(zhì)目標(biāo) 53
【學(xué)習(xí)環(huán)節(jié)】 54
1 學(xué)習(xí)路線 54
2 學(xué)習(xí)小天地 54
2.1 超鏈接的定義 54
2.2 超鏈接的分類 54
2.3 文本超鏈接 54
2.4 圖像超鏈接 55
2.5 錨點超鏈接 57
【考核評價】 65
【同步技能考點測試】 65
【課后拓展】 65
第二篇 進(jìn)階篇
情境六 使用模板制作網(wǎng)頁 69
【學(xué)習(xí)導(dǎo)航】 69
1 書籍網(wǎng)頁的設(shè)計與制作 69
2 職業(yè)技能與知識點要求 69
3 素質(zhì)目標(biāo) 69
【學(xué)習(xí)環(huán)節(jié)】 69
1 學(xué)習(xí)路線 69
2 知識小天地 70
2.1 新建模板 70
2.2 管理模板 72
【考核評價】 78
【同步技能考點測試】 78
【課后拓展】 78
情境七 制作注冊網(wǎng)頁 79
【學(xué)習(xí)導(dǎo)航】 79
1 個人信息注冊網(wǎng)頁制作 79
2 職業(yè)技能與知識點要求 79
3 素質(zhì)目標(biāo) 79
【學(xué)習(xí)環(huán)節(jié)】 79
1 學(xué)習(xí)路線 79
2 知識小天地 80
2.1 表單的作用 80
2.2 表單標(biāo)記 80
【考核評價】 88
【同步技能考點測試】 89
【課后拓展】 89
情境八 使用CSS美化網(wǎng)頁 90
【學(xué)習(xí)導(dǎo)航】 90
1 中國航天成就網(wǎng)頁的設(shè)計與制作 90
2 職業(yè)技能與知識點要求 90
3 素質(zhì)目標(biāo) 90
【學(xué)習(xí)環(huán)節(jié)】 91
1 學(xué)習(xí)路線 91
2 知識小天地 91
2.1 什么是CSS 91
2.2 CSS的引入方式 91
2.3 CSS的兩個特性 92
2.4 CSS的基本語法 93
2.5 CSS選擇器的分類 93
2.6 CSS的屬性 98
【考核評價】 121
【同步技能考點測試】 121
【課后拓展】 121
情境九 使用JavaScript制作交互式注冊頁面 122
【學(xué)習(xí)導(dǎo)航】 122
1 交互式注冊頁面的設(shè)計與制作 122
2 職業(yè)技能與知識點要求 122
3 素質(zhì)目標(biāo) 122
【學(xué)習(xí)環(huán)節(jié)】 122
1 學(xué)習(xí)路線 122
2 知識小天地 123
2.1 JavaScript的組成 123
2.2 JavaScript的引用 124
2.3 JavaScript的語法 124
2.4 JavaScript的關(guān)鍵字 125
2.5 JavaScript的變量、數(shù)據(jù)類型和聲明 125
2.6 JavaScript的標(biāo)識符 125
2.7 JavaScript的全局屬性 126
2.8 JavaScript的運算符 126
2.9 JavaScript的分支循環(huán) 128
2.10 JavaScript的數(shù)組 130
2.11 JavaScript的字符串 132
2.12 JavaScript的正則表達(dá)式 133
2.13 JavaScript的函數(shù) 136
2.14 BOM對象 137
2.15 DOM對象 140
2.16 JavaScript的事件 142
【考核評價】 149
【同步技能考點測試】 150
【課后拓展】 150
第三篇 應(yīng)用篇
情境十 綜合網(wǎng)站規(guī)劃與設(shè)計 153
【學(xué)習(xí)導(dǎo)航】 153
1 學(xué)習(xí)網(wǎng)站的規(guī)劃與設(shè)計 153
2 職業(yè)技能與知識點要求 153
3 素質(zhì)目標(biāo) 153
【學(xué)習(xí)環(huán)節(jié)】 153
1 學(xué)習(xí)路線 153
2 知識小天地 154
2.1 網(wǎng)站設(shè)計與制作流程 154
2.2 定位網(wǎng)站主題 154
2.3 收集網(wǎng)站素材 155
2.4 設(shè)計網(wǎng)站導(dǎo)航菜單 155
2.5 設(shè)計網(wǎng)站LOGO 155
2.6 設(shè)計網(wǎng)站布局和風(fēng)格 156
【考核評價】 161
【同步技能考點測試】 162
【課后拓展】 162
情境十一 綜合網(wǎng)站的實現(xiàn)、測試與發(fā)布 163
【學(xué)習(xí)導(dǎo)航】 163
1 學(xué)習(xí)網(wǎng)站的實現(xiàn)、測試與發(fā)布 163
2 職業(yè)技能與知識點要求 163
3 素質(zhì)目標(biāo) 163
【學(xué)習(xí)環(huán)節(jié)】 163
1 學(xué)習(xí)路線 163
2 知識小天地 164
2.1 文件命名規(guī)范 164
2.2 HTML規(guī)范 165
2.3 CSS代碼規(guī)范 165
2.4 JavaScript代碼規(guī)范 165
2.5 在網(wǎng)頁中插入視頻 165
2.6 網(wǎng)站的測試 166
2.7 網(wǎng)站的發(fā)布 167
【考核評價】 174
【同步技能考點測試】 174
【課后拓展】 175
書單推薦
