HTML5網頁制作與前端開發（AI協同）-教案王寅峰 第18-36講

第2頁共4頁第18講教案教學單元一號任務：動感加速（探索CSS緩動函數）周次9時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解動畫節奏對用戶體驗的影響。培養使用緩動函數創造自然、舒適動畫的能力。能力目標理解CSS動畫中的緩動函數。掌握ease、linear、ease-in-out等內置緩動函數及自定義緩動函數（cubic-bezier）的用法。能夠結合不同的動畫效果制作復雜的組合動畫。教學要求掌握transition-timing-function和animation-timing-function的用法。了解steps()階躍函數的使用場景（如逐幀動畫）。能夠使用在線工具（如Easings）預覽和自定義緩動曲線。教學重點：常用緩動函數（linear、ease、ease-in、ease-out、ease-in-out）的效果差異。cubic-bezier()自定義緩動函數。組合動畫的實現。教學難點：理解貝塞爾曲線控制點與動畫速度的關系。模擬非內置緩動函數（如easeOutElastic）的實現思路實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課的過渡和關鍵幀動畫，提問：為什么有的動畫看起來更自然、有的顯得機械？引出緩動函數。-簡述本節課目標：在CSS動畫學習站中添加緩動函數示例模塊。2.知識點講解與演示（20分鐘）-緩動函數概述（3分鐘）：定義緩動函數控制動畫速度變化曲線，使動畫更符合自然運動規律。-內置緩動函數（7分鐘）：表5-1-1。-linear：線性過渡，速度恒定。-ease：慢速開始，加速，再減速（默認）。-ease-in：慢速開始，逐漸加速。-ease-out：快速開始，逐漸減速。-ease-in-out：慢速開始，加速，再減速（兩端慢中間快）。-steps()階躍函數（3分鐘）：實現逐幀動畫，如打字機效果、精靈圖動畫。語法：steps(number,end)。-自定義緩動函數cubic-bezier()（7分鐘）：-語法：cubic-bezier(x1,y1,x2,y2)，四個參數定義貝塞爾曲線的兩個控制點。-取值范圍：x1、x2在0~1之間。-使用Easings在線工具預覽和獲取自定義曲線。3.邊講邊做（15分鐘）-在上節課的animation-station.html中添加新的<section>模塊。-創建多個相同大小的方塊，分別應用不同的緩動函數（linear、ease、ease-in、ease-out、ease-in-out）。-為每個方塊添加鼠標懸停觸發水平移動的過渡效果。-觀察不同緩動函數下方塊移動的速度變化差異。-圖5-1-3展示緩動效果示例。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-模擬非內置緩動函數（7分鐘）：-有些緩動效果（如easeOutElastic彈性效果、easeInBounce彈跳效果）不是CSS內置的，但可以通過@keyframes模擬。-示例：使用@keyframes模擬easeOutElastic效果，通過在不同百分比設置偏移量實現回彈。-展示彈性動畫效果。-組合動畫（5分鐘）：-一個元素可以同時應用多個動畫，用逗號分隔。-示例：animation:move2sease-in-outinfinite,rotate1.5slinearinfinite;-每個動畫可以有獨立的持續時間、緩動函數和播放次數。2.邊講邊做（18分鐘）-為CSS動畫學習站添加一個“組合動畫”展示區。-創建一個卡片元素，同時應用以下動畫：-上下浮動（translateY變化）。-背景色漸變。-陰影大小變化。-設置不同的動畫時長和緩動函數，觀察疊加效果。-使用AI助手輔助生成組合動畫代碼。-圖5-1-8展示組合動畫效果示例。3.總結與展示（10分鐘）-邀請學生展示完成的緩動函數對比模塊和組合動畫。-總結不同緩動函數的適用場景：-ease-out適合進入動畫。-ease-in適合退出動畫。-ease-in-out適合循環動畫。-介紹Easings在線工具的使用價值。-預告下節課將使用CSS動畫優化靜態網站。課后作業：-使用Easings工具找到一組喜歡的cubic-bezier值，應用到自己的動畫中。-嘗試模擬easeInBounce彈跳效果（提示：使用@keyframes定義不同時間點的位置變化）。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節Easings在線工具：/MDNWebDocs：cubic-bezier()在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交包含緩動函數對比模塊和組合動畫的CSS動畫學習站代碼完成平臺上關于CSS緩動函數相關選擇題練習預習模塊5關于CSS動畫優化靜態相關內容第19講教案教學單元二號任務：惟妙惟肖（使用CSS動畫優化靜態網站）周次10時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解CSS動畫所必須遵循的網頁設計原則。培養克制、恰當地使用動畫的設計審美。能力目標學習CSS動畫需遵循的網頁設計原則，避免CSS使用不當而產生“影響頁面的可訪問性”“影響用戶體驗感”等問題。能夠為靜態頁面添加進入動畫、懸停動畫等，增強網頁的互動性。教學要求掌握動畫設計四原則：一致性、可用性與可訪問性、節奏與時長、清晰與引導性。能夠為圖像添加淡入動畫、為卡片添加上下浮動動畫、為按鈕添加懸停放大效果。掌握animation-fill-mode:forwards的使用。教學重點：CSS動畫的網頁設計原則。為頁面元素添加適當的動畫效果（淡入、浮動、縮放）。教學難點：平衡動畫效果與頁面性能（避免過多動畫導致卡頓）。理解動畫時長對用戶體驗的影響（通常300ms-500ms）。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-展示模塊3/4完成的志愿服務隊招新頁面（靜態樣式），提問：如何讓這個頁面更生動？引出本節課目標：為靜態頁面添加CSS動畫。2.知識點講解與演示（20分鐘）-網頁設計原則與CSS動畫的關系（12分鐘）-一致性：動畫應與網頁整體設計風格一致，不要使用與頁面風格不符的動畫效果。-可用性與可訪問性：動畫不應妨礙內容的可讀性和可訪問性。考慮提供禁用動畫的選項。-節奏與時長：動畫時長通常保持在300ms-500ms之間，過快或過慢都會讓用戶感到困惑或不耐煩。-清晰與引導性：動畫應有助于引導用戶理解頁面的結構、功能或交互邏輯。-性能優化：優先使用transform和opacity屬性（只觸發合成，不觸發重排）。-AI輔助生成動畫示例（8分鐘）：-演示向AI助手提問：“生成一個簡單的按鈕動畫示例，并且要符合網頁設計的幾個基本原則”。-分析AI生成的代碼，重點關注transition、:hover、:focus狀態的設計。-強調可訪問性：為鍵盤用戶提供:focus視覺反饋。3.邊講邊做（15分鐘）-打開模塊3/4完成的志愿服務隊招新頁面。-為主題切換按鈕添加鼠標懸停時的放大效果（transform:scale(1.1);transition:transform0.3sease;）。-為圖像展示區的圖像添加進入動畫：-初始opacity:0;，通過@keyframes定義淡入，animation-fill-mode:forwards;保持最終狀態。-圖5-2-3展示主題切換按鈕的懸停放大效果。第二學時（40分鐘）1.繼續知識點講解與演示（10分鐘）-浮動動畫（5分鐘）：為浮動內容塊添加上下浮動的動畫，增加頁面活力。css<br>@keyframesfloat{<br>0%{transform:translateY(0);}<br>50%{transform:translateY(-10px);}<br>100%{transform:translateY(0);}<br>}<br>.float-card{animation:float3sease-in-outinfinite;}<br>-跳轉按鈕（5分鐘）：在頁面右下角添加一個矩形按鈕，單擊跳轉到CSS動畫學習站。2.邊講邊做（20分鐘）-為“策劃部”、“宣傳部”等浮動內容塊添加上下浮動動畫。-書稿圖5-2-4展示“加入我們”模塊浮動效果。-在頁面右下角添加固定定位的跳轉按鈕：position:fixed;bottom:220px;right:220px;-為跳轉按鈕添加鼠標懸停時的背景色變化和放大效果。-設置跳轉鏈接指向第17講創建的animation-station.html。-展示CSS動畫學習站跳轉按鈕。3.總結與展示（10分鐘）-邀請學生展示優化后的志愿服務隊招新頁面。-點評動畫的使用是否恰當、時長是否合理。-總結動畫設計最佳實踐：-使用transform和opacity進行動畫以獲得更好性能。-動畫時長控制在300ms-500ms。-提供交互反饋時要考慮可訪問性（如:focus）。-預告下節技能補強將學習視覺效果與功能的融合。課后作業：-為志愿服務隊招新頁面的“常規活動”列表項添加懸停動畫（如背景色漸變、左移效果）。-為頁腳版權信息添加淡入動畫，頁面加載時從透明淡入。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：transform、animation-fill-mode在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交添加了CSS動畫效果的志愿服務隊招新頁面代碼。完成平臺上關于CSS動畫優化相關選擇題練習預習模塊5視覺效果與功能的融合相關內容第20講教案教學單元技能補強：別具匠心（視覺效果與功能的融合）周次10時數1授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解“高級感”網頁的設計要素：細膩、流暢、精致。培養通過CSS動畫提升頁面質感的審美能力。能力目標了解如何通過CSS動畫和布局技巧提升頁面的“高級感”。通過組合不同的CSS動畫制作出類似玻璃質感的效果。教學要求掌握細膩過渡效果的實現（平滑顏色、陰影變化）。掌握細節化動畫效果（淡入、上浮）。掌握背景漸變和陰影效果的搭配使用。了解backdrop-filter:blur()實現玻璃擬態效果。教學重點：細膩過渡效果和細節化動畫。背景漸變與陰影搭配提升層次感。玻璃擬態效果的實現。教學難點：backdrop-filter與filter的區別。玻璃擬態效果中透明度、模糊度和背景的協調。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注1.原理講解（12分鐘）-什么是“高級感”網頁（2分鐘）：通過精致打磨設計、排版、色彩、互動，創造精致、細膩、流暢且富有品質的網頁效果。-細膩過渡效果（3分鐘）：-示例：按鈕平滑過渡效果（圖5-3-1）。-關鍵：transition應用于all或具體屬性，時長適中，使用ease-in-out等舒適曲線。-細節化動畫效果（3分鐘）：-示例：文字淡入上浮動畫（圖5-3-2）。-@keyframesfadeln{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}-背景漸變和陰影效果（4分鐘）：-線性漸變：background:linear-gradient(135deg,#FFB6C1,#2E86C1);-陰影效果：box-shadow:04px12pxrgba(0,0,0,0.1);-懸停時增強陰影并上浮：transform:translateY(-10px);（圖5-3-3）。2.實踐操作：玻璃擬態效果（18分鐘）-效果介紹（3分鐘）：“玻璃質感”效果——半透明背景+模糊背景，模擬磨砂玻璃視覺效果。-核心CSS屬性（5分鐘）：-background:rgba(255,255,255,0.2);半透明白色背景。-backdrop-filter:blur(10px);背景模糊（影響元素背后的區域）。-border-radius:12px;圓角。-box-shadow:04px16pxrgba(0,0,0,0.1);陰影。-border:1pxsolidrgba(255,255,255,0.3);邊框增強質感。-動手實踐（7分鐘）：-為CSS動畫學習站的跳轉按鈕添加玻璃質感效果。-添加鼠標懸停效果：背景透明度提高、陰影增強。-書稿圖5-3-5展示跳轉按鈕的高級玻璃質感效果。-注意：backdrop-filter有兼容性問題，需添加瀏覽器前綴（-webkit-backdrop-filter）。3.拓展與總結（10分鐘）-刀片切割效果演示（5分鐘）：-結合JavaScript實現炫酷的“刀片切割效果”（圖5-3-4）。-簡要講解實現原理：clip-path動態裁剪。-總結（3分鐘）：-細膩過渡、細節動畫、漸變陰影、玻璃擬態是提升頁面“高級感”的有效手段。-適度使用，避免過度設計。-布置作業（2分鐘）。課后作業：-為志愿服務隊招新頁面的卡片元素添加玻璃擬態效果。-嘗試使用linear-gradient為頁面背景添加漸變色。-閱讀MDN文檔了解backdrop-filter的兼容性情況和前綴寫法。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：backdrop-filter、linear-gradient、box-shadow在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交添加了玻璃擬態效果的CSS動畫學習站頁面代碼。完成平臺上關于CSS動畫和布局技巧選擇題練習預習模塊6“JavaScript基礎”相關內容=第21講教案教學單元零號任務：JavaScript從零到一（構建基礎的博客頁面）周次11時數1授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解JavaScript作為Web開發“靈魂”的核心地位。培養通過編程解決問題的邏輯思維。能力目標掌握JavaScript變量的聲明方式和作用域，理解不同數據類型的應用場景。學習控制語句（if...else、for、while等）的使用方法。掌握函數的定義、調用與參數傳遞，理解函數作用域。教學要求掌握var、let、const的區別（函數作用域vs塊作用域）。掌握基本數據類型：String、Number、Boolean、null、undefined、Symbol。掌握條件語句（if...elseif...else）和循環語句（for、while）。掌握函數的聲明、表達式、箭頭函數及參數傳遞。教學重點：變量的聲明與作用域。條件語句和循環語句的使用。函數的定義與調用。教學難點：理解let與var的作用域差異。理解函數作用域與全局作用域的關系。箭頭函數的簡寫語法。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注1.導入與講解（8分鐘）-復習引入（2分鐘）：回顧模塊1-5學習了HTML和CSS，能夠構建靜態網頁，引出JavaScript實現動態交互。-JavaScript的地位（3分鐘）：JavaScript是Web開發的“靈魂”，它能將靜態頁面轉變為動態交互應用。-本任務目標（3分鐘）：利用AI助手生成基礎博客頁面的HTML/CSS，并使用JavaScript實現“日常博客”和“學術博客”的分類篩選功能。2.知識點講解與演示（17分鐘）-變量與數據類型（7分鐘）：-var：函數作用域，可重復聲明。-let：塊作用域，不可重復聲明。-const：塊作用域，聲明常量，不可重新賦值。-基本數據類型：String（字符串）、Number（數字）、Boolean（布爾值）、null（空值）、undefined（未定義）、Symbol（符號）。-類型轉換：String()、Number()、Boolean()。-控制語句（5分鐘）：-條件語句：if...elseif...else。-循環語句：for循環、while循環。-函數（5分鐘）：-函數聲明：functionname(參數){...}。-函數表達式：constfunc=function(參數){...}。-箭頭函數：(參數)=>表達式或(參數)=>{...}。-返回值：return。-函數作用域：函數內部聲明的變量外部無法訪問。3.邊講邊做（10分鐘）-使用AI助手生成基礎博客頁面。-在生成的HTML中添加兩個按鈕：“日常博客”和“學術博客”。-編寫JavaScript代碼：-創建一個博客數組，包含標題、內容、分類等字段。-編寫renderBlogs(category)函數，根據分類參數篩選并渲染博客列表。-為按鈕綁定onclick事件，調用renderBlogs函數。-展示基礎的博客頁面效果。4.總結與預告（5分鐘）-總結JavaScript的三大核心：變量、控制語句、函數。-強調let和const在現代開發中的優先使用。-預告下節課將學習數組、對象、DOM操作及無障礙設計。課后作業：-為自己創建的博客數組增加2篇博客文章。-修改renderBlogs函數，當沒有博客時顯示“暫無博客”提示。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：JavaScript基礎在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交實現分類篩選功能的博客頁面代碼。完成平臺上關于“JavaScript基礎”選擇題相關練習預習模塊6“數組、對象、DOM操作及無障礙設計”相關內容第22講教案教學單元一號任務：全員通行（讓每個用戶都能無障礙訪問網頁）周次11時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解無障礙設計的重要性，關注殘障用戶的網頁訪問體驗。培養包容性設計的價值觀。能力目標理解數組和對象的創建、訪問與操作方法。掌握DOM操作的原理，通過操作HTML元素處理事件。掌握無障礙功能設計網頁的原則和方法。教學要求掌握對象的創建（字面量、構造函數）和屬性訪問。掌握數組的創建和常用方法（push、filter、forEach）。掌握document.getElementById、addEventListener等DOM操作方法。了解WCAG無障礙設計的四大原則：可感知性、可操作性、可理解性、健壯性。教學重點：對象和數組的創建與操作。DOM操作（獲取元素、修改內容、綁定事件）。無障礙功能實現（字體放大、語音朗讀）。教學難點：理解DOM樹的結構和節點關系。SpeechSynthesisAPI的使用。理解WCAG原則在實際開發中的應用。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課的博客頁面，提問：視力不佳的用戶如何閱讀？色盲用戶如何區分顏色？引出無障礙設計。2.知識點講解與演示（20分鐘）-無障礙設計的基本概念（5分鐘）：-定義：考慮到各種障礙類型（視力、聽力、行動、認知等），確保所有用戶都能輕松訪問和操作內容。-WCAG四大原則：可感知性、可操作性、可理解性、健壯性。-對象（5分鐘）：書稿P129-130。-創建：字面量{key:value}，構造函數newObject()。-訪問：點表示法obj.key，方括號表示法obj['key']。-遍歷：for...in循環。-數組（5分鐘）：-創建：字面量[1,2,3]，構造函數newArray()。-常用方法：push()（添加）、pop()（刪除）、filter()（過濾）、forEach()（遍歷）、find()（查找）。-圖6-1-3“數組的基本操作”。-DOM操作（5分鐘）：-獲取元素：document.getElementById()、document.querySelector()。-修改內容：element.textContent、element.innerHTML。-展示“常見DOM操作”。3.邊講邊做（15分鐘）-為上節課的博客頁面添加無障礙功能：-添加字體放大/縮小按鈕（A-、A、A+）。-使用document.documentElement.style.fontSize動態修改根元素字體大小。-使用SpeechSynthesisAPI實現“一鍵閱讀頁面”功能，朗讀頁面所有文本內容。-展示無障礙博客頁面效果。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-事件處理（8分鐘）：-addEventListener(event,handler)添加事件監聽。-removeEventListener(event,handler)移除事件監聽。-常見事件：click、mouseover、keydown、input。-展示“常見事件處理”。-無障礙最佳實踐（4分鐘）：-為交互元素提供aria-label屬性。-確保鍵盤可訪問性（tabindex、:focus樣式）。-為圖像提供有意義的alt文本。2.邊講邊做（18分鐘）-為博客頁面添加事件監聽優化：-使用addEventListener替代onclick屬性。-為按鈕添加aria-label屬性提升屏幕閱讀器體驗。-確保字體縮放時頁面布局不破裂。-測試語音朗讀功能：朗讀內容包括博客標題、正文、圖像的alt文本。3.總結與展示（10分鐘）-邀請學生展示無障礙博客頁面，測試字體縮放和語音朗讀功能。-總結無障礙設計的價值和實現要點。-預告下節課將學習面向對象程序設計和SOLID原則。課后作業：-為博客頁面的所有按鈕添加:focus樣式，確保鍵盤用戶能夠看到焦點狀態。-為圖像添加有意義的alt屬性描述。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：DOM、事件、SpeechSynthesisWCAG官方指南在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交實現了無障礙功能的博客頁面代碼。 完成平臺上關于數組、對象、DOM操作及無障礙設計選擇題練習。預習模塊6“面向對象程序設計和SOLID原則”相關內容。第23講教案教學單元二號任務：設計與優化（面向對象程序設計與SOLID原則）周次12時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解面向對象編程思想對大型項目的重要性。培養編寫高內聚、低耦合、可擴展、易維護代碼的習慣。能力目標掌握面向對象程序設計（OOP）的核心概念（類、對象、繼承、多態）。了解SOLID原則對代碼設計的影響。教學要求掌握class關鍵字定義類，constructor構造函數，new創建實例。掌握extends實現繼承，super調用父類構造函數。理解方法重寫實現多態。了解SOLID原則的核心思想（重點：單一職責原則、開閉原則）。教學重點：類和對象的定義與使用。繼承的實現。單一職責原則（SRP）和開閉原則（OCP）的理解。教學難點：理解多態的概念。理解開閉原則（對擴展開放，對修改封閉）。將SOLID原則應用到實際代碼重構中。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課的博客頁面代碼，提問：當代碼量增大時，如何組織和管理代碼？引出面向對象編程。2.知識點講解與演示（20分鐘）-類和對象（8分鐘）：書稿P136。-類的定義：classClassName{constructor(){...}}。-對象的創建：constobj=newClassName();-屬性和方法。-繼承（6分鐘）：-extends關鍵字實現繼承。-super()調用父類構造函數。-方法重寫。-多態（6分鐘）：-同一方法在不同子類中有不同實現。-示例：Animal類有speak方法，Dog和Cat分別重寫。3.邊講邊做（15分鐘）-重構博客頁面的JavaScript代碼：-創建Blog類，包含title、content、category、author、date等屬性。-創建BlogManager類，負責博客的存儲、篩選、渲染。-將原有的零散函數整合到類中。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-封裝（4分鐘）：-使用#前綴定義私有屬性和方法。-通過公共方法訪問私有屬性。-SOLID原則概述（8分鐘）：-單一職責原則（SRP）：一個類應該只有一個職責。示例：將日志功能分離到獨立的Logger類。-開閉原則（OCP）：對擴展開放，對修改封閉。示例：通過繼承和多態擴展功能，而非修改現有類。-里氏替換原則（LSP）：子類應能替換父類。-接口隔離原則（ISP）：不應強迫類實現不需要的接口。-依賴倒置原則（DIP）：依賴抽象而非具體實現。2.邊講邊做（18分鐘）-優化語音朗讀功能：-原有一鍵閱讀功能只能朗讀全文。-新增單篇博客獨立閱讀功能：為每篇博客添加“朗讀本文”按鈕。-使用speechSynthesis.cancel()停止前一個朗讀任務。-展示獨立閱讀單篇博客文章的實現效果。-應用SOLID原則分析代碼改進點。3.總結與展示（10分鐘）-展示重構后的代碼結構，對比重構前后的可維護性。-總結面向對象編程的三大特性：封裝、繼承、多態。-總結SOLID原則的核心價值。-預告下節技能補強將學習服務器搭建與Node.js。課后作業：-為BlogManager類添加deleteBlog(id)和editBlog(id,newData)方法。-分析自己的博客代碼，找出可以應用單一職責原則的地方并重構。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：類、繼承在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交使用面向對象思想重構后的博客頁面代碼。完成平臺上關于面向對象程序設計和SOLID原則選擇題練習。預習模塊6“服務器搭建與Node.js”相關內容。第24講教案教學單元技能補強：輕松啟動（服務器搭建與Node.js的應用）周次12時數1授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解客戶端-服務器架構的基本原理。培養部署和運維Web應用的能力。能力目標掌握搭建服務器的多種方式。了解服務器的基本概念。學習如何使用Node.js創建簡單的HTTP服務器。教學要求理解服務器的概念和作用。能夠安裝Node.js并驗證安裝成功。能夠使用Node.js的http模塊創建HTTP服務器。能夠通過本地和廣域網訪問部署的網頁。教學重點：Node.js的安裝與驗證。http模塊創建服務器。服務器搭建流程。教學難點：理解require模塊導入機制。理解文件路徑處理（path.join、__dirname）。理解端口占用問題的排查。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注1.原理講解（10分鐘）-什么是服務器（3分鐘）：服務器是一種能夠穩定提供服務的計算機。客戶端通過HTTP請求向服務器索取資源，服務器返回響應。-Node.js介紹（4分鐘）：-基于ChromeV8引擎的JavaScript運行環境。-允許在服務器端運行JavaScript代碼。-特點：非阻塞I/O模型、跨平臺、豐富的NPM生態。-本任務目標（3分鐘）：使用Node.js搭建HTTP服務器，部署博客頁面，并實現本地和廣域網訪問。2.操作演示與實踐（20分鐘）-安裝Node.js（3分鐘）：訪問下載安裝，終端輸入node-v驗證。-簡單服務器快速體驗（5分鐘）：-安裝http-server：npminstallhttp-server-g-在項目目錄運行：http-server-p8090-通過手機瀏覽器訪問。-自定義HTTP服務器（12分鐘）：-創建項目文件夾，初始化npminit-y。-創建server.js，編寫代碼：-導入http、fs、path模塊。-讀取HTML文件內容。-創建服務器，設置響應頭Content-Type:text/html。-監聽端口（如3000）。-運行服務器：nodeserver.js。-瀏覽器訪問http://localhost:3000。3.總結與拓展（10分鐘）-端口占用處理（2分鐘）：圖6-3-5展示端口占用時的處理方式。-部署無障礙博客頁面（3分鐘）：將模塊6完成的博客頁面部署到Node.js服務器中。-廣域網訪問（3分鐘）：-獲取本機公網IP地址。-其他設備通過http://<公網IP>:3000訪問。-總結（2分鐘）：-本地開發服務器與生產服務器的區別。-Node.js在Web開發中的重要地位。-預告下節課將進入模塊7“DOM與事件處理”。課后作業：-將模塊6完成的無障礙博客頁面部署到Node.js服務器中，通過手機訪問測試。-嘗試修改服務器端口為8080，觀察是否正常運行。-閱讀文檔了解Express框架的基本使用（拓展學習）。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節Node.js官網：/NPM官網：/在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交部署成功的博客頁面訪問截圖（本地和手機訪問各一張）。完成平臺上關于Node.js選擇題練習預習模塊7“DOM與事件處理”相關內容第25講教案教學單元零號任務：如虎添翼（使用DOM操作增強操作的動態響應）周次13時數1授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解DOM操作在實現動態網頁中的核心作用。培養使用開發者工具進行調試的習慣。能力目標掌握通過DOM操作動態插入、刪除和修改博客內容。掌握使用console.log()進行調試。教學要求掌握選擇節點的方法：getElementById、getElementsByClassName、querySelector、querySelectorAll。掌握創建和插入節點：createElement、appendChild、insertBefore。掌握刪除節點：removeChild。掌握修改節點屬性：setAttribute、getAttribute。掌握類名與樣式操作：classList、style。教學重點：獲取DOM元素的方法。動態創建、添加、刪除元素。修改元素屬性和樣式。教學難點：理解HTMLCollection（動態集合）與NodeList（靜態集合）的區別。理解innerHTML與textContent的區別及適用場景。掌握classList的add、remove、toggle方法。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注1.導入與講解（8分鐘）-復習引入（2分鐘）：回顧模塊6的博客頁面，博客內容寫死在HTML中，無法動態新增、修改或刪除。-本任務目標（3分鐘）：在模塊6博客頁面基礎上，實現添加、修改、刪除博客的功能。-DOM概述（3分鐘）：DOM是HTML和XML文檔的編程接口，將文檔表示為樹形結構。2.知識點講解與演示（17分鐘）-選擇節點（5分鐘）：-getElementById(id)：通過id獲取單個元素。-getElementsByClassName(className)：通過類名獲取HTMLCollection。-getElementsByTagName(tagName)：通過標簽名獲取HTMLCollection。-querySelector(selector)：通過CSS選擇器獲取第一個匹配元素。-querySelectorAll(selector)：通過CSS選擇器獲取靜態NodeList。-創建和插入節點（4分鐘）：-createElement(tagName)：創建新元素。-createTextNode(text)：創建文本節點。-appendChild(node)：在父節點末尾添加子節點。-insertBefore(newNode,referenceNode)：在參考節點前插入新節點。-刪除和替換節點（3分鐘）：-removeChild(node)：刪除指定子節點。-replaceChild(newNode,oldNode)：替換子節點。-修改屬性與樣式（5分鐘）：-setAttribute(name,value)/getAttribute(name)。-classList：add()、remove()、toggle()、contains()。-perty：直接修改內聯樣式。-textContent/innerHTML：修改文本或HTML內容。3.邊講邊做（10分鐘）-打開模塊6完成的博客頁面。-添加“添加新博客”按鈕和浮窗（對話框）。-實現addNewBlog()函數：獲取用戶輸入，創建新博客元素，添加到博客列表。-實現deleteBlog(blogId)函數：找到對應博客元素并刪除。-實現editBlog(blogId)函數：彈出浮窗，修改博客內容。-使用console.log()輸出調試信息，驗證函數執行情況。-展示參考效果，展示控制臺調試。4.總結與預告（5分鐘）-總結DOM操作的核心流程：獲取元素→創建元素→修改元素→插入/刪除元素。-強調classList比直接操作className更靈活。-預告下節課將學習事件處理機制。課后作業：-為博客添加“編輯”功能，單擊編輯按鈕后彈出浮窗，可修改博客標題和內容。-使用classList.toggle為博客項添加“已讀”樣式切換功能。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：DOM操作在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交實現增刪改功能的博客頁面代碼。完成平臺上關于DOM與事件處理選擇題練習。預習模塊7“事件處理機制”相關內容。第26講教案教學單元一號任務：事半功倍（使用事件處理機制提高交互的精準性）周次13時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解事件驅動編程的思維模式。培養合理使用事件委托優化性能的意識。能力目標掌握通過事件監聽器增強博客交互性。掌握使用事件對象優化交互邏輯。掌握事件冒泡與事件捕獲機制。教學要求掌握addEventListener和removeEventListener的用法。掌握常見事件類型：click、dblclick、keydown、input、submit、scroll、resize等。掌握事件對象（event）的常用屬性和方法：target、preventDefault()、stopPropagation()。理解事件冒泡和捕獲階段，掌握事件委托技術。教學重點：addEventListener添加事件監聽。事件對象的使用（target、preventDefault）。事件委托的實現與應用場景。教學難點：理解事件冒泡與捕獲的執行順序。掌握事件委托的工作原理（利用冒泡機制）。區分event.target與event.currentTarget。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課使用onclick屬性綁定事件，引出更優的事件綁定方式。-簡述本節課目標：使用事件監聽器優化博客頁面的交互。2.知識點講解與演示（20分鐘）-添加和移除事件監聽器（5分鐘）：-element.addEventListener(event,handler,options)-element.removeEventListener(event,handler)-options參數：once（只觸發一次）、capture（捕獲階段觸發）。-常見事件類型及使用場景（8分鐘）：-鼠標事件：click、dblclick、mouseenter、mouseleave。-鍵盤事件：keydown、keyup。-表單事件：input、change、submit。-窗口事件：scroll、resize、load、DOMContentLoaded。-事件對象（7分鐘）：-event.target：觸發事件的元素。-event.currentTarget：綁定事件的元素。-event.preventDefault()：阻止默認行為。-event.stopPropagation()：阻止事件冒泡。3.邊講邊做（15分鐘）-重構上節課的博客頁面事件綁定：-將onclick屬性替換為addEventListener。-為“添加新博客”按鈕綁定click事件。-為刪除按鈕綁定click事件，使用event.target獲取被單擊的按鈕。-為防止事件冒泡導致的問題，在刪除按鈕的處理函數中調用stopPropagation()。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-事件冒泡和捕獲（6分鐘）：-捕獲階段：事件從window向下傳遞到目標元素。-目標階段：事件到達目標元素。-冒泡階段：事件從目標元素向上傳遞到window。-默認情況下，事件在冒泡階段觸發。-事件委托（6分鐘）：-原理：利用事件冒泡，將事件監聽器綁定到父元素上，統一處理子元素的事件。-優勢：減少事件監聽器數量，動態添加的子元素也能響應事件。-示例：ul.addEventListener('click',(e)=>{if(e.target.tagName==='LI'){...}})2.邊講邊做（18分鐘）-使用事件委托優化博客刪除功能：-將刪除按鈕的click事件監聽器綁定到博客列表容器上。-通過e.target.classList.contains('delete-btn')判斷是否為刪除按鈕。-實現搜索輸入框的實時篩選功能：監聽input事件，過濾博客列表。-展示事件冒泡和捕獲機制。3.總結與展示（10分鐘）-邀請學生展示優化后的博客頁面。-總結事件委托的優勢：性能優化、支持動態元素。-強調stopPropagation()的使用場景（如避免觸發父元素上的事件）。-預告下節課將學習閉包和防抖技術。課后作業：-為博客頁面添加鍵盤快捷鍵：按Ctrl+S保存博客（preventDefault阻止默認保存行為）。-使用事件委托為動態添加的博客項的“編輯”按鈕綁定事件。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：事件、事件委托在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交使用事件委托和事件對象優化后的博客頁面代碼。完成平臺上事件處理機制選擇題練習。預習模塊7“閉包和防抖技術”相關內容。第27講教案教學單元二號任務：舉重若輕（使用閉包提效及防抖技術）周次14時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解函數式編程的核心概念（閉包、高階函數）。培養性能優化意識，避免不必要的函數調用。能力目標掌握閉包的原理，能夠識別和應用閉包。掌握防抖技術，能使用防抖優化高頻事件的性能。教學要求理解閉包的定義：函數能夠記住并訪問其詞法作用域，即使函數在該作用域之外執行。掌握閉包的典型應用場景：封裝私有變量、防抖/節流函數。掌握防抖函數的實現原理：延遲執行+重置定時器。能夠使用防抖優化搜索輸入框的input事件。 教學重點：閉包的概念和形成條件。防抖技術的原理和實現。防抖在搜索功能中的應用。教學難點：理解閉包中變量引用的生命周期。理解防抖函數中setTimeout和clearTimeout的配合。區分防抖（debounce）與節流（throttle）的適用場景。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課的搜索功能：每次輸入都會立即執行篩選，對于頻繁輸入的場景存在性能浪費。-提出問題：如何讓搜索在用戶停止輸入一段時間后再執行？引出防抖技術。2.知識點講解與演示（20分鐘）-閉包的概念（8分鐘）：-定義：函數能夠捕獲并記住其定義時的作用域環境。-例7-2-1：outerFunction返回innerFunction，innerFunction能夠訪問outerVariable。-展示控制臺中閉包的內容。-閉包的應用場景（7分鐘）：-封裝私有變量（例7-2-2計數器）。-模塊化模式。-防抖/節流函數的實現基礎。-匿名函數（5分鐘）：-定義：沒有名稱的函數。-使用場景：作為參數傳遞（回調函數）、立即執行函數表達式（IIFE）。3.邊講邊做（15分鐘）-編寫一個簡單的閉包示例：計數器函數，每次調用返回遞增的值。-在瀏覽器控制臺中測試閉包的效果。-分析閉包中變量在內存中的存儲方式。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-防抖技術（8分鐘）：-定義：限制函數在短時間內多次觸發時的執行次數，只有在事件停止觸發一段時間后才執行。-實現原理：利用閉包保存timeoutId，每次觸發時clearTimeout清除之前的定時器，然后setTimeout設置新定時器。-例7-2-6：基本防抖函數。-防抖適用場景（4分鐘）：-搜索框實時搜索。-窗口resize事件。-按鈕連點控制。-表單輸入驗證。2.邊講邊做（18分鐘）-為博客頁面的搜索輸入框添加防抖功能：-編寫debounce(func,delay)函數。-將搜索處理函數包裝為防抖版本。-對比添加防抖前后的性能差異。-為窗口resize事件添加防抖：僅在用戶停止調整窗口大小后輸出窗口尺寸。-展示防抖效果。3.總結與展示（10分鐘）-邀請學生展示添加防抖后的搜索功能。-總結閉包的核心價值：保存狀態、封裝私有變量。-總結防抖技術的核心：延遲執行+重置定時器。-拓展介紹節流（throttle）技術及與防抖的區別。-預告下節技能補強將學習多人協作編輯器。課后作業：-實現一個防抖函數，延遲時間默認為300ms。-為博客的“保存”按鈕添加防抖，避免用戶快速點擊多次提交。-（選做）學習節流（throttle）的原理并實現一個簡單的節流函數。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：閉包、setTimeout在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交實現防抖搜索功能的博客頁面代碼。完成平臺上關于閉包和防抖技術選擇題練習。預習模塊7“多人協作編輯器”相關內容。第28講教案教學單元技能補強：齊心協力（開發多人協作編輯器）周次14時數1授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解實時協作應用的技術挑戰和解決方案。培養跨學科（前端+后端）的工程視野。能力目標了解WebSocket實時通信的基本原理。理解瀏覽器安全策略。了解編輯器的基本構成與用戶權限管理。教學要求理解WebSocket與HTTP的區別（全雙工vs半雙工）。了解OT（操作轉換）和CRDT等數據同步機制。了解SelectionAPI和EditingAPI在編輯器中的應用。了解剪貼板API的安全限制。教學重點：WebSocket實時通信原理。編輯器基本構成（文本操作、用戶權限）。瀏覽器剪貼板安全策略。教學難點：理解WebSocket的全雙工通信模型。理解OT算法解決沖突的基本思想。理解剪貼板API的用戶激活限制。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注1.原理講解（15分鐘）-多人協作編輯器需求（2分鐘）：多個用戶同時編輯同一文檔，實時看到彼此的修改。-WebSocket（5分鐘）：-定義：在單個TCP連接上進行全雙工通信的協議。-與HTTP的區別：HTTP是請求-響應模式（半雙工），WebSocket是雙向實時通信。-適用場景：聊天室、在線協作、實時游戲。-數據同步機制（3分鐘）：-OT（操作轉換）：將用戶的編輯操作轉換為可以合并的形式。-CRDT：基于數據結構的沖突解決機制。-編輯器的基本構成（5分鐘）：-HTMLEditingAPIs：document.execCommand()（已廢棄，了解即可）。-SelectionAPI：window.getSelection()獲取用戶選中的文本。-用戶權限管理：鎖定機制確保同一時間只有一人可編輯。2.操作演示與實踐（15分鐘）-WebSocket服務器搭建（5分鐘）：-使用ws庫創建WebSocket服務器。-監聽connection、message、close事件。-廣播消息給所有連接的客戶端。-前端編輯器實現（5分鐘）：-創建contenteditable屬性的可編輯區域。-監聽input事件，將內容變化通過WebSocket發送到服務器。-接收服務器廣播，更新本地編輯器內容。-Localtunnel公開服務（5分鐘）：-安裝localtunnel：npminstall-glocaltunnel。-運行lt--port8080，獲取公網URL，實現跨網絡測試。-圖7-3-3展示多人協作編輯器效果。3.總結與拓展（10分鐘）-剪貼板功能安全考量（3分鐘）：-navigator.clipboard.writeText()和readText()。-安全限制：必須在用戶主動觸發的上下文（如單擊事件）中調用。-版本控制與沖突解決（3分鐘）：-撤銷/重做：維護undoStack和redoStack。-沖突解決：依賴OT或CRDT算法。-總結（2分鐘）：-多人協作編輯器的技術棧：WebSocket+OT/CRDT+富文本編輯器。-AI助手在輔助編寫復雜邏輯中的價值。-預告（2分鐘）：下節課將進入模塊8“Canvas基礎與動畫設計”。課后作業：-使用AI助手完善WebSocket服務器的代碼，實現更完善的廣播邏輯。-（選做）學習ShareDB庫，了解OT算法的實際應用。-閱讀MDN文檔了解contenteditable屬性的更多用法。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節WebSocketAPI文檔Localtunnel：https://localtunnel.me/在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交多人協作編輯器的核心代碼（server.js+index.html）。預習模塊8“Canvas基礎與動畫設計”相關內容。第29講教案教學單元零號任務：筆走龍蛇（Canvas繪圖）周次15時數1授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解Canvas在Web圖形繪制中的核心地位。培養通過CanvasAPI實現創意視覺設計的興趣。能力目標掌握Canvas中<canvas>標簽的基本特性和使用方式，包括與<img>標簽的區別、Canvas坐標系。能用JavaScript繪制基本圖形和文本。學習使用fillText()與strokeText()方法進行文字渲染。教學要求掌握<canvas>標簽的width、height屬性。掌握獲取Canvas上下文：canvas.getContext('2d')。掌握Canvas坐標系（左上角為原點，x軸向右，y軸向下）。掌握基本圖形繪制：fillRect()、strokeRect()、beginPath()、moveTo()、lineTo()、arc()。掌握文字渲染：fillText()、strokeText()、font、textAlign。掌握樣式設置：fillStyle、strokeStyle、shadowColor、globalAlpha。教學重點：Canvas坐標系理解。基本圖形繪制（矩形、路徑、圓形）。文字渲染和樣式設置。教學難點：理解路徑繪制中beginPath()和closePath()的作用。理解fill()與stroke()的區別。理解Canvas的像素級操作原理。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注1.導入與講解（8分鐘）-復習引入（2分鐘）：回顧模塊1-7學習了HTML/CSS/JS，能夠構建靜態網頁和動態交互，但缺乏圖形繪制能力，引出Canvas。-Canvas概述（3分鐘）：<canvas>是HTML5新增標簽，可使用腳本（JavaScript）在其中繪制圖像，適用于圖表、動畫、游戲、實時視頻處理。-本任務目標（3分鐘）：在模塊6-7的博客頁面中，添加一個“博客打賞”區域，使用Canvas繪制圖形和文字。2.知識點講解與演示（17分鐘）-Canvas基本代碼模板（3分鐘）：-<canvasid="canvas"width="300"height="300"></canvas>-默認尺寸：寬度300px，高度150px。-constctx=canvas.getContext('2d');獲取2D繪圖上下文。-Canvas坐標系（2分鐘）：-左上角為原點(0,0)，x軸正方向向右，y軸正方向向下。-書稿圖8-0-3展示坐標系中的綠色正方形。-繪制基本圖形（6分鐘）：-矩形：fillRect(x,y,width,height)、strokeRect()。-路徑：beginPath()→moveTo()→lineTo()→closePath()→fill()/stroke()。-圓形：arc(x,y,radius,startAngle,endAngle)。-文字渲染（3分鐘）：-fillText(text,x,y)：填充文字。-strokeText(text,x,y)：描邊文字。-font：設置字體樣式。-textAlign：對齊方式（left、center、right）。-Canvas樣式（3分鐘）：-fillStyle/strokeStyle：填充/描邊顏色。-shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY：陰影效果。-globalAlpha：全局透明度。-線性漸變：createLinearGradient()+addColorStop()。3.邊講邊做（10分鐘）-在博客頁面中添加Canvas元素：<canvasid="donationCanvas"width="260"height="300">。-編寫獨立腳本donation.js，實現“博客打賞”區域：-設置背景色為奶白色。-繪制圓角矩形區域。-添加陰影效果。-添加文字“博客打賞”，居中顯示。-圖8-0-9展示“博客打賞”區域效果。-使用AI助手輔助生成Canvas繪圖代碼。4.總結與預告（5分鐘）-總結Canvas繪圖的四步：獲取Canvas→獲取上下文→設置樣式→繪制圖形。-強調Canvas坐標系與數學坐標系的區別。-預告下節課將學習Canvas動畫。課后作業：-修改“博客打賞”區域的尺寸和背景漸變色。-在Canvas中繪制一個簡單的笑臉（圓形+兩個眼睛+弧形嘴巴）教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：Canvas教程在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交包含“博客打賞”Canvas區域的博客頁面代碼。完成平臺上關于Canvas基礎與動畫設計選擇題練習。預習模塊8“Canvas動畫”相關內容。第30講教案教學單元一號任務：妙趣橫生（Canvas動畫）周次15時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解Canvas動畫與CSS動畫的區別與適用場景。培養利用requestAnimationFrame實現高性能動畫的意識。能力目標掌握Canvas中<canvas>標簽的基本特性和使用方式，包括與<img>標簽的區別、Canvas坐標系。能用JavaScript繪制基本圖形和文本。學習使用fillText()與strokeText()方法進行文字渲染。教學要求掌握requestAnimationFrame的使用。理解幀率（fps）的概念（目標60fps）。掌握通過改變變量值并重繪實現動畫。掌握速度和加速度的計算方法。掌握translate()、rotate()、scale()變換方法及save()/restore()狀態管理。教學重點：requestAnimationFrame動畫循環。速度和加速度實現運動。旋轉與縮放動畫。鼠標事件驅動的交互動畫。教學難點：理解requestAnimationFrame與setInterval/setTimeout的區別（與屏幕刷新率同步）。理解save()和restore()在變換中的重要性。實現鼠標拖動交互時坐標的計算。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課的靜態Canvas繪圖，提問：如何讓Canvas中的圖形動起來？引出Canvas動畫。-簡述本節課目標：為博客頁面設計一個專屬的動態時鐘。2.知識點講解與演示（20分鐘）-Canvas動畫基本步驟（3分鐘）：清空畫布（clearRect）→②更新狀態（位置/角度）→③重繪→④循環調用。-requestAnimationFrame（5分鐘）：-瀏覽器提供的專門用于動畫的API。-與屏幕刷新率同步，通常為60fps。-頁面不可見時會自動暫停，節省資源。-遞歸調用實現動畫循環。-動畫函數實現（5分鐘）：-示例：藍色方塊在限定區域內移動并反彈。-變量：x、y（位置），dx、dy（速度）。-邊界檢測邏輯。-速度與加速度（7分鐘）：-速度：每幀移動的距離（x+=dx）。-加速度：速度隨時間增加（dx+=acceleration）。-限制最大速度（if(dx>maxSpeed)dx=maxSpeed）。3.邊講邊做（15分鐘）-創建clock.js獨立腳本。-實現動態時鐘：-繪制表盤（圓形）和刻度。-獲取當前時間（時、分、秒）。-計算時針、分針、秒針的角度。-使用requestAnimationFrame每秒更新一次。-圖8-1-3展示動態時鐘效果。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-旋轉與縮放動畫（6分鐘）：-translate(x,y)：平移坐標系。-rotate(angle)：旋轉坐標系。-scale(x,y)：縮放坐標系。-save()：保存當前繪圖狀態。-restore()：恢復之前保存的狀態。-示例：旋轉和縮放的正方形動畫。-交互動畫（6分鐘）：-監聽鼠標事件：mousedown、mousemove、mouseup。-在Canvas上實現可拖拽的圓形。-判斷鼠標是否在圓形內：計算距離Math.hypot(mouseX-circleX,mouseY-circleY)。2.邊講邊做（18分鐘）-為動態時鐘添加交互功能：長按時鐘加快指針旋轉。-監聽mousedown事件，啟動加速計時器。-監聽mouseup事件，停止加速，恢復正常速度。-使用AI助手輔助完成代碼（向AI提問：“在當前動態時鐘代碼的基礎上，為動態時鐘綁定mousedown事件，實現‘長按時鐘加快指針旋轉’的效果”）。-圖8-1-3展示博客頁面動態時鐘效果。3.總結與展示（10分鐘）-邀請學生展示動態時鐘效果和長按加速功能。-總結requestAnimationFrame的優勢：性能優化、節能、同步刷新率。-強調save()和restore()在變換中避免狀態污染的重要性。-預告下節課將學習貝塞爾曲線繪制。課后作業：-為動態時鐘添加“開始/暫停”按鈕。-實現一個勻速直線運動的小球，碰到邊界反彈。-（選做）為小球添加重力加速度效果。教學資源列表與訪問路徑備注智慧樹HTML5課程對應章節MDNWebDocs：Canvas教程、requestAnimationFrame在線教學過程（學生自主學習指引）在線教學資源有明確的步驟操作“指導書”以及“微課視頻”，可以滿足指引學生在線自主學習的需求。在線輔導與答疑安排依托“智慧樹”平臺資源展示頁面的“問答”、“評價”等交互功能，及班級微信群進行在線答疑。線上作業：提交包含動態時鐘的博客頁面代碼。完成平臺上關于Canvas動畫選擇題練習。預習模塊8“貝塞爾曲線繪制”相關內容。第31講教案教學單元二號任務：曲盡其妙（貝塞爾曲線繪制）周次16時數2授課班級AIGC與HTML5開發-0001教學目的及要求：素質目標理解貝塞爾曲線在計算機圖形學中的核心地位。培養數學思維與編程結合的工程能力。能力目標學習貝塞爾曲線的基本概念和公式推導。掌握如何繪制二次和三次貝塞爾曲線。掌握動態調整控制點實現曲線變化，使用多段貝塞爾曲線創建復雜路徑等技能。教學要求理解貝塞爾曲線的定義：由控制點定義的數學曲線。掌握二次貝塞爾曲線公式：B(t)=(1-t)2P0+2(1-t)tP1+t2P2。掌握三次貝塞爾曲線公式：B(t)=(1-t)3P0+3(1-t)2tP1+3(1-t)t2P2+t3P3。掌握Canvas中繪制貝塞爾曲線的方法：quadraticCurveTo()、bezierCurveTo()。教學重點：二次貝塞爾曲線的繪制（quadraticCurveTo）。三次貝塞爾曲線的繪制（bezierCurveTo）。動態調整控制點實現曲線實時變化。教學難點：理解貝塞爾曲線的數學推導過程。理解控制點位置與曲線形狀的關系。掌握多段貝塞爾曲線拼接實現復雜路徑。實驗儀器及教具：PC機、Windows操作系統、VSCode、谷歌/Edge瀏覽器。教學過程備注第一學時（40分鐘）1.導入與復習（5分鐘）-回顧上節課的Canvas動畫，提問：如何繪制平滑的曲線路徑？引出貝塞爾曲線。-簡述本節課目標：為博客頁面設計一個專屬Logo，使用貝塞爾曲線繪制。2.知識點講解與演示（20分鐘）-貝塞爾曲線定義與應用（5分鐘）：-由法國工程師貝塞爾在20世紀60年代提出。-應用領域：字體設計（TrueType/OpenType）、SVG路徑、動畫緩動（cubic-bezier）、3D建模、機器人路徑規劃。-二次貝塞爾曲線公式推導（8分鐘）：-三個控制點：P0（起點）、P1（控制點）、P2（終點）。-推導過程：兩次線性插值。-最終公式：B(t)=(1-t)2P0+2(1-t)tP1+t2P2。-圖8-2-10展示二次貝塞爾曲線示例。-三次貝塞爾曲線公式推導（7分鐘）：書稿P193-195。-四個控制點：P0（起點）、P1（控制點1）、P2（控制點2）、P3（終點）。-推導過程：三次線性插值。-最終公式：B(t)=(1-t)3P0+3(1-t)2tP1+3(1-t)t2P2+t3P3。-展示三次貝塞爾曲線示例，展示四次貝塞爾曲線示例。3.邊講邊做（15分鐘）-創建logo.js獨立腳本。-使用二次貝塞爾曲線繪制簡單的心形或葉子形狀。-使用三次貝塞爾曲線繪制更復雜的曲線部分。-添加陰影和文字樣式。-圖8-2-15展示博客頁面Logo示例。第二學時（40分鐘）1.繼續知識點講解與演示（12分鐘）-動態調整控制點（6分鐘）：-監聽鼠標事件（mousedown、mousemove、mouseup）。-檢測鼠標是否靠近控制點（距離<閾值）。-拖動控制點實時更新曲線。-示例：可拖拽控制點的三次貝塞爾曲線。-多段貝塞爾曲線繪制復雜路徑（6分鐘）：-連續調用bezierCurveTo()繪制多段曲線。-示例：繪制波浪形曲線或花朵形狀。2.邊講邊做（18分鐘）-為博客頁面設計專屬Logo：-結合二次和三次貝塞爾曲線繪制一個獨特的圖標（如羽毛筆、B字母藝術字）。-使用<canvas>繪制Logo，并放置在頁面左上方。-為Logo添加顏色漸變和陰影效果。-使用AI助手