HTML5+CSS3網(wǎng)頁設計任務教程（第2版）教案-單元設計 單元6 頁面整體布局

XXXXXX學院單元設計課程課程：內容：單元6頁面整體布局學時：

設計摘要教學 課題單元1HTML5靜態(tài)網(wǎng)站開發(fā)概述課程學時安排16學時年級高職一年級所選教材湯佳陳曉男主編．《HTML5+CSS3網(wǎng)頁設計任務教材（第2版）》．高等教育出版社，2023年12月．一、教學背景創(chuàng)作思路：針對傳統(tǒng)教學無法解決的教學難題進行設計，課程依托信息化教學環(huán)境，整合數(shù)字化教學資源，采用混合式教學模式，采用翻轉課堂的有力手段，采用“有效學習時間”的理念進行項目化考核。以學生為中心，教師做引導，在項目教學的各環(huán)節(jié)充分運用HbuilderX開發(fā)工具、智慧職教MOOC、動畫、在線教學平臺等信息化手段解決教學重點難點問題。設計特色 ：1．教學過程項目化：依據(jù)“工學結合、職業(yè)情境、項目主導”人才培養(yǎng)模式，通過創(chuàng)設情境、針對實際問題精心設計單元引例，教師點評、小組互評，使學生自主探究，“做中學”，“學中做”，降低了學生學習難度，提高學習興趣和課堂參與度；2．教學資源數(shù)字化：豐富的課件、經(jīng)典作品、視頻等資源可供學生在線平臺學習；3．網(wǎng)絡平臺融合化：緊緊圍繞HbuilderX開發(fā)工具，融入智慧職教MOOC、動畫、在線教學平臺等信息化手段進行教學完成教學目標，突破重點、難點；4．學習評價多元化：結合作品展示、小組匯報等多種方式，采用學生自評、師生互評，以及評價平臺等多種手段形成動態(tài)化、多元化的評價體系。二、學習目標與內容1.學習目標 知識目標：掌握常用的頁面制作方法；掌握常用的頁面布局方法（包括彈性布局）；掌握表格的基礎知識，包括標簽常用屬性及其描述；掌握使用表格制作簡歷及百分比網(wǎng)頁的方法；掌握采用rem制作自適應webApp的方法。能力目標：熟練掌握靜態(tài)布局、彈性布局的排版方式；熟練掌握<table>顯示各種樣式的表格數(shù)據(jù)；熟練掌握H5混合開發(fā)App。素質目標：總體目標：培養(yǎng)新時代的“工匠精神”。開發(fā)軟件必須堅持質量優(yōu)先的技術操守；面對重復性工作，不抱怨不放棄；面對困難，以創(chuàng)新思維解決問題攻克難關。思政育人目標：通過學習常用的頁面布局方法，讓學生明白學習沒有捷徑可走，要想“抄近路”是辦不到的，只有勤奮地學習，刻苦地練習和實踐，踏踏實實一步一個腳印地前進，才能掌握真才實學，獲得成功；通過學習表格的基礎知識，讓學生明白“三尺有神明，不畏人知畏己知”，無論你在什么地方做任何事，你頭上三尺地方的神明都會看得清清楚，所以任何人不要以為沒有人在旁邊就做壞事。2.學習主要內容 960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用；clearfix和clear的使用；常用經(jīng)典布局；常用彈性布局；表格基本知識；使用表格制作個人簡歷；使用表格制作QQ郵箱；使用基于lib-flexible庫的rem單位制作自適應網(wǎng)站。3.學習重點及難點教學重點：960網(wǎng)格系統(tǒng)的基本原理；DIV+CSS常用布局；表格的語法、操作及多種顯示數(shù)據(jù)的方法；rem單位的基本原理。教學難點：clearfix和clear的寫法及使用方法；flex彈性布局的實現(xiàn)原理和使用。三、學情分析授課對象是高職一年級的學生，通過一學期的學習，已系統(tǒng)學習了《計算機應用基礎》《程序設計基礎》課程，有一定的編程基礎，但對軟件開發(fā)基本流程的理解、自我規(guī)劃和管理能力、團隊協(xié)作交流能力、自我學習解決問題的能力還有所欠缺，基于“課堂不保證做，課后保證不做”的現(xiàn)狀，需要采用翻轉課堂的有力手段監(jiān)督其課后學習情況，課堂主要用于作業(yè)檢查、解惑答疑、交流討論，從而達到更好的教學效果。四、學習環(huán)境選擇與學習資源設計1.學習環(huán)境（1）教學硬件：多媒體教室；（2）教學軟件：極域電子教室、PhotoShop、HBuilderX、谷歌瀏覽器等。2.學習資源類型（1）課程在線教學平臺（2）新形態(tài)一體化教材（3）職教云課堂3.學習資源內容簡要說明智慧職教平臺《移動web開發(fā)》在線開放課程有多媒體課件、微視頻、試題庫等多種數(shù)字化資源；高等職業(yè)教育新形態(tài)一體化規(guī)劃教材《HTML5+CSS3網(wǎng)頁設計任務教材（第2版）》中二維碼標注微課、課件，實現(xiàn)移動終端隨掃隨學。五、學習情境創(chuàng)設上一章節(jié)我們學習了頁面局部布局，這一章節(jié)我們主要學習頁面整體布局，局部布局是實現(xiàn)某個功能模塊，整體布局是實現(xiàn)頁面排版。頁面整體布局包含網(wǎng)格系統(tǒng)與柵格布局、如何清除頁面浮動、常用的div+css經(jīng)典布局、常用的flex彈性布局、表格基本知識、使用基于lib-flexible庫的rem單位制作自適應網(wǎng)站，以上內容是本單元的主要學習內容。六、教法學法設計1、項目化教學步驟：①創(chuàng)設情景、導入任務②演示錄屏、學生筆記③學生練習、教師巡視④集中講解，學生修改，上傳作業(yè)⑤重復2-4步⑥課堂小結⑦布置作業(yè)。2、教師教法（1）分階段演示法：將一個復雜案例分解成若干個步驟，分階段演示。（2）巡回指導法：逐個檢查學生的練習情況，并進行答疑解惑。（3）錯誤總結法：將檢查巡視過程中發(fā)現(xiàn)的共性錯誤，進行集中講解。（4）定期檢查法：針對期末項目考核，階段性檢查其作業(yè)情況，起到監(jiān)督和輔導的作用。3、學生學法（1）模仿案例法：學期初學生還未入門，學生根據(jù)教師的操作錄屏，模仿案例自主練習。（2）反復練習法：針對常用知識點，需要反復不斷練習，提高熟練程度。（3）綜合項目法：針對復雜案例，先進行分析，分解成若干簡單案例，再進行組合。（4）自由發(fā)揮法：底子薄弱的學生，照著書本敲代碼，練習打字維持課堂秩序即可。4、項目考核：人手一份，定期展示，錄像檢查。

