教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱5.1盒子模型的概念授課班級授課時(shí)間授課類型理實(shí)一體化、新授課授課地點(diǎn)機(jī)房（聯(lián)網(wǎng)，支持超星教學(xué)平臺）授課學(xué)時(shí)40分鐘*2學(xué)時(shí)教材分析本節(jié)選自《Web前端開發(fā)技術(shù)》第五單元第一部分，是CSS布局的核心基礎(chǔ)。盒子模型將頁面元素具象化為“盒子”，承接前文HTML元素排版知識，為后續(xù)盒子屬性設(shè)置、定位及網(wǎng)頁布局奠定理論與實(shí)操基礎(chǔ)，在整個(gè)前端開發(fā)知識體系中起承上啟下的關(guān)鍵作用。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML基礎(chǔ)標(biāo)簽及簡單排版，能創(chuàng)建基礎(chǔ)網(wǎng)頁結(jié)構(gòu)，對CSS有初步認(rèn)知，具備機(jī)房上機(jī)實(shí)操能力。

2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、具象思維突出，但抽象邏輯較弱，對“模型”類抽象概念理解較慢，易混淆盒子各組成部分的作用。

3.潛在問題：對“元素即盒子”的具象化轉(zhuǎn)化存在困難，需通過實(shí)物類比和實(shí)操強(qiáng)化理解。教學(xué)目標(biāo)【知識目標(biāo)】：

1.理解CSS盒子模型的核心概念，明確每個(gè)HTML元素都是一個(gè)“盒子”。

2.掌握盒子模型的四個(gè)組成部分（內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距）及各自定義。

【能力目標(biāo)】：

1.能通過瀏覽器開發(fā)者工具查看元素的盒子模型結(jié)構(gòu)。

2.能獨(dú)立編寫簡單代碼，直觀呈現(xiàn)盒子模型各組成部分。

【素質(zhì)目標(biāo)】：

1.培養(yǎng)嚴(yán)謹(jǐn)?shù)拇a編寫習(xí)慣和問題排查意識。

2.提升抽象概念具象化轉(zhuǎn)化能力和團(tuán)隊(duì)協(xié)作溝通能力。教學(xué)重點(diǎn)1.CSS盒子模型的核心概念及“元素即盒子”的認(rèn)知。

2.盒子模型四個(gè)組成部分（內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距）的定義及區(qū)分。教學(xué)難點(diǎn)1.盒子模型各組成部分的空間關(guān)系及對元素布局的初步影響。

2.瀏覽器開發(fā)者工具查看盒子模型的實(shí)操應(yīng)用。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)（每人一臺，聯(lián)網(wǎng)）、投影儀、黑板。

2.軟件：瀏覽器（Chrome/Firefox）、VSCode、超星教學(xué)平臺（提前上傳課件、案例代碼、實(shí)操任務(wù)單）。

3.素材：盒子模型實(shí)物類比道具（禮盒、包裝紙、填充物）、課件PPT、實(shí)操案例代碼、課堂小任務(wù)單。教學(xué)方法1.主導(dǎo)方法：BOPPPS教學(xué)法（分六環(huán)節(jié)落實(shí)教學(xué)）。

2.輔助方法：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、實(shí)物類比法、小組協(xié)作法。板書設(shè)計(jì)5.1CSS盒子模型（概念）

一、核心：HTML元素=盒子

二、組成（從內(nèi)到外）：

1.內(nèi)容區(qū)（content）：元素實(shí)際內(nèi)容

2.內(nèi)邊距（padding）：內(nèi)容與邊框間距

3.邊框（border）：盒子輪廓

4.外邊距（margin）：盒子間間距二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：導(dǎo)入（Bridge-in）1.情景提問：展示一個(gè)排版雜亂的網(wǎng)頁和一個(gè)布局整齊的網(wǎng)頁，提問“為什么同樣的元素，排版效果差異巨大？”

2.實(shí)物類比：拿出禮盒道具，說明禮盒由“禮物（內(nèi)容）、填充物（內(nèi)邊距）、禮盒外殼（邊框）、禮盒間空隙（外邊距）”組成，引出CSS盒子模型概念，類比HTML元素與禮盒的對應(yīng)關(guān)系。

3.明確本節(jié)課目標(biāo)：掌握盒子模型概念及組成，能通過代碼和工具查看盒子結(jié)構(gòu)。教師：展示網(wǎng)頁案例，演示禮盒類比，提出問題引導(dǎo)思考，明確學(xué)習(xí)目標(biāo)。

