第2单元 HTML表格应用-优化《七律·长征》古诗文网页布局（教案4：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称HTML表格应用——优化《七律·长征》古诗文网页布局授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，接入超星教学平台）授课学时40分钟*2学时教材分析本节选自单元2核心内容，聚焦HTML表格知识点，是网页布局、规整内容排版的基础技术，承接上一课时图像应用，是单元知识整合的关键模块。教材结合表格结构案例讲解，需补充单元格合并、表格与图文适配案例，结合古诗文情境强化实操，贴合职校生“实操落地、规整布局”的学习需求。学情分析1.前置基础：已掌握HTML文档结构、文本标签、超链接、图像插入技能，能独立编写图文结合的古诗文网页，熟练操作VSCode，具备基础代码纠错能力，可衔接表格布局实操。

2.学情特点：动手能力强、具象思维突出，对“规整布局”的网页效果兴趣浓厚；抽象逻辑较弱，对表格嵌套、单元格合并的逻辑需实例引导。

3.潜在不足：易混淆表格标签嵌套顺序，对单元格合并的rowspan、colspan属性用法模糊，需通过分步实操与案例拆解化解。教学目标【知识目标】：

1.掌握HTML表格核心标签（<table>、<tr>、<td>、<th>）的语法结构与嵌套规则，理解表头、表体的概念。

2.掌握单元格合并属性（rowspan、colspan）的用法，能实现简单的表格布局优化。

【能力目标】：

1.能为古诗文网页添加表格，实现诗句、注释、图像的规整布局，掌握表格与图文的适配技巧。

2.能排查表格标签嵌套错误、单元格合并异常等问题，提升自主故障排查能力。

【素质目标】：

1.结合表格规整布局，培养严谨的设计思维与细节把控能力。

2.养成规范编写表格代码、注重网页布局美观性的实操习惯。教学重点1.HTML表格核心标签的语法结构与正确嵌套规则。

2.运用表格实现古诗文网页内容的规整布局，适配文本与图像。教学难点1.表格标签的嵌套逻辑，避免因标签顺序错误导致表格显示异常。

2.rowspan（跨行合并）、colspan（跨列合并）属性的精准应用，实现复杂布局。教学准备1.硬件：机房计算机、投影仪、音响。

2.软件：超星教学平台（上传教材案例源码、表格标签对照表、AI提示词模板）、VSCode。

3.素材：古诗文网页表格布局示例图、单元格合并案例、表格故障对照表、实操任务单、前节课图文网页源码。教学方法1.主导方法：项目引领任务驱动教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、纠错训练法。板书设计核心内容：1.表格标签（table/tr/td/th）；2.合并属性（rowspan/colspan）；3.要点：嵌套正确、合并精准、布局适配。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：复习衔接，项目升级（亮点：情境延续+布局对比）1.复习回顾：抽查上节课图文结合的古诗文网页，提问图像属性、路径书写规则，点评作业中图文排版情况，衔接表格知识点。

2.情境升级：展示两张网页对比案例（无表格杂乱布局页、表格规整布局页），提问“如何用表格实现内容分类规整？单元格合并该如何操作？”，引出本节课核心内容。

3.项目发布：明确本课时核心项目“用表格优化古诗文网页布局”，拆解为3个子任务——创建基础表格、实现单元格合并、适配图文优化布局。

4.AI辅助：更新超星平台AI提示词模板（如“HTML表格标签嵌套规则”“rowspan与colspan用法”），引导学生自主查询疑难问题。教师：抽查作业，点评亮点与不足；展示对比案例，讲解表格布局的优势，明确项目目标与成果要求；指导学生运用AI提示词梳理表格标签基础用法。

学生：展示上节课作品，回忆图像相关知识；观察案例差异，明确学习目标；借助AI提示词预习表格标签语法，记录核心要点。设计意图：延续古诗文情境，以布局对比激发兴趣，衔接前置知识；AI辅助贴合教学风格，以具象差异引导学生聚焦表格核心作用。时间：10分钟。环节二：理论精讲，案例演示（亮点：分层演示+易错点标注）1.表格基础标签：

（1）核心结构：讲解<table>（表格容器）、<tr>（表格行）、<td>（表格单元格）、<th>（表头单元格，默认加粗居中）的嵌套规则，标注“先table后tr，再td/th”易错点，演示基础2行2列表格编写。

（2）标签嵌套：强调“tr包含td/th，td/th内可放文本、图像、链接”，演示在单元格中插入文本与图像的效果。

2.单元格合并：