七、教學過程設計（第1-2學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用；clearfix和clear的使用。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑網(wǎng)格系統(tǒng)的基本原理是什么？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容?！兑苿觲eb開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示兩欄頁面效果。打開教材提供的網(wǎng)頁案例，演示不均分三欄頁面效果。打開教材提供的網(wǎng)頁案例，演示均分三欄頁面效果。打開教材提供的網(wǎng)頁案例，演示均分四欄頁面效果。打開教材提供的網(wǎng)頁案例，演示clearfix和clear使用頁面效果。設疑：網(wǎng)格和分欄之間是什么關系？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生搜索“960網(wǎng)格系統(tǒng)”，了解網(wǎng)格系統(tǒng)的原理，并了解“城市管理網(wǎng)格員”的工作職責。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生使用960網(wǎng)格系統(tǒng)分別制作兩欄頁面、三欄頁面和四欄頁面；clearfix和clear的基本使用方法。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。960網(wǎng)格系統(tǒng)的基本原理。960網(wǎng)格系統(tǒng)是使用固定寬度960px置中對齊畫面的方式呈現(xiàn)在網(wǎng)頁上。去除左右兩邊各10px的空間，留下中間940px的區(qū)塊以20px作為間隔分欄。在空間設計上，可隨意合并多欄作為版面配置及網(wǎng)頁尺寸的設定，合并出來的欄寬也不會有畸零數(shù)，有利于CSS中<div>寬度的設定。960網(wǎng)格系統(tǒng)常用規(guī)格有兩種：一個是12欄式的，另一個是16欄式的。如果你的設計里面分3個區(qū)塊你就選擇12欄式的，那是因為12能被3整除；同理假如你的設計分四個區(qū)塊，你可以選12欄式或者16欄式，那是因為12和16都可以被4整除。一般我們都采用12欄式的進行設計。CSS中的清除浮動（clearfix）的基本原理。采用<divclass="clear"></div>方法清除浮動，會多一個沒有意義的<div>，因此并不推薦使用。我們采用clearfix的方法來清除浮動，代碼如下：.clearfix:after{/*在類名為“clearfix”的元素內最后面加入內容*/content:".";/*內容為“.”就是一個英文的句號而已。也可以不寫*/display:block;/*加入的這個元素轉換為塊級元素*/clear:both;/*清除左右兩邊浮動*/visibility:hidden;/*設置為隱藏。它和display:none;是有區(qū)別的。仍然占據(jù)空間，只是看不到而已*/height:0;/*高度為0*/font-size:0;/*字體大小為0*/}整段代碼就相當于在浮動元素后面跟了個寬高為0的空<div>，然后設定它clear:both來達到清除浮動的效果。原理是經(jīng)過使用after偽對象，它將在應用clearfix的元素結尾添加content中的內容，也就是一個"."，并且把他設置為塊級元素（display="block"）；高度設置為0，clear="both"，然后將其內容隱藏掉（visibility="hidden"），這樣就會撐開此塊級元素。之所以用它，是因為，你不必在HTML文件中寫入大量無意義的空標簽，又能清除浮動。1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生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、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計搭建頁面框架。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，不斷提高自身信息素養(yǎng)。

