教學(xué)設(shè)計一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱CSS動畫簡介和坐標(biāo)系授課班級授課時間授課類型理實一體化、新授課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)，配備超星教學(xué)平臺）授課學(xué)時40分鐘*2學(xué)時教材分析本節(jié)是CSS動畫模塊的開篇，銜接HTML/CSS基礎(chǔ)，鋪墊后續(xù)變形、過渡、動畫屬性學(xué)習(xí)，通過鄉(xiāng)村主題案例串聯(lián)，兼具理論性與實用性，是構(gòu)建動態(tài)網(wǎng)頁的基礎(chǔ)。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML標(biāo)簽、CSS基礎(chǔ)樣式（選擇器、盒子模型），能搭建簡單靜態(tài)網(wǎng)頁。

2.學(xué)情特點(diǎn)：動手能力強(qiáng)、抽象邏輯弱、具象思維突出，對實操任務(wù)興趣濃厚，對抽象坐標(biāo)系易困惑。

3.潛在不足：缺乏空間想象能力，需借助具象演示突破難點(diǎn)。教學(xué)目標(biāo)【知識目標(biāo)】：

1.了解CSS動畫的概念及三種核心屬性（transition、transform、animation）。

2.掌握左手坐標(biāo)系及CSS33D坐標(biāo)系的規(guī)則，明確各軸正方向。

【能力目標(biāo)】：

1.能通過手勢演示左手坐標(biāo)系，準(zhǔn)確判斷各軸旋轉(zhuǎn)方向。

2.能借助工具模擬CSS3坐標(biāo)系，為后續(xù)3D動畫奠定基礎(chǔ)。

【素質(zhì)目標(biāo)】：

1.培養(yǎng)空間想象能力和嚴(yán)謹(jǐn)?shù)倪壿嬎季S。

2.激發(fā)用前端技術(shù)展示美麗鄉(xiāng)村的創(chuàng)作熱情，踐行鄉(xiāng)村振興文化傳播理念。教學(xué)重點(diǎn)1.CSS動畫三種核心屬性的功能區(qū)分。

2.左手坐標(biāo)系的構(gòu)建及各軸正方向判斷。教學(xué)難點(diǎn)1.CSS33D坐標(biāo)系與左手坐標(biāo)系的差異（繞X軸旋轉(zhuǎn)180度）。

2.利用左手法則判斷各軸旋轉(zhuǎn)方向。教學(xué)準(zhǔn)備1.硬件：機(jī)房計算機(jī)（每人一臺）、投影儀、鼠標(biāo)（便于演示操作）。

2.軟件：超星教學(xué)平臺（上傳課件、案例代碼、實操任務(wù)單）、瀏覽器（Chrome）、記事本/VSCode。

3.素材：美麗鄉(xiāng)村圖片、坐標(biāo)系演示動圖、實操任務(wù)模板代碼。教學(xué)方法1.主導(dǎo)方法：BOPPPS教學(xué)法。

2.輔助方法：理實一體化教學(xué)法、案例演示法、講練結(jié)合法、小組協(xié)作法。板書設(shè)計CSS動畫簡介與坐標(biāo)系

1.三大屬性：過渡（transition）、變形（transform）、動畫（animation）

2.左手坐標(biāo)系：拇X（右）、食Y（上）、中Z（前）

3.CSS3坐標(biāo)系：Z軸正向為屏幕外，左手法則判旋轉(zhuǎn)二、教學(xué)設(shè)計教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動設(shè)計意圖/時間第一學(xué)時（40分鐘）

環(huán)節(jié)一：導(dǎo)入（Bridge-in）1.案例展示：播放兩段美麗鄉(xiāng)村網(wǎng)頁效果（靜態(tài)圖片展示頁、帶簡單動畫的圖片展示頁），對比差異。

2.問題引導(dǎo)：“為什么帶動畫的網(wǎng)頁更吸引人？這些動態(tài)效果用什么技術(shù)實現(xiàn)？”

3.引出課題：CSS動畫簡介及坐標(biāo)系，說明本節(jié)課是實現(xiàn)動態(tài)網(wǎng)頁的基礎(chǔ)，銜接后續(xù)鄉(xiāng)村主題實訓(xùn)。教師：1.通過超星平臺展示案例，引導(dǎo)學(xué)生觀察對比。

2.提問互動，收集學(xué)生答案，梳理核心需求。

3.明確本節(jié)課學(xué)習(xí)目標(biāo)和重點(diǎn)。

學(xué)生：1.觀察案例，感受動畫對網(wǎng)頁的提升作用。

2.積極思考并回答問題，明確學(xué)習(xí)方向。設(shè)計意圖：以對比案例激發(fā)興趣，結(jié)合鄉(xiāng)村主題，貼合教材情境，自然引出課題。

