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

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

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