HTML5CSS3Web前端設(shè)計基礎(chǔ)教程（第3版）教案-教學設(shè)計 任務(wù)9 使用CSS控制圖像文本-2課時-課堂教學設(shè)計

課堂教學設(shè)計課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計與制作授課時數(shù)2授課班級授課時間授課地點授課形式多媒體教學參考資料參考教材《HTML5+CSS3Web前端設(shè)計基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學標準《Web前端開發(fā)》課程標準職業(yè)技能標準Web前端開發(fā)職業(yè)技能等級標準（標準代碼：510001）校本補充材料中國大學MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學目標知識目標掌握有關(guān)圖像的CSS知識技能目標能夠制作圖文混排效果素質(zhì)目標進一步培養(yǎng)學生精雕細琢、精益求精的職業(yè)素養(yǎng)；引導學生體會理論知識轉(zhuǎn)變?yōu)橹苯由a(chǎn)力的成就感，使學生領(lǐng)略專業(yè)魅力。教學重點Background基本屬性教學難點圖文混排學情分析學生能夠使用HTML標簽創(chuàng)建簡單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應代碼類課程的學習模式，但不同學生的學習進度和興趣逐步表現(xiàn)出差異。教學總體設(shè)計依據(jù)教學標準要求，結(jié)合學生學情，動態(tài)調(diào)整應用“翻轉(zhuǎn)課堂”模式的教學比重，以邊講邊練、分組討論、實踐操作、課堂小結(jié)的路徑組織實施教學過程。課外拓展有針對性的安排訓練，同時培養(yǎng)學生發(fā)現(xiàn)問題、自主解決問題的意識和習慣，進而提高綜合素養(yǎng)。教學環(huán)節(jié)(時間安排)教學內(nèi)容教學活動技術(shù)資源教學隨記(教學過程中記錄)教師學生課前準備(提前2-3天發(fā)布教學任務(wù))1.預習微課視頻2.結(jié)合平時上網(wǎng)經(jīng)歷，思考網(wǎng)頁中的圖片和文字布局關(guān)系任務(wù)下達、課前準備任務(wù)獲取、課前準備PPT、微課、網(wǎng)絡(luò)資源課堂教學（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識，通過教學平臺的課前測試，檢查學生上節(jié)課知識掌握情況并及時進行測試點評。2.通過提問抽查學生課前預習情況，通過引導學生關(guān)注圖像和文字的位置關(guān)系，借助圖片元素和背景圖片的區(qū)別，引出背景圖片的概念及常用屬性。3.明確課程的學習目標：使用CSS控制圖像文本，制作具體案例；讓學生對學習路徑有一個清晰的認識。1.發(fā)起課前測試；2.點評測試結(jié)果；3.抽查學生課前預習情況。1.參與課前測試；2.總結(jié)測試過程中出現(xiàn)的問題；3.反饋課前預習情況；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學（二）知識學習[35分鐘]1.background屬性結(jié)合背景圖片的特性，通過具體案例展示背景圖片的顏色、內(nèi)容、大小、平鋪、位置等屬性的具體使用場景和方法，在此基礎(chǔ)上，引出復合屬性的使用規(guī)則。2.圖文混排展示圖文混排案例，講解混排原則及具體方法，指出核心知識點：浮動1.案例展示具體屬性使用方法；2.關(guān)注學生接受情況；3.及時溝通，解決學生理解誤區(qū)；1.觀察教師演示，實踐幫助理解；2.及時回應教師，主動反饋疑惑點。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機演練背景圖片和圖文混排案例。2.鼓勵學生在上機演練時多觀察，多思考，相互討論，分享學習心得和遇到的問題，通過集體的智慧解決問題。3.教師即時的反饋和指導，幫助學生及時糾正錯誤，加深理解。1.鼓勵學生積極討論并提供實踐指導；2.通過教學平臺隨機抽查學生成果，總結(jié)常見問題。1.分組討論后實踐操作;2.相互點評并及時總結(jié)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學（四）總結(jié)評價[10分鐘]課堂小結(jié)，重申課堂重點難點，明確課題學習任務(wù)，針對課堂教學內(nèi)容，互動交流討論，布置后續(xù)課預習知識：元素浮動與清除。作業(yè)點評課程小結(jié)查漏補缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.使用HTML和CSS創(chuàng)建一個簡單的個人博客頁