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

教案名稱單元1創(chuàng)建非遺項(xiàng)目站點(diǎn)—網(wǎng)頁開發(fā)入門計劃學(xué)時4學(xué)時本次授課類型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識目標(biāo)1.了解網(wǎng)頁與網(wǎng)站的概念，靜態(tài)網(wǎng)站與動態(tài)網(wǎng)站的概念，網(wǎng)站的分類。2.了解HTML、CSS、JavaScript各自扮演的角色及關(guān)系。能力目標(biāo)1.能夠識別網(wǎng)頁的基本結(jié)構(gòu)。2.能夠使用瀏覽器開發(fā)者工具調(diào)試代碼。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生的信息獲取和分析能力。2.提升學(xué)生對網(wǎng)頁設(shè)計的審美能力。思政目標(biāo)1.培養(yǎng)學(xué)生具備自主學(xué)習(xí)能力和主動學(xué)習(xí)意識。2.激發(fā)學(xué)生對傳統(tǒng)文化的興趣，增強(qiáng)文化自信。教學(xué)重點(diǎn)1.網(wǎng)頁基本知識與概念。2.HTML、CSS、JavaScript各自的代碼特點(diǎn)。教學(xué)難點(diǎn)1.制作網(wǎng)頁過程中涉及的問題處理，如瀏覽器兼容性問題。教學(xué)設(shè)計思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識點(diǎn)和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實(shí)施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元1的相關(guān)微課視頻，完成在線測試。（二）學(xué)生自主學(xué)習(xí)，記錄疑問。（三）教師了解學(xué)生在線完成情況，檢測學(xué)生的掌握程度，根據(jù)學(xué)生完成情況進(jìn)行線上針對個別學(xué)生輔導(dǎo)，保證所有學(xué)生能夠掌握預(yù)習(xí)內(nèi)容，以便順利開展本次課程教學(xué)。二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入面對全新的"網(wǎng)頁開發(fā)"領(lǐng)域，小新既充滿向往又感到忐忑——他雖懷有濃厚興趣，卻苦于缺乏實(shí)際操作經(jīng)驗(yàn)。每當(dāng)看到精美網(wǎng)站時，他既羨慕又渴望能親手打造這樣的作品。為此，小新主動尋求了在前端技術(shù)工程師王威學(xué)長的專業(yè)指導(dǎo)。作為業(yè)內(nèi)專家，王威不僅給予寶貴建議，還為他量身定制了循序漸進(jìn)的入門計劃：從基礎(chǔ)認(rèn)知（認(rèn)識網(wǎng)頁）、到實(shí)踐應(yīng)用（建立非遺站點(diǎn)）、再到主題創(chuàng)作（制作調(diào)研網(wǎng)頁）。（二）任務(wù)1認(rèn)識網(wǎng)頁（1學(xué)時）1.任務(wù)描述依次打開3個網(wǎng)頁,查看網(wǎng)頁有什么變化。分析HTML5、CSS3和JavaScript在網(wǎng)頁開發(fā)中扮演著的不同角色及它們之間的關(guān)系。2.任務(wù)準(zhǔn)備對網(wǎng)站和網(wǎng)頁、瀏覽器的兼容性、CSS3、JavaScripyt、HTML5的新增特性有初步了解。3.任務(wù)實(shí)施1.主要內(nèi)容：打開第三個網(wǎng)頁,網(wǎng)頁上右擊，在彈出的菜單中選擇“查看網(wǎng)頁源代碼”選項(xiàng)，觀察三段代碼。2.師生活動：教師逐步演示講解操作，巡回指導(dǎo)學(xué)生進(jìn)行上機(jī)練習(xí)，完成學(xué)生操作過程評價。學(xué)生跟練，完成自評與互評。3.教學(xué)方法：采用項(xiàng)目驅(qū)動法優(yōu)化教學(xué)過程，通過真實(shí)軟件環(huán)境演練，播放視頻等多種形式組織教學(xué)活動。任務(wù)2建立非遺站點(diǎn)（1學(xué)時）1.任務(wù)描述利用

