目　錄
第一篇　基礎(chǔ)篇
情境一　網(wǎng)頁(yè)設(shè)計(jì)與制作概述 3
【學(xué)習(xí)導(dǎo)航】 3
1　制作第一個(gè)網(wǎng)頁(yè) 3
2　職業(yè)技能與知識(shí)點(diǎn)要求 3
3　素質(zhì)目標(biāo) 3
【學(xué)習(xí)環(huán)節(jié)】 3
1　學(xué)習(xí)路線(xiàn) 3
2　知識(shí)小天地 4
2.1　認(rèn)識(shí)網(wǎng)頁(yè) 4
2.2　網(wǎng)頁(yè)概念 4
2.3　靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè) 5
2.4　Web服務(wù)器和客戶(hù)端 5
2.5　統(tǒng)一資源定位器（URL） 6
2.6　網(wǎng)頁(yè)制作的基本技術(shù) 6
2.7　常見(jiàn)網(wǎng)頁(yè)制作工具 7
【考核評(píng)價(jià)】 12
【同步技能考點(diǎn)測(cè)試】 12
【課后拓展】 12
情境二　制作純文本網(wǎng)頁(yè) 13
【學(xué)習(xí)導(dǎo)航】 13
1　制作革命根據(jù)地網(wǎng)頁(yè) 13
2　職業(yè)技能與知識(shí)點(diǎn)要求 13
3　素質(zhì)目標(biāo) 13
【學(xué)習(xí)環(huán)節(jié)】 13
1　學(xué)習(xí)路線(xiàn) 13
2　知識(shí)小天地 14
2.1　HTML發(fā)展歷程 14
2.2　HTML特點(diǎn) 14
2.3　＜!DOCTYPE＞標(biāo)記 15
2.4�。糷tml＞＜/html＞標(biāo)記 15
2.5　＜head＞＜/head＞標(biāo)記 15
2.6�。糾eta /＞標(biāo)記—設(shè)置編碼格式 15
2.7　＜meta /＞標(biāo)記—設(shè)置網(wǎng)頁(yè)描述 15
2.8　＜meta /＞標(biāo)記—設(shè)置作者信息 16
2.9�。糾eta /＞標(biāo)記—設(shè)置頁(yè)面自動(dòng)刷新和跳轉(zhuǎn) 16
2.10�。紅itle＞＜/title＞標(biāo)記 16
2.11　＜link /＞標(biāo)記 16
2.12�。約cript＞＜/script＞標(biāo)記 17
2.13　＜body＞＜/body＞標(biāo)記 17
2.14�。糷n＞＜/hn＞標(biāo)題標(biāo)記 17
2.15　＜p＞＜/p＞段落標(biāo)記 18
2.16�。糷r /＞水平線(xiàn)標(biāo)記 19
2.17　＜br /＞換行標(biāo)記 19
2.18�。糵ont＞＜/font＞字體標(biāo)記 20
2.19　字體樣式標(biāo)記 21
【考核評(píng)價(jià)】 24
【同步技能考點(diǎn)測(cè)試】 25
【課后拓展】 25
情境三　制作圖文混排網(wǎng)頁(yè) 26
【學(xué)習(xí)導(dǎo)航】 26
1　制作中國(guó)古代科技文化成就介紹網(wǎng)頁(yè) 26
2　職業(yè)技能與知識(shí)點(diǎn)要求 26
3　素質(zhì)目標(biāo) 26
【學(xué)習(xí)環(huán)節(jié)】 26
1　學(xué)習(xí)路線(xiàn) 26
2　知識(shí)小天地 27
2.1　無(wú)序列表 27
2.2　有序列表 28
2.3　自定義列表 29
2.4　常用圖片格式 30
2.5　＜img＞圖片標(biāo)記 31
2.6　圖片路徑的表示方法 33
【考核評(píng)價(jià)】 39
【同步技能考點(diǎn)測(cè)試】 40
【課后拓展】 40