學(xué)生：觀察案例，結(jié)合實(shí)物理解類比關(guān)系，帶著問題進(jìn)入學(xué)習(xí)，主動(dòng)回應(yīng)教師提問。設(shè)計(jì)意圖：用實(shí)物類比化解抽象概念，結(jié)合情景提問激發(fā)興趣，銜接前置HTML知識，鋪墊本節(jié)課核心內(nèi)容。

時(shí)間：10分鐘環(huán)節(jié)二：目標(biāo)（Objective）1.知識目標(biāo)：掌握盒子模型概念及四大組成部分的定義、區(qū)分。

2.能力目標(biāo)：會用瀏覽器開發(fā)者工具查看盒子結(jié)構(gòu)，能編寫代碼呈現(xiàn)盒子組成。

3.素養(yǎng)目標(biāo)：培養(yǎng)嚴(yán)謹(jǐn)代碼習(xí)慣和團(tuán)隊(duì)協(xié)作意識，提升抽象概念具象化能力。教師：通過超星教學(xué)平臺展示教學(xué)目標(biāo)，逐條解讀，強(qiáng)調(diào)重點(diǎn)目標(biāo)及達(dá)成要求。

學(xué)生：閱讀目標(biāo)，明確本節(jié)課學(xué)習(xí)重點(diǎn)和需掌握的技能，標(biāo)注疑問點(diǎn)。設(shè)計(jì)意圖：讓學(xué)生清晰學(xué)習(xí)方向，明確重難點(diǎn)，增強(qiáng)學(xué)習(xí)針對性和目的性。

時(shí)間：5分鐘環(huán)節(jié)三：前測（Pre-assessment）1.基礎(chǔ)提問：HTML中常用的塊級元素和行內(nèi)元素有哪些？元素排版的核心需求是什么？

2.實(shí)操小任務(wù)：在VSCode中創(chuàng)建一個(gè)簡單HTML文件，添加一個(gè)div元素，設(shè)置基礎(chǔ)文本內(nèi)容，保存后在瀏覽器中打開。

3.問題反饋：收集學(xué)生實(shí)操中遇到的問題，了解對HTML元素排版的掌握程度。教師：提出提問，巡視學(xué)生實(shí)操情況，收集共性問題并簡要解答，記錄學(xué)生基礎(chǔ)掌握情況。

學(xué)生：回答提問，獨(dú)立完成實(shí)操任務(wù)，反饋遇到的問題（如元素不顯示、瀏覽器打開異常等）。設(shè)計(jì)意圖：檢測前置HTML知識掌握情況，銜接本節(jié)課內(nèi)容，為后續(xù)教學(xué)調(diào)整提供依據(jù)，同時(shí)激活學(xué)生已有知識儲備。

時(shí)間：10分鐘環(huán)節(jié)四：參與式學(xué)習(xí)（ParticipatoryLearning）1.知識點(diǎn)講解：結(jié)合禮盒類比，詳解盒子模型四大組成部分。

（1）內(nèi)容區(qū)（content）：元素實(shí)際內(nèi)容（文本、圖片等），可通過width、height設(shè)置尺寸。

（2）內(nèi)邊距（padding）：內(nèi)容區(qū)與邊框之間的距離，無背景色時(shí)透明，可設(shè)置上下左右四個(gè)方向值。

（3）邊框（border）：盒子的輪廓，可設(shè)置寬度、樣式、顏色，是盒子可見的邊界。

（4）外邊距（margin）：盒子與其他盒子之間的距離，完全透明，用于控制元素間間距。

2.案例演示：編寫代碼，為div元素依次添加content、padding、border、margin，在瀏覽器中實(shí)時(shí)演示效果，對比各部分作用。

3.小組協(xié)作實(shí)操：將學(xué)生分成4人小組，每組分配一個(gè)盒子組成部分，結(jié)合案例代碼，修改參數(shù)（如邊框樣式、內(nèi)邊距大小），觀察效果變化，總結(jié)該部分的特性。

4.開發(fā)者工具應(yīng)用：演示Chrome瀏覽器開發(fā)者工具的使用，指導(dǎo)學(xué)生通過“Elements-Computed”查看盒子模型各部分尺寸。教師：講解知識點(diǎn)，演示案例代碼和開發(fā)者工具使用，分組并分配任務(wù)，巡視指導(dǎo)小組實(shí)操，解答小組疑問，引導(dǎo)小組總結(jié)特性。

