PAGE2《Web前端開發(fā)技術(shù)》課程教案適用專業(yè)：授課班級：授課教師：編制日期：

教案名稱單元2制作非遺機構(gòu)介紹和詳情頁面—創(chuàng)建網(wǎng)頁元素計劃學(xué)時4學(xué)時本次授課類型□理論□實驗?理實一體□實訓(xùn)□實習(xí)教學(xué)目標知識目標1.掌握使用原型設(shè)計工具Axure制作網(wǎng)頁原型圖的方法。2.理解HTML中文本元素、超鏈接和圖片標記的使用。3.熟悉網(wǎng)頁元素的布局與設(shè)計原則。能力目標1.掌握標題和段落的創(chuàng)建2.掌握超鏈接的創(chuàng)建及屬性設(shè)置3.能正確插入圖片并對圖片進行設(shè)置4.能設(shè)置正確的相對路徑與絕對路徑素質(zhì)目標1.強化頁面布局的規(guī)范意識

2.培養(yǎng)文化遺產(chǎn)保護的數(shù)字化表達能力思政目標1.增強對非遺機構(gòu)文化價值的認同感2.樹立技術(shù)賦能文化傳播的責(zé)任意識教學(xué)重點1.文本結(jié)構(gòu)化標簽的語義化使用（<h1>-<h6>/<p>）

2.超鏈接錨點與跨頁面跳轉(zhuǎn)實現(xiàn)

3.圖片路徑引用與無障礙屬性（alt）規(guī)范教學(xué)難點1.原型設(shè)計與實際代碼的轉(zhuǎn)化銜接

2.相對路徑/絕對路徑的正確應(yīng)用

3.多元素協(xié)同的頁面語義結(jié)構(gòu)設(shè)計教學(xué)設(shè)計思路教學(xué)效果及改進思路絕大部分學(xué)生能夠掌握本項目中的知識點和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實施過程要有詳細教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元2的相關(guān)微課視頻，完成在線測試。發(fā)布Axure入門視頻（繪制矩形/文本框/按鈕）

