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

課堂教學(xué)設(shè)計課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計與制作授課時數(shù)2授課班級授課時間授課地點授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識目標(biāo)掌握有關(guān)字體和文本的CSS知識技能目標(biāo)能夠?qū)崿F(xiàn)文字版面的基本排版素質(zhì)目標(biāo)進(jìn)一步培養(yǎng)學(xué)生精雕細(xì)琢、精益求精的職業(yè)素養(yǎng)；引導(dǎo)學(xué)生體會理論知識轉(zhuǎn)變?yōu)橹苯由a(chǎn)力的成就感，使學(xué)生領(lǐng)略專業(yè)魅力。教學(xué)重點字體屬性與文本屬性教學(xué)難點使用@font-face實現(xiàn)在線字體學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實踐操作、課堂小結(jié)的路徑組織實施教學(xué)過程。課外拓展有針對性的安排訓(xùn)練，同時培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時間安排)教學(xué)內(nèi)容教學(xué)活動技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))1.預(yù)習(xí)微課視頻2.觀察校園網(wǎng)網(wǎng)頁，觀察頁面字體種類和特征。任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識，引導(dǎo)學(xué)生樹立實踐是學(xué)習(xí)CSS選擇器的最佳方式，不單要理解CSS選擇器的含義，還要不斷的實踐測試代碼。2.展示同學(xué)們課前預(yù)習(xí)成果，引導(dǎo)學(xué)生總結(jié)網(wǎng)頁字體除了顏色和大小屬性外，還有樣式、粗細(xì)、外形等屬性，文本還有首行縮進(jìn)、行高、陰影等屬性。3.明確本次課程的學(xué)習(xí)目標(biāo)為掌握字體和文本屬性設(shè)置，預(yù)期結(jié)果為會靈活使用這些屬性完成網(wǎng)頁字體和文本設(shè)置，讓學(xué)生對學(xué)習(xí)路徑有一個清晰的認(rèn)識。1.簡要總結(jié)上次課內(nèi)容和常見問題；2.組織學(xué)生展示預(yù)習(xí)成果，幫助學(xué)生總結(jié)字體和文本常見屬性。1.在教師的引導(dǎo)下展示預(yù)習(xí)成果；2.總結(jié)字體和文本常見屬性，明確本次課任務(wù)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識學(xué)習(xí)[35分鐘]1.DW中插入、替換和查找介紹網(wǎng)頁文本輸入過程中常用的插入、替換和查找操作，幫助學(xué)生提升網(wǎng)頁文本編輯熟練度。2.CSS字體屬性將學(xué)生總結(jié)的字體屬性歸納后，引入對應(yīng)的具體屬性名稱，并舉例講解具體屬性值。3.CSS文本屬性將學(xué)生總結(jié)的文本屬性歸納后，引入對應(yīng)的具體屬性名稱，并舉例講解具體屬性值。4.WebFont與@font-face根據(jù)實際工作，介紹特殊字體美化用到的屬性。1.案例教學(xué)展示基本知識；2.對于難點WebFont與@font-face，先展示使用效果，引起學(xué)生興趣，然后介紹具體設(shè)置方式，并及時總結(jié)流程。觀看教師演示，簡單實踐操作。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機演練文字和文本相關(guān)案例。2.鼓勵學(xué)生在上機演練時相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時的反饋和指導(dǎo)，幫助學(xué)生及時糾正錯誤，加深理解。1.組織分組；2.鼓勵學(xué)生積極討論并提供實踐指導(dǎo)；3.組織學(xué)生換組點評，總結(jié)實現(xiàn)流程。1.分組討論后實踐操作；2.相互點評并及時總結(jié)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評價[10分鐘]課堂小結(jié)，重申課堂重點難點，明確課題學(xué)習(xí)任務(wù)，針對課堂教學(xué)內(nèi)容，互動交流討論，布置后續(xù)課預(yù)習(xí)知識：超級鏈接。作業(yè)點評課程小結(jié)查漏補缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、