學(xué)生：認(rèn)真聽講，觀察演示，小組協(xié)作完成實(shí)操任務(wù)，嘗試修改參數(shù)觀察效果，學(xué)習(xí)使用開發(fā)者工具，總結(jié)對應(yīng)組成部分特性，小組代表發(fā)言分享總結(jié)結(jié)果。設(shè)計(jì)意圖：采用“講解+演示+小組協(xié)作”模式，貼合職校生動(dòng)手能力強(qiáng)的特點(diǎn)，讓學(xué)生在實(shí)操中理解知識點(diǎn)，突破重點(diǎn)；通過開發(fā)者工具應(yīng)用，初步解決難點(diǎn)。

時(shí)間：40分鐘（第一學(xué)時(shí)結(jié)束）環(huán)節(jié)五：后測（Post-assessment）1.理論小測：通過超星教學(xué)平臺發(fā)布5道選擇題（考查盒子模型概念、組成部分定義及區(qū)分），限時(shí)5分鐘完成。

2.實(shí)操任務(wù)（核心）：獨(dú)立完成代碼編寫，要求如下：

（1）創(chuàng)建HTML文件，添加一個(gè)div元素作為盒子，設(shè)置內(nèi)容區(qū)文本為“我的第一個(gè)盒子模型”，寬度200px、高度100px。

（2）設(shè)置邊框：寬度2px、實(shí)線、紅色。

（3）設(shè)置內(nèi)邊距：上下10px、左右15px。

（4）設(shè)置外邊距：上下5px、左右自動(dòng)（實(shí)現(xiàn)水平居中）。

（5）用瀏覽器開發(fā)者工具查看盒子各部分尺寸，截圖保存至超星平臺。

3.成果點(diǎn)評：抽取3-5份學(xué)生作品，展示并點(diǎn)評，糾正共性錯(cuò)誤（如內(nèi)邊距與外邊距混淆、邊框樣式未設(shè)置導(dǎo)致不顯示等）。教師：發(fā)布小測和實(shí)操任務(wù)，巡視指導(dǎo)，抽取作品點(diǎn)評，講解共性問題及解決方案。

學(xué)生：完成理論小測，獨(dú)立編寫代碼完成實(shí)操任務(wù)，使用開發(fā)者工具查看并截圖提交，對照點(diǎn)評內(nèi)容修改自身作品，標(biāo)注錯(cuò)誤點(diǎn)。設(shè)計(jì)意圖：通過理論+實(shí)操雙檢測，鞏固知識點(diǎn)掌握，檢驗(yàn)教學(xué)效果，及時(shí)糾正錯(cuò)誤，強(qiáng)化重點(diǎn)、突破難點(diǎn)。

時(shí)間：20分鐘環(huán)節(jié)六：總結(jié)（Summary）1.知識點(diǎn)梳理：帶領(lǐng)學(xué)生回顧盒子模型核心概念，總結(jié)四大組成部分的定義、作用及空間關(guān)系，結(jié)合板書強(qiáng)化記憶。

2.技能回顧：回顧瀏覽器開發(fā)者工具查看盒子模型的步驟，強(qiáng)調(diào)代碼編寫的注意事項(xiàng)（如單位規(guī)范、屬性書寫格式）。

3.拓展銜接：說明本節(jié)課知識是后續(xù)盒子屬性設(shè)置、定位及網(wǎng)頁布局的基礎(chǔ)，預(yù)告下節(jié)課將學(xué)習(xí)盒子模型相關(guān)屬性的具體設(shè)置方法。教師：梳理知識點(diǎn)和技能點(diǎn)，強(qiáng)調(diào)重點(diǎn)內(nèi)容，銜接下節(jié)課內(nèi)容，解答學(xué)生遺留疑問。

學(xué)生：跟隨教師梳理知識，回顧實(shí)操步驟，記錄重點(diǎn)內(nèi)容，提出遺留疑問并尋求解答。設(shè)計(jì)意圖：系統(tǒng)梳理本節(jié)課內(nèi)容，強(qiáng)化學(xué)生記憶，形成知識體系，為下節(jié)課內(nèi)容做好鋪墊，解決學(xué)生遺留問題。

時(shí)間：5分鐘三、課后作業(yè)和教學(xué)反思課后作業(yè)1.完善課堂實(shí)操任務(wù)代碼，添加2個(gè)額外div元素，分別設(shè)置不同的邊框樣式、內(nèi)邊距和外邊距，實(shí)現(xiàn)三個(gè)盒子的整齊排列，保存文件并提交至超星平臺。

2.使用瀏覽器開發(fā)者工具，查看任意一個(gè)網(wǎng)頁（如百度首頁）的頭部導(dǎo)航欄元素，截圖其盒子模型結(jié)構(gòu)，標(biāo)注各組成部分，附簡要說明（1-2句話）提交。教學(xué)反思1.