教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱CSS表格與列表屬性應(yīng)用授課班級(jí)授課時(shí)間授課類型理實(shí)一體化課、技能提升課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)），依托超星教學(xué)平臺(tái)網(wǎng)絡(luò)課程教學(xué)方法主導(dǎo)：項(xiàng)目引領(lǐng)任務(wù)驅(qū)動(dòng)教學(xué)法；輔助：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、小組協(xié)作法教材分析本節(jié)選自教材第四單元4.8節(jié)，是CSS基礎(chǔ)應(yīng)用的重要模塊。涵蓋表格邊框合并、行樣式設(shè)置及列表符號(hào)、圖標(biāo)自定義等核心內(nèi)容，承接前文選擇器、屬性等知識(shí)，是網(wǎng)頁(yè)布局與美化的常用技能，教材案例融入工匠精神素材，兼具實(shí)用性與素養(yǎng)培育價(jià)值。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML表格、列表標(biāo)簽搭建，熟悉CSS選擇器、基礎(chǔ)屬性及優(yōu)先級(jí)，能獨(dú)立編寫簡(jiǎn)單樣式代碼，具備VSCode實(shí)操能力。

2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、具象思維突出，對(duì)實(shí)操任務(wù)興趣濃厚，抽象理解能力較弱，對(duì)屬性組合應(yīng)用易混淆。

3.銜接需求：需通過(guò)具象案例與分步實(shí)操，掌握表格列表美化技巧，為后續(xù)復(fù)雜網(wǎng)頁(yè)布局奠定基礎(chǔ)，強(qiáng)化代碼復(fù)用與優(yōu)化思維。教學(xué)目標(biāo)【知識(shí)目標(biāo)】：

1.掌握CSS表格核心屬性（border-collapse、border-spacing等）及列表屬性（list-style系列）的用法。

2.理解表格斑馬線效果、列表圖標(biāo)自定義的實(shí)現(xiàn)邏輯。

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

1.能獨(dú)立用CSS美化表格，實(shí)現(xiàn)邊框合并、行樣式切換等效果。

2.能自定義列表符號(hào)與圖標(biāo)，完成符合場(chǎng)景的列表美化，排查樣式?jīng)_突問(wèn)題。

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

1.培養(yǎng)精益求精的工匠精神，注重網(wǎng)頁(yè)細(xì)節(jié)美化與用戶體驗(yàn)。

2.提升小組協(xié)作與問(wèn)題解決能力，養(yǎng)成規(guī)范編碼與實(shí)時(shí)預(yù)覽習(xí)慣。教學(xué)重點(diǎn)1.CSS表格border-collapse屬性應(yīng)用及斑馬線表格效果實(shí)現(xiàn)。

2.CSS列表list-style系列屬性使用及列表圖標(biāo)自定義方法。教學(xué)難點(diǎn)1.表格行偽類選擇器（:nth-child）與屬性組合實(shí)現(xiàn)動(dòng)態(tài)樣式。

2.列表圖標(biāo)定位調(diào)整及與文本對(duì)齊的適配技巧。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)、投影儀、網(wǎng)絡(luò)環(huán)境。

2.軟件：VSCode、超星教學(xué)平臺(tái)（上傳案例源碼、實(shí)操模板、素材圖片）。

3.素材：表格列表HTML模板、列表圖標(biāo)素材、成品效果參考圖、易錯(cuò)點(diǎn)清單。板書設(shè)計(jì)核心：1.表格：border-collapse（合并邊框）、:nth-child（斑馬線）；2.列表：list-style（符號(hào)/圖標(biāo)）、自定義圖標(biāo)定位；3.技巧：偽類+屬性組合，細(xì)節(jié)適配。二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：情境導(dǎo)入，任務(wù)發(fā)布（亮點(diǎn)：素養(yǎng)滲透+任務(wù)具象）1.情境展示：呈現(xiàn)兩組對(duì)比效果，左側(cè)為默認(rèn)HTML表格列表（單調(diào)雜亂），右側(cè)為美化后表格（斑馬線、合并邊框）與列表（自定義圖標(biāo)），結(jié)合工匠精神素材說(shuō)明細(xì)節(jié)美化的重要性。

2.課題解讀：明確本節(jié)課核心是掌握CSS表格與列表美化技巧，實(shí)現(xiàn)網(wǎng)頁(yè)元素規(guī)整美觀，提升用戶體驗(yàn)。

3.任務(wù)發(fā)布：設(shè)定核心任務(wù)“制作工匠精神主題美化頁(yè)面”，拆解為2個(gè)子任務(wù)：

（1）美化技能清單表格（合并邊框、斑馬線效果、hover樣式）；

（2）自定義工匠精神要點(diǎn)列表（替換圖標(biāo)、調(diào)整對(duì)齊方式）。教師：展示對(duì)比案例，滲透工匠精神，解讀任務(wù)目標(biāo)與評(píng)價(jià)標(biāo)準(zhǔn)；引導(dǎo)學(xué)生回顧HTML表格列表搭建方法，提問(wèn)“默認(rèn)樣式存在哪些問(wèn)題”，激發(fā)探究欲；發(fā)放超星平臺(tái)實(shí)操素材。