時間：5分鐘環(huán)節(jié)二：目標(biāo)告知（Objective）1.知識目標(biāo)：掌握CSS動畫三大屬性功能、左手坐標(biāo)系規(guī)則。

2.能力目標(biāo)：能演示左手坐標(biāo)系，區(qū)分兩種坐標(biāo)系差異。

3.素質(zhì)目標(biāo)：培養(yǎng)空間想象能力，樹立技術(shù)服務(wù)文化傳播的意識。

4.重難點(diǎn)提示：重點(diǎn)為三大屬性與左手坐標(biāo)系，難點(diǎn)為CSS3坐標(biāo)系及旋轉(zhuǎn)方向判斷。教師：1.結(jié)合超星平臺課件，清晰羅列三維目標(biāo)。

2.用不同顏色標(biāo)注重難點(diǎn)，強(qiáng)調(diào)其在后續(xù)學(xué)習(xí)中的作用。

學(xué)生：1.記錄學(xué)習(xí)目標(biāo)和重難點(diǎn)，明確學(xué)習(xí)側(cè)重點(diǎn)。

2.對難點(diǎn)內(nèi)容產(chǎn)生預(yù)判，做好學(xué)習(xí)準(zhǔn)備。設(shè)計意圖：明確學(xué)習(xí)方向，讓學(xué)生帶著目標(biāo)學(xué)習(xí)，提升課堂效率。

時間：3分鐘環(huán)節(jié)三：前測（Pre-assessment）1.基礎(chǔ)提問：“HTML中插入圖片用什么標(biāo)簽？CSS中設(shè)置圖片寬度用哪個屬性？”

2.實操小任務(wù)（5分鐘）：在VSCode中創(chuàng)建HTML文件，插入一張美麗鄉(xiāng)村圖片，用CSS設(shè)置寬度300px、居中顯示。

3.結(jié)果反饋：隨機(jī)抽查3-4名學(xué)生作品，點(diǎn)評共性問題（如居中方法、路徑錯誤）。教師：1.口頭提問，快速了解學(xué)生前置知識掌握情況。

2.發(fā)布實操任務(wù)，巡視指導(dǎo)，記錄學(xué)生問題。

3.點(diǎn)評作品，糾正錯誤，鞏固前置技能。

學(xué)生：1.回答問題，回顧舊知。

2.獨(dú)立完成實操任務(wù)，排查自身知識漏洞。

3.聆聽點(diǎn)評，修正作品。設(shè)計意圖：檢測前置知識掌握情況，為新知學(xué)習(xí)鋪墊，同時調(diào)動學(xué)生動手積極性。

時間：7分鐘（提問2分鐘+實操5分鐘）環(huán)節(jié)四：參與式學(xué)習(xí)（Participation）1.CSS動畫簡介：

（1）講解概念：CSS動畫實現(xiàn)元素樣式平滑轉(zhuǎn)換，替代傳統(tǒng)JavaScript復(fù)雜代碼。

（2）三大屬性講解：結(jié)合鄉(xiāng)村圖片案例，演示各屬性核心功能——過渡（平滑切換樣式）、變形（位移/旋轉(zhuǎn)等）、動畫（關(guān)鍵幀控制復(fù)雜效果），明確三者區(qū)別。

2.左手坐標(biāo)系：

（1）手勢教學(xué)：引導(dǎo)學(xué)生伸出左手，拇指（X軸，右）、食指（Y軸，上）、中指（Z軸，前）構(gòu)建坐標(biāo)系。

（2）小組互動：2人一組，互相檢查手勢準(zhǔn)確性，教師巡視糾錯。教師：1.用通俗語言講解概念，結(jié)合課件動圖演示屬性功能，避免抽象。

2.示范左手坐標(biāo)系手勢，逐一糾正學(xué)生動作，強(qiáng)調(diào)各軸正方向。

3.組織小組互動，設(shè)置“手勢達(dá)標(biāo)”小任務(wù)，激發(fā)參與感。

學(xué)生：1.聆聽講解，結(jié)合案例理解三大屬性功能。

2.跟隨示范做手勢，與組員互相檢查，鞏固坐標(biāo)系構(gòu)建方法。設(shè)計意圖：采用手勢教學(xué)和小組互動，將抽象知識具象化，貼合職校生具象思維特點(diǎn)，突破左手坐標(biāo)系重點(diǎn)。

時間：25分鐘（第一學(xué)時結(jié)束）第二學(xué)時（40分鐘）

環(huán)節(jié)四：參與式學(xué)習(xí)（Participation）（續(xù)）3.CSS33D坐標(biāo)系：

（1）對比講解：與左手坐標(biāo)系差異——繞X軸旋轉(zhuǎn)180度，X軸（右）、Y軸（下）、Z軸（屏幕外）。

（2）工具演示：用超星平臺上傳的坐標(biāo)系演示工具，模擬旋轉(zhuǎn)過程，直觀展示差異。

