《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第7周）一、教學基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第5章HTML5+CSS3移動網(wǎng)站布局（5.1-5.2節(jié)）二、教學目標（一）知識目標了解HTML5的概念及核心特性（語義化、本地存儲、多媒體支持等）。掌握HTML5新增結(jié)構(gòu)性標簽（<header>、<nav>、<section>、<article>、<aside>、<footer>）的語義及用法。掌握HTML5語義化標簽（<hgroup>、<figure>、<time>、<datalist>、<details>、<meter>、<progress>等）的應(yīng)用場景及語法。熟悉CSS3新增偽類（以first/last/only為前綴的偽類、以nth為前綴的偽類、empty、not()、enabled/disabled/checked）的語法及使用。掌握CSS3偽元素::selection的用法，實現(xiàn)文本選中效果自定義。（二）思政目標通過語義化標簽的使用，培養(yǎng)規(guī)范編碼意識和對網(wǎng)頁結(jié)構(gòu)的邏輯梳理能力，理解“語義化即可讀性”的開發(fā)原則。結(jié)合偽類實現(xiàn)動態(tài)樣式控制，體會“細節(jié)決定用戶體驗”的前端開發(fā)理念，培養(yǎng)嚴謹細致的工匠精神。在案例實踐中，通過協(xié)作完成頁面布局，培養(yǎng)團隊協(xié)作意識和問題解決能力。三、教學重難點（一）教學重點HTML5結(jié)構(gòu)性標簽（<header>、<nav>、<section>、<article>）的語義區(qū)分及嵌套規(guī)則。常用語義化標簽（<time>、<datalist>、<details>、<progress>）的實際應(yīng)用。CSS3偽類（:nth-child()、:nth-of-type()、:checked）的用法及場景。（二）教學難點<section>與<article>的語義邊界（前者強調(diào)“區(qū)塊劃分”，后者強調(diào)“獨立內(nèi)容”）。:nth-child()與:nth-of-type()的區(qū)別（前者基于父元素所有子元素排序，后者基于同類型子元素排序）。偽類與偽元素的語法差異（單冒號:用于偽類，雙冒號::用于偽元素）。四、教學方法講授法：系統(tǒng)講解HTML5標簽語義、CSS3偽類語法及使用規(guī)則。案例演示法：結(jié)合“新聞頁面”“產(chǎn)品詳情頁”案例，實時演示標簽和偽類的效果。對比分析法：對比傳統(tǒng)<div>布局與HTML5語義化布局的代碼可讀性，對比不同偽類的適用場景。任務(wù)驅(qū)動法：實踐課通過“校園公告頁面”制作任務(wù)，綜合應(yīng)用所學標簽和偽類。五、教學過程（一）第一學時：HTML5新增標簽（40分鐘）導入（5分鐘）展示兩段代碼：提問：“哪種代碼更易理解？為什么？”引出HTML5的核心優(yōu)勢——語義化。HTML5概述與結(jié)構(gòu)性標簽（15分鐘）HTML5核心特性：簡述語義特性、本地存儲、設(shè)備兼容等8大特性（參考教材5.1.1節(jié)）。結(jié)構(gòu)性標簽詳解：<header>：頁面或區(qū)塊的頭部（如網(wǎng)站標題、文章標題），可嵌套使用。<nav>：導航鏈接區(qū)域（主導航、側(cè)邊欄導航），僅包含主要鏈接。<section>：文檔中的獨立區(qū)塊（章節(jié)、欄目），需包含標題。<article>：獨立完整的內(nèi)容（文章、評論），可嵌套<section>。<aside>：輔助內(nèi)容（側(cè)邊欄、廣告），與主內(nèi)容相關(guān)。<footer>：頁腳（版權(quán)、聯(lián)系方式），可用于區(qū)塊級腳注。案例演示：展示教材例5-1的article嵌套section結(jié)構(gòu)，說明標簽語義優(yōu)先級。HTML5語義化標簽（15分鐘）講解高頻標簽及用法：<time>：定義時間/日期，支持datetime屬性（機器可讀）。<datalist>：與<input>配合提供輸入建議。<details>+<summary>：可折疊內(nèi)容（如產(chǎn)品詳情）。<progress>：進度條（如文件下載進度）。<meter>：度量衡（如磁盤使用率）。對比：<mark>（高亮文本）與CSS的background區(qū)別（語義化vs純樣式）。小結(jié)（5分鐘）回顧結(jié)構(gòu)性標簽的嵌套原則：header/footer可用于頁面或article/section內(nèi)部。布置思考：“如何用HTML5標簽規(guī)劃一個博客首頁的結(jié)構(gòu)？”（二）第二學時：CSS3新增偽類和偽元素（40分鐘）復習導入（5分鐘）抽查學生對<article>與<section>的理解：“新聞列表中的單條新聞用哪個標簽更合適？”引出問題：“如何通過CSS選中列表中的第一個新聞項？”導入偽類。CSS3偽類詳解（25分鐘）第一類：first/last/only前綴偽類：:first-of-type：選中父元素中同類型的首個子元素。對比first-child（父元素的首個子元素，不限類型）與first-of-type（限類型）。第二類：nth前綴偽類：:nth-child(n)：基于父元素所有子元素的序號（n為數(shù)字、odd/even或公式）。:nth-of-type(2n)：選中同類型子元素中的偶數(shù)項。第三類：其他偽類：:empty：選中無內(nèi)容的元素（如空段落）。:not(selector)：排除指定選擇器的元素（如p:not(.intro)）。:checked：選中被勾選的單選/復選框，常用于表單交互。偽元素::selection：自定義文本選中樣式。案例分析（7分鐘）展示教材“Tab選項卡”案例（5.2.4節(jié)），說明如何用:checked偽類實現(xiàn)無JS的選項卡切換。小結(jié)（3分鐘）強調(diào)偽類的核心作用：動態(tài)選擇元素，減少冗余類名。區(qū)分偽類（:）與偽元素（::）的語法。（三）實踐學時：綜合應(yīng)用（40分鐘）任務(wù)布置（5分鐘）目標：制作“校園公告頁面”，要求：用HTML5結(jié)構(gòu)性標簽搭建框架（header+nav+section+footer）。使用<time>標注公告發(fā)布時間，<details>展示公告詳情。用CSS3偽類實現(xiàn)：公告列表中首個項目加粗；偶數(shù)行背景色為淺灰；選中的文本背景為淺藍色。學生實踐（30分鐘）教師巡回指導，重點解決：標簽嵌套錯誤（如<nav>中嵌套<section>）；nth-child與nth-of-type的混淆；偽元素::selection的雙冒號語法遺漏。成果點評（5分鐘）選取2份作品，點評標簽語義化程度和偽類應(yīng)用準確性。強調(diào)：語義化標簽利于SEO和維護，偽類可簡化代碼邏輯。六、教學反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第8周）一、教學基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第5章HTML5+CSS3移動網(wǎng)站布局（5.3-5.4節(jié)）二、教學目標（一）知識目標掌握CSS3變形（transform）的常用方法：平移（translate）、縮放（scale）、旋轉(zhuǎn)（rotate）、傾斜（skew）及復合使用。理解過渡（transition）的觸發(fā)機制，掌握transition-property、transition-duration等屬性的用法。掌握動畫（animation）的定義（@keyframes）與應(yīng)用，熟悉animation-iteration-count、animation-direction等屬性。掌握CSS3新增背景屬性（background-clip、background-origin、background-size）及多重背景的設(shè)置。了解顏色漸變（線性漸變linear-gradient、徑向漸變radial-gradient）、倒影（-webkit-box-reflect）和遮罩（mask）的基本應(yīng)用。（二）思政目標通過變形、過渡與動畫的組合應(yīng)用，培養(yǎng)創(chuàng)新設(shè)計思維，理解“技術(shù)服務(wù)體驗”的前端開發(fā)理念。結(jié)合屬性參數(shù)的精確設(shè)置（如漸變角度、動畫時長），培養(yǎng)嚴謹細致的工匠精神。在實踐中體會代碼復用與優(yōu)化的重要性，樹立高效開發(fā)意識。三、教學重難點（一）教學重點變形函數(shù)的復合使用（如transform:rotate(30deg)translate(50px)）。過渡效果的觸發(fā)條件（如hover）及屬性配置。動畫關(guān)鍵幀（@keyframes）的定義與動畫屬性的簡寫。background-size的cover與contain值的區(qū)別及應(yīng)用。線性漸變的方向控制與顏色節(jié)點設(shè)置。（二）教學難點變形基準點（transform-origin）對變形效果的影響。過渡與動畫的區(qū)別（觸發(fā)方式、重復次數(shù)）。漸變角度與顏色分布的精確控制。倒影與遮罩的瀏覽器兼容性處理（如-webkit-前綴）。四、教學方法演示法：實時演示變形、過渡、動畫效果，對比參數(shù)變化對結(jié)果的影響。案例分析法：以“圖片hover動效”“進度條動畫”為例，解析技術(shù)原理。任務(wù)驅(qū)動法：實踐課通過“產(chǎn)品卡片交互效果”任務(wù)，綜合應(yīng)用所學技術(shù)。小組討論法：針對“過渡與動畫的適用場景”展開討論，加深理解。五、教學過程（一）第一學時：CSS3變形、過渡及動畫（40分鐘）導入（5分鐘）展示兩張圖片：靜態(tài)圖片與添加hover旋轉(zhuǎn)+縮放效果的圖片，提問：“如何用CSS實現(xiàn)元素的動態(tài)變換？”引出本節(jié)核心：變形（靜態(tài)變換）、過渡（狀態(tài)銜接）、動畫（自動循環(huán)）。CSS3變形（12分鐘）基本變形函數(shù)：平移：translate(x,y)（translateX/translateY單獨控制方向）?？s放：scale(x,y)（大于1放大，小于1縮?。?。旋轉(zhuǎn)：rotate(angle)（單位deg，正值順時針）。傾斜：skew(x-angle,y-angle)（沿X/Y軸傾斜）。復合變形：多個函數(shù)空格分隔，順序影響結(jié)果（如先旋轉(zhuǎn)再平移≠先平移再旋轉(zhuǎn)）?；鶞庶c設(shè)置：transform-origin:rightbottom（默認中心，可設(shè)像素、百分比或關(guān)鍵詞）。演示：用教材例5-16對比不同基準點的旋轉(zhuǎn)效果。CSS3過渡（13分鐘）核心屬性：transition-property：指定過渡的屬性（如width、all）。transition-duration：過渡時長（必需，如0.5s）。transition-timing-function：速率曲線（ease、linear等）。transition-delay：延遲時間（如0.2s）。簡寫形式：transition:propertydurationtiming-functiondelay。觸發(fā)條件：需通過hover、focus等事件觸發(fā)狀態(tài)變化。案例：實現(xiàn)按鈕hover時寬度從100px過渡到300px（教材例5-17）。CSS3動畫（7分鐘）定義關(guān)鍵幀：應(yīng)用動畫：animation:move2sinfinitealternate（名稱、時長、循環(huán)次數(shù)、方向）。對比過渡：動畫可自動觸發(fā)、重復執(zhí)行，過渡需事件觸發(fā)且單次執(zhí)行。小結(jié)（3分鐘）變形是基礎(chǔ)，過渡是狀態(tài)銜接，動畫是復雜時序控制。布置思考：“如何實現(xiàn)一個無限循環(huán)的呼吸燈效果？”（二）第二學時：CSS3新增屬性（40分鐘）復習導入（5分鐘）抽查學生對過渡簡寫屬性的掌握：“實現(xiàn)鼠標懸停時元素在1秒內(nèi)完成顏色與尺寸的過渡，寫出簡寫代碼?！币霰竟?jié)內(nèi)容：通過新增背景與顏色屬性豐富視覺效果。新增背景屬性（12分鐘）background-clip：控制背景繪制區(qū)域（border-box/padding-box/content-box）。background-origin：背景圖片定位基準（同background-clip取值）。background-size：背景圖尺寸（cover填充容器、contain適應(yīng)容器、具體尺寸）。多重背景：用逗號分隔多個背景圖，前層覆蓋后層。顏色漸變與特殊效果（18分鐘）線性漸變：linear-gradient(方向,顏色1,顏色2...)。徑向漸變：radial-gradient(形狀,顏色1,顏色2...)。倒影：-webkit-box-reflect:below10px（僅WebKit內(nèi)核支持）。遮罩：mask-image:url(mask.png)（用透明圖片控制顯示區(qū)域）。演示：用教材例5-25及例5-26對比線性漸變與徑向漸變效果。小結(jié)（5分鐘）背景屬性增強了圖片控制靈活性，漸變減少了對圖片的依賴。強調(diào)：倒影與遮罩需注意瀏覽器兼容性，優(yōu)先使用前綴。（三）實踐學時：綜合案例實戰(zhàn)（40分鐘）任務(wù)布置（5分鐘）目標：制作“互動產(chǎn)品卡片”，要求：卡片hover時應(yīng)用變形（scale(1.05)rotate(2deg)），過渡時長0.3s?？ㄆ尘坝镁€性漸變（從淺藍到淺紫），添加10px白色內(nèi)邊距（background-clip:content-box）?？ㄆ撞刻砑訄D片倒影（-webkit-box-reflect:below5px）。定義一個“心跳”動畫（@keyframes控制縮放），持續(xù)1s，無限循環(huán)。學生實踐（30分鐘）教師巡回指導，重點解決：變形復合順序錯誤導致效果異常。background-clip與padding的配合問題。動畫關(guān)鍵幀未定義導致無效果。成果點評（5分鐘）選取2份作品，點評變形流暢度、漸變自然度及動畫循環(huán)效果。強調(diào)：合理使用動畫與漸變可提升用戶體驗，但過度使用會影響性能。六、教學反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第9周）一、教學基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第5章HTML5+CSS3移動網(wǎng)站布局（5.5-5.7節(jié)）二、教學目標（一）知識目標掌握CSS3彈性盒模型的核心概念，熟練使用彈性容器屬性（flex-direction、flex-wrap、justify-content等）和彈性項目屬性（flex-grow、order、align-self等）。理解替代盒模型（box-sizing:border-box）的計算規(guī)則，掌握與標準盒模型的區(qū)別。掌握動態(tài)計算函數(shù)calc()的語法及應(yīng)用場景。理解響應(yīng)式布局與自適應(yīng)布局的差異，掌握媒體查詢（@media）的語法及斷點設(shè)置。掌握視口（viewport）元標簽的配置，能實現(xiàn)移動端頁面的基礎(chǔ)適配。了解移動端布局案例的實現(xiàn)思路，能綜合應(yīng)用彈性盒與響應(yīng)式技術(shù)。（二）思政目標通過彈性盒模型的靈活布局，培養(yǎng)“自適應(yīng)”思維，理解技術(shù)對多樣化需求的支持。在響應(yīng)式布局實踐中，體會“用戶為中心”的設(shè)計理念，培養(yǎng)換位思考能力。結(jié)合案例開發(fā)，培養(yǎng)團隊協(xié)作意識和代碼優(yōu)化意識，注重細節(jié)處理。三、教學重難點（一）教學重點彈性容器屬性（flex-direction控制主軸方向、justify-content主軸對齊、align-items交叉軸對齊）。彈性項目屬性（flex簡寫屬性、order排序、flex-grow分配剩余空間）。媒體查詢的語法（@mediascreenand(min-width:768px)）及斷點設(shè)計。視口元標簽的核心配置（width=device-width,initial-scale=1）。（二）教學難點彈性盒模型中主軸與交叉軸的動態(tài)轉(zhuǎn)換（flex-direction改變時的對齊調(diào)整）。彈性項目的縮放規(guī)則（flex-grow與flex-shrink的協(xié)同計算）。媒體查詢斷點的合理設(shè)置（適配不同設(shè)備尺寸的邏輯）。替代盒模型與彈性盒結(jié)合時的尺寸計算。四、教學方法演示法：通過瀏覽器開發(fā)者工具實時演示彈性盒屬性變化對布局的影響。案例分析法：解析“導航欄自適應(yīng)布局”“多設(shè)備響應(yīng)式卡片”案例，提煉技術(shù)要點。對比教學法：對比標準盒模型與替代盒模型的尺寸計算，加深理解。任務(wù)驅(qū)動法：實踐課通過“移動端商品列表”布局任務(wù)，綜合應(yīng)用彈性盒與媒體查詢。五、教學過程（一）第一學時：CSS3彈性盒模型（40分鐘）導入（5分鐘）展示傳統(tǒng)浮動布局與彈性盒布局的對比效果：同樣的導航欄在不同屏幕尺寸下，彈性盒布局更整潔且無浮動塌陷問題。提問：“如何讓多個元素在一行自動分配空間，且在屏幕縮小時自動換行？”引出彈性盒模型。彈性盒模型基礎(chǔ)（10分鐘）核心概念：彈性容器（display:flex）與彈性項目（直接子元素），主軸與交叉軸的定義?；驹O(shè)置：演示：彈性項目默認沿主軸（水平）排列，無需浮動即可同行顯示。彈性容器屬性（15分鐘）主軸方向（flex-direction）：row（默認，水平從左到右）、row-reverse（水平從右到左）、column（垂直從上到下）。換行規(guī)則（flex-wrap）：nowrap（默認，不換行）、wrap（溢出時換行）、wrap-reverse（反向換行）。主軸對齊（justify-content）：flex-start（默認左對齊）、center（居中）、space-between（兩端對齊）、space-around（等距分布）。交叉軸對齊（align-items）：stretch（默認拉伸填充）、center（垂直居中）、flex-end（底部對齊）。案例：用justify-content:space-between實現(xiàn)導航欄兩端對齊，flex-wrap:wrap實現(xiàn)小屏幕換行。彈性項目屬性（7分鐘）排序（order）：數(shù)值越小越靠前（默認0，支持負數(shù)）。縮放（flex-grow）：分配剩余空間的比例（默認0，值為1時平均分配）。簡寫屬性（flex）：flex:growshrinkbasis（如flex:1表示flex-grow:1，自動縮放）。演示：通過flex:1讓3個項目平分容器寬度。小結(jié)（3分鐘）彈性盒核心：通過容器屬性控制整體布局，項目屬性調(diào)整個體行為。布置思考：“如何用彈性盒實現(xiàn)三列布局，中間列寬度固定，兩側(cè)自動伸縮？”（二）第二學時：替代盒模型、響應(yīng)式布局與案例（40分鐘）復習導入（5分鐘）抽查彈性盒布局代碼：“寫出一個彈性容器，使項目垂直排列且水平居中。”引出問題：“彈性項目的邊框和內(nèi)邊距會撐開容器寬度嗎？”導入替代盒模型。替代盒模型與calc()（1