學(xué)生：觀察案例差異，明確學(xué)習(xí)目標(biāo)；下載素材，打開HTML模板，檢查頁(yè)面結(jié)構(gòu)，做好實(shí)操準(zhǔn)備。設(shè)計(jì)意圖：以視覺(jué)對(duì)比激發(fā)興趣，融入素養(yǎng)培育，具象化任務(wù)目標(biāo)，銜接前置知識(shí)。時(shí)間：10分鐘。環(huán)節(jié)二：理論精講，案例演示（亮點(diǎn)：案例拆解+難點(diǎn)預(yù)判）1.表格屬性精講：

（1）核心屬性：border-collapse（separate默認(rèn)/collapse合并邊框）、border-spacing（邊框間距，僅separate生效）、caption-side（標(biāo)題位置），結(jié)合教材范例演示代碼效果。

（2）動(dòng)態(tài)行樣式：講解:nth-child(even/odd)偽類選擇器，演示斑馬線表格實(shí)現(xiàn)代碼（tr:nth-child(even){background:#f2f2f2;}）；補(bǔ)充tr:hover動(dòng)態(tài)樣式，實(shí)現(xiàn)鼠標(biāo)懸浮變色。

2.列表屬性精講：

（1）基礎(chǔ)屬性：list-style-type（符號(hào)類型）、list-style-image（圖標(biāo)替換）、list-style-position（符號(hào)位置），演示各屬性效果差異。

（2）自定義圖標(biāo)技巧：當(dāng)list-style-image對(duì)齊不佳時(shí)，用list-style:none清除默認(rèn)符號(hào)，結(jié)合padding與background-image實(shí)現(xiàn)精準(zhǔn)定位，破解對(duì)齊難點(diǎn)。

3.易錯(cuò)點(diǎn)提醒：表格邊框需同時(shí)設(shè)置table與th/td；列表圖標(biāo)路徑需正確，定位時(shí)注意padding適配。教師：通過(guò)VSCode實(shí)時(shí)演示代碼，逐行講解屬性作用，對(duì)比不同屬性值效果；針對(duì)難點(diǎn)，拆解偽類選擇器邏輯，演示圖標(biāo)定位調(diào)試過(guò)程；在超星平臺(tái)發(fā)布知識(shí)點(diǎn)筆記。

學(xué)生：跟隨演示記錄核心代碼與易錯(cuò)點(diǎn)，仿寫代碼驗(yàn)證效果；主動(dòng)提問(wèn)疑問(wèn)，明確屬性組合應(yīng)用邏輯，整理筆記要點(diǎn)。設(shè)計(jì)意圖：結(jié)合教材案例拆解理論，預(yù)判易錯(cuò)點(diǎn)，可視化演示突破難點(diǎn)，為實(shí)操奠定理論基礎(chǔ)。時(shí)間：20分鐘。環(huán)節(jié)三：分組實(shí)操，任務(wù)攻堅(jiān)（亮點(diǎn)：分層實(shí)操+協(xié)作互助）1.基礎(chǔ)任務(wù)（必做，20分鐘，獨(dú)立完成）：

（1）表格美化：基于模板HTML表格，設(shè)置合并邊框、表格寬度100%，表頭背景色#c9d3cb，實(shí)現(xiàn)斑馬線效果，添加行hover變色。

（2）列表美化：將無(wú)序列表默認(rèn)符號(hào)替換為星星圖標(biāo)，設(shè)置list-style-position:inside，行高25px，文本縮進(jìn)1em。

2.提升任務(wù)（選做，10分鐘，小組協(xié)作）：

（1）表格優(yōu)化：為表格添加caption，設(shè)置在表格下方，調(diào)整字體樣式；

（2）列表進(jìn)階：用background-image自定義列表圖標(biāo)，精準(zhǔn)調(diào)整位置，實(shí)現(xiàn)圖標(biāo)與文本居中對(duì)齊；

（3）風(fēng)格統(tǒng)一：確保表格與列表樣式適配，貼合工匠精神主題頁(yè)面風(fēng)格。

3.實(shí)操步驟：打開素材模板→編寫CSS樣式→實(shí)時(shí)預(yù)覽調(diào)試→排查語(yǔ)法錯(cuò)誤→優(yōu)化細(xì)節(jié)效果。教師：巡視指導(dǎo)，重點(diǎn)幫扶表格偽類應(yīng)用、列表圖標(biāo)對(duì)齊等難點(diǎn)問(wèn)題；針對(duì)共性錯(cuò)誤（如邊框未合并、路徑錯(cuò)誤），在超星平臺(tái)發(fā)布提示；組織小組互助，鼓勵(lì)能力強(qiáng)的學(xué)生協(xié)助同伴調(diào)試。

學(xué)生：按步驟完成實(shí)操任務(wù)，獨(dú)立編寫代碼并實(shí)時(shí)預(yù)覽；遇到問(wèn)題先自主排查，再小組討論，必要時(shí)求助教師；記錄實(shí)操心得與調(diào)試技巧。設(shè)計(jì)意圖：分層任務(wù)適配學(xué)生差異，強(qiáng)化實(shí)操落地，通過(guò)小組協(xié)作提升問(wèn)題解決能力，貼合職校生動(dòng)手能力強(qiáng)的特點(diǎn)。時(shí)間：30分鐘。環(huán)節(jié)四：成果展示，點(diǎn)評(píng)優(yōu)化（亮點(diǎn)：精準(zhǔn)點(diǎn)評(píng)+技巧沉淀）1.成果展示：隨機(jī)抽取3-4份學(xué)生作品（含基礎(chǔ)版與進(jìn)階版），通過(guò)投影儀展示，由學(xué)生簡(jiǎn)述實(shí)現(xiàn)思路與遇到的問(wèn)題。

2.點(diǎn)評(píng)優(yōu)化：

（1）亮點(diǎn)肯定：針對(duì)規(guī)范編碼、樣式美觀、難點(diǎn)突破（如圖標(biāo)精準(zhǔn)對(duì)齊）的作品，予以表?yè)P(yáng)，提煉可復(fù)用技巧。

