第4单元 CSS表格与列表属性应用（教案5：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称CSS表格与列表属性应用授课班级授课时间授课类型理实一体化课、技能提升课授课地点机房（有网络），依托超星教学平台网络课程教学方法主导：项目引领任务驱动教学法；辅助：理实一体化教学法、案例演示法、讲练结合法、小组协作法教材分析本节选自教材第四单元4.8节，是CSS基础应用的重要模块。涵盖表格边框合并、行样式设置及列表符号、图标自定义等核心内容，承接前文选择器、属性等知识，是网页布局与美化的常用技能，教材案例融入工匠精神素材，兼具实用性与素养培育价值。学情分析1.前置基础：已掌握HTML表格、列表标签搭建，熟悉CSS选择器、基础属性及优先级，能独立编写简单样式代码，具备VSCode实操能力。

2.学情特点：动手能力强、具象思维突出，对实操任务兴趣浓厚，抽象理解能力较弱，对属性组合应用易混淆。

3.衔接需求：需通过具象案例与分步实操，掌握表格列表美化技巧，为后续复杂网页布局奠定基础，强化代码复用与优化思维。教学目标【知识目标】：

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

2.理解表格斑马线效果、列表图标自定义的实现逻辑。

【能力目标】：

1.能独立用CSS美化表格，实现边框合并、行样式切换等效果。

2.能自定义列表符号与图标，完成符合场景的列表美化，排查样式冲突问题。

【素质目标】：

1.培养精益求精的工匠精神，注重网页细节美化与用户体验。

2.提升小组协作与问题解决能力，养成规范编码与实时预览习惯。教学重点1.CSS表格border-collapse属性应用及斑马线表格效果实现。

2.CSS列表list-style系列属性使用及列表图标自定义方法。教学难点1.表格行伪类选择器（:nth-child）与属性组合实现动态样式。

2.列表图标定位调整及与文本对齐的适配技巧。教学准备1.硬件：机房计算机、投影仪、网络环境。

2.软件：VSCode、超星教学平台（上传案例源码、实操模板、素材图片）。

3.素材：表格列表HTML模板、列表图标素材、成品效果参考图、易错点清单。板书设计核心：1.表格：border-collapse（合并边框）、:nth-child（斑马线）；2.列表：list-style（符号/图标）、自定义图标定位；3.技巧：伪类+属性组合，细节适配。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：情境导入，任务发布（亮点：素养渗透+任务具象）1.情境展示：呈现两组对比效果，左侧为默认HTML表格列表（单调杂乱），右侧为美化后表格（斑马线、合并边框）与列表（自定义图标），结合工匠精神素材说明细节美化的重要性。

2.课题解读：明确本节课核心是掌握CSS表格与列表美化技巧，实现网页元素规整美观，提升用户体验。

3.任务发布：设定核心任务“制作工匠精神主题美化页面”，拆解为2个子任务：

（1）美化技能清单表格（合并边框、斑马线效果、hover样式）；

（2）自定义工匠精神要点列表（替换图标、调整对齐方式）。教师：展示对比案例，渗透工匠精神，解读任务目标与评价标准；引导学生回顾HTML表格列表搭建方法，提问“默认样式存在哪些问题”，激发探究欲；发放超星平台实操素材。

学生：观察案例差异，明确学习目标；下载素材，打开HTML模板，检查页面结构，做好实操准备。设计意图：以视觉对比激发兴趣，融入素养培育，具象化任务目标，衔接前置知识。时间：10分钟。环节二：理论精讲，案例演示（亮点：案例拆解+难点预判）1.表格属性精讲：

（1）核心属性：border-collapse（separate默认/collapse合并边框）、border-spacing（边框间距，仅separate生效）、caption-side（标题位置），结合教材范例演示代码效果。

