HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版）教案-單元設(shè)計(jì) 單元7 Bootstrap5框架簡介

XXXXXX學(xué)院單元設(shè)計(jì)課程課程：內(nèi)容：單元7Bootstrap5框架簡介學(xué)時(shí)：

設(shè)計(jì)摘要教學(xué) 課題單元1HTML5靜態(tài)網(wǎng)站開發(fā)概述課程學(xué)時(shí)安排12學(xué)時(shí)年級高職一年級所選教材湯佳陳曉男主編．《HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教材（第2版）》．高等教育出版社，2023年12月．一、教學(xué)背景創(chuàng)作思路：針對傳統(tǒng)教學(xué)無法解決的教學(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開發(fā)工具、智慧職教MOOC、動(dòng)畫、在線教學(xué)平臺等信息化手段解決教學(xué)重點(diǎn)難點(diǎn)問題。設(shè)計(jì)特色 ：1．教學(xué)過程項(xiàng)目化：依據(jù)“工學(xué)結(jié)合、職業(yè)情境、項(xiàng)目主導(dǎo)”人才培養(yǎng)模式，通過創(chuàng)設(shè)情境、針對實(shí)際問題精心設(shè)計(jì)單元引例，教師點(diǎn)評、小組互評，使學(xué)生自主探究，“做中學(xué)”，“學(xué)中做”，降低了學(xué)生學(xué)習(xí)難度，提高學(xué)習(xí)興趣和課堂參與度；2．教學(xué)資源數(shù)字化：豐富的課件、經(jīng)典作品、視頻等資源可供學(xué)生在線平臺學(xué)習(xí)；3．網(wǎng)絡(luò)平臺融合化：緊緊圍繞HbuilderX開發(fā)工具，融入智慧職教MOOC、動(dòng)畫、在線教學(xué)平臺等信息化手段進(jìn)行教學(xué)完成教學(xué)目標(biāo)，突破重點(diǎn)、難點(diǎn)；4．學(xué)習(xí)評價(jià)多元化：結(jié)合作品展示、小組匯報(bào)等多種方式，采用學(xué)生自評、師生互評，以及評價(jià)平臺等多種手段形成動(dòng)態(tài)化、多元化的評價(jià)體系。二、學(xué)習(xí)目標(biāo)與內(nèi)容1.學(xué)習(xí)目標(biāo) 知識目標(biāo)：掌握Bootstrap5安裝使用；了解并掌握柵格化布局；學(xué)會(huì)使用響應(yīng)式導(dǎo)航欄；學(xué)會(huì)使用響應(yīng)式輪播圖；學(xué)會(huì)使用文字和圖片排版；掌握完整的響應(yīng)式網(wǎng)站開發(fā)流程；掌握Bootstrap5常用類。能力目標(biāo)：熟悉Bootstrap5框架的常用類；能夠熟練運(yùn)用Bootstrap5框架進(jìn)行網(wǎng)站開發(fā)；能夠熟練掌握響應(yīng)式網(wǎng)站開發(fā)流程。素質(zhì)目標(biāo)：總體目標(biāo)：培養(yǎng)繼往開來的創(chuàng)新精神。新技術(shù)新框架不斷涌現(xiàn)，需要不斷學(xué)習(xí)；提升自學(xué)能力，打造個(gè)人核心競爭力；工作只是起點(diǎn)終身學(xué)習(xí)更能贏得未來。思政育人目標(biāo)：通過學(xué)習(xí)Bootstrap5框架知識，讓學(xué)生明白“活到老學(xué)到老”，當(dāng)今社會(huì)發(fā)展日新月異，如果我們不保持不斷地學(xué)習(xí)，就會(huì)被社會(huì)所淘汰；通過學(xué)習(xí)響應(yīng)式網(wǎng)站開發(fā)流程，讓學(xué)生明白“按規(guī)律辦事，按規(guī)矩做事”，只要能做到順應(yīng)規(guī)律，不強(qiáng)為不妄為，就什么事情都可以做，而且什么事都可以做成。2.學(xué)習(xí)主要內(nèi)容 Bootstrap5基礎(chǔ)知識；制作柵格化布局頁面；制作響應(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)式布局核心（@media常用屬性）使用原理。三、學(xué)情分析授課對象是高職一年級的學(xué)生，通過一學(xué)期的學(xué)習(xí)，已系統(tǒng)學(xué)習(xí)了《計(jì)算機(jī)應(yīng)用基礎(chǔ)》《程序設(shè)計(jì)基礎(chǔ)》課程，有一定的編程基礎(chǔ)，但對軟件開發(fā)基本流程的理解、自我規(guī)劃和管理能力、團(tuán)隊(duì)協(xié)作交流能力、自我學(xué)習(xí)解決問題的能力還有所欠缺，基于“課堂不保證做，課后保證不做”的現(xiàn)狀，需要采用翻轉(zhuǎn)課堂的有力手段監(jiān)督其課后學(xué)習(xí)情況，課堂主要用于作業(yè)檢查、解惑答疑、交流討論，從而達(dá)到更好的教學(xué)效果。四、學(xué)習(xí)環(huán)境選擇與學(xué)習(xí)資源設(shè)計(jì)1.學(xué)習(xí)環(huán)境（1）教學(xué)硬件：多媒體教室；（2）教學(xué)軟件：極域電子教室、PhotoShop、HBuilderX、谷歌瀏覽器等。2.學(xué)習(xí)資源類型（1）課程在線教學(xué)平臺（2）新形態(tài)一體化教材（3）職教云課堂3.學(xué)習(xí)資源內(nèi)容簡要說明智慧職教平臺《移動(dòng)web開發(fā)》在線開放課程有多媒體課件、微視頻、試題庫等多種數(shù)字化資源；高等職業(yè)教育新形態(tài)一體化規(guī)劃教材《HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教材（第2版）》中二維碼標(biāo)注微課、課件，實(shí)現(xiàn)移動(dòng)終端隨掃隨學(xué)。五、學(xué)習(xí)情境創(chuàng)設(shè)前6個(gè)單元主要講解了傳統(tǒng)的PC端網(wǎng)站、自適應(yīng)webApp網(wǎng)站的制作，本單元主要講解采用Bootstrap5框架制作響應(yīng)式網(wǎng)頁。如何引用Bootstrap5框架、Bootstrap5框架的基本原理、Bootstrap5框架的常用自定義類、如何使用Bootstrap5框架制作常見功能模塊、響應(yīng)式網(wǎng)站的制作流程是怎樣的，是本單元的主要學(xué)習(xí)內(nèi)容。六、教法學(xué)法設(shè)計(jì)1、項(xiàng)目化教學(xué)步驟：①創(chuàng)設(shè)情景、導(dǎo)入任務(wù)②演示錄屏、學(xué)生筆記③學(xué)生練習(xí)、教師巡視④集中講解，學(xué)生修改，上傳作業(yè)⑤重復(fù)2-4步⑥課堂小結(jié)⑦布置作業(yè)。2、教師教法（1）分階段演示法：將一個(gè)復(fù)雜案例分解成若干個(gè)步驟，分階段演示。（2）巡回指導(dǎo)法：逐個(gè)檢查學(xué)生的練習(xí)情況，并進(jìn)行答疑解惑。（3）錯(cuò)誤總結(jié)法：將檢查巡視過程中發(fā)現(xiàn)的共性錯(cuò)誤，進(jìn)行集中講解。（4）定期檢查法：針對期末項(xiàng)目考核，階段性檢查其作業(yè)情況，起到監(jiān)督和輔導(dǎo)的作用。3、學(xué)生學(xué)法（1）模仿案例法：學(xué)期初學(xué)生還未入門，學(xué)生根據(jù)教師的操作錄屏，模仿案例自主練習(xí)。（2）反復(fù)練習(xí)法：針對常用知識點(diǎn)，需要反復(fù)不斷練習(xí)，提高熟練程度。（3）綜合項(xiàng)目法：針對復(fù)雜案例，先進(jìn)行分析，分解成若干簡單案例，再進(jìn)行組合。（4）自由發(fā)揮法：底子薄弱的學(xué)生，照著書本敲代碼，練習(xí)打字維持課堂秩序即可。4、項(xiàng)目考核：人手一份，定期展示，錄像檢查。

七、教學(xué)過程設(shè)計(jì)（第1-2學(xué)時(shí)，共12學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：Bootstrap5基礎(chǔ)知識；制作柵格化布局頁面；制作響應(yīng)式導(dǎo)航欄。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑Bootstrap5框架相較之前的版本做了哪些改進(jìn)？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示響應(yīng)式網(wǎng)頁效果圖。打開教材提供的網(wǎng)頁案例，演示柵格化布局頁面效果。打開教材提供的網(wǎng)頁案例，演示響應(yīng)式導(dǎo)航欄頁面效果。設(shè)疑：響應(yīng)式柵格化和960網(wǎng)格有哪些異同？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索“響應(yīng)式網(wǎng)站框架”，讓學(xué)生了解常用的框架。新技術(shù)新框架不斷涌現(xiàn)，提高認(rèn)知水平需要不斷地學(xué)習(xí)、思考和實(shí)踐。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生Bootstrap5響應(yīng)式框架的使用；制作柵格化布局頁面；制作響應(yīng)式的導(dǎo)航欄。1、引導(dǎo)學(xué)生借助在線課程平臺獲取知識進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺獲取知識進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。Bootstrap5基礎(chǔ)知識。Bootstrap是全球最受歡迎的前端組件庫，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB項(xiàng)目。Bootstrap5目前是Bootstrap的最新版本，是一套用于HTML、CSS和JS開發(fā)的開源工具集。它支持Sass變量和mixins、響應(yīng)式網(wǎng)格系統(tǒng)、大量的預(yù)建組件和強(qiáng)大的JavaScript插件，助你快速設(shè)計(jì)和自定義響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的站點(diǎn)。Bootstrap5是Bootstrap的最新版本，使用了新組件、更快的樣式表以及擁有更快的響應(yīng)能力。Bootstrap5支持所有主要的最新穩(wěn)定版本瀏覽器，但不支持InternetExplorer11及以下版本。Bootstrap5和Bootstrap3&4的主要區(qū)別在于Bootstrap5不再依賴jQuery，使用了原生的JavaScript，當(dāng)然我們?nèi)绻胗靡部梢砸雑Query。柵格系統(tǒng)GridSystem的基本原理。在行中，使用.col類來創(chuàng)建列。可以在.col類后面添加后綴來指定列在不同屏幕大小下的寬度。例如，.col-6表示該列在所有屏幕大小下占據(jù)6個(gè)網(wǎng)格單元。.col-lg-8表示該列在大屏幕上占據(jù)8個(gè)網(wǎng)格單元。Bootstrap5網(wǎng)格系統(tǒng)有以下6個(gè)類：.col-：針對所有設(shè)備。.col-sm：平板-屏幕寬度等于或大于576px。.col-md-：桌面顯示器-屏幕寬度等于或大于768px。.col-lg-：大桌面顯示器-屏幕寬度等于或大于992px。.col-xl-：特大桌面顯示器-屏幕寬度等于或大于1200px。.col-xxl-：超大桌面顯示器-屏幕寬度等于或大于1400px。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識，提高學(xué)生利用所學(xué)知識進(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)成功的樂趣，增強(qiáng)對新知識的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生Bootstrap5基礎(chǔ)知識： <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1"> <title></title> <linkhref="/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet"> <scriptsrc="/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head>制作柵格化布局頁面： <divclass="container"> <divclass="row"> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border"> <576px<br/>12行*1列 </div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">>=576px <768px<br/>6行*2列 </div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border"> <=768px<992px<br/>4行*3列 </div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">>=992px <1200px<br/>3行*4列 </div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">>=1200px <1400px<br/>2行*6列 </div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">>=1400px<br/>1行*12列</div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">col-*</div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">col-sm-*</div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">col-md-*</div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">col-lg-*</div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">col-xl-*</div> <divclass="col-xxl-1col-xl-2col-lg-3col-md-4col-sm-6col-12border">col-xxl-*</div> </div> </div>制作響應(yīng)式導(dǎo)航欄：代碼詳見教材第245頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第3-4學(xué)時(shí)，共12學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：制作響應(yīng)式輪播圖；制作響應(yīng)式文字和圖片。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑響應(yīng)式輪播圖和第四單元的輪播圖片展現(xiàn)效果有什么不同？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示響應(yīng)式輪播圖頁面效果。打開教材提供的網(wǎng)頁案例，演示響應(yīng)式文字和圖片頁面效果。設(shè)疑：響應(yīng)式圖片的CSS代碼是什么？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生深度學(xué)習(xí)框架技術(shù)，熟練掌握常用的功能模塊，方能達(dá)到事半功倍的效果。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作響應(yīng)式輪播圖；制作響應(yīng)式文字和圖片。1、引導(dǎo)學(xué)生借助在線課程平臺獲取知識進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺獲取知識進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。data-bs-toggle和data-bs-targe的相關(guān)知識。data-bs-toggle和data-bs-target是用于定義組件行為和目標(biāo)元素的自定義數(shù)據(jù)屬性。（1）data-bs-toggle屬性：用于定義組件的行為，指示組件在何時(shí)觸發(fā)?？梢栽O(shè)置的值取決于具體的組件類型，如"collapse"（折疊菜單）、"modal"（模態(tài)框）、"tab"（標(biāo)簽頁）等。data-bs-toggle="collapse"用于觸發(fā)折疊菜單的展開與折疊。data-bs-toggle="modal"用于觸發(fā)模態(tài)框的顯示與隱藏。data-bs-toggle="tab"用于觸發(fā)標(biāo)簽頁的切換。（2）data-bs-target屬性：用于指定組件的目標(biāo)元素或目標(biāo)選擇器。目標(biāo)元素可以是一個(gè)CSS選擇器，用于標(biāo)識要操作的具體元素。也可以是一個(gè)指定的元素ID，以#開頭，如data-bs-target="#myModal"。data-bs-target屬性與data-bs-toggle屬性一起使用，用于將組件行為與目標(biāo)元素關(guān)聯(lián)起來。Bootstrap5自帶文本類。Bootstrap5默認(rèn)的font-size為16px，line-height為1.5。默認(rèn)的font-family為"HelveticaNeue",Helvetica,Arial,sans-serif。Bootstrap5提供了文本顏色類：text-muted：淺灰色文本text-primary：藍(lán)色文本text-success：綠色文本text-info：淺藍(lán)色文本text-warning：黃色文本text-danger：紅色文本text-secondary：灰色文本text-dark：深灰色文本text-body：黑色文本text-light：淺灰色文本（白色背景上看不清楚）text-white：白色文本Bootstrap5自帶背景顏色類。bg-primary：藍(lán)色背景bg-secondary：深灰色背景bg-success：綠色背景bg-danger：紅色背景bg-warning：黃色背景bg-info：淺藍(lán)色背景bg-light：淺灰色背景bg-dark：黑色背景bg-body：白色背景bg-white：白色背景bg-transparent：透明背景Bootstrap5自帶圖片樣式類。.rounded：為圖像添加圓角。.rounded-circle：將圖像塑造為圓形。.img-thumbnail：將圖像塑造為縮略圖（帶邊框）。.float-start：將圖像向左浮動(dòng)，.float-end：將圖像向右浮動(dòng)。.mx-auto(margin:auto)和.d-block(display:block)：使圖像居中。.img-fluid：為圖像應(yīng)用max-width:100%和height:auto，圖像將很好地縮放到父元素內(nèi)。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識，提高學(xué)生利用所學(xué)知識進(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)成功的樂趣，增強(qiáng)對新知識的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作響應(yīng)式輪播圖：代碼詳見教材第248頁。制作響應(yīng)式文字和圖片：代碼詳見教材第252頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第5-6學(xué)時(shí)，共12學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：制作完整的響應(yīng)式網(wǎng)站的頁面框架。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑響應(yīng)式網(wǎng)站一般適配哪些終端？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容。《移動(dòng)web開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示響應(yīng)式框架頁面效果。設(shè)疑：響應(yīng)式框架頁面在變化時(shí)候的CSS3動(dòng)畫代碼是什么？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過學(xué)習(xí)響應(yīng)式網(wǎng)站開發(fā)流程，讓學(xué)生明白“按規(guī)律辦事，按規(guī)矩做事”，只要能做到順應(yīng)規(guī)律，不強(qiáng)為不妄為，就什么事情都可以做，而且什么事都可以做成。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作完整的響應(yīng)式網(wǎng)站的頁面框架。1、引導(dǎo)學(xué)生借助在線課程平臺獲取知識進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺獲取知識進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。CSS3媒體查詢基本知識。CSS3媒體查詢是一種用于根據(jù)設(shè)備的特性和特定條件來應(yīng)用不同樣式的CSS技術(shù)。通過媒體查詢，我們可以針對不同設(shè)備（如計(jì)算機(jī)、平板電腦、手機(jī)等）和不同的條件（如屏幕寬度、設(shè)備方向等）制作響應(yīng)式布局，使網(wǎng)頁在不同設(shè)備上都能夠良好地展示。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識，提高學(xué)生利用所學(xué)知識進(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)成功的樂趣，增強(qiáng)對新知識的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作完整的響應(yīng)式網(wǎng)站的頁面框架：代碼教材第256頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第7-8學(xué)時(shí)，共12學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：制作頭部背景圖像及菜單；制作banner圖片和校園公告。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑banner圖片的大小會(huì)不會(huì)和網(wǎng)頁同步縮放？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示頭部背景圖像及菜單頁面效果。打開教材提供的網(wǎng)頁案例，演示banner圖片和校園公告頁面效果。設(shè)疑：如何修改Bootstrap5現(xiàn)有的CSS代碼？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生深入了解掌握Bootstrap5框架的核心技術(shù)，要“知其然知其所以然”掌握其基本原理，并且可以根據(jù)需求修改核心代碼。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作頭部背景圖像及菜單；制作banner圖片和校園公告。1、引導(dǎo)學(xué)生借助在線課程平臺獲取知識進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺獲取知識進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。CSS3媒體查詢基本知識。CSS3媒體查詢是一種用于根據(jù)設(shè)備的特性和特定條件來應(yīng)用不同樣式的CSS技術(shù)。通過媒體查詢，我們可以針對不同設(shè)備（如計(jì)算機(jī)、平板電腦、手機(jī)等）和不同的條件（如屏幕寬度、設(shè)備方向等）制作響應(yīng)式布局，使網(wǎng)頁在不同設(shè)備上都能夠良好地展示?；菊Z法：<style>@mediamediaTypeand(mediaFeature){選擇器{屬性名：屬性值}}//多個(gè)媒體特性@mediamediaTypeand(mediaFeature)and(mediaFeature){選擇器{屬性名：屬性值}}</style>1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識，提高學(xué)生利用所學(xué)知識進(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)成功的樂趣，增強(qiáng)對新知識的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作頭部背景圖像及菜單：代碼詳見教材第258頁。制作banner圖片和校園公告：代碼詳見教材第261頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第9-10學(xué)時(shí)，共12學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：制作完整的響應(yīng)式網(wǎng)站網(wǎng)頁主體。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑什么場景下使用.row樣式？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示網(wǎng)頁主體頁面效果。設(shè)疑：Bootstrap5如何去除<ul>列表的圓點(diǎn)樣式？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生“熟讀唐詩三百首，不會(huì)做詩也會(huì)吟”，需要深入了解Bootstrap5的常用文本類、顯示類，并且可以熟練使用。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作完整的響應(yīng)式網(wǎng)站網(wǎng)頁主體。1、引導(dǎo)學(xué)生借助在線課程平臺獲取知識進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺獲取知識進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。Bootstrap5自帶處理內(nèi)容溢出類。類overflow-auto：在固定寬度和高度的元素上，如果內(nèi)容溢出了元素，將生成一個(gè)垂直滾動(dòng)條，通過滾動(dòng)條可以查看溢出的內(nèi)容。類overflow-hidden:在固定寬度和高度的元素上，如果內(nèi)容溢出了元素，溢出的部分將被隱藏。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識，提高學(xué)生利用所學(xué)知識進(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)成功的樂趣，增強(qiáng)對新知識的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生制作完整的響應(yīng)式網(wǎng)站網(wǎng)頁主體：代碼詳見教材第262頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻、期末項(xiàng)目設(shè)計(jì)制作頁面內(nèi)容。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第11-12學(xué)時(shí)，共12學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：制作完整的響應(yīng)式網(wǎng)站網(wǎng)頁主體；制作完整的響應(yīng)式網(wǎng)站網(wǎng)頁頁腳。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑Bootstrap5文本左右浮動(dòng)代碼是什么？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示網(wǎng)頁主體頁面效果。打開教材提供的網(wǎng)頁案例，演示網(wǎng)頁頁腳頁面效果。設(shè)疑：文本溢出處理的CSS代碼是什么？1、思考老師提出的問題，踴躍回答；2、分組討論。1