（2）問(wèn)題修正：針對(duì)共性問(wèn)題（如斑馬線效果失效、圖標(biāo)偏移），現(xiàn)場(chǎng)調(diào)試代碼，演示修正方法；強(qiáng)調(diào)偽類選擇器用法與路徑規(guī)范。

3.技巧沉淀：引導(dǎo)學(xué)生總結(jié)表格列表美化核心技巧，梳理“屬性選擇-代碼編寫-預(yù)覽調(diào)試”流程，補(bǔ)充超星平臺(tái)答疑專區(qū)內(nèi)容。教師：組織作品展示與分享，精準(zhǔn)點(diǎn)評(píng)優(yōu)缺點(diǎn)，現(xiàn)場(chǎng)演示問(wèn)題修正過(guò)程；引導(dǎo)學(xué)生梳理核心技巧，強(qiáng)化知識(shí)記憶；收集學(xué)生典型問(wèn)題，納入答疑素材。

學(xué)生：展示個(gè)人/小組作品，分享實(shí)操經(jīng)驗(yàn)；傾聽點(diǎn)評(píng)，記錄問(wèn)題與修正方法；梳理技巧要點(diǎn)，完善個(gè)人筆記。設(shè)計(jì)意圖：通過(guò)展示點(diǎn)評(píng)強(qiáng)化知識(shí)應(yīng)用，沉淀實(shí)操技巧，激發(fā)學(xué)生成就感，同時(shí)解決共性問(wèn)題，鞏固學(xué)習(xí)效果。時(shí)間：10分鐘。環(huán)節(jié)五：知識(shí)梳理，總結(jié)升華（亮點(diǎn)：體系構(gòu)建+素養(yǎng)強(qiáng)化）1.知識(shí)梳理：引導(dǎo)學(xué)生共同回顧核心知識(shí)點(diǎn)，構(gòu)建“表格屬性（合并/動(dòng)態(tài)樣式）-列表屬性（符號(hào)/圖標(biāo)）-實(shí)操技巧-易錯(cuò)點(diǎn)規(guī)避”知識(shí)框架，關(guān)聯(lián)前文選擇器、屬性知識(shí)，形成知識(shí)閉環(huán)。

2.素養(yǎng)升華：結(jié)合工匠精神主題，強(qiáng)調(diào)網(wǎng)頁(yè)美化需注重細(xì)節(jié)、精益求精，培養(yǎng)嚴(yán)謹(jǐn)?shù)木幋a態(tài)度與良好的用戶體驗(yàn)意識(shí)。

3.后續(xù)鋪墊：預(yù)告后續(xù)學(xué)習(xí)內(nèi)容，鼓勵(lì)學(xué)生課后結(jié)合本節(jié)課知識(shí)，優(yōu)化之前制作的網(wǎng)頁(yè)，強(qiáng)化技能復(fù)用。教師：通過(guò)提問(wèn)引導(dǎo)學(xué)生梳理知識(shí)，板書核心框架；結(jié)合案例強(qiáng)化工匠精神培育；布置課后作業(yè)，明確要求與提交路徑。

學(xué)生：跟隨引導(dǎo)回顧知識(shí)點(diǎn)，完善知識(shí)框架；理解工匠精神與專業(yè)技能的關(guān)聯(lián)；記錄課后作業(yè)要求，明確復(fù)習(xí)方向。設(shè)計(jì)意圖：構(gòu)建知識(shí)體系，強(qiáng)化素養(yǎng)培育，銜接前后課程，為課后復(fù)習(xí)與技能提升奠定基礎(chǔ)。時(shí)間：10分鐘。三、課后作業(yè)和教學(xué)反思課后作業(yè)1.基礎(chǔ)作業(yè)：優(yōu)化課堂實(shí)操作品，完善表格列表美化效果，確保樣式規(guī)范、細(xì)節(jié)達(dá)標(biāo)，提交至超