工學(xué)一體化課程教學(xué)課頁NO5課程學(xué)習(xí)任務(wù)項目五：利用盒子模型布局網(wǎng)頁使用學(xué)材任課教師班級所屬專業(yè)實施地點實施日期總課時周課時學(xué)材處理采用一體化教學(xué)模式，以學(xué)生為主體，圍繞課程標(biāo)準(zhǔn)、以典型工作任務(wù)展開，知識點夠用、適用為原則，并配合相關(guān)教輔學(xué)習(xí)資料，同時根據(jù)學(xué)生特點自行設(shè)計的課后補充任務(wù)進(jìn)行強化實踐用。在輔助知識和技能點學(xué)習(xí)時加入一些思政元素（安全、心理健康教育等內(nèi)容在網(wǎng)頁內(nèi)容中）。任務(wù)分析明確任務(wù)要求，查閱相關(guān)教輔學(xué)習(xí)資料，學(xué)習(xí)并掌握盒子相關(guān)知識和技能點，確定任務(wù)完成流程及技術(shù)規(guī)范；在規(guī)定時間內(nèi)完成網(wǎng)頁框架搭建，利用盒子模型進(jìn)行CSS網(wǎng)頁布局，盒子模型和元素的浮動與定位等；完成后進(jìn)行相關(guān)調(diào)試檢查，完成“西式甜品網(wǎng)”首頁面的制作。盒子模型是CSS網(wǎng)頁布局的基礎(chǔ)，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個元素所呈現(xiàn)的效果。教學(xué)目標(biāo)（包含知識與技能、過程與方法、情感態(tài)度與價值觀等三個目標(biāo)）知識與技能：1.掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果。2.掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。3.熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符號。過程與方法：1.通過自主探究、小組討論、與老師溝通等制作網(wǎng)頁相關(guān)模塊，培養(yǎng)學(xué)生協(xié)作解決問題的能力和主動性以及與人交流合作的能力；2.通過教師對作品的點評與反饋，理解CSS定義要點，培養(yǎng)學(xué)生總結(jié)歸納能力。情感態(tài)度與價值觀：1.學(xué)習(xí)資料中融入思政內(nèi)容，注重加強對學(xué)生的世界觀、人生觀和價值觀的教育。2.在制作網(wǎng)頁的過程中，培養(yǎng)學(xué)生探索、創(chuàng)新、實踐、協(xié)作的職業(yè)素養(yǎng)。3.通過學(xué)習(xí)編寫代碼，培養(yǎng)學(xué)生的信息素養(yǎng)和邏輯思維能力。4.通過整個項目的完成，讓學(xué)生感受HTML5與CSS3的神奇魅力，培養(yǎng)學(xué)生積極的學(xué)習(xí)態(tài)度。教學(xué)重點教學(xué)難點重點及突出策略：教學(xué)重點：認(rèn)識盒子模型、<div>標(biāo)記、盒子模型相關(guān)屬性、背景屬性、CSS3漸變屬性。措施：通過教師引導(dǎo)、學(xué)生上機操作加強學(xué)習(xí)和補充案例進(jìn)行鞏固。難點及解決方法：教學(xué)難點：盒子模型相關(guān)屬性、背景屬性、CSS3漸變屬性。措施：通過教師臺上演示與講解、學(xué)生上機操作加強學(xué)習(xí)和補充案例進(jìn)行鞏固。教學(xué)方法項目教學(xué)，小組討論，一體化教學(xué)教學(xué)條件準(zhǔn)備計算機、Dreamweaver網(wǎng)頁制作軟件或VSCode軟件、教學(xué)PPT教學(xué)組織（簡述并備注每一流程所需課時）一、明確任務(wù)教師給定任務(wù)，引導(dǎo)學(xué)生思考，明確任務(wù)要求（0.5課時）二、制定工作計劃（4課時）分析任務(wù)后確定以下工作計劃教師引導(dǎo)學(xué)習(xí)，學(xué)生所需知識點學(xué)習(xí)；按任務(wù)要求，制定工作計劃三、計劃實施（6課時）能正確使用所需的知識：盒子模型相關(guān)屬性、元素浮動與定位等，并按各模塊效果圖進(jìn)行代碼編寫，并實現(xiàn)效果。四、檢查驗收（0.5課時）檢查任務(wù)完成情況，正確填寫檢查報告五、總結(jié)反思與評價（1課時）以小組為單位，用演示文稿向全班展示、匯報制作成果；教師針對各組任務(wù)工作過程及匯報情況分別作評價；工作過程回顧及總結(jié)。教學(xué)反思教學(xué)實施（次頁）教學(xué)環(huán)節(jié)教學(xué)內(nèi)容學(xué)生活動教師活動評價點資源用時一明確工作任務(wù)工作任務(wù)的閱讀與分析；明確工時、工作內(nèi)容和人員分組；1、接收任務(wù)并進(jìn)行閱讀分析；2、根據(jù)任務(wù)要求進(jìn)行人員分工；3、與小組成員討論網(wǎng)頁中所需效果等要求；1、發(fā)放任務(wù)并說明要求；2、指導(dǎo)各小組進(jìn)行任務(wù)分工；3、察看、記錄學(xué)生小組討論情況及所存問題；4、引導(dǎo)學(xué)生討論所存實際問題（分工明確性）5.檢查學(xué)生填寫工作頁的正確性1、是否明確任務(wù)、工時；2、小組任務(wù)分工是否合理；3、對任務(wù)理解、表達(dá)是否到位；4、工作頁完成是否到位；5、小組積極性。工作任務(wù)0.5課時二制定工作計劃盒子模型相關(guān)屬性、元素浮動與定位的應(yīng)用方法設(shè)置頁面CSS樣式的方法、步驟及注意事項選擇合適的CSS選擇器及CSS樣式屬性工作計劃的制定查閱教輔學(xué)習(xí)盒子模型相關(guān)屬性、元素浮動與定位的應(yīng)用案例分析效果圖，劃分模塊結(jié)構(gòu)學(xué)習(xí)跟效果圖各模塊有關(guān)設(shè)計制作方法討論編寫代碼步驟制定設(shè)計計劃1．巡查、記錄學(xué)生查閱教輔自主學(xué)習(xí)情況，并給以必要的引導(dǎo)；2.組織學(xué)生討論，解決遇到的問題、確定編寫代碼的步驟3.指導(dǎo)學(xué)生制定工作計劃1.描述盒子模型相關(guān)屬性、元素浮動與定位的應(yīng)用方法是否準(zhǔn)確2.能否準(zhǔn)確描述圖文混排的關(guān)鍵技術(shù)點3.選用標(biāo)記是否合理4.回答問題是否準(zhǔn)確。5.語言表達(dá)是否規(guī)范。工作頁、計劃表、實施進(jìn)度表、教輔4課時教學(xué)環(huán)節(jié)教學(xué)內(nèi)容學(xué)生活動教師活動評價點資源課時三實施工作計劃HTML結(jié)構(gòu)分析根據(jù)效果圖進(jìn)行結(jié)構(gòu)分析樣式分析根據(jù)效果圖進(jìn)行CSS樣式分析搭建結(jié)構(gòu)編寫HTML結(jié)構(gòu)代碼定義樣式利用CSS選擇器，結(jié)合盒子模型相關(guān)屬性定義不同模塊樣式5.調(diào)試網(wǎng)頁效果根據(jù)學(xué)習(xí)到的HTML5用法搭建各模塊框架根據(jù)所學(xué)CSS知識設(shè)置相應(yīng)模塊樣式效果遇到問題時小組成員互相討論網(wǎng)頁整體調(diào)試運行巡查、記錄學(xué)生在編寫代碼過程中遇到的問題及是否運用到位；與學(xué)生交流，討論解決實施中遇到的小組無法解決的問題；檢查學(xué)生編寫制作的各模塊是否符合效果圖標(biāo)準(zhǔn)，并給予適當(dāng)引導(dǎo)與提示。各模塊框架是否合理；HTML5標(biāo)記應(yīng)用、CSS樣式設(shè)置是否規(guī)范；調(diào)試解決問題的能力；小組協(xié)作解決問題的積極性。工作頁、教輔、圖片素材6課時四檢查驗收根據(jù)效果圖檢查網(wǎng)頁的完成效果是否存在不合理HTML5標(biāo)記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比，查找問題小組組長互查各小組制作情況，填寫驗收報告巡查、記錄1．驗收單的填寫是否正確2．驗收內(nèi)容是否全面3.存在的問題工作頁（含驗收報告）0.5課時教學(xué)環(huán)節(jié)教學(xué)內(nèi)容學(xué)生活動教師活動評價點資源課時五總結(jié)反思與評價個人、小組評價教師評價工作過程回顧及總結(jié)評價與分析以小組為單位，用演示文稿向全班展示、匯報制作成果。在展示的過程中，以小組為單位進(jìn)行評價規(guī)范撰寫總結(jié)。1）工作的步驟、方法，2）遇到的問題，處理的辦法3）收獲及獲得的途徑。3.完成自我評價、小組評價，填寫學(xué)習(xí)任務(wù)綜合評價表