職業(yè)院校教師能力大賽：網(wǎng)站頁(yè)面設(shè)計(jì)教案

平臺(tái)支撐項(xiàng)目導(dǎo)向課程思政2 3 3課題名稱HTML5基礎(chǔ)授課課時(shí)2課時(shí)授課班級(jí)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)××班授課時(shí)間2020年××月××授課地點(diǎn)機(jī)房××授課類型理實(shí)一體授課形式混合式學(xué)習(xí)教材處理所選教材內(nèi)容劃分根據(jù)普通高等學(xué)校高等職業(yè)教育(?？?專業(yè)目錄及專業(yè)簡(jiǎn)介(截至2019年)、信息和通信工程技術(shù)人員國(guó)家職業(yè)標(biāo)我校計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)人才培養(yǎng)方案、課程標(biāo)準(zhǔn)要求，將教材內(nèi)容整合分解為九個(gè)模塊。序號(hào)第一章礎(chǔ)第二章排列頁(yè)面內(nèi)容列表標(biāo)簽任務(wù)頁(yè)面章任務(wù)一：注注班而面表單控件的使用任務(wù)戶注冊(cè)頁(yè)面任務(wù)!編輯頁(yè)面第四章礎(chǔ)分分切任切物物章頁(yè)面布同與規(guī)劃任息列表頁(yè)面任任任章背景與陰影任背景與陰影的使用導(dǎo)航菜里果放果章盒子模型非行榜盒子模型的使用而果第八章常用的樣式屬性常見(jiàn)樣式的使用單在任制作div混含布局綜合“E樂(lè)購(gòu)”網(wǎng)站設(shè)計(jì)與一；“E樂(lè)購(gòu)”首頁(yè)及精品推薦板塊網(wǎng)站站點(diǎn)開(kāi)發(fā)仕務(wù)一:ET“產(chǎn)品分本和牽環(huán)⑩園班本節(jié)選自第一章HTML5基礎(chǔ)教學(xué)內(nèi)容根據(jù)教學(xué)總目標(biāo)，確定本節(jié)教學(xué)內(nèi)容。 4網(wǎng)頁(yè)網(wǎng)頁(yè)開(kāi)發(fā)工具【至點(diǎn)】HTML5基礎(chǔ)圖片標(biāo)簽與超鏈接標(biāo)簽圖片標(biāo)簽【重點(diǎn)】超鏈按標(biāo)簽【難點(diǎn)】教學(xué)目標(biāo)知識(shí)目標(biāo)2、熟練使用文本、圖片以及超鏈接標(biāo)簽。技能目標(biāo)素質(zhì)目標(biāo)1、養(yǎng)成自主學(xué)習(xí)和探索的習(xí)慣，不斷提升發(fā)現(xiàn)問(wèn)題、分析問(wèn)題、學(xué)情分析授課對(duì)象：19級(jí)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)大一學(xué)生。1、知識(shí)基礎(chǔ)：具備一定的平面設(shè)計(jì)基礎(chǔ)。2、技能基礎(chǔ)：能熟練使用電腦，打字速度平均70字/分，未接觸代碼編寫3、學(xué)習(xí)能力：對(duì)網(wǎng)頁(yè)開(kāi)發(fā)比較感興趣，有較為豐富的網(wǎng)站使用經(jīng)教學(xué)重、難點(diǎn)HTML的基本概名網(wǎng)頁(yè)網(wǎng)頁(yè)開(kāi)發(fā)工具【至點(diǎn)】HTML5草礎(chǔ) 圖片標(biāo)簽與超鏈接標(biāo)簽圖片標(biāo)簽【重點(diǎn)1超筋按標(biāo)簽【難點(diǎn)】教學(xué)設(shè)計(jì)根據(jù)教學(xué)內(nèi)容和學(xué)情分析，因本節(jié)課為本課程的第一次課，學(xué)生缺乏編碼基礎(chǔ)，對(duì)開(kāi)發(fā)工具不熟悉，因此，在授課過(guò)程中，需關(guān)注學(xué)生的接受程度與掌握程度，適當(dāng)集合生活化案例，進(jìn)行知識(shí)點(diǎn)講解，注重知識(shí)點(diǎn)細(xì)節(jié)，幫助學(xué)生更好理解。課前：安排學(xué)生進(jìn)行M0OT學(xué)習(xí)，完成預(yù)習(xí)筆記，并由學(xué)習(xí)小組長(zhǎng)進(jìn)行檢查和匯總。統(tǒng)計(jì)分析學(xué)生M0OT學(xué)習(xí)結(jié)果，并組織實(shí)施課前測(cè)試，通過(guò)學(xué)習(xí)和測(cè)試，明確學(xué)生預(yù)習(xí)中的難點(diǎn)，進(jìn)行針對(duì)性的案例準(zhǔn)備課中：進(jìn)行MOOT學(xué)習(xí)結(jié)果分析，引起學(xué)生重視；分析課前測(cè)試結(jié)果，進(jìn)行答疑；運(yùn)用生活化案例，便于學(xué)生對(duì)知識(shí)點(diǎn)的理解；貫穿理實(shí)一體化，強(qiáng)化鞏固知識(shí)點(diǎn)；設(shè)置學(xué)習(xí)小組，組織學(xué)生討論課后：下發(fā)課后實(shí)踐任務(wù)，明確提交時(shí)間與標(biāo)準(zhǔn)，檢測(cè)學(xué)教學(xué)資源資源名稱對(duì)教學(xué)內(nèi)容的支撐作用5××××課程教學(xué)平臺(tái)課前、課中、課后支持教學(xué)《HTML5基礎(chǔ)PPT》課中支持教學(xué)《HTML5參考手冊(cè)》課前、課中、課后自學(xué)××學(xué)習(xí)平臺(tái)課前、課中、課后自學(xué)××課堂課中，課后支持教學(xué)，教學(xué)答疑錄屏軟件課中支持教學(xué)網(wǎng)絡(luò)資源(1)HTML介紹及開(kāi)發(fā)工具知識(shí)要點(diǎn)(2)HTML5標(biāo)簽知識(shí)要點(diǎn)學(xué)習(xí)HTML文檔基本結(jié)構(gòu)(3)文本和超鏈接標(biāo)簽日知識(shí)要日知識(shí)要課前、課后助學(xué) 6圖片標(biāo)簽圖片標(biāo)簽教學(xué)過(guò)程環(huán)節(jié)(用時(shí))內(nèi)容活動(dòng)技術(shù)手段教師學(xué)生課前準(zhǔn)備2、發(fā)放測(cè)試卷(見(jiàn)附件一)3、在學(xué)委群發(fā)放××課堂授課1、檢查MOOT學(xué)習(xí)情況，檢查預(yù)習(xí)筆記，2、準(zhǔn)備并下發(fā)測(cè)3、申請(qǐng)××?xí)h1、自主學(xué)習(xí)課程。2、完成預(yù)習(xí)3、完成測(cè)試1、課程教學(xué)平臺(tái)學(xué)習(xí)平臺(tái)會(huì)議4、網(wǎng)絡(luò)學(xué)習(xí)資源設(shè)計(jì)目的1、促進(jìn)學(xué)生知識(shí)內(nèi)化。2、了解自學(xué)情況，調(diào)整教學(xué)策略。3、促進(jìn)學(xué)生對(duì)知識(shí)點(diǎn)的了解和掌握。4、幫助學(xué)生明確課程重難點(diǎn)。教學(xué)隨記1、全部同學(xué)完成測(cè)試。2、測(cè)試結(jié)果基本正確。3、全部同學(xué)完成MOOT學(xué)習(xí)，完成預(yù)習(xí)筆記。課程導(dǎo)入(5分鐘)1、分析測(cè)試結(jié)果與MOOT學(xué)1、調(diào)出測(cè)試結(jié)果況，解決共性問(wèn)2、明確課中學(xué)習(xí)1、抓住學(xué)習(xí)1、課程教學(xué)平L5基礎(chǔ)學(xué)習(xí)平臺(tái)會(huì)議1、講解HTML相關(guān)1、完善小節(jié)1、課程 7HTML介紹及開(kāi)發(fā)工具(15分學(xué)生基礎(chǔ)：初次接觸，有一定的電腦操作基礎(chǔ)。教學(xué)策略：1、使用《HTML5網(wǎng)頁(yè)設(shè)計(jì)》ppt,展示本課程綜合項(xiàng)目，引如何確保在不同的設(shè)備上保持顯示的一致性。6、點(diǎn)評(píng)總結(jié)。3、提問(wèn)：HTML文檔的后綴有哪些。4、隨機(jī)抽取學(xué)生5、講解記事本編寫HTML文件的步驟。事本編寫helloworld程序，7、講解Hbuilder編寫HTML文件的world程序9、安排討論：總結(jié)出兩種方式編寫HTML文件的優(yōu)10、點(diǎn)評(píng)總結(jié)。筆記并標(biāo)注重難點(diǎn)。2、組內(nèi)討論3、被點(diǎn)名同學(xué)進(jìn)行問(wèn)題4、了解使用記事本編寫HTML文檔的5、掌握使用Hbuilder編檔的步驟。6、組內(nèi)討論教學(xué)平L5基礎(chǔ)學(xué)習(xí)平臺(tái)會(huì)議5、錄屏軟件設(shè)計(jì)目的5、解決第一個(gè)重點(diǎn)知識(shí)點(diǎn)。教學(xué)隨記第2個(gè)特點(diǎn)：注意區(qū)分不同標(biāo)簽的含學(xué)生：對(duì)英文單詞的讀、寫能力較弱。教學(xué)策略：4、知識(shí)點(diǎn)小結(jié)：HTML5的標(biāo)1、講解相關(guān)標(biāo)簽最終的顯示效果。3、總結(jié)課堂陷阱產(chǎn)生的問(wèn)題及規(guī)避措施。4、帶領(lǐng)學(xué)生完善隨堂筆記。5、引導(dǎo)學(xué)生思考隨機(jī)抽取學(xué)生回答并點(diǎn)評(píng)?！禜TML5基2、記錄案例演示中的關(guān)鍵步驟。3、組內(nèi)討論課堂陷阱出現(xiàn)的原因及4、完善筆記理清小節(jié)知1、課程教學(xué)平L5基礎(chǔ)學(xué)習(xí)平臺(tái) 86、知識(shí)點(diǎn)小結(jié)，7、演示隨堂實(shí)踐任務(wù)并在學(xué)習(xí)通下發(fā)任務(wù)識(shí)點(diǎn)5、完成實(shí)踐任務(wù)并在學(xué)習(xí)通上傳會(huì)議5、錄屏軟件設(shè)計(jì)目的教學(xué)隨記1、學(xué)生興趣較高，積極參與討論。2、學(xué)生主動(dòng)反饋問(wèn)題，及時(shí)在線溝通。第3個(gè)小節(jié)：文本和超鏈接標(biāo)簽(15分鐘)特點(diǎn)：注意區(qū)別不同標(biāo)簽的關(guān)1、邊聽(tīng)邊操作，強(qiáng)化掌握和理<h1>、<h2>、<h3>…<h6>標(biāo)簽4、講解段落標(biāo)簽的效果。6、講解強(qiáng)調(diào)標(biāo)簽<strong>標(biāo)簽9、隨堂實(shí)踐任務(wù)，1、講解相關(guān)標(biāo)簽最終的顯示效果。3、講解各標(biāo)簽的4、帶領(lǐng)學(xué)生完善5、引導(dǎo)學(xué)生思考，隨機(jī)抽取學(xué)生回7、演示隨堂實(shí)踐任務(wù)并在學(xué)習(xí)通《HTML5基礎(chǔ)PPT》。2、記錄案例演示中的關(guān)3、組內(nèi)討論并闡述討論5、完成實(shí)踐任務(wù)并在學(xué)1、課程教學(xué)平L5基礎(chǔ)學(xué)習(xí)平臺(tái)會(huì)議5、錄屏軟件設(shè)計(jì)目的2、通過(guò)效果理解記憶各標(biāo)簽的使用。教學(xué)隨記1、學(xué)生興趣較高，積極參與討論。2、學(xué)生主動(dòng)反饋問(wèn)題，及時(shí)在線溝通。3、學(xué)生對(duì)標(biāo)簽的書(shū)寫還不夠熟悉。第4個(gè)小節(jié)：圖片與超鏈接標(biāo)簽(30分鐘)1、邊聽(tīng)邊操作，強(qiáng)化掌握和理7、講解超鏈接標(biāo)簽的使用。1、講解相關(guān)標(biāo)簽的與超鏈接標(biāo)簽最終3、講解標(biāo)簽的使用4、帶領(lǐng)學(xué)生完善隨5、引導(dǎo)學(xué)生思考，隨機(jī)抽取學(xué)生回答《HTML5基礎(chǔ)PPT》。2、記錄案例演示中的關(guān)3、組內(nèi)討論并闡述討論記，理清小1、課程教學(xué)平2學(xué)習(xí)平臺(tái) 97、演示隨堂實(shí)踐任務(wù)并在學(xué)習(xí)通下發(fā)5、完成實(shí)踐任務(wù)并在學(xué)會(huì)議5、錄屏軟件設(shè)計(jì)目的1、掌握本章節(jié)難點(diǎn)。2、掌握?qǐng)D片標(biāo)簽的使用，掌握常見(jiàn)屬性的設(shè)置。3、掌握超鏈接的使用，理解超鏈接的使用場(chǎng)景。教學(xué)隨記1、學(xué)生對(duì)圖片標(biāo)簽較有興趣。2、授課中，互動(dòng)較多。3、遇到的問(wèn)題，進(jìn)行留言。課程總結(jié)(10分鐘)1、總結(jié)。2、出口考(附件二)、1、總結(jié)本節(jié)課重、3、學(xué)習(xí)通上傳課1、課程教學(xué)平臺(tái)設(shè)計(jì)目的教學(xué)隨記2、完成了課堂目標(biāo)。課后拓展1、查閱資料，自主學(xué)習(xí)。2、下發(fā)課堂錄屏，反復(fù)對(duì)重難1、線上線下與同學(xué)探討學(xué)習(xí)1、利用課余時(shí)間，查閱資料，自主學(xué)2、觀看下發(fā)的課堂錄屏。1、課程教學(xué)平臺(tái)2、網(wǎng)絡(luò)資源 L5開(kāi)發(fā)設(shè)計(jì)目的1、進(jìn)行知識(shí)點(diǎn)反復(fù)強(qiáng)化。2、提供課堂回放，方便學(xué)生復(fù)習(xí)。教學(xué)反饋教學(xué)效果課堂評(píng)價(jià)1、線上教學(xué)，學(xué)生的積極性較高，整堂課都積極參與互動(dòng)。2、大部分同學(xué)都能及時(shí)在××?xí)h平臺(tái)反饋遇到的問(wèn)題。教學(xué)特色1、使用理實(shí)一體化教學(xué)，學(xué)生能快速進(jìn)入思考，提升動(dòng)手能力。2、貫穿多種教學(xué)方法，靈活多變，激發(fā)學(xué)生興趣，引導(dǎo)學(xué)生思考并參與到教學(xué)反思1、如何確保學(xué)生在線上教學(xué)時(shí)，都能高效準(zhǔn)2、如何監(jiān)控學(xué)生課后線下學(xué)習(xí)效果。 課前測(cè)試(附件一)4、在圖片標(biāo)簽中，使用屬性設(shè)置顯示圖片的位置。課后測(cè)試(附件二)1、Hbuilder提供了創(chuàng)建和管理站點(diǎn)的工具，使用這些工具創(chuàng)建站點(diǎn)，可以方便的管理站點(diǎn)中的目錄及文件，使用Hbuilder新建的站點(diǎn)名稱是HTML5實(shí)踐任務(wù)。站點(diǎn)建立后，新建頁(yè)2、使用HTML5的標(biāo)準(zhǔn)文檔結(jié)構(gòu)制作一個(gè)HTML頁(yè)面。e①localhost8080/第一章/摩碼/安姓寶例2/Demo2.html①localhost8080/第一章/摩碼/安姓寶例2/Demo2.htmlx8Clocahox8080/第一載/碼實(shí)消*B/Lemo_3htmlQ☆【詩(shī)文解釋】【詞語(yǔ)解釋】:【詩(shī)文賞析】個(gè)千人所，萬(wàn)人的王屬部在名國(guó)小F課：htVtalabaaucenvins47leobteul4、使用HTML5標(biāo)簽制作詩(shī)人李白介紹頁(yè)