HBuilderX創(chuàng)建并管理一個關(guān)于非物質(zhì)文化遺產(chǎn)(簡稱非遺)的網(wǎng)站項(xiàng)目，要求開發(fā)者將非遺網(wǎng)站的

HTML5

文件、CSS3

文件、JavaScript

腳本、圖片、視頻等按照一定的目錄結(jié)構(gòu)進(jìn)行組織和管理。2.任務(wù)準(zhǔn)備(1)了解非遺站點(diǎn)(2)下載好網(wǎng)站開發(fā)工具(3)明確網(wǎng)站開發(fā)的注意事項(xiàng)3.任務(wù)實(shí)施1.主要內(nèi)容：(1)打開HBuilderX，選擇“文件”菜單中的“新建一項(xiàng)目”選項(xiàng)，如圖所示。在彈出的對話框中選擇要創(chuàng)建的項(xiàng)目類型，輸人項(xiàng)目名稱“非遺網(wǎng)”，可使用默認(rèn)保存路徑，選擇模板“基本

HTML項(xiàng)目”，單擊“創(chuàng)建”按鈕完成新項(xiàng)目的創(chuàng)建，如圖所示。創(chuàng)建完成2.師生活動：教師示范標(biāo)準(zhǔn)操作流程，個別指導(dǎo)學(xué)生解決操作問題，收集典型錯誤案例。

學(xué)生模仿練習(xí)，記錄操作難點(diǎn)，小組討論解決方案。3.教學(xué)方法：運(yùn)用情境教學(xué)法，創(chuàng)設(shè)真實(shí)工作場景，通過角色扮演強(qiáng)化實(shí)踐技能。任務(wù)3制作非遺調(diào)研網(wǎng)頁（2學(xué)時）1.任務(wù)描述了解HTML5語義化標(biāo)記。2.任務(wù)準(zhǔn)備(1)具備一定的HTML5的基礎(chǔ)語法如：標(biāo)記、標(biāo)記屬性。(2)明確HTML5的整體結(jié)構(gòu)如：文件頭部。(3)了解HTML5頁面格式化標(biāo)記如：<footer>、<main>、<nav>等。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在HBuilderX的目錄下新建網(wǎng)頁文件1-1.htmml。

(2)定義頁面頭部信息，utf-8字符集支持中文。<metacharset=“utf-8”>

(3)定義視口。

<metaname“viewport”content=“widthdevice-width,

initial-scale-1.0”>

(4)定義網(wǎng)頁標(biāo)題為“非物質(zhì)文化遺產(chǎn)調(diào)研”<title>非物質(zhì)文化遺產(chǎn)調(diào)研</title>

(5)構(gòu)建頁眉區(qū)域。非遺調(diào)研網(wǎng)頁分成3部分:頁眉區(qū)域、主體內(nèi)容區(qū)域和頁腳區(qū)域。頁眉區(qū)域通常包含網(wǎng)站的標(biāo)志、導(dǎo)航欄等，這里顯示網(wǎng)頁的名稱。(6)構(gòu)建主題內(nèi)容代碼如下。(7)構(gòu)建頁腳區(qū)域。頁腳區(qū)域通常包含版權(quán)信息、作者信息、聯(lián)系方式等。(8)為使頁面效果較為美觀，對網(wǎng)頁元素設(shè)置樣式。頁面參考代碼如下.2.師生活動：教師提供操作指導(dǎo)手冊，巡回檢查學(xué)生操作規(guī)范，進(jìn)行過程性評價。

學(xué)生按照步驟完成實(shí)踐任務(wù)，拍攝操作視頻進(jìn)行自我檢查。3.教學(xué)方法：采用翻轉(zhuǎn)課堂教學(xué)模式，課前提供學(xué)習(xí)資料，課中重點(diǎn)指導(dǎo)實(shí)踐操作。三、課后拓展練習(xí)（1）瀏覽器的兼容性測試讓學(xué)生將本次課程中制作的網(wǎng)頁在不同瀏覽器環(huán)境中進(jìn)行測試，完成拓展任務(wù)，上傳錄制操作視頻到線上平臺，并各自總結(jié)和分析。（2）響應(yīng)式設(shè)計讓學(xué)生利用谷歌瀏覽器觀察淘寶網(wǎng)頁在電腦模式和手機(jī)模式下頁面的布局與內(nèi)容的差異，思考今后如何將頁面可以在不同設(shè)備下，不同分辨率下都能有良好的視覺效果。(3)完成課后配套習(xí)題《Web前端開發(fā)技術(shù)》課程教案適用專業(yè)：授課班級：授課教師：編制日期：

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

