單元1　網(wǎng)頁(yè)開(kāi)發(fā)入門與創(chuàng)建非遺項(xiàng)目站點(diǎn)　1

學(xué)習(xí)目標(biāo)　1

情景導(dǎo)入　1

【任務(wù)1.1】認(rèn)識(shí)網(wǎng)頁(yè)　1

【任務(wù)1.2】建立非遺項(xiàng)目站點(diǎn)　9

【任務(wù)1.3】嘗試制作非遺調(diào)研網(wǎng)頁(yè)　20

智海引航　28

【問(wèn)題1.1】靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的應(yīng)用領(lǐng)域　28

【問(wèn)題1.2】CSS3的新特性　29

匠心獨(dú)運(yùn)——翠微清響 流水高山　30

單元習(xí)題　30

單元2　創(chuàng)建網(wǎng)頁(yè)元素與制作非遺機(jī)構(gòu)介紹頁(yè)面和非遺國(guó)內(nèi)機(jī)構(gòu)詳情頁(yè)面　32

學(xué)習(xí)目標(biāo)　32

情景導(dǎo)入　32

【任務(wù)2.1】設(shè)計(jì)非遺機(jī)構(gòu)介紹頁(yè)面和非遺國(guó)內(nèi)機(jī)構(gòu)詳情頁(yè)面　33

【任務(wù)2.2】創(chuàng)建文本元素并制作非遺國(guó)內(nèi)機(jī)構(gòu)詳情頁(yè)面　34

【任務(wù)2.3】創(chuàng)建超鏈接并插入相關(guān)閱讀內(nèi)容　40

【任務(wù)2.4】插入圖片并制作非遺機(jī)構(gòu)介紹頁(yè)面　42

智海引航　46

【問(wèn)題】相對(duì)路徑和絕對(duì)路徑的區(qū)別　46

匠心獨(dú)運(yùn)——泥塑乾坤 紫砂傳奇　47

單元習(xí)題　47

單元3　表格應(yīng)用與制作非遺名錄頁(yè)面　49

學(xué)習(xí)目標(biāo)　49

情景導(dǎo)入　49

【任務(wù)3.1】設(shè)計(jì)非遺名錄頁(yè)面　49

【任務(wù)3.2】創(chuàng)建表格并制作非遺名錄　50

【任務(wù)3.3】表格結(jié)構(gòu)化標(biāo)記與非遺名錄優(yōu)化　61

【任務(wù)3.4】布局表格并制作非遺名錄頁(yè)面　64

智海引航　69

【問(wèn)題3.1】網(wǎng)頁(yè)不使用表格進(jìn)行復(fù)雜頁(yè)面布局的原因　69

【問(wèn)題3.2】常用的與表格相關(guān)的CSS屬性　69

匠心獨(dú)運(yùn)——吳腔軟語(yǔ) 歌韻千年　69

單元習(xí)題　70

單元4　HTML5表單與非遺網(wǎng)站登錄頁(yè)面和非遺網(wǎng)站注冊(cè)頁(yè)面的制作　71

學(xué)習(xí)目標(biāo)　71

情景引入　71

【任務(wù)4.1】設(shè)計(jì)非遺網(wǎng)站登錄頁(yè)面和注冊(cè)頁(yè)面　72

【任務(wù)4.2】創(chuàng)建表單并制作非遺網(wǎng)站登錄頁(yè)面　73

【任務(wù)4.3】添加表單控件并制作非遺網(wǎng)站注冊(cè)頁(yè)面　79

【任務(wù)4.4】設(shè)置HTML5表單控件屬性并驗(yàn)證表單數(shù)據(jù)　89

【任務(wù)4.5】使用正則表達(dá)式進(jìn)行復(fù)雜數(shù)據(jù)驗(yàn)證　95

智海引航　97

【問(wèn)題4.1】用戶提交表單后表單數(shù)據(jù)的處理過(guò)程　97

【問(wèn)題4.2】用戶繞過(guò)了部分驗(yàn)證后，確保數(shù)據(jù)安全的方式　97

匠心獨(dú)運(yùn)——太極生輝 武蘊(yùn)道心　98

單元習(xí)題　98

單元5　CSS基礎(chǔ)與制作非遺活動(dòng)詳情頁(yè)面　100

學(xué)習(xí)目標(biāo)　100

情景導(dǎo)入　100