七、教學過程設計（第3-4學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：常用經(jīng)典布局；常用彈性布局。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑彈性布局有什么優(yōu)點？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容?！兑苿觲eb開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示八種經(jīng)典布局效果。打開教材提供的網(wǎng)頁案例，演示百分比布局頁面效果。打開教材提供的網(wǎng)頁案例，演示圣杯布局頁面效果。打開教材提供的網(wǎng)頁案例，演示側邊固定寬度布局頁面效果。設疑：網(wǎng)格布局和彈性布局相比較有哪些優(yōu)缺點？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生搜索“常見的網(wǎng)頁布局”，并了解對應的應用場景，讓學生了解“具體問題具體分析”的原理和方法論。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生采用div+css排版常用三種經(jīng)典布局；使用彈性布局方式實現(xiàn)百分比布局；使用彈性布局方式實現(xiàn)圣杯布局；使用彈性布局方式實現(xiàn)側邊固定寬度布局。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。div+css常用頁面結構命名規(guī)范。頁面結構命名：一個頁面往往會根據(jù)頁面的結構不同樣式也會有所不同，所以頁面結構命名也有一定的規(guī)則可循，大體如下：容器:container、頁頭：header、內容：content、頁面主體：main、頁尾：footer、導航：nav/menu、側欄：sidebar、欄目：column、頁面外圍控制整體布局寬度：wrapper、左右中：leftrightcenter。div+css常用導航命名規(guī)范。導航命名：頁面結構中的導航命名也需要遵循一定的規(guī)則，具體如下：導航：nav、主導航：mainnav、子導航：subnav、頂導航：topnav、邊導航：sidebar、左導航：leftsidebar、右導航：rightsidebar、菜單：menu、子菜單：submenu、標題:title、摘要:summary。div+css常用功能命名規(guī)范。功能命名：結合頁面結構，可以在設置樣式時遵循一定的規(guī)則按照功能命名，具體如下：標志：logo、廣告：banner、登陸：login、登錄條：loginbar、注冊：register、搜索：search、功能區(qū)：shop、標題：title、加入：joinus、狀態(tài)：status、按鈕：btn、滾動：scroll、標簽頁：tab、文章列表：list、提示信息：msg、當前的:current、小技巧：tips、圖標:icon、注釋：note、指南：guild、服務：service、熱點：hot、新聞：news、下載：download、投票：vote、合作伙伴：partner、友情鏈接：link、版權：copyright。Flex彈性布局基本原理。彈性布局，即Flex布局，是CSS3中的一種新的布局模式，可以簡便、完整、響應式地實現(xiàn)各種頁面布局，當頁面需要適應不同的屏幕大小以及設備類型時非常適用。目前，幾乎所有的瀏覽器都支持Flex布局。Flex語法如下：flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;flex-grow：一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。flex-shrink：一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行收縮的量。flex-basis：項目的長度。1、百分比分別設置：flex:0050%;，flex:0033.3%;。2、上下左右四塊都設置：flex:00100px;。3、側邊欄設置：flex:0020%;內容設置flex:1;，頁腳設置flex:0010%;。1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生常用經(jīng)典布局：代碼詳見教材第182頁。常用彈性布局：代碼詳見教材第189頁。1、教師分析；2、巡視督促，答疑解惑，指導引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計搭建頁面框架。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，不斷提高自身信息素養(yǎng)。