（2）动态行样式：讲解:nth-child(even/odd)伪类选择器，演示斑马线表格实现代码（tr:nth-child(even){background:#f2f2f2;}）；补充tr:hover动态样式，实现鼠标悬浮变色。

2.列表属性精讲：

（1）基础属性：list-style-type（符号类型）、list-style-image（图标替换）、list-style-position（符号位置），演示各属性效果差异。

（2）自定义图标技巧：当list-style-image对齐不佳时，用list-style:none清除默认符号，结合padding与background-image实现精准定位，破解对齐难点。

3.易错点提醒：表格边框需同时设置table与th/td；列表图标路径需正确，定位时注意padding适配。教师：通过VSCode实时演示代码，逐行讲解属性作用，对比不同属性值效果；针对难点，拆解伪类选择器逻辑，演示图标定位调试过程；在超星平台发布知识点笔记。

学生：跟随演示记录核心代码与易错点，仿写代码验证效果；主动提问疑问，明确属性组合应用逻辑，整理笔记要点。设计意图：结合教材案例拆解理论，预判易错点，可视化演示突破难点，为实操奠定理论基础。时间：20分钟。环节三：分组实操，任务攻坚（亮点：分层实操+协作互助）1.基础任务（必做，20分钟，独立完成）：

（1）表格美化：基于模板HTML表格，设置合并边框、表格宽度100%，表头背景色#c9d3cb，实现斑马线效果，添加行hover变色。

（2）列表美化：将无序列表默认符号替换为星星图标，设置list-style-position:inside，行高25px，文本缩进1em。

2.提升任务（选做，10分钟，小组协作）：

（1）表格优化：为表格添加caption，设置在表格下方，调整字体样式；

（2）列表进阶：用background-image自定义列表图标，精准调整位置，实现图标与文本居中对齐；

（3）风格统一：确保表格与列表样式适配，贴合工匠精神主题页面风格。

3.实操步骤：打开素材模板→编写CSS样式→实时预览调试→排查语法错误→优化细节效果。教师：巡视指导，重点帮扶表格伪类应用、列表图标对齐等难点问题；针对共性错误（如边框未合并、路径错误），在超星平台发布提示；组织小组互助，鼓励能力强的学生协助同伴调试。

学生：按步骤完成实操任务，独立编写代码并实时预览；遇到问题先自主排查，再小组讨论，必要时求助教师；记录实操心得与调试技巧。设计意图：分层任务适配学生差异，强化实操落地，通过小组协作提升问题解决能力，贴合职校生动手能力强的特点。时间：30分钟。环节四：成果展示，点评优化（亮点：精准点评+技巧沉淀）1.成果展示：随机抽取3-4份学生作品（含基础版与进阶版），通过投影仪展示，由学生简述实现思路与遇到的问题。

2.点评优化：

（1）亮点肯定：针对规范编码、样式美观、难点突破（如图标精准对齐）的作品，予以表扬，提炼可复用技巧。

（2）问题修正：针对共性问题（如斑马线效果失效、图标偏移），现场调试代码，演示修正方法；强调伪类选择器用法与路径规范。

3.技巧沉淀：引导学生总结表格列表美化核心技巧，梳理“属性选择-代码编写-预览调试”流程，补充超星平台答疑专区内容。教师：组织作品展示与分享，精准点评优缺点，现场演示问题修正过程；引导学生梳理核心技巧，强化知识记忆；收集学生典型问题，纳入答疑素材。

学生：展示个人/小组作品，分享实操经验；倾听点评，记录问题与修正方法；梳理技巧要点，完善个人笔记。设计意图：通过展示点评强化知识应用，沉淀实操技巧，激发学生成就感，同时解决共性问题，巩固学习效果。时间：10分钟。环节五：知识梳理，总结升华（亮点：体系构建+素养强化）1.知识梳理：引导学生共同回顾核心知识点，构建“表格属性（合并/动态样式）-列表属性（符号/图标）-实操技巧-易错点规避”知识框架，关联前文选择器、属性知识，形成知识闭环。

2.素养升华：结合工匠精神主题，强调网页美化需注重细节、精益求精，培养严谨的编码态度与良好的用户体验意识。

3.后续铺垫：预告后续学习内容，鼓励学生课后结合本节课知识，优化之前制作的网页，强化技能复用。教师：通过提问引导学生梳理知识，板书核心框架；结合案例强化工匠精神培育；布置课后作业，明确要求与提交路径。

学生：跟随引导回顾知识点，完善知识框架；理解工匠精神与专业技能的关联；记录课后作业要求，明确复习方向。设计意图：构建知识体系，强化素养培育，衔接前后课程，为课后复习与技能提升奠定基础。时间：10分钟。三、课后作业和教学反思课后作业1.基础作业：优化课堂实操作品，完善表格列表美化效果，确保样式规范、细节达标，提交至超