（1）跨列合并（colspan）：演示合并2列单元格，讲解属性用法（colspan=“合并列数”），标注“合并后需删除对应数量的td标签”易错点。

（2）跨行合并（rowspan）：演示合并2行单元格，讲解属性用法（rowspan=“合并行数”），对比colspan与rowspan的差异，结合布局示例图强化逻辑。

3.布局适配：演示表格与图文的适配技巧，如调整单元格内文本对齐方式、控制图像尺寸适配单元格。教师：采用理实一体化教学法，在VSCode中逐行编写代码，实时预览表格显示效果；标注易错点，引导学生对比不同标签、合并属性的用法。

学生：跟随演示仿写代码，测试表格显示与合并效果；记录语法规则、嵌套逻辑及易错点，梳理单元格合并技巧。设计意图：以分层演示拆解抽象表格逻辑，易错点标注降低失误率，贴合职校生具象思维，夯实重点知识，为实操铺垫。时间：20分钟。环节三：分步实操，突破难点（亮点：项目迭代+故障排查）分步实操任务（独立完成，基于前节课图文网页迭代优化）：

1.基础层（必做）：

（1）创建基础表格：新建表格（3行2列），表头设置为“诗句”“注释”，将古诗文诗句与注释分别填入对应单元格，实现内容分类规整。

（2）适配图文：在表格旁添加1行1列表格，插入前节课的长征主题图像，控制图像尺寸适配单元格，实现图文与表格的协调布局。

2.提高层（选做）：

（1）单元格合并：运用colspan合并表头单元格（合并2列），运用rowspan合并注释单元格（合并2行），实现复杂布局优化。

（2）故障排查：故意植入标签嵌套错误（如td外直接写table）、合并属性错误（如colspan取值过大），引导学生结合故障对照表自主排查修正。教师：巡视指导，重点帮扶标签嵌套、单元格合并困难的学生；提供故障对照表，引导学生通过“检查嵌套顺序、核对合并属性、预览调试”排查问题；针对共性问题（如合并后单元格冗余）集中讲解。

学生：按分层任务编写代码，迭代优化网页布局；自主排查并修正错误，记录故障解决方法；完成基础任务后尝试提高层内容，优化表格布局美观度。设计意图：以项目迭代延续情境，分层任务兼顾不同水平学生，故障排查针对性突破嵌套、合并难点，强化自主实操与问题解决能力。时间：25分钟。环节四：小组互评，整合提升（亮点：单元整合+成果展示）小组任务（4人一组）：

1.成果互评：每组对照互评清单（表格嵌套正确、合并属性精准、布局规整、图文适配、无语法错误），交叉检查网页，标注问题并提出修改建议。

2.整合优化：根据小组建议修改代码，完善表格布局细节，关联前节课超链接（可为表格内文本添加链接），实现单元知识（文本、链接、图像、表格）整合。

3.成果展示：每组推选1份优秀作品（单元整合版网页），上传至超星平台，由作者分享表格布局思路与单元知识整合技巧。教师：明确互评清单标准，引导小组聚焦嵌套规则、合并属性、布局适配等重难点；点评优秀作品，讲解典型错误（如布局杂乱、合并异常）的修正方法；总结表格布局技巧与单元知识整合要点。

学生：小组内交叉测试互评，主动发现并修正问题；学习优秀作品的布局亮点，优化自身网页；分享布局思路与整合心得，深化单元知识理解。设计意图：通过互评强化表格规范意识，借助同伴互助解决个性化问题，成果展示提升表达与总结能力，实现单元知识闭环整合。时间：15分钟。环节五：课堂小结，布置作业1.小结：梳理本节课核心内容（表格标签嵌套、单元格合并、图文适配），回顾单元知识（文本、链接、图像、表格）的关联逻辑，强化“编写-预览-排查-优化”的实操流程。

2.作业布置：明确课后任务要求，引导学生梳理单元知识体系，为单元测试与后续CSS学习铺垫。教师：引导学生自主总结，补充完善单元知识框架；通过超星平台发布作业，附上单元知识梳理清单供课后复习。

学生：梳理表格知识点与单元知识关联，记录作业要求；保存单元整合版网页文件，自主梳理单元知识，预习CSS相关内容。设计意图：固化表格知识与单元知识体系，强化实操思维；通过作业延伸巩固单元重难点，为后续学习做好衔接。时间：10分钟。三、课后作业和教学反思课后作业1.优化单元整合版网页，完善表格布局与单元格合并效果，确保图文适配、布局美观，将网页文件上传至超星平台。

2.梳理第二单元核心知识点（