七、教學過程設計（第5-6學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：表格基本知識。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑（1）表格在哪些場景下使用？（2）表格由哪些元素組成？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容。《移動web開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示表格基本屬性及使用效果圖。打開教材提供的網(wǎng)頁案例，演示表格基本屬性及使用效果。打開教材提供的網(wǎng)頁案例，演示細邊框表格效果。打開教材提供的網(wǎng)頁案例，演示細邊框表格效果。打開教材提供的網(wǎng)頁案例，演示設置表格寬度、列寬度和行高度頁面效果。打開教材提供的網(wǎng)頁案例，演示隔行變色表格效果。打開教材提供的網(wǎng)頁案例，演示鼠標移上去行變色效果。設疑：表格除了演示的樣式，還具有哪些個性化樣式？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生搜索“表格的作用”，讓學生了解，如何將復雜的信息以簡潔的形式展示出來，使得信息的傳遞更加清晰和明了。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生創(chuàng)建一個有表頭，表體和表腳的表格；創(chuàng)建三個三行三列的表格，第一個要求第一行合并單元格，第二個要求第一列合并單元格，第三個要求第1、2兩行的第1、2兩列合并單元格；使用三種方法完成細邊框表格的制作；使用百分比設置表格的寬度和高度；制作一個11行4列的表格，要求該表格在網(wǎng)頁中居中顯示，表格是細邊框表格，表格整體寬度為960像素。該表格有表頭，并且給第一、二、四列的表頭設置寬度，第一、二列單元格內容居中；制作一個四行三列的表格，要求使用CSS3:nth-child()選擇器設置表格隔行底色不同，達到隔行變色效果；制作一個四行三列的表格，要求使用偽類選擇器:hover實現(xiàn)鼠標移動到某行，某行就改變顏色。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。表格的常用標簽。（1）<table>標簽網(wǎng)頁中的表格使用<table>標簽表示，以<table>標記開始，以</table>標記結束。表格的基本構成最少需要三個元素：<table>、<tr>、<td>，其他的一些作為可選輔助存在。<table> 表示表格<thead> 表示表頭<tbody> 表示表格主體<tfoot> 表示表腳<tr> 表示一行<th> 表示標題行單元格<td> 表示單元格<col> 表示一列<colgroup> 表示一組列<caption> 表示表格標題（2）單元格標簽<td>及屬性<td>表示表格中的單元格，包括如下屬性：colspan：規(guī)定單元格可橫跨的列數(shù)；rowspan：規(guī)定單元格可橫跨的行數(shù)；headers：規(guī)定與單元格相關的表頭，該屬性不會在普通瀏覽器中產生任何視覺變化，但可以被屏幕閱讀器使用。任務中所表示的列內合并單元格、行內合并單元格以及合并兩行兩列需要用到colspan和rowspan屬性。1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生表格基本知識：代碼詳見教材第194頁。1、教師分析；2、巡視督促，答疑解惑，指導引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計搭建頁面框架。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，不斷提高自身信息素養(yǎng)。

