本書以搭建一個非物質文化遺產的網站項目為主線，介紹了HTML5、CSS3、JavaScript及相關的Web前端開發(fā)技術。全書共8個單元、36個任務，以項目導向、任務驅動的方式進行內容介紹，解析網頁制作的知識和技能。本書的8個單元分別是網頁開發(fā)入門與創(chuàng)建非遺項目站點、創(chuàng)建網頁元素與制作非遺機構介紹頁面和非遺國內機構詳情頁面、表格應用與制作非遺名錄頁面、HTML5表單與非遺網站登錄頁面和非遺網站注冊頁面的制作、CSS基礎與制作非遺活動詳情頁面、CSS高級應用與制作非遺項目申報指南頁面、網頁布局與制作精彩非遺資訊頁面、JavaScript基礎與非遺網站首頁的制作。
本書可以作為應用型本科、職業(yè)本科、高職高專院校計算機類相關專業(yè)“Web前端開發(fā)技術”課程的教材，也可以作為網頁設計與制作愛好者和初學者的自學參考書。
1. 項目導向，任務驅動，強化技能。本書以非遺網站項目貫穿，劃分為八大模塊來精心組織HTML5、CSS3、JavaScript相關內容。
2. 以崗定標，崗課直通，學以致用。對接課程內容，增設項目情景，讓讀者在學習過程中了解真實的工作場景和任務。
3. 產教融合，強調實踐，鼓勵創(chuàng)新。通過設計啟發(fā)性的“邊學邊思”“技術辨析”“智海引航”等，為解決實際問題提供新穎思路和解決方案，培養(yǎng)計算機思維和創(chuàng)新思維。
高鶯，碩士研究生，講師/工程師，長期從事前端技術開發(fā)課程的理論和實踐教學，指導學生獲得江蘇省大學生職業(yè)技能比賽一等獎1項，國賽一等獎1項，江蘇省領航杯大數據分析賽項三等獎，獲江蘇省職業(yè)院校技能大賽優(yōu)秀指導教師的稱號。出版教材3部、軟件著作權3項，累計發(fā)表各類高水平專業(yè)論文10余篇。
單元1 網頁開發(fā)入門與創(chuàng)建非遺項目站點 1
學習目標 1
情景導入 1
【任務1.1】認識網頁 1
【任務1.2】建立非遺項目站點 9
【任務1.3】嘗試制作非遺調研網頁 20
智海引航 28
【問題1.1】靜態(tài)網頁和動態(tài)網頁技術的應用領域 28
【問題1.2】CSS3的新特性 29
匠心獨運——翠微清響 流水高山 30
單元習題 30
單元2 創(chuàng)建網頁元素與制作非遺機構介紹頁面和非遺國內機構詳情頁面 32
學習目標 32
情景導入 32
【任務2.1】設計非遺機構介紹頁面和非遺國內機構詳情頁面 33
【任務2.2】創(chuàng)建文本元素并制作非遺國內機構詳情頁面 34
【任務2.3】創(chuàng)建超鏈接并插入相關閱讀內容 40
【任務2.4】插入圖片并制作非遺機構介紹頁面 42
智海引航 46
【問題】相對路徑和絕對路徑的區(qū)別 46
匠心獨運——泥塑乾坤 紫砂傳奇 47
單元習題 47
單元3 表格應用與制作非遺名錄頁面 49
學習目標 49
情景導入 49
【任務3.1】設計非遺名錄頁面 49
【任務3.2】創(chuàng)建表格并制作非遺名錄 50
【任務3.3】表格結構化標記與非遺名錄優(yōu)化 61
【任務3.4】布局表格并制作非遺名錄頁面 64
智海引航 69
【問題3.1】網頁不使用表格進行復雜頁面布局的原因 69
【問題3.2】常用的與表格相關的CSS屬性 69
匠心獨運——吳腔軟語 歌韻千年 69
單元習題 70
單元4 HTML5表單與非遺網站登錄頁面和非遺網站注冊頁面的制作 71
學習目標 71
情景引入 71
【任務4.1】設計非遺網站登錄頁面和注冊頁面 72
【任務4.2】創(chuàng)建表單并制作非遺網站登錄頁面 73
【任務4.3】添加表單控件并制作非遺網站注冊頁面 79
【任務4.4】設置HTML5表單控件屬性并驗證表單數據 89
【任務4.5】使用正則表達式進行復雜數據驗證 95
智海引航 97
【問題4.1】用戶提交表單后表單數據的處理過程 97
【問題4.2】用戶繞過了部分驗證后，確保數據安全的方式 97
匠心獨運——太極生輝 武蘊道心 98
單元習題 98
單元5 CSS基礎與制作非遺活動詳情頁面 100
學習目標 100
情景導入 100
【任務5.1】設計非遺活動詳情頁面 101
【任務5.2】設計字體樣式并美化非遺活動詳情頁面頭部區(qū)域 102
【任務5.3】精細排版文本并美化非遺活動詳情頁面正文區(qū)域 117
【任務5.4】制作并美化非遺活動詳情頁面 122
智海引航 131
【問題5.1】舉例說明CSS代碼調試方法 131
【問題5.2】舉例說明CSS的繼承性和層疊性 132
匠心獨運——竹龍翻騰 薪火相傳 135
單元習題 135
單元6 CSS高級應用與制作非遺項目申報指南頁面 137
學習目標 137
情景導入 137
【任務6.1】設計非遺項目申報指南頁面 138
【任務6.2】創(chuàng)建列表并制作非遺項目申報指南區(qū)域 139
【任務6.3】設置邊框樣式并制作文件下載區(qū)域 150
【任務6.4】制作并美化水平導航欄 156
【任務6.5】設置背景樣式并美化非遺項目申報指南頁面 161
智海引航 174
【問題6.1】列表在網頁上的默認樣式 174
【問題6.2】CSS3中新增的與背景設置相關的屬性 175
匠心獨運——吳音婉轉 彈詞留香 175
單元習題 176
單元7 網頁布局與制作精彩非遺資訊頁面 178
學習目標 178
情景導入 178
【任務7.1】設計精彩非遺資訊頁面 179
【任務7.2】認識盒子模型并搭建精彩非遺資訊頁面整體布局 180
【任務7.3】了解元素浮動并制作資訊推介區(qū)域 191
【任務7.4】學習元素定位并制作專題報道區(qū)域 202
【任務7.5】整合并美化精彩非遺資訊頁面 212
智海引航 214
【問題7.1】實現多個塊級元素在同一行顯示的CSS屬性 214
【問題7.2】舉例說明常見的網頁布局設計和網頁布局技術 215
匠心獨運——昆韻流長 古調新聲 217
單元習題 217
單元8 JavaScript基礎與非遺網站首頁的制作 220
學習目標 220
情景導入 220
【任務8.1】設計非遺網站首頁 221
【任務8.2】熟悉JavaScript基礎語法并制作非遺網站首頁輪播圖 222
【任務8.3】了解常用函數并實現定時切換圖片 237
【任務8.4】認識JavaScript事件并實現手動切換圖片 239
【任務8.5】制作輪播圖/ 244
【任務8.6】制作非遺網站首頁 247
智海引航 256
【問題8.1】JavaScript中與異常捕獲有關的機制 256
【問題8.2】避免JavaScript 作為弱類型編程語言帶來問題的方法 256
匠心獨運——古韻新彩 桃花依舊 257
單元習題 257
書單推薦