4.左手法則判斷旋轉(zhuǎn)方向：

（1）法則講解：左手握住旋轉(zhuǎn)軸，拇指指向正方向，手指卷曲方向為旋轉(zhuǎn)正向（順時針）。

（2）案例演示：以X軸、Y軸為例，結(jié)合鄉(xiāng)村圖片旋轉(zhuǎn)效果，演示法則應(yīng)用，逐一講解各軸旋轉(zhuǎn)方向。

（3）小組練習(xí)：每組分配一個軸，討論旋轉(zhuǎn)方向，派代表演示說明。教師：1.借助演示工具突破坐標(biāo)系差異難點(diǎn)，避免純理論講解。

2.分步演示左手法則，結(jié)合實例讓學(xué)生理解旋轉(zhuǎn)方向判斷方法。

3.組織小組討論，鼓勵學(xué)生主動表達(dá)，及時糾正錯誤認(rèn)知。

學(xué)生：1.觀察演示工具，對比兩種坐標(biāo)系差異，建立空間認(rèn)知。

2.跟隨練習(xí)左手法則，參與小組討論，主動演示判斷過程。設(shè)計意圖：借助工具演示和小組練習(xí)，化解CSS3坐標(biāo)系差異及旋轉(zhuǎn)方向判斷的難點(diǎn)，提升學(xué)生參與度和空間想象能力。

時間：20分鐘環(huán)節(jié)五：后測（Post-assessment）1.理論提問：

（1）CSS動畫三大屬性分別是什么？各核心功能是什么？

（2）CSS3坐標(biāo)系中Z軸正方向是哪里？

2.實操任務(wù)（10分鐘）：

（1）新建HTML文件，插入鄉(xiāng)村圖片，結(jié)合所學(xué)，用注釋標(biāo)注出CSS3坐標(biāo)系各軸正方向。

（2）用左手法則判斷圖片繞Y軸旋轉(zhuǎn)的正向，在代碼中添加注釋說明。

3.成果驗收：隨機(jī)抽查學(xué)生作品，點(diǎn)評重難點(diǎn)掌握情況，講解共性問題。教師：1.口頭提問，快速檢測理論知識掌握情況。

2.發(fā)布實操任務(wù)，明確步驟和要求，巡視指導(dǎo)，重點(diǎn)關(guān)注難點(diǎn)應(yīng)用。

3.點(diǎn)評作品，針對坐標(biāo)系標(biāo)注錯誤、旋轉(zhuǎn)方向判斷失誤等問題，再次強(qiáng)化講解。

學(xué)生：1.回答理論問題，鞏固知識記憶。

2.獨(dú)立完成實操任務(wù)，將理論知識應(yīng)用于實踐，排查難點(diǎn)漏洞。

3.聆聽點(diǎn)評，修正作品，深化理解。設(shè)計意圖：理論+實操結(jié)合檢測學(xué)習(xí)效果，針對性強(qiáng)化重難點(diǎn)，確保學(xué)生掌握核心知識，實現(xiàn)理實一體化目標(biāo)。

時間：15分鐘環(huán)節(jié)六：總結(jié)與延伸（Summary）1.課堂總結(jié)：

（1）梳理核心知識點(diǎn)：三大屬性功能、左手坐標(biāo)系、CSS3坐標(biāo)系、左手法則。

（2）重難點(diǎn)回顧：強(qiáng)調(diào)兩種坐標(biāo)系差異及旋轉(zhuǎn)方向判斷方法，明確其對后續(xù)3D動畫學(xué)習(xí)的重要性。

2.知識延伸：預(yù)告下節(jié)課內(nèi)容（transform變形屬性），引導(dǎo)學(xué)生在超星平臺預(yù)習(xí)案例代碼，思考如何用變形屬性操控鄉(xiāng)村圖片。教師：1.用思維導(dǎo)圖形式梳理知識點(diǎn)，幫助學(xué)生構(gòu)建知識框架。

2.重申重難點(diǎn)，強(qiáng)化記憶，發(fā)布預(yù)習(xí)任務(wù)，做好知識銜接。

學(xué)生：1.跟隨總結(jié)回顧知識點(diǎn)，完善筆記，梳理知識邏輯。

2.明確預(yù)習(xí)任務(wù)，借助超星平臺提前了解下節(jié)課內(nèi)容。設(shè)計意圖：梳理知識框架，強(qiáng)化重難點(diǎn)記憶，做好課時銜接，為后續(xù)學(xué)習(xí)鋪墊。

時間：5分鐘（第二學(xué)時結(jié)束）三、課后作業(yè)和教學(xué)反思課后作業(yè)1.完善課堂實操任務(wù)，添加3條注釋，分別說明左手坐標(biāo)系、CSS3坐標(biāo)系及Y軸旋轉(zhuǎn)正向判