# 校园活动网站——项目整合调试与质量优化 教学设计
| **课题** | **校园活动网站——项目整合调试与质量优化** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解网页质量由结构、视觉、布局、响应、可用性和性能等方面共同构成，掌握常见 CSS 问题的排查顺序。
**技能目标**：能够整合校园活动网站，使用开发者工具修复样式冲突、溢出和响应问题，完成多视口验收和项目交付。
**素养目标**：培养质量检查、团队协作和迭代优化意识，形成依据现象与证据调试页面的职业习惯。 |
| **教学重难点** | **重点**：项目整合；选择器与盒模型调试；多视口测试；质量清单。
**难点**：区分结构问题、样式问题和资源问题，按优先级完成有限时间内的优化。 |
| **教学资源准备** | 前五课校园活动网站、综合验收清单、典型故障项目、开发者工具、展示评分表、压缩工具或校内发布空间。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 交付任务导入**
（5分钟） | 回顾 CSS 项目成果，明确最终验收、调试和交付任务。 | **成果串联**
梳理基础样式、盒模型、Flex、组件和响应式五项成果。
**标准发布**
说明功能完整、视觉一致、布局稳定、多端可用、代码规范五项评分。 | **进度盘点**
对照清单标记项目风险项。
**角色分工**
两人一组确定开发者和测试员，之后交换角色。 | 用明确质量标准和角色分工组织综合实践，避免整合课变为随意美化。 |
| **2. 调试方法梳理**
（8分钟） | 建立“元素—规则—盒模型—视口—资源”的 CSS 排错流程。 | **故障示范**
展示类名不匹配、规则被覆盖、宽度溢出和图片路径错误，逐步使用元素面板定位。
**优先说明**
强调先修影响访问和操作的问题，再优化装饰细节。 | **诊断练习**
根据四个故障现象选择检查工具和排查顺序。
**方法记录**
完成个人调试流程卡。 | 将分散的工具操作整理成可重复方法，培养按证据处理问题的能力。 |
| **3. 综合优化实践**
（17分钟） | 按清单完成结构、样式、布局、组件和响应式的双轮测试。 | **任务组织**
第一轮由开发者自测，第二轮由测试员使用随机视口和新增卡片进行压力测试。
**巡回评审**
要求学生先说明现象和推断，再协助定位；记录高频问题用于集中讲评。 | **项目修复**
检查导航锚点、图片、卡片复用、间距、溢出和媒体查询，逐项修正。
**交叉测试**
交换项目，随机改变宽度、增加活动卡片并填写缺陷记录。 | 通过角色化双轮测试模拟真实质量流程，综合运用前五课知识完成项目闭环。 |
| **4. 成果展示交付**
（6分钟） | 完成项目归档并展示设计与优化成果。 | **展示组织**
邀请小组用一分钟展示桌面与手机效果，并说明一项调试证据。
**评价反馈**
依据评分表给出结构化反馈，突出可维护性和适配表现。 | **项目路演**
展示网站视觉规范、组件复用和响应变化。
**成果归档**
清理无关资源，统一命名，重新打开交付包确认完整。 | 将技术成果、调试过程和表达能力共同纳入评价，强化交付意识。 |
| **5. 项目复盘总结**
（4分钟） | 总结 CSS 知识链并提出网页交互需求。 | **知识梳理**
串联“选择器—盒模型—Flex—组件—媒体查询—调试”。
**问题迁移**
提问：“如何让用户添加活动或改变页面内容？”引出 JavaScript。 | **复盘反思**
记录一个有效调试方法和一个布局改进点。
**学习迁移**
描述希望网页具备的一项交互功能。 | 巩固样式与布局体系，并从静态页面自然过渡到程序交互学习。 |
## 板书设计
```text
校园活动网站质量模型
结构完整
视觉一致
布局稳定
组件复用
多端可用
代码规范
CSS 排错：
选元素 → 查规则 → 看盒模型 → 换视口 → 核资源
交付：自测 → 互测 → 修复 → 复测 → 归档
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够综合运用 CSS 知识完成网站优化，并在随机视口和新增卡片测试中修复实际问题。双角色测试使缺陷记录更具体，多数项目达到可展示、可复用和可交付标准。 |
| **教学反思** | 综合调试时间有限，学生容易优先处理颜色等低风险细节。应要求先按“影响访问—影响操作—影响布局—视觉细节”排序缺陷，并保留修复前后证据，提升优化决策质量。 |