HTML5CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）教案-教學(xué)設(shè)計(jì) 任務(wù)12 表單元素及其控制-2課時(shí)-課堂教學(xué)設(shè)計(jì)

課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解表單的基本概念；掌握常用表單的使用方法；技能目標(biāo)掌握CSS控制表單外觀的處理思路素質(zhì)目標(biāo)培養(yǎng)學(xué)生堅(jiān)持問題導(dǎo)向，科學(xué)分析問題、深入研究問題的能力；增強(qiáng)問題意識(shí)，既要見思想，更要見行動(dòng)，從而指導(dǎo)自己的學(xué)習(xí)和工作。教學(xué)重點(diǎn)常見表單對(duì)象（文本字段、復(fù)選框、復(fù)選按鈕、下拉列表、自動(dòng)驗(yàn)證等）教學(xué)難點(diǎn)CSS3按鈕、開源樣式庫按鈕學(xué)情分析學(xué)生能夠熟練搭建HTML網(wǎng)頁結(jié)構(gòu)，能夠完成基本CSS樣式設(shè)計(jì)和布局，但遇到需要實(shí)際問題，仍然缺乏調(diào)試技巧和經(jīng)驗(yàn)。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))1.預(yù)習(xí)微課視頻2.在智慧校園頁面找出登錄頁和個(gè)人信息頁中的表單個(gè)數(shù)及表單對(duì)象有哪些？任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，引導(dǎo)學(xué)生樹立實(shí)踐是學(xué)習(xí)CSS布局與優(yōu)化的關(guān)鍵。2.利用教學(xué)平臺(tái)隨機(jī)抽查學(xué)生預(yù)習(xí)情況，鼓勵(lì)學(xué)生提出感興趣的知識(shí)點(diǎn)。3.結(jié)合學(xué)生反饋，明確課程的學(xué)習(xí)目標(biāo)：掌握常用表單的使用方法。讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。1.整體回顧上節(jié)課知識(shí)點(diǎn)；2.抽查學(xué)生預(yù)習(xí)情況，引導(dǎo)學(xué)生提出表單對(duì)象是具體使用和設(shè)置；1.反饋預(yù)習(xí)情況；2.明確學(xué)習(xí)任務(wù)；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.表單的基本知識(shí)2.常見的表單對(duì)象（1）文本字段（2）復(fù)選框與復(fù)選框組（3）單選按鈕與單選按鈕組（4）“提交”按鈕（5）日期、顏色、滑塊等（6）下拉菜單（7）跳轉(zhuǎn)菜單（8）自動(dòng)驗(yàn)證3.CSS控制表單（1）搜索欄（2）登錄頁（3）傳統(tǒng)按鈕、CSS3按鈕與開源樣式庫按鈕1.教師演示文本字段、復(fù)選框（組）、單選按鈕（組）、的具體使用和注意事項(xiàng)；2.鼓勵(lì)學(xué)生自己探索其他表單對(duì)象的使用場(chǎng)景和方法；3.引導(dǎo)學(xué)生掌握CSS設(shè)置表單的思路和方法；1.觀察教師演示案例；2.主動(dòng)探索教師預(yù)留表單對(duì)象的使用場(chǎng)景和方法；3.學(xué)習(xí)CSS設(shè)置表單的思路和方法；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例，掌握CSS美化表單對(duì)象的思路，了解實(shí)際開發(fā)過程中開源樣式庫按鈕。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。1.鼓勵(lì)學(xué)生積極討論并提供實(shí)踐指導(dǎo)；2.組織學(xué)生開展小組內(nèi)點(diǎn)評(píng)，總結(jié)實(shí)現(xiàn)流程。1.分組討論后實(shí)踐操作;2.相互點(diǎn)評(píng)并及時(shí)總結(jié)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、教程