HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)任務(wù)教程（湯佳 第2版）教案全套-單元設(shè)計(jì) 單元1-7 HTML5靜態(tài)網(wǎng)站開(kāi)發(fā)概述- Bootstrap5框架簡(jiǎn)介

七、教學(xué)過(guò)程設(shè)計(jì)（第1-2學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：960網(wǎng)格系統(tǒng)在網(wǎng)頁(yè)制作中的使用；clearfix和clear的使用。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑網(wǎng)格系統(tǒng)的基本原理是什么？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示兩欄頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示不均分三欄頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示均分三欄頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示均分四欄頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示clearfix和clear使用頁(yè)面效果。設(shè)疑：網(wǎng)格和分欄之間是什么關(guān)系？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索“960網(wǎng)格系統(tǒng)”，了解網(wǎng)格系統(tǒng)的原理，并了解“城市管理網(wǎng)格員”的工作職責(zé)。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生使用960網(wǎng)格系統(tǒng)分別制作兩欄頁(yè)面、三欄頁(yè)面和四欄頁(yè)面；clearfix和clear的基本使用方法。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。960網(wǎng)格系統(tǒng)的基本原理。960網(wǎng)格系統(tǒng)是使用固定寬度960px置中對(duì)齊畫面的方式呈現(xiàn)在網(wǎng)頁(yè)上。去除左右兩邊各10px的空間，留下中間940px的區(qū)塊以20px作為間隔分欄。在空間設(shè)計(jì)上，可隨意合并多欄作為版面配置及網(wǎng)頁(yè)尺寸的設(shè)定，合并出來(lái)的欄寬也不會(huì)有畸零數(shù)，有利于CSS中<div>寬度的設(shè)定。960網(wǎng)格系統(tǒng)常用規(guī)格有兩種：一個(gè)是12欄式的，另一個(gè)是16欄式的。如果你的設(shè)計(jì)里面分3個(gè)區(qū)塊你就選擇12欄式的，那是因?yàn)?2能被3整除；同理假如你的設(shè)計(jì)分四個(gè)區(qū)塊，你可以選12欄式或者16欄式，那是因?yàn)?2和16都可以被4整除。一般我們都采用12欄式的進(jìn)行設(shè)計(jì)。CSS中的清除浮動(dòng)（clearfix）的基本原理。采用<divclass="clear"></div>方法清除浮動(dòng)，會(huì)多一個(gè)沒(méi)有意義的<div>，因此并不推薦使用。我們采用clearfix的方法來(lái)清除浮動(dòng)，代碼如下：.clearfix:after{/*在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容*/content:".";/*內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫*/display:block;/*加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素*/clear:both;/*清除左右兩邊浮動(dòng)*/visibility:hidden;/*設(shè)置為隱藏。它和display:none;是有區(qū)別的。仍然占據(jù)空間，只是看不到而已*/height:0;/*高度為0*/font-size:0;/*字體大小為0*/}整段代碼就相當(dāng)于在浮動(dòng)元素后面跟了個(gè)寬高為0的空<div>，然后設(shè)定它c(diǎn)lear:both來(lái)達(dá)到清除浮動(dòng)的效果。原理是經(jīng)過(guò)使用after偽對(duì)象，它將在應(yīng)用clearfix的元素結(jié)尾添加content中的內(nèi)容，也就是一個(gè)"."，并且把他設(shè)置為塊級(jí)元素（display="block"）；高度設(shè)置為0，clear="both"，然后將其內(nèi)容隱藏掉（visibility="hidden"），這樣就會(huì)撐開(kāi)此塊級(jí)元素。之所以用它，是因?yàn)?，你不必在HTML文件中寫入大量無(wú)意義的空標(biāo)簽，又能清除浮動(dòng)。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生960網(wǎng)格系統(tǒng)在網(wǎng)頁(yè)制作中的使用：代碼詳見(jiàn)教材第174頁(yè)。clearfix和clear的使用： <h1>clearfix和clear</h1> <h3>沒(méi)有clear:both</h3> <divclass="out"> <divclass="left"></div> <divclass="right"></div> </div> <divclass="clear"></div> <!--這行清除浮動(dòng)，否則兩個(gè)案例會(huì)重疊--> <h3>有clear:both</h3> <divclass="out"> <divclass="left"></div> <divclass="right"></div> <divclass="clear"> </div> </div> <h3>采用clearfix</h3> <divclass="outclearfix"> <divclass="left"></div> <divclass="right"></div> </div>1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)搭建頁(yè)面框架。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第3-4學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：常用經(jīng)典布局；常用彈性布局。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑彈性布局有什么優(yōu)點(diǎn)？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示八種經(jīng)典布局效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示百分比布局頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示圣杯布局頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示側(cè)邊固定寬度布局頁(yè)面效果。設(shè)疑：網(wǎng)格布局和彈性布局相比較有哪些優(yōu)缺點(diǎn)？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索“常見(jiàn)的網(wǎng)頁(yè)布局”，并了解對(duì)應(yīng)的應(yīng)用場(chǎng)景，讓學(xué)生了解“具體問(wèn)題具體分析”的原理和方法論。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生采用div+css排版常用三種經(jīng)典布局；使用彈性布局方式實(shí)現(xiàn)百分比布局；使用彈性布局方式實(shí)現(xiàn)圣杯布局；使用彈性布局方式實(shí)現(xiàn)側(cè)邊固定寬度布局。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。div+css常用頁(yè)面結(jié)構(gòu)命名規(guī)范。頁(yè)面結(jié)構(gòu)命名：一個(gè)頁(yè)面往往會(huì)根據(jù)頁(yè)面的結(jié)構(gòu)不同樣式也會(huì)有所不同，所以頁(yè)面結(jié)構(gòu)命名也有一定的規(guī)則可循，大體如下：容器:container、頁(yè)頭：header、內(nèi)容：content、頁(yè)面主體：main、頁(yè)尾：footer、導(dǎo)航：nav/menu、側(cè)欄：sidebar、欄目：column、頁(yè)面外圍控制整體布局寬度：wrapper、左右中：leftrightcenter。div+css常用導(dǎo)航命名規(guī)范。導(dǎo)航命名：頁(yè)面結(jié)構(gòu)中的導(dǎo)航命名也需要遵循一定的規(guī)則，具體如下：導(dǎo)航：nav、主導(dǎo)航：mainnav、子導(dǎo)航：subnav、頂導(dǎo)航：topnav、邊導(dǎo)航：sidebar、左導(dǎo)航：leftsidebar、右導(dǎo)航：rightsidebar、菜單：menu、子菜單：submenu、標(biāo)題:title、摘要:summary。div+css常用功能命名規(guī)范。功能命名：結(jié)合頁(yè)面結(jié)構(gòu)，可以在設(shè)置樣式時(shí)遵循一定的規(guī)則按照功能命名，具體如下：標(biāo)志：logo、廣告：banner、登陸：login、登錄條：loginbar、注冊(cè)：register、搜索：search、功能區(qū)：shop、標(biāo)題：title、加入：joinus、狀態(tài)：status、按鈕：btn、滾動(dòng)：scroll、標(biāo)簽頁(yè)：tab、文章列表：list、提示信息：msg、當(dāng)前的:current、小技巧：tips、圖標(biāo):icon、注釋：note、指南：guild、服務(wù)：service、熱點(diǎn)：hot、新聞：news、下載：download、投票：vote、合作伙伴：partner、友情鏈接：link、版權(quán)：copyright。Flex彈性布局基本原理。彈性布局，即Flex布局，是CSS3中的一種新的布局模式，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局，當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)非常適用。目前，幾乎所有的瀏覽器都支持Flex布局。Flex語(yǔ)法如下：flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;flex-grow：一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。flex-shrink：一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。flex-basis：項(xiàng)目的長(zhǎng)度。1、百分比分別設(shè)置：flex:0050%;，flex:0033.3%;。2、上下左右四塊都設(shè)置：flex:00100px;。3、側(cè)邊欄設(shè)置：flex:0020%;內(nèi)容設(shè)置flex:1;，頁(yè)腳設(shè)置flex:0010%;。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生常用經(jīng)典布局：代碼詳見(jiàn)教材第182頁(yè)。常用彈性布局：代碼詳見(jiàn)教材第189頁(yè)。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)搭建頁(yè)面框架。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第5-6學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：表格基本知識(shí)。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑（1）表格在哪些場(chǎng)景下使用？（2）表格由哪些元素組成？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示表格基本屬性及使用效果圖。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示表格基本屬性及使用效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示細(xì)邊框表格效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示細(xì)邊框表格效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示設(shè)置表格寬度、列寬度和行高度頁(yè)面效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示隔行變色表格效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示鼠標(biāo)移上去行變色效果。設(shè)疑：表格除了演示的樣式，還具有哪些個(gè)性化樣式？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索“表格的作用”，讓學(xué)生了解，如何將復(fù)雜的信息以簡(jiǎn)潔的形式展示出來(lái)，使得信息的傳遞更加清晰和明了。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生創(chuàng)建一個(gè)有表頭，表體和表腳的表格；創(chuàng)建三個(gè)三行三列的表格，第一個(gè)要求第一行合并單元格，第二個(gè)要求第一列合并單元格，第三個(gè)要求第1、2兩行的第1、2兩列合并單元格；使用三種方法完成細(xì)邊框表格的制作；使用百分比設(shè)置表格的寬度和高度；制作一個(gè)11行4列的表格，要求該表格在網(wǎng)頁(yè)中居中顯示，表格是細(xì)邊框表格，表格整體寬度為960像素。該表格有表頭，并且給第一、二、四列的表頭設(shè)置寬度，第一、二列單元格內(nèi)容居中；制作一個(gè)四行三列的表格，要求使用CSS3:nth-child()選擇器設(shè)置表格隔行底色不同，達(dá)到隔行變色效果；制作一個(gè)四行三列的表格，要求使用偽類選擇器:hover實(shí)現(xiàn)鼠標(biāo)移動(dòng)到某行，某行就改變顏色。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。表格的常用標(biāo)簽。（1）<table>標(biāo)簽網(wǎng)頁(yè)中的表格使用<table>標(biāo)簽表示，以<table>標(biāo)記開(kāi)始，以</table>標(biāo)記結(jié)束。表格的基本構(gòu)成最少需要三個(gè)元素：<table>、<tr>、<td>，其他的一些作為可選輔助存在。<table> 表示表格<thead> 表示表頭<tbody> 表示表格主體<tfoot> 表示表腳<tr> 表示一行<th> 表示標(biāo)題行單元格<td> 表示單元格<col> 表示一列<colgroup> 表示一組列<caption> 表示表格標(biāo)題（2）單元格標(biāo)簽<td>及屬性<td>表示表格中的單元格，包括如下屬性：colspan：規(guī)定單元格可橫跨的列數(shù)；rowspan：規(guī)定單元格可橫跨的行數(shù)；headers：規(guī)定與單元格相關(guān)的表頭，該屬性不會(huì)在普通瀏覽器中產(chǎn)生任何視覺(jué)變化，但可以被屏幕閱讀器使用。任務(wù)中所表示的列內(nèi)合并單元格、行內(nèi)合并單元格以及合并兩行兩列需要用到colspan和rowspan屬性。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生表格基本知識(shí)：代碼詳見(jiàn)教材第194頁(yè)。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)搭建頁(yè)面框架。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第7-8學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：使用表格制作個(gè)人簡(jiǎn)歷。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑個(gè)人簡(jiǎn)歷一般需要放哪些內(nèi)容？哪些信息是企業(yè)感興趣的？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示個(gè)人簡(jiǎn)歷頁(yè)面效果。設(shè)疑：制作個(gè)人簡(jiǎn)歷分幾個(gè)步驟？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生復(fù)雜的事情簡(jiǎn)單化，簡(jiǎn)單的事情流程化，流程化的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)化的事情制度化。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生要求使用表格以及相關(guān)元素制作一個(gè)個(gè)人簡(jiǎn)歷，其中個(gè)人簡(jiǎn)歷整體上使用表單呈現(xiàn)，主要內(nèi)容放置在表格中，具體單元格的內(nèi)容根據(jù)要求需要使用到單選按鈕、復(fù)選框、無(wú)序列表、有序列表以及超鏈接等元素。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。細(xì)邊框表格的三種做法。（1）背景設(shè)置式：通過(guò)將表格背景色設(shè)置為黑色，將單元格背景設(shè)置為白色，并且將單元格之間的距離cell_spaceing設(shè)置為大于0的數(shù)，從而讓邊框顯示為黑色，cell_spaceing值越大，表格框線越粗。（2）邊框設(shè)置式：通過(guò)直接設(shè)置表格的邊框來(lái)實(shí)現(xiàn)細(xì)邊框表格，為了方便查看，通過(guò)不同顏色的線條來(lái)顯示邊框線，tableborder是表格外一圈邊框，tdborder是單元格邊框thborder是表頭邊框。即在設(shè)置邊框時(shí)如果表格外邊框只設(shè)置上、右邊框，單元格只設(shè)置下、左邊框，保證邊框不重復(fù)設(shè)置即可。（3）層疊式：為表格<td>、<th>標(biāo)簽設(shè)置了邊框線后，因內(nèi)邊框的線條重復(fù)設(shè)置，導(dǎo)致內(nèi)邊框線條較粗，影響美觀，所以在表格CSS樣式中需要設(shè)置border-collapse屬性。form表單單選按鈕、復(fù)選按鈕分組。表單中的單選框radio，name相同的是一組，比如以下代碼：<form><inputtype="radio"name="sex"value="male">男<inputtype="radio"name="sex"value="female">女<inputtype="radio"name="age"value="adult">已成年<inputtype="radio"name="age"value="child">未成年</form>cellspacing和cellpadding的區(qū)別。cellpadding:從其名稱看，此屬性與padding類似。cellpadding用來(lái)設(shè)置單元格中文本內(nèi)容和邊框之間的距離，類似于內(nèi)邊距。cellspacing:cell是單元格的意思，從字面意思是設(shè)置單元格之間或者單元格與外圍邊框的距離。此屬性類似于margin外邊距。colspan和rowspan的相關(guān)知識(shí)。row行，column列，span跨度colspan=列跨度，代表合并列rowspan=行跨度，代表合并行border-collapse屬性的相關(guān)知識(shí)。border-collapse屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框。separate默認(rèn)值。邊框會(huì)被分開(kāi)。不會(huì)忽略border-spacing和empty-cells屬性。collapse如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略border-spacing和empty-cells屬性。當(dāng)border-collapse設(shè)置為collapse時(shí)，表格自身的border與cellspacing屬性便沒(méi)有作用了。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生使用表格制作個(gè)人簡(jiǎn)歷：代碼詳見(jiàn)教材第206頁(yè)。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)搭建頁(yè)面框架。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第9-10學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：使用表格制作QQ郵箱。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑QQ郵箱可以采用DIV+CSS進(jìn)行制作嗎？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示QQ郵箱效果。設(shè)疑：QQ郵箱界面在瀏覽器大小變化的過(guò)程中，具有哪些特性？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生登錄自己的郵箱，作為課程案例進(jìn)行臨摹，提升自己的應(yīng)變能力。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生使用表格制作QQ郵箱。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。表格的寬度和高度的百分比設(shè)置。瀏覽器本身是有寬度和高度的，設(shè)置HTML的width:100%;和height:100%;，就可以獲取瀏覽器的寬度和高度。后面<body>和<table>的寬度和高度也就有了依賴，即，表格的寬高百分比設(shè)置就可以與瀏覽器的寬度高度保持一定的比例關(guān)系。html,body{width:100%;height:100%}。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生使用表格制作QQ郵箱：代碼詳見(jiàn)教材第212頁(yè)。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁(yè)面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第11-12學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：制作自適應(yīng)網(wǎng)站頭部和banner；制作自適應(yīng)網(wǎng)站底部導(dǎo)航；制作自適應(yīng)網(wǎng)站主頁(yè)面菜單。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑網(wǎng)頁(yè)制作中常用的長(zhǎng)度單位有哪些？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容。《移動(dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站首頁(yè)效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“作者”網(wǎng)頁(yè)效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“商城”網(wǎng)頁(yè)效果圖。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“我的”網(wǎng)頁(yè)效果圖。設(shè)疑：一般的app具有哪些常用的欄目？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索“庖丁解牛”了解典故，讓學(xué)生了解，人只要掌握了客觀規(guī)律，靈活運(yùn)用，就能從必然中解放出來(lái)，獲得真正的自由。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作自適應(yīng)網(wǎng)站頭部和banner；制作自適應(yīng)網(wǎng)站底部導(dǎo)航；制作自適應(yīng)網(wǎng)站主頁(yè)面菜單。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。rem單位基本知識(shí)。（1）rem是CSS3新增的一個(gè)相對(duì)單位（rootem，根em）。使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前所有的瀏覽器（ie8及以下版本除外）都支持rem。（2）em的計(jì)算方法：需轉(zhuǎn)換的px值/自適應(yīng)對(duì)象寬度px值*10。（3）通常在寫移動(dòng)端頁(yè)面的時(shí)候，我們都會(huì)設(shè)置viewport，保證頁(yè)面縮放沒(méi)有問(wèn)題，最常見(jiàn)的viewport的meta標(biāo)簽如下：<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>（4）文本字號(hào)不建議使用rem。<meta>標(biāo)簽屬性的相關(guān)知識(shí)。<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">width=device-width寬度等于當(dāng)前設(shè)備的寬度initial-scale=1.0初始縮放比例，默認(rèn)為1（倍）minimum-scale=1.0/maximum-scale=1.0最小/大縮放比例1（倍）user-scalable=no是否允許用戶縮放頁(yè)面（yes/no）1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作自適應(yīng)網(wǎng)站頭部和banner：代碼詳見(jiàn)教材第224頁(yè)。制作自適應(yīng)網(wǎng)站底部導(dǎo)航：代碼詳見(jiàn)教材第224頁(yè)。制作自適應(yīng)網(wǎng)站主頁(yè)面菜單：代碼詳見(jiàn)教材第224頁(yè)。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁(yè)面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第13-14學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：制作自適應(yīng)網(wǎng)站index.html頁(yè)面；制作自適應(yīng)網(wǎng)站author.html頁(yè)面。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑成熟的app數(shù)據(jù)在加載時(shí)候，出現(xiàn)什么效果（瀑布流）？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容。《移動(dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站首頁(yè)效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“作者”網(wǎng)頁(yè)效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“商城”網(wǎng)頁(yè)效果圖。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“我的”網(wǎng)頁(yè)效果圖。設(shè)疑：“作者”網(wǎng)頁(yè)有哪些地方需要改進(jìn)？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生訪問(wèn)當(dāng)當(dāng)網(wǎng)，下載書籍封面及簡(jiǎn)介，作為案例制作文字和圖片素材，同時(shí)可以了解當(dāng)前較熱的書籍有哪些。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作自適應(yīng)網(wǎng)站index.html頁(yè)面；制作自適應(yīng)網(wǎng)站author.html頁(yè)面。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。如何將頂部菜單欄、底部工具欄固定在某個(gè)位置？采用position:fixed;屬性固定頂部和底部菜單。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作自適應(yīng)網(wǎng)站index.html頁(yè)面：代碼詳見(jiàn)教材第228頁(yè)。制作自適應(yīng)網(wǎng)站author.html頁(yè)面：代碼詳見(jiàn)教材第228頁(yè)1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁(yè)面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。七、教學(xué)過(guò)程設(shè)計(jì)（第15-16學(xué)時(shí)，共16學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：制作自適應(yīng)網(wǎng)站book.html頁(yè)面；制作自適應(yīng)網(wǎng)站logon.html頁(yè)面。1、通過(guò)智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問(wèn)題設(shè)疑CSS刪除線代碼是什么？查看在線學(xué)習(xí)平臺(tái)公告，提前通過(guò)平臺(tái)或者掃描新形態(tài)一體化教材上的對(duì)應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過(guò)信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容。《移動(dòng)web開(kāi)發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過(guò)信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站首頁(yè)效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“作者”網(wǎng)頁(yè)效果。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“商城”網(wǎng)頁(yè)效果圖。打開(kāi)教材提供的網(wǎng)頁(yè)案例，演示自適應(yīng)網(wǎng)站“我的”網(wǎng)頁(yè)效果圖。設(shè)疑：“我的”網(wǎng)頁(yè)有哪些地方需要改進(jìn)？1、思考老師提出的問(wèn)題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過(guò)演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來(lái)讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來(lái)做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過(guò)復(fù)制粘貼修改已有代碼，讓學(xué)生了解高效學(xué)習(xí)的本質(zhì)就是有技巧地重復(fù)。1、引導(dǎo)學(xué)生通過(guò)網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問(wèn)并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過(guò)課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過(guò)程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作自適應(yīng)網(wǎng)站book.html頁(yè)面；制作自適應(yīng)網(wǎng)站logon.html頁(yè)面。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過(guò)課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對(duì)于教師的歸納，仔細(xì)聽(tīng)講、思考、記錄筆記。1、問(wèn)題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過(guò)引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來(lái)的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問(wèn)題，學(xué)生自行百度獲取答案。onBlur和onFocus的相關(guān)知識(shí)。onBlur:當(dāng)輸入框失去焦點(diǎn)后onFocus:當(dāng)輸入框獲得焦點(diǎn)后onfocus="if(value=='請(qǐng)輸入昵稱'){value=''}"代表當(dāng)文本框獲得焦點(diǎn)，并且文本框內(nèi)容是“請(qǐng)輸入昵稱”，那么清空文本框。onblur="if(value==''){value='請(qǐng)輸入昵稱'}"代表當(dāng)文本框失去焦點(diǎn)的時(shí)候內(nèi)容為空，那么文本框的內(nèi)容置為“請(qǐng)輸入昵稱”。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過(guò)平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作自適應(yīng)網(wǎng)站book.html頁(yè)面：代碼詳見(jiàn)教材第232頁(yè)。制作自適應(yīng)網(wǎng)站logon.html頁(yè)面：代碼詳見(jiàn)教材第232頁(yè)。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過(guò)分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂(lè)趣，增強(qiáng)對(duì)知識(shí)的內(nèi)化。步驟7：評(píng)價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測(cè)驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評(píng)；3、課堂總結(jié)。1、分享交流；2、相互評(píng)價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評(píng)價(jià)在教學(xué)中的導(dǎo)向作用，重視自評(píng)與互評(píng)，使評(píng)價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過(guò)程。為了使評(píng)價(jià)優(yōu)化，評(píng)價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評(píng)價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、完成單元6作業(yè)及測(cè)試、期末項(xiàng)目設(shè)計(jì)制作頁(yè)面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見(jiàn)。1、班級(jí)QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。XXXXXX學(xué)院?jiǎn)卧O(shè)計(jì)課程課程：內(nèi)容：?jiǎn)卧?Bootstrap5框架簡(jiǎn)介學(xué)時(shí)：

設(shè)計(jì)摘要教學(xué) 課題單元1HTML5靜態(tài)網(wǎng)站開(kāi)發(fā)概述課程學(xué)時(shí)安排12學(xué)時(shí)年級(jí)高職一年級(jí)所選教材湯佳陳曉男主編．《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)任務(wù)教材（第2版）》．高等教育出版社，2023年12月．一、教學(xué)背景創(chuàng)作思路：針對(duì)傳統(tǒng)教學(xué)無(wú)法解決的教學(xué)難題進(jìn)行設(shè)計(jì)，課程依托信息化教學(xué)環(huán)境，整合數(shù)字化教學(xué)資源，采用混合式教學(xué)模式，采用翻轉(zhuǎn)課堂的有力手段，采用“有效學(xué)習(xí)時(shí)間”的理念進(jìn)行項(xiàng)目化考核。以學(xué)生為中心，教師做引導(dǎo)，在項(xiàng)目教學(xué)的各環(huán)節(jié)充分運(yùn)用HbuilderX開(kāi)發(fā)工具、智慧職教MOOC、動(dòng)畫、在線教學(xué)平臺(tái)等信息化手段解決教學(xué)重點(diǎn)難點(diǎn)問(wèn)題。設(shè)計(jì)特色 ：1．教學(xué)過(guò)程項(xiàng)目化：依據(jù)“工學(xué)結(jié)合、職業(yè)情境、項(xiàng)目主導(dǎo)”人才培養(yǎng)模式，通過(guò)創(chuàng)設(shè)情境、針對(duì)實(shí)際問(wèn)題精心設(shè)計(jì)單元引例，教師點(diǎn)評(píng)、小組互評(píng)，使學(xué)生自主探究，“做中學(xué)”，“學(xué)中做”，降低了學(xué)生學(xué)習(xí)難度，提高學(xué)習(xí)興趣和課堂參與度；2．教學(xué)資源數(shù)字化：豐富的課件、經(jīng)典作品、視頻等資源可供學(xué)生在線平臺(tái)學(xué)習(xí)；3．網(wǎng)絡(luò)平臺(tái)融合化：緊緊圍繞HbuilderX開(kāi)發(fā)工具，融入智慧職教MOOC、動(dòng)畫、在線教學(xué)平臺(tái)等信息化手段進(jìn)行教學(xué)完成教學(xué)目標(biāo)，突破重點(diǎn)、難點(diǎn)；4．學(xué)習(xí)評(píng)價(jià)多元化：結(jié)合作品展示、小組匯報(bào)等多種方式，采用學(xué)生自評(píng)、師生互評(píng)，以及評(píng)價(jià)平臺(tái)等多種手段形成動(dòng)態(tài)化、多元化的評(píng)價(jià)體系。二、學(xué)習(xí)目標(biāo)與內(nèi)容1.學(xué)習(xí)目標(biāo) 知識(shí)目標(biāo)：掌握Bootstrap5安裝使用；了解并掌握柵格化布局；學(xué)會(huì)使用響應(yīng)式導(dǎo)航欄；學(xué)會(huì)使用響應(yīng)式輪播圖；學(xué)會(huì)使用文字和圖片排版；掌握完整的響應(yīng)式網(wǎng)站開(kāi)發(fā)流程；掌握Bootstrap5常用類。能力目標(biāo)：熟悉Bootstrap5框架的常用類；能夠熟練運(yùn)用Bootstrap5框架進(jìn)行網(wǎng)站開(kāi)發(fā)；能夠熟練掌握響應(yīng)式網(wǎng)站開(kāi)發(fā)流程。素質(zhì)目標(biāo)：總體目標(biāo)：培養(yǎng)繼往開(kāi)來(lái)的創(chuàng)新精神。新技術(shù)新框架不斷涌現(xiàn)，需要不斷學(xué)習(xí)；提升自學(xué)能力，打造個(gè)人核心競(jìng)爭(zhēng)力；工作只是起點(diǎn)終身學(xué)習(xí)更能贏得未來(lái)。思政育人目標(biāo)：通過(guò)學(xué)習(xí)Bootstrap5框架知識(shí)，讓學(xué)生明白“活到老學(xué)到老”，當(dāng)今社會(huì)發(fā)展日新月異，如果我們不保持不斷地學(xué)習(xí)，就會(huì)被社會(huì)所淘汰；通過(guò)學(xué)習(xí)響應(yīng)式網(wǎng)站開(kāi)發(fā)流程，讓學(xué)生明白“按規(guī)律辦事，按規(guī)矩做事”，只要能做到順應(yīng)規(guī)律，不強(qiáng)為不妄為，就什么事情都可以做，而且什么事都可以做成。2.學(xué)習(xí)主要內(nèi)容 Bootstrap5基礎(chǔ)知識(shí)；制作柵格化布局頁(yè)面；制作響應(yīng)式導(dǎo)航欄；制作響應(yīng)式輪播圖；制作響應(yīng)式文字和圖片；制作完整的響應(yīng)式網(wǎng)站。3.學(xué)習(xí)重點(diǎn)及難點(diǎn)教學(xué)重點(diǎn)：Bootstrap5框架使用方法；響應(yīng)式網(wǎng)站的制作流程；Bootstrap5常用類。教學(xué)難點(diǎn)：Bootstrap5的基本原理；CSS3響應(yīng)式布局核心（@