，提供非遺機構(gòu)文字圖片素材包。（二）學(xué)生按教學(xué)要求完成預(yù)習(xí)材料學(xué)習(xí)，記錄學(xué)習(xí)過程中的疑問點。（三）教師通過教學(xué)平臺數(shù)據(jù)分析學(xué)習(xí)進度，對需要加強指導(dǎo)的學(xué)生提供個性化線上輔導(dǎo)，確保全體學(xué)員達到預(yù)習(xí)目標。二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入小新在完成非遺項目站點的前期準備工作后，著手制作非遺機構(gòu)介紹頁面時遇到了開發(fā)效率問題。由于缺乏系統(tǒng)規(guī)劃，他在編寫網(wǎng)頁代碼時頻繁變更設(shè)計思路，導(dǎo)致工作進展受阻。經(jīng)前端工程師王威學(xué)長指導(dǎo)，小新認識到規(guī)范的網(wǎng)站開發(fā)流程應(yīng)當(dāng)遵循"整體規(guī)劃→頁面設(shè)計→原型制作→開發(fā)實施"的標準化流程。（二）任務(wù)1創(chuàng)建文本元素并制作非遺國內(nèi)機構(gòu)詳情頁面（1學(xué)時）1.任務(wù)描述通過創(chuàng)建網(wǎng)頁元素（包括各級標題元素、段落元素、特殊字符等）制作非遺國內(nèi)機構(gòu)詳情頁面主題，效果圖如2-3所示。2.任務(wù)準備(1)了解標題元素<h1>-<h6>,其中<h1>為最大級別，<h6>為最小級別。(2)了解段落元素<p>……<p/>(3)了解特殊字符，常見特殊字符。(4)了解文本修飾標記<b>加粗修飾標記<em>強調(diào)斜體修飾標記<u>下劃線修飾標記3.任務(wù)實施1.主要實施步驟：制作非遺專業(yè)機構(gòu)詳情頁面(1)創(chuàng)建網(wǎng)頁文件。打開HBuilderX,創(chuàng)建一個新的網(wǎng)頁文件，并保存在對應(yīng)的站點目錄下。(2)根據(jù)非遺國內(nèi)機構(gòu)詳情頁面的原型圖創(chuàng)建各級標題和段落。(3)為了頁面美觀，本任務(wù)將標題文本居中顯示，使用了CSS代碼，此處不展開說明，后續(xù)會詳細介紹。<h2style="text-align:center;">中國非物質(zhì)文化遺產(chǎn)保護中心</h2>非遺國內(nèi)機構(gòu)詳情頁面的參考代碼如下。2.師生活動：教師建立互助學(xué)習(xí)小組，促進共同進步。學(xué)生互相指導(dǎo)，分享學(xué)習(xí)心得。3.教學(xué)方法：采用模塊化教學(xué)，將復(fù)雜技能分解訓(xùn)練。任務(wù)2創(chuàng)建超鏈接并插入相關(guān)閱讀內(nèi)容（2學(xué)時）1.任務(wù)描述在非遺國內(nèi)機構(gòu)詳情頁面上增加“相關(guān)閱讀”內(nèi)容區(qū)塊，通過創(chuàng)建超鏈接元素，外部資源和站點內(nèi)網(wǎng)頁之間的互聯(lián)。非遺國內(nèi)機構(gòu)詳情頁面整體效果如圖所示。2.任務(wù)準備了解超鏈接元素，使網(wǎng)頁內(nèi)容進行交互和跳轉(zhuǎn)?；菊Z法：<aherf=“url”target=“”>超鏈接內(nèi)容</a>target屬性規(guī)定在何處打開鏈接的文件。3.任務(wù)實施1.主要內(nèi)容：創(chuàng)建超鏈接(1)創(chuàng)建網(wǎng)頁文件。打開HBuilderX,創(chuàng)建一個新的網(wǎng)頁文件，并保存在對應(yīng)的站點目錄下。(2)根據(jù)非遺國內(nèi)機構(gòu)詳情頁面整體效果制作，參考代碼如下。2.師生活動：教師開展過程性考核，全面評價學(xué)生表現(xiàn)。學(xué)生參與評價，了解自身不足。3.教學(xué)方法：運用行動導(dǎo)向教學(xué)，讓學(xué)生在"做中學(xué)、學(xué)中做"。任務(wù)3插入圖片并制作非遺機構(gòu)介紹頁面創(chuàng)建超鏈接并插入相關(guān)閱讀內(nèi)容（1學(xué)時）1.任務(wù)描述制作非遺機構(gòu)介紹頁面，該頁面內(nèi)容主要包括國內(nèi)機構(gòu)和國際組織或機構(gòu)。通過該頁面可以查看各類非遺機構(gòu)詳情頁面。非遺機構(gòu)介紹頁面效果如所示。2.任務(wù)準備(1)了解插入圖片的標記<img>img標記：HTML單標記，用于插入圖片src屬性：必需屬性，指定圖片路徑（相對/絕對/網(wǎng)絡(luò)URL）alt屬性：提供替代文本（可選項）title屬性：提供懸停提示文本（可選項）基礎(chǔ)語法：<imgsrc=“url”alt=“”title=“”>相對路徑示例：<imgsrc=“images/myimage.jpg”>了解常見圖片格式，了解相對路徑相對于當(dāng)前工作目錄的路徑，不含完整路徑信息根據(jù)圖片來放置有以下幾種情況情況1（同目錄）：直接寫文件名，如“<imgsrc=“bg-deal.jpg”>”情況2（上一層）：用“../”表示上級目錄，如“<imgsrc=“../bg-deal.jpg”>”情況3（下一層）：加目錄名/，如“<imgsrc=images/bg-deal.jpg”>”路徑符號規(guī)則：../表示向上一級目錄3.任務(wù)實施1.主要內(nèi)容：設(shè)置圖片相對路徑(1)創(chuàng)建網(wǎng)頁文件。打開HBuilderX,創(chuàng)建一個新的網(wǎng)頁文件，并保存在對應(yīng)的站點目錄下。(2)根據(jù)非遺國內(nèi)機構(gòu)詳情頁面整體效果制作，參考代碼如下。2.師生活動：教師建立學(xué)習(xí)檔案，記錄學(xué)生成長軌跡。學(xué)生定期反思，制定改進計劃。3.教學(xué)方法：采用混合式教學(xué)，線上線下相結(jié)合開展實踐教學(xué)。三、課后拓展練習(xí)1.相對路徑與絕對路徑之分絕對路徑是從根目錄/盤符開始的完整路徑，固定不變但可移植