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

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

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

HTML5

文件、CSS3

文件、JavaScript

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

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

學生模仿練習，記錄操作難點，小組討論解決方案。3.教學方法：運用情境教學法，創(chuàng)設(shè)真實工作場景，通過角色扮演強化實踐技能。任務3制作非遺調(diào)研網(wǎng)頁（2學時）1.任務描述了解HTML5語義化標記。2.任務準備(1)具備一定的HTML5的基礎(chǔ)語法如：標記、標記屬性。(2)明確HTML5的整體結(jié)構(gòu)如：文件頭部。(3)了解HTML5頁面格式化標記如：<footer>、<main>、<nav>等。3.任務實施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)頁標題為“非物質(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)站的標志、導航欄等，這里顯示網(wǎng)頁的名稱。(6)構(gòu)建主題內(nèi)容代碼如下。(7)構(gòu)建頁腳區(qū)域。頁腳區(qū)域通常包含版權(quán)信息、作者信息、聯(lián)系方式等。(8)為使頁面效果較為美觀，對網(wǎng)頁元素設(shè)置樣式。頁面參考代碼如下.2.師生活動：教師提供操作指導手冊，巡回檢查學生操作規(guī)范，進行過程性評價。

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