2.培養(yǎng)文化遺產(chǎn)保護(hù)的數(shù)字化表達(dá)能力思政目標(biāo)1.增強(qiáng)對非遺機(jī)構(gòu)文化價值的認(rèn)同感2.樹立技術(shù)賦能文化傳播的責(zé)任意識教學(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è)計與實(shí)際代碼的轉(zhuǎn)化銜接

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

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

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

教案名稱單元3制作非遺名錄頁面—表格應(yīng)用計劃學(xué)時4學(xué)時本次授課類型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識目標(biāo)1.掌握表格的創(chuàng)建與屬性設(shè)置方法2.理解表格結(jié)構(gòu)化標(biāo)記的應(yīng)用場景3.掌握跨行跨列操作實(shí)現(xiàn)復(fù)雜表格4.學(xué)會使用表格嵌套進(jìn)行頁面布局能力目標(biāo)能獨(dú)立創(chuàng)建非遺名錄數(shù)據(jù)表格能調(diào)試解決表格兼容性問題能運(yùn)用表格實(shí)現(xiàn)頁面基礎(chǔ)布局素質(zhì)目標(biāo)培養(yǎng)自主學(xué)習(xí)和獨(dú)立思考能力提升快速學(xué)習(xí)新技術(shù)的能力強(qiáng)化對非遺文化的保護(hù)意識思政目標(biāo)通過非遺名錄制作增強(qiáng)文化自信培養(yǎng)嚴(yán)謹(jǐn)規(guī)范的代碼編寫習(xí)慣教學(xué)重點(diǎn)表格跨行跨列操作表格嵌套布局的實(shí)現(xiàn)邏輯教學(xué)難點(diǎn)復(fù)雜表格的結(jié)構(gòu)化語義化設(shè)計多瀏覽器表格樣式兼容性處理教學(xué)設(shè)計思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識點(diǎn)和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實(shí)施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元3的相關(guān)微課視頻，完成在線測試。(二）學(xué)生根據(jù)預(yù)習(xí)任務(wù)完成配套練習(xí)題，標(biāo)注出理解不透徹的知識點(diǎn)。（三）教師通過在線討論區(qū)收集學(xué)生疑問，整理共性問題并在課堂中重點(diǎn)講解。二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入小新整理了非遺項(xiàng)目信息，計劃在網(wǎng)站上用表格展示國家級非遺名錄。在學(xué)長王威的建議下，他決定采用類似Excel的表格形式呈現(xiàn)結(jié)構(gòu)化數(shù)據(jù)，并制定了四個實(shí)施步驟：設(shè)計頁面、創(chuàng)建表格、優(yōu)化表格結(jié)構(gòu)、完成頁面布局。小新準(zhǔn)備通過實(shí)踐來完成這個項(xiàng)目。（二）任務(wù)1創(chuàng)建表格—制作非遺名錄清單表格（1學(xué)時）1.任務(wù)描述創(chuàng)建非遺名錄表格，定義表頭和表主體。設(shè)置表格邊框樣式、填充與邊距、背景顏色、表格及內(nèi)容的對齊方式等。效果如圖。2.任務(wù)準(zhǔn)備(1)熟悉各種表格創(chuàng)建標(biāo)記如：<table><th>等(2)了解表格基本結(jié)構(gòu)(3)認(rèn)識網(wǎng)頁中三種表達(dá)顏色的方式(4)了解<width>、<height>屬性(5)了解兩種空白：邊距與填充(6)了解對齊方式(7)能使用bordercolor屬性設(shè)置邊框顏色3.任務(wù)實(shí)施1.主要內(nèi)容：(1)創(chuàng)建網(wǎng)頁文件。打開HBuilderX,創(chuàng)建一個新的網(wǎng)頁文件，并保存在對應(yīng)的站點(diǎn)目錄下。(2)構(gòu)建基礎(chǔ)表格結(jié)構(gòu)。在<body>標(biāo)簽內(nèi)插入<table>標(biāo)簽，創(chuàng)建6行5列的表格框架：第1行為表頭，使用<th>標(biāo)簽（自動加粗居中），后續(xù)5行為數(shù)據(jù)行，使用<td>標(biāo)簽。(3)設(shè)置表格基本屬性。寬度設(shè)為頁面80%（自適應(yīng)瀏覽器窗口），高度固定為500像素，邊框粗細(xì)設(shè)為1，居中對齊，邊框顏色設(shè)為灰色(#CCCCCC)，單元格內(nèi)邊距設(shè)為10，單元格間距設(shè)為0。美化表格樣式。表頭行背景色設(shè)為深紅色，表頭文字顏色設(shè)為白色，所有內(nèi)容水平居中顯示。非遺名錄的參考代碼如下：2.師生活動：教師通過分步演示非遺名錄表格的制作過程，實(shí)時解答學(xué)生疑問，并巡視課堂進(jìn)行個性化指導(dǎo)，記錄學(xué)生實(shí)踐情況。學(xué)生跟隨演示完成實(shí)操練習(xí)，通過小組互評和自評表格完善學(xué)習(xí)反饋3.教學(xué)方法：采用案例教學(xué)法，結(jié)合非遺項(xiàng)目真實(shí)數(shù)據(jù)，利用HBuilderX軟件實(shí)操演示，配合微課視頻輔助理解重點(diǎn)難點(diǎn)。任務(wù)2表格結(jié)構(gòu)化標(biāo)記—制作非遺名錄清單表格（1學(xué)時）1.任務(wù)描述在任務(wù)1的基礎(chǔ)上增加表格結(jié)構(gòu)化標(biāo)記，標(biāo)識表格的頁眉、主體部分，提高表格的可讀性，使表格更易于理解。非遺名錄清單網(wǎng)頁優(yōu)化后的效果如圖下所示。2.任務(wù)準(zhǔn)備(1)熟悉表格的優(yōu)化結(jié)構(gòu)標(biāo)記<thead><tbody><tfoot>。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)將在任務(wù)1中的創(chuàng)建表格的第一行劃分為表格頁眉，添加表格結(jié)構(gòu)化標(biāo)記<thead></thead>。(2)添加表格右下角文字。(3)將在任務(wù)1中的創(chuàng)建表格的數(shù)據(jù)劃分為表格主題，添加表格結(jié)構(gòu)化標(biāo)記<tfoot></tfoot>。非遺名錄的優(yōu)化參考代碼如下：2.師生活動：教師以非遺名錄為案例，系統(tǒng)講解表格布局技巧，在機(jī)房巡回檢查學(xué)生代碼編寫情況，及時糾正典型錯誤。學(xué)生通過臨摹教師案例完成實(shí)踐任務(wù)，并分組展示作品進(jìn)行互評。3.教學(xué)方法：采用任務(wù)驅(qū)動法，通過實(shí)際項(xiàng)目開發(fā)場景，結(jié)合屏幕錄制回放功能強(qiáng)化關(guān)鍵步驟記憶。任務(wù)3表格頁面布局—非遺名錄頁面（2學(xué)時）1.任務(wù)描述非遺名錄頁面采用三表格布局結(jié)構(gòu)：頂部為13行4列的統(tǒng)計表格，用于展示文字說明和數(shù)據(jù)概覽；中部為核心展示區(qū)，以規(guī)整的表格形式呈現(xiàn)非遺項(xiàng)目清單；底部設(shè)置分頁導(dǎo)航表格，包含頁面跳轉(zhuǎn)超鏈接。非遺名錄頁面整體的效果如圖下所示。2.任務(wù)準(zhǔn)備(1)熟悉表格跨行/跨列操作。(2)具備表格嵌套能力。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)首先創(chuàng)建網(wǎng)頁文件并建立圖片存儲目錄，隨后構(gòu)建三個結(jié)構(gòu)化表格：首個為3行4列的頂部表格，設(shè)置無邊框、80%頁面寬度且居中對齊，首行跨列顯示段落內(nèi)容。(2)其次完善7行5列的主體表格，末行添加跨列統(tǒng)計信息。(3)最后建立1行5列的底部導(dǎo)航表格。非遺名錄頁面參考代碼如下：2.師生活動：教師以非遺名錄為案例，系統(tǒng)講解表格布局技巧，在機(jī)房巡回檢查學(xué)生代碼編寫情況，及時糾正典型錯誤。學(xué)生通過臨摹教師案例完成實(shí)踐任務(wù)，并分組展示作品進(jìn)行互評。3.教學(xué)方法：采用工作坊模式，強(qiáng)化師生互動和實(shí)踐指導(dǎo)。課后拓展練習(xí)1、傳統(tǒng)表格布局存在明顯缺陷，當(dāng)用于復(fù)雜頁面設(shè)計時需要多層嵌套表格，這會導(dǎo)致代碼臃腫、可讀性降低，后期維護(hù)和改版十分困難。相比之下，現(xiàn)代DIV+CSS布局技術(shù)通過HTML構(gòu)建頁面結(jié)構(gòu)、CSS控制表現(xiàn)形式，實(shí)現(xiàn)了內(nèi)容與樣式的分離，不僅使網(wǎng)頁能更好地適配不同設(shè)備，還大幅提升了開發(fā)效率和維護(hù)便利性。CSS為表格樣式控制提供了更強(qiáng)大的功能，相較于傳統(tǒng)表格標(biāo)記屬性只能進(jìn)行簡單設(shè)置，CSS支持對邊框、邊距、對齊方式等屬性進(jìn)行精細(xì)化控制。例如CSS可以單獨(dú)設(shè)置各方向邊框樣式和內(nèi)邊距，還能實(shí)現(xiàn)表格標(biāo)記不具備的邊框折疊等特性，使表格在數(shù)據(jù)展示時既保持規(guī)整性又能實(shí)現(xiàn)更豐富的視覺效果。2.完成單元課后配套習(xí)題《Web前端開發(fā)技術(shù)》課程教案適用專業(yè)：授課班級：授課教師：編制日期：

教案名稱單元4制作非遺登錄注冊頁面—H5表單計劃學(xué)時4學(xué)時本次授課類型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識目標(biāo)1.理解表單的基本結(jié)構(gòu)。2.掌握表單控件的類型和屬性。3.掌握表單的提交方式。4.掌握HTML5的內(nèi)置驗(yàn)證功能。5.能夠使用正則表達(dá)式進(jìn)行更復(fù)雜的數(shù)據(jù)驗(yàn)證。能力目標(biāo)1.能夠獨(dú)立完成登錄和注冊頁面的表單設(shè)計與實(shí)現(xiàn)。2.能夠使用HTML5表單控件屬性進(jìn)行數(shù)據(jù)驗(yàn)證。3.能夠使用正則表達(dá)式優(yōu)化表單驗(yàn)證邏輯。素質(zhì)目標(biāo)1.培養(yǎng)交互設(shè)計能力。2.培養(yǎng)設(shè)計思維與創(chuàng)新能力。思政目標(biāo)1.培養(yǎng)團(tuán)隊(duì)合作和溝通能力。2.增強(qiáng)對非遺文化的保護(hù)意識，通過技術(shù)傳承傳統(tǒng)文化。教學(xué)重點(diǎn)1.表單的基本結(jié)構(gòu)與控件類型。2.HTML5表單控件的屬性及內(nèi)置驗(yàn)證功能。3.正則表達(dá)式在表單驗(yàn)證中的應(yīng)用。教學(xué)難點(diǎn)1.表單數(shù)據(jù)的動態(tài)驗(yàn)證與錯誤提示。2.正則表達(dá)式的編寫與調(diào)試。3.表單在不同瀏覽器中的兼容性問題。教學(xué)設(shè)計思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識點(diǎn)和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實(shí)施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元4的相關(guān)微課視頻，完成在線測試。（二）學(xué)生需嚴(yán)格按照教學(xué)要求完成課前預(yù)習(xí)任務(wù)，包括觀看教學(xué)視頻、閱讀教材相關(guān)內(nèi)容、完成預(yù)習(xí)測試題等，并在學(xué)習(xí)過程中詳細(xì)記錄遇到的疑難問題，形成書面預(yù)習(xí)報告提交至在線學(xué)習(xí)平臺（三）教師通過教學(xué)管理平臺的數(shù)據(jù)分析功能，實(shí)時監(jiān)控每位學(xué)生的學(xué)習(xí)進(jìn)度和預(yù)習(xí)完成情況，針對未達(dá)標(biāo)學(xué)生及時發(fā)送提醒通知，并安排專門的線上輔導(dǎo)時間，通過一對一或小組輔導(dǎo)的形式確保所有學(xué)生達(dá)到預(yù)期的預(yù)習(xí)效果二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入小新在掌握HTML5標(biāo)記知識后，計劃為非遺網(wǎng)站新增用戶登錄功能，以便記錄用戶交互數(shù)據(jù)并提供個性化服務(wù)。他認(rèn)識到HTML5表單是實(shí)現(xiàn)這一功能的關(guān)鍵，并制定了詳細(xì)的學(xué)習(xí)實(shí)踐計劃：首先設(shè)計登錄和注冊頁面框架，然后創(chuàng)建基礎(chǔ)表單結(jié)構(gòu)，接著添加各類表單控件，再設(shè)置表單屬性并實(shí)現(xiàn)數(shù)據(jù)驗(yàn)證，最后運(yùn)用正則表達(dá)式完成復(fù)雜驗(yàn)證功能。（二）任務(wù)1創(chuàng)建表單—制作非遺登錄頁面（1學(xué)時）1.任務(wù)描述為非遺網(wǎng)站創(chuàng)建登錄頁面。已注冊的用戶填寫相關(guān)的信息并提交網(wǎng)站后臺后，可以通過該頁面登錄網(wǎng)站。2.任務(wù)準(zhǔn)備(1)明確表單的概念(2)了解表單的標(biāo)記<form>(3)了解文本框和密碼框(4)了解控件按鈕3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下創(chuàng)建登錄網(wǎng)頁文件。

(2)創(chuàng)建登錄表單。設(shè)置表單數(shù)據(jù)發(fā)送方式為post，代碼如下

<form

action=“”

method=“post”></form>

(3)為表單分別添加輸入用戶名和密碼的文本框和密碼框。

<input

type=“text”name=“username”>

<input

type=“password”

name=“password”>

(4)創(chuàng)建表單提交按鈕。

<button

type=“submit”>登錄</button>(5)對表格進(jìn)行布局排布(6)設(shè)置表格寬度與高度(7)CSS美化表格效果圖如下：2.師生活動：教師建立在線答疑平臺，及時解答學(xué)生疑問。學(xué)生隨時提問，獲得針對性指導(dǎo)。3.教學(xué)方法：運(yùn)用探究式教學(xué)，引導(dǎo)學(xué)生自主發(fā)現(xiàn)問題并解決。采用工作坊模式，強(qiáng)化師生互動和實(shí)踐指導(dǎo)。（二）任務(wù)2添加表單控件—制作注冊頁面（1學(xué)時）1.任務(wù)描述為非遺網(wǎng)站創(chuàng)建注冊頁面。用戶需要在頁面上填寫并提交的信息包括用戶名、姓名、密碼、性別、出生日期、聯(lián)系電話、所在城市、身份證照片等。用戶注冊頁面效果如

圖所示。2.任務(wù)準(zhǔn)備(1)了解單選按鈕控件(<input

type=“radio”>)能夠保證用戶在一組數(shù)據(jù)中最多只選擇一項(xiàng)(2)復(fù)選框控件(<input

type-“”>)允許用戶在一組選項(xiàng)中選擇多個(3)了解文本框和密碼框(4)了解日期控件(5)了解下拉列表(<select>)允許用戶在多個選項(xiàng)中選擇一個(6)了解文本域({<}textarea{>})允許用戶輸人多行文本(7)了解文件域3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下創(chuàng)建非遺網(wǎng)站注冊頁面文件。(2)創(chuàng)建注冊表單。