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

教案名稱單元1創(chuàng)建非遺項目站點—網(wǎng)頁開發(fā)入門計劃學(xué)時4學(xué)時本次授課類型□理論□實驗?理實一體□實訓(xùn)□實習(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)文化的興趣，增強文化自信。教學(xué)重點1.網(wǎng)頁基本知識與概念。2.HTML、CSS、JavaScript各自的代碼特點。教學(xué)難點1.制作網(wǎng)頁過程中涉及的問題處理，如瀏覽器兼容性問題。教學(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課程里的單元1的相關(guān)微課視頻，完成在線測試。（二）學(xué)生自主學(xué)習(xí)，記錄疑問。（三）教師了解學(xué)生在線完成情況，檢測學(xué)生的掌握程度，根據(jù)學(xué)生完成情況進行線上針對個別學(xué)生輔導(dǎo)，保證所有學(xué)生能夠掌握預(yù)習(xí)內(nèi)容，以便順利開展本次課程教學(xué)。二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入面對全新的"網(wǎng)頁開發(fā)"領(lǐng)域，小新既充滿向往又感到忐忑——他雖懷有濃厚興趣，卻苦于缺乏實際操作經(jīng)驗。每當(dāng)看到精美網(wǎng)站時，他既羨慕又渴望能親手打造這樣的作品。為此，小新主動尋求了在前端技術(shù)工程師王威學(xué)長的專業(yè)指導(dǎo)。作為業(yè)內(nèi)專家，王威不僅給予寶貴建議，還為他量身定制了循序漸進的入門計劃：從基礎(chǔ)認知（認識網(wǎng)頁）、到實踐應(yīng)用（建立非遺站點）、再到主題創(chuàng)作（制作調(diào)研網(wǎng)頁）。（二）任務(wù)1認識網(wǎng)頁（1學(xué)時）1.任務(wù)描述依次打開3個網(wǎng)頁,查看網(wǎng)頁有什么變化。分析HTML5、CSS3和JavaScript在網(wǎng)頁開發(fā)中扮演著的不同角色及它們之間的關(guān)系。2.任務(wù)準備對網(wǎng)站和網(wǎng)頁、瀏覽器的兼容性、CSS3、JavaScripyt、HTML5的新增特性有初步了解。3.任務(wù)實施1.主要內(nèi)容：打開第三個網(wǎng)頁,網(wǎng)頁上右擊，在彈出的菜單中選擇“查看網(wǎng)頁源代碼”選項，觀察三段代碼。2.師生活動：教師逐步演示講解操作，巡回指導(dǎo)學(xué)生進行上機練習(xí)，完成學(xué)生操作過程評價。學(xué)生跟練，完成自評與互評。3.教學(xué)方法：采用項目驅(qū)動法優(yōu)化教學(xué)過程，通過真實軟件環(huán)境演練，播放視頻等多種形式組織教學(xué)活動。任務(wù)2建立非遺站點（1學(xué)時）1.任務(wù)描述利用

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

HTML5

文件、CSS3

文件、JavaScript

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

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

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

學(xué)生按照步驟完成實踐任務(wù)，拍攝操作視頻進行自我檢查。3.教學(xué)方法：采用翻轉(zhuǎn)課堂教學(xué)模式，課前提供學(xué)習(xí)資料，課中重點指導(dǎo)實踐操作。三、課后拓展練習(xí)（1）瀏覽器的兼容性測試讓學(xué)生將本次課程中制作的網(wǎng)頁在不同瀏覽器環(huán)境中進行測試，完成拓