七、教學過程設計（第7-8學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：使用表格制作個人簡歷。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑個人簡歷一般需要放哪些內容？哪些信息是企業(yè)感興趣的？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容?！兑苿觲eb開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示個人簡歷頁面效果。設疑：制作個人簡歷分幾個步驟？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生復雜的事情簡單化，簡單的事情流程化，流程化的事情標準化，標準化的事情制度化。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生要求使用表格以及相關元素制作一個個人簡歷，其中個人簡歷整體上使用表單呈現(xiàn)，主要內容放置在表格中，具體單元格的內容根據(jù)要求需要使用到單選按鈕、復選框、無序列表、有序列表以及超鏈接等元素。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。細邊框表格的三種做法。（1）背景設置式：通過將表格背景色設置為黑色，將單元格背景設置為白色，并且將單元格之間的距離cell_spaceing設置為大于0的數(shù)，從而讓邊框顯示為黑色，cell_spaceing值越大，表格框線越粗。（2）邊框設置式：通過直接設置表格的邊框來實現(xiàn)細邊框表格，為了方便查看，通過不同顏色的線條來顯示邊框線，tableborder是表格外一圈邊框，tdborder是單元格邊框thborder是表頭邊框。即在設置邊框時如果表格外邊框只設置上、右邊框，單元格只設置下、左邊框，保證邊框不重復設置即可。（3）層疊式：為表格<td>、<th>標簽設置了邊框線后，因內邊框的線條重復設置，導致內邊框線條較粗，影響美觀，所以在表格CSS樣式中需要設置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用來設置單元格中文本內容和邊框之間的距離，類似于內邊距。cellspacing:cell是單元格的意思，從字面意思是設置單元格之間或者單元格與外圍邊框的距離。此屬性類似于margin外邊距。colspan和rowspan的相關知識。row行，column列，span跨度colspan=列跨度，代表合并列rowspan=行跨度，代表合并行border-collapse屬性的相關知識。border-collapse屬性設置表格的邊框是否被合并為一個單一的邊框。separate默認值。邊框會被分開。不會忽略border-spacing和empty-cells屬性。collapse如果可能，邊框會合并為一個單一的邊框。會忽略border-spacing和empty-cells屬性。當border-collapse設置為collapse時，表格自身的border與cellspacing屬性便沒有作用了。1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生使用表格制作個人簡歷：代碼詳見教材第206頁。1、教師分析；2、巡視督促，答疑解惑，指導引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計搭建頁面框架。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，不斷提高自身信息素養(yǎng)。

七、教學過程設計（第9-10學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：使用表格制作QQ郵箱。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑QQ郵箱可以采用DIV+CSS進行制作嗎？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容?！兑苿觲eb開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示QQ郵箱效果。設疑：QQ郵箱界面在瀏覽器大小變化的過程中，具有哪些特性？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生登錄自己的郵箱，作為課程案例進行臨摹，提升自己的應變能力。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生使用表格制作QQ郵箱。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。表格的寬度和高度的百分比設置。瀏覽器本身是有寬度和高度的，設置HTML的width:100%;和height:100%;，就可以獲取瀏覽器的寬度和高度。后面<body>和<table>的寬度和高度也就有了依賴，即，表格的寬高百分比設置就可以與瀏覽器的寬度高度保持一定的比例關系。html,body{width:100%;height:100%}。1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生使用表格制作QQ郵箱：代碼詳見教材第212頁。1、教師分析；2、巡視督促，答疑解惑，指導引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計制作頁面內容。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，不斷提高自身信息素養(yǎng)。

