teaching-design/data/Web/6.md

个人主页——语义化整合与项目发布 教学设计

课题	个人主页——语义化整合与项目发布
课时	1课时（40分钟）
教学目标	知识目标：理解 header、nav、main、section、footer 等语义化结构，了解网页质量检查和静态发布的基本流程。 技能目标：能够重构个人主页结构，修复标签、路径和链接问题，按验收清单完成浏览器测试并生成可分享的项目成果。 素养目标：培养版本意识、质量意识和成果表达能力，形成开发完成后必须测试、整理和复盘的职业习惯。
教学重难点	重点：语义化区域划分；项目整合；结构、资源、链接与表单检查。 难点：在不改变内容的前提下重构结构，依据测试现象定位问题并完成规范发布。
教学资源准备	前五课个人主页项目、语义标签卡、项目验收清单、浏览器开发者工具、压缩工具或校内静态发布空间。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 项目验收导入 （5分钟）	回顾各模块成果，发布“整合并交付个人主页”的最终任务。	进度回顾 展示六课时成果链，说明本课不再增加大量内容，而是提升结构与质量。 标准发布 讲解内容完整、结构语义、资源有效、操作可用、目录规范五类验收项。	成果盘点 在清单上标记已完成和待完善模块。 问题预判 写出项目当前最可能存在的两个问题。	从“写完代码”转向“完成交付”，建立基于标准验收项目的意识。
2. 语义结构重构 （8分钟）	学习页面区域语义，将现有内容组织为页头、导航、主体栏目和页脚。	结构示范 把普通容器替换为 header、nav、main、section、footer，说明各区域职责。 层级提醒 强调 main 的唯一性和标题层级连续。	结构分析 在页面截图上标注五类区域。 跟随重构 先完成页头、主体和页脚的语义化调整。	用区域职责提升代码可读性，为后续 CSS 布局和协作开发建立基础。
3. 项目整合实践 （17分钟）	整合文本、图片、列表、表格和表单，依据清单修复问题。	任务组织 按“结构→内容→资源→交互→目录”顺序安排测试，示范使用开发者工具检查元素。 巡回诊断 不直接代改代码，引导学生根据错误位置、控制台或网络面板信息定位原因。	独立重构 完成全部语义区域，补齐缺失内容和替代文本。 双轮测试 先自测，再由同伴按清单测试图片、锚点、外链、表单校验和标题层级。	留出主体时间进行真实项目整合，通过双轮测试形成发现、定位、修复的质量闭环。
4. 成果发布展示 （6分钟）	整理目录、生成压缩包或发布到校内静态空间，展示项目。	发布示范 演示删除无关文件、确认入口文件、压缩项目并在新位置重新打开测试。 展示评价 邀请学生用一分钟介绍页面定位、主要栏目和一个解决的问题。	成果归档 按统一命名整理项目并完成离线发布测试。 项目路演 展示主页，说明设计选择和调试经历。	让学生经历可复现的交付流程，以表达和演示强化项目成就感。
5. 项目复盘总结 （4分钟）	回顾 HTML 项目知识链，完成个人复盘。	知识串联 梳理“文档结构—文本—媒体—结构化数据—表单—语义整合”。 迁移提问 提出“如何让页面更美观并适配不同屏幕”，衔接 CSS 项目。	复盘填写 记录一个掌握点、一个典型错误和一个改进目标。 成果确认 提交项目与验收清单。	通过知识串联和项目复盘巩固 HTML 结构能力，自然过渡到样式与布局学习。

板书设计

个人主页语义结构

header
├── nav
main
├── section：关于我
├── section：技能与经历
├── section：作品展示
└── section：联系表单
footer

验收：结构 → 内容 → 资源 → 操作 → 目录

教学成效与反思

教学成效	学生能够用语义标签整合前五课成果，并依据清单完成自测和同伴测试。多数项目可在新位置正常打开，学生能清楚说明页面结构和一次调试过程。
教学反思	整合课容易演变为教师集中修错，应坚持让学生先描述现象、定位区域、提出原因再修改。发布测试暴露了部分绝对路径和遗漏资源问题，说明跨位置复测是检验项目完整性的有效方式。