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

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

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

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

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

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

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

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