【任務(wù)5.1】設(shè)計(jì)非遺活動(dòng)詳情頁(yè)面　101

【任務(wù)5.2】設(shè)計(jì)字體樣式并美化非遺活動(dòng)詳情頁(yè)面頭部區(qū)域　102

【任務(wù)5.3】精細(xì)排版文本并美化非遺活動(dòng)詳情頁(yè)面正文區(qū)域　117

【任務(wù)5.4】制作并美化非遺活動(dòng)詳情頁(yè)面　122

智海引航　131

【問(wèn)題5.1】舉例說(shuō)明CSS代碼調(diào)試方法　131

【問(wèn)題5.2】舉例說(shuō)明CSS的繼承性和層疊性　132

匠心獨(dú)運(yùn)——竹龍翻騰 薪火相傳　135

單元習(xí)題　135

單元6　CSS高級(jí)應(yīng)用與制作非遺項(xiàng)目申報(bào)指南頁(yè)面　137

學(xué)習(xí)目標(biāo)　137

情景導(dǎo)入　137

【任務(wù)6.1】設(shè)計(jì)非遺項(xiàng)目申報(bào)指南頁(yè)面　138

【任務(wù)6.2】創(chuàng)建列表并制作非遺項(xiàng)目申報(bào)指南區(qū)域　139

【任務(wù)6.3】設(shè)置邊框樣式并制作文件下載區(qū)域　150

【任務(wù)6.4】制作并美化水平導(dǎo)航欄　156

【任務(wù)6.5】設(shè)置背景樣式并美化非遺項(xiàng)目申報(bào)指南頁(yè)面　161

智海引航　174

【問(wèn)題6.1】列表在網(wǎng)頁(yè)上的默認(rèn)樣式　174

【問(wèn)題6.2】CSS3中新增的與背景設(shè)置相關(guān)的屬性　175

匠心獨(dú)運(yùn)——吳音婉轉(zhuǎn) 彈詞留香　175

單元習(xí)題　176

單元7　網(wǎng)頁(yè)布局與制作精彩非遺資訊頁(yè)面　178

學(xué)習(xí)目標(biāo)　178

情景導(dǎo)入　178

【任務(wù)7.1】設(shè)計(jì)精彩非遺資訊頁(yè)面　179

【任務(wù)7.2】認(rèn)識(shí)盒子模型并搭建精彩非遺資訊頁(yè)面整體布局　180

【任務(wù)7.3】了解元素浮動(dòng)并制作資訊推介區(qū)域　191

【任務(wù)7.4】學(xué)習(xí)元素定位并制作專題報(bào)道區(qū)域　202

【任務(wù)7.5】整合并美化精彩非遺資訊頁(yè)面　212

智海引航　214

【問(wèn)題7.1】實(shí)現(xiàn)多個(gè)塊級(jí)元素在同一行顯示的CSS屬性　214

【問(wèn)題7.2】舉例說(shuō)明常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)和網(wǎng)頁(yè)布局技術(shù)　215

匠心獨(dú)運(yùn)——昆韻流長(zhǎng) 古調(diào)新聲　217

單元習(xí)題　217

單元8　JavaScript基礎(chǔ)與非遺網(wǎng)站首頁(yè)的制作　220

學(xué)習(xí)目標(biāo)　220

情景導(dǎo)入　220

【任務(wù)8.1】設(shè)計(jì)非遺網(wǎng)站首頁(yè)　221

【任務(wù)8.2】熟悉JavaScript基礎(chǔ)語(yǔ)法并制作非遺網(wǎng)站首頁(yè)輪播圖　222

【任務(wù)8.3】了解常用函數(shù)并實(shí)現(xiàn)定時(shí)切換圖片　237

【任務(wù)8.4】認(rèn)識(shí)JavaScript事件并實(shí)現(xiàn)手動(dòng)切換圖片　239

【任務(wù)8.5】制作輪播圖/ 244

【任務(wù)8.6】制作非遺網(wǎng)站首頁(yè)　247

智海引航　256

【問(wèn)題8.1】JavaScript中與異常捕獲有關(guān)的機(jī)制　256

【問(wèn)題8.2】避免JavaScript 作為弱類型編程語(yǔ)言帶來(lái)問(wèn)題的方法　256

匠心獨(dú)運(yùn)——古韻新彩 桃花依舊　257

單元習(xí)題　257