情境四　制作表格布局的網(wǎng)頁(yè) 41
【學(xué)習(xí)導(dǎo)航】 41
1　制作歷史人物故事網(wǎng)頁(yè) 41
2　職業(yè)技能與知識(shí)點(diǎn)要求 41
3　素質(zhì)目標(biāo) 41
【學(xué)習(xí)環(huán)節(jié)】 41
1　學(xué)習(xí)路線(xiàn) 41
2　知識(shí)小天地 42
2.1　表格標(biāo)記 42
2.2　合并單元格 45
【考核評(píng)價(jià)】 51
【同步技能考點(diǎn)測(cè)試】 52
【課后拓展】 52
情境五　制作包含超鏈接的網(wǎng)頁(yè) 53
【學(xué)習(xí)導(dǎo)航】 53
1　綠水青山網(wǎng)站的設(shè)計(jì)與制作 53
2　職業(yè)技能與知識(shí)點(diǎn)要求 53
3　素質(zhì)目標(biāo) 53
【學(xué)習(xí)環(huán)節(jié)】 54
1　學(xué)習(xí)路線(xiàn) 54
2　學(xué)習(xí)小天地 54
2.1　超鏈接的定義 54
2.2　超鏈接的分類(lèi) 54
2.3　文本超鏈接 54
2.4　圖像超鏈接 55
2.5　錨點(diǎn)超鏈接 57
【考核評(píng)價(jià)】 65
【同步技能考點(diǎn)測(cè)試】 65
【課后拓展】 65
第二篇　進(jìn)階篇
情境六　使用模板制作網(wǎng)頁(yè) 69
【學(xué)習(xí)導(dǎo)航】 69
1　書(shū)籍網(wǎng)頁(yè)的設(shè)計(jì)與制作 69
2　職業(yè)技能與知識(shí)點(diǎn)要求 69
3　素質(zhì)目標(biāo) 69
【學(xué)習(xí)環(huán)節(jié)】 69
1　學(xué)習(xí)路線(xiàn) 69
2　知識(shí)小天地 70
2.1　新建模板 70
2.2　管理模板 72
【考核評(píng)價(jià)】 78
【同步技能考點(diǎn)測(cè)試】 78
【課后拓展】 78
情境七　制作注冊(cè)網(wǎng)頁(yè) 79
【學(xué)習(xí)導(dǎo)航】 79
1　個(gè)人信息注冊(cè)網(wǎng)頁(yè)制作 79
2　職業(yè)技能與知識(shí)點(diǎn)要求 79
3　素質(zhì)目標(biāo) 79
【學(xué)習(xí)環(huán)節(jié)】 79
1　學(xué)習(xí)路線(xiàn) 79
2　知識(shí)小天地 80
2.1　表單的作用 80
2.2　表單標(biāo)記 80
【考核評(píng)價(jià)】 88
【同步技能考點(diǎn)測(cè)試】 89
【課后拓展】 89
情境八　使用CSS美化網(wǎng)頁(yè) 90
【學(xué)習(xí)導(dǎo)航】 90
1　中國(guó)航天成就網(wǎng)頁(yè)的設(shè)計(jì)與制作 90
2　職業(yè)技能與知識(shí)點(diǎn)要求 90
3　素質(zhì)目標(biāo) 90
【學(xué)習(xí)環(huán)節(jié)】 91
1　學(xué)習(xí)路線(xiàn) 91
2　知識(shí)小天地 91
2.1　什么是CSS 91
2.2　CSS的引入方式 91
2.3　CSS的兩個(gè)特性 92
2.4　CSS的基本語(yǔ)法 93
2.5　CSS選擇器的分類(lèi) 93
2.6　CSS的屬性 98
【考核評(píng)價(jià)】 121
【同步技能考點(diǎn)測(cè)試】 121
【課后拓展】 121
情境九　使用JavaScript制作交互式注冊(cè)頁(yè)面 122
【學(xué)習(xí)導(dǎo)航】 122
1　交互式注冊(cè)頁(yè)面的設(shè)計(jì)與制作 122
2　職業(yè)技能與知識(shí)點(diǎn)要求 122
3　素質(zhì)目標(biāo) 122
【學(xué)習(xí)環(huán)節(jié)】 122
1　學(xué)習(xí)路線(xiàn) 122
2　知識(shí)小天地 123
2.1　JavaScript的組成 123
2.2　JavaScript的引用 124
2.3　JavaScript的語(yǔ)法 124
2.4　JavaScript的關(guān)鍵字 125
2.5　JavaScript的變量、數(shù)據(jù)類(lèi)型和聲明 125
2.6　JavaScript的標(biāo)識(shí)符 125
2.7　JavaScript的全局屬性 126
2.8　JavaScript的運(yùn)算符 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對(duì)象 137
2.15　DOM對(duì)象 140
2.16　JavaScript的事件 142
【考核評(píng)價(jià)】 149
【同步技能考點(diǎn)測(cè)試】 150
【課后拓展】 150
第三篇　應(yīng)用篇
情境十　綜合網(wǎng)站規(guī)劃與設(shè)計(jì) 153
【學(xué)習(xí)導(dǎo)航】 153
1　學(xué)習(xí)網(wǎng)站的規(guī)劃與設(shè)計(jì) 153
2　職業(yè)技能與知識(shí)點(diǎn)要求 153
3　素質(zhì)目標(biāo) 153
【學(xué)習(xí)環(huán)節(jié)】 153
1　學(xué)習(xí)路線(xiàn) 153
2　知識(shí)小天地 154
2.1　網(wǎng)站設(shè)計(jì)與制作流程 154
2.2　定位網(wǎng)站主題 154
2.3　收集網(wǎng)站素材 155
2.4　設(shè)計(jì)網(wǎng)站導(dǎo)航菜單 155
2.5　設(shè)計(jì)網(wǎng)站LOGO 155
2.6　設(shè)計(jì)網(wǎng)站布局和風(fēng)格 156
【考核評(píng)價(jià)】 161
【同步技能考點(diǎn)測(cè)試】 162
【課后拓展】 162
情境十一　綜合網(wǎng)站的實(shí)現(xiàn)、測(cè)試與發(fā)布 163
【學(xué)習(xí)導(dǎo)航】 163
1　學(xué)習(xí)網(wǎng)站的實(shí)現(xiàn)、測(cè)試與發(fā)布 163
2　職業(yè)技能與知識(shí)點(diǎn)要求 163
3　素質(zhì)目標(biāo) 163
【學(xué)習(xí)環(huán)節(jié)】 163
1　學(xué)習(xí)路線(xiàn) 163
2　知識(shí)小天地 164
2.1　文件命名規(guī)范 164
2.2　HTML規(guī)范 165
2.3　CSS代碼規(guī)范 165
2.4　JavaScript代碼規(guī)范 165
2.5　在網(wǎng)頁(yè)中插入視頻 165
2.6　網(wǎng)站的測(cè)試 166
2.7　網(wǎng)站的發(fā)布 167
【考核評(píng)價(jià)】 174
【同步技能考點(diǎn)測(cè)試】 174
【課后拓展】 175