七、教學過程設計（第11-12學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：制作自適應網(wǎng)站頭部和banner；制作自適應網(wǎng)站底部導航；制作自適應網(wǎng)站主頁面菜單。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑網(wǎng)頁制作中常用的長度單位有哪些？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容。《移動web開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站首頁效果。打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站“作者”網(wǎng)頁效果。打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站“商城”網(wǎng)頁效果圖。打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站“我的”網(wǎng)頁效果圖。設疑：一般的app具有哪些常用的欄目？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生搜索“庖丁解?！绷私獾涔剩寣W生了解，人只要掌握了客觀規(guī)律，靈活運用，就能從必然中解放出來，獲得真正的自由。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生制作自適應網(wǎng)站頭部和banner；制作自適應網(wǎng)站底部導航；制作自適應網(wǎng)站主頁面菜單。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。rem單位基本知識。（1）rem是CSS3新增的一個相對單位（rootem，根em）。使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前所有的瀏覽器（ie8及以下版本除外）都支持rem。（2）em的計算方法：需轉換的px值/自適應對象寬度px值*10。（3）通常在寫移動端頁面的時候，我們都會設置viewport，保證頁面縮放沒有問題，最常見的viewport的meta標簽如下：<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>（4）文本字號不建議使用rem。<meta>標簽屬性的相關知識。<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">width=device-width寬度等于當前設備的寬度initial-scale=1.0初始縮放比例，默認為1（倍）minimum-scale=1.0/maximum-scale=1.0最小/大縮放比例1（倍）user-scalable=no是否允許用戶縮放頁面（yes/no）1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生制作自適應網(wǎng)站頭部和banner：代碼詳見教材第224頁。制作自適應網(wǎng)站底部導航：代碼詳見教材第224頁。制作自適應網(wǎng)站主頁面菜單：代碼詳見教材第224頁。1、教師分析；2、巡視督促，答疑解惑，指導引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計制作頁面內容。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，不斷提高自身信息素養(yǎng)。

七、教學過程設計（第13-14學時，共16學時）步驟1：課前準備教學內容師生活動教學方法教學手段教師學生通過在線學習平臺發(fā)布課程學習內容：制作自適應網(wǎng)站index.html頁面；制作自適應網(wǎng)站author.html頁面。1、通過智慧職教云平臺發(fā)布通知及布置課前任務，告知學生即將學習的課程內容，并在平臺發(fā)布與課程內容相關的授課錄像、課件等資源，讓學生提前預習。2、問題設疑成熟的app數(shù)據(jù)在加載時候，出現(xiàn)什么效果（瀑布流）？查看在線學習平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應知識點的二維碼觀看微課程視頻預習相關課程內容。通過信息化手段和技術發(fā)布告知學生學習內容?！兑苿觲eb開發(fā)》課程在線教學平臺新形態(tài)一體化教材職教云課堂設計意圖教師通過信息化手段向學生提前發(fā)布即將學習的課程內容，意在讓學生養(yǎng)成良好地運用信息技術手段進行知識獲取及自主探究的習慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學做好準備。步驟2：引例描述時間：5分鐘教學內容師生活動教學方法教學手段教師學生打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站首頁效果。打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站“作者”網(wǎng)頁效果。打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站“商城”網(wǎng)頁效果圖。打開教材提供的網(wǎng)頁案例，演示自適應網(wǎng)站“我的”網(wǎng)頁效果圖。設疑：“作者”網(wǎng)頁有哪些地方需要改進？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風暴；3、分組討論。1、多媒體2、課件設計意圖通過演示，引發(fā)學生思考，激發(fā)了學生的興趣，學生一下子就投入到課堂中，這激發(fā)了學生強烈的學習愿望和高漲的學習熱情。為接下來讓學生積極主動地參與到學習活動中來做好了情感上的準備。步驟3：思政小課堂時間：5分鐘教學內容師生活動教學方法教學手段教師學生訪問當當網(wǎng)，下載書籍封面及簡介，作為案例制作文字和圖片素材，同時可以了解當前較熱的書籍有哪些。1、引導學生通過網(wǎng)絡獲取并總結答案，設問并提出思考，組織學生進行討論和分享；2、通過課件進行歸納小結。1、思政小課堂討論、分享；2、對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、分析歸納。1、視頻2、課件設計意圖將思政內容融入到課程學習中，以“知識傳授與價值引領相結合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調同步、相得益彰，真正實現(xiàn)在課堂教學主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學內容師生活動教學方法教學手段教師學生制作自適應網(wǎng)站index.html頁面；制作自適應網(wǎng)站author.html頁面。1、引導學生借助在線課程平臺獲取知識進行自主探究；2、案例講解；3、通過課件進行歸納小結。1、學生登錄網(wǎng)絡課程平臺獲取知識進行自主探究；2、認真觀察教師講解演示，對于教師的歸納，仔細聽講、思考、記錄筆記。1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件設計意圖通過引例引入本節(jié)課所需要學習的知識點，為了讓學生能夠直觀感性地理解知識點，由教師首先進行講解演示，結合知識點講解案例，為接下來的學生實踐訓練提前做好鋪墊。步驟5：實踐訓練時間：10分鐘教學內容師生活動教學方法教學手段教師學生提出以下問題，學生自行百度獲取答案。如何將頂部菜單欄、底部工具欄固定在某個位置？采用position:fixed;屬性固定頂部和底部菜單。1、布置任務；2、巡視督促，答疑解惑，指導實踐。1、通過平臺提供的教程學習；2、小組分工協(xié)作。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖為了鞏固本次課所授知識，提高學生利用所學知識進行實踐訓練的能力，讓學生自主地完成實戰(zhàn)任務。所以，老師應盡量少指導，而是引導學生學會利用各種不同的信息化手段尋求幫助，使學生得到更多的啟發(fā)，與此同時，讓學生在自主探究中體驗成功的樂趣，增強對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學內容師生活動教學方法教學手段教師學生制作自適應網(wǎng)站index.html頁面：代碼詳見教材第228頁。制作自適應網(wǎng)站author.html頁面：代碼詳見教材第228頁1、教師分析；2、巡視督促，答疑解惑，指導引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學平臺2、職教云課堂設計意圖通過分析與實現(xiàn)單元引例，進一步深化鞏固本次課所授知識，引導學生進行分組討論，讓學生在自主探究中體驗成功的樂趣，增強對知識的內化。步驟7：評價總結時間：10分鐘教學內容師生活動教學方法教學手段教師學生在線測驗課堂總結1、組織交流；2、教師點評；3、課堂總結。1、分享交流；2、相互評價。1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、極域電子教室2、職教云課堂設計意圖教師應充分發(fā)揮教學評價在教學中的導向作用，重視自評與互評，使評價成為學生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價優(yōu)化，評價時要指導方法、提出依據(jù)，這樣才能有效地達到評價的效果。步驟8：課后鞏固教學內容師生活動教學方法教學手段教師學生課后作業(yè)：在線學習視頻、期末項目設計制作頁面內容。1、布置作業(yè)；2、學生作業(yè)提交后及時批改并給出指導建議。1、自主完成課后任務；2、課后任務完成后，按時提交至在線課程平臺。1、教師講解；2、學生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學平臺設計意圖讓學生利用課后時間進一步地吸收消化課堂內容，在鞏固知識的同時，