teaching-design/data/Web/10.md

校园活动网站——导航栏与活动卡片组件 教学设计

课题	校园活动网站——导航栏与活动卡片组件
课时	1课时（40分钟）
教学目标	知识目标：理解组件由稳定结构和可复用样式组成，掌握组合选择器、伪类及导航栏、卡片的常见结构。 技能目标：能够制作横向导航栏和统一的活动卡片，使用类名复用样式，并为链接和卡片添加悬停反馈。 素养目标：形成模块化、复用和一致性意识，养成用清晰类名表达组件职责的编码习惯。
教学重难点	重点：组件结构；类选择器复用；导航排列；:hover 交互反馈。 难点：保持多个卡片结构一致，控制组合选择器作用范围，避免样式相互干扰。
教学资源准备	校园活动网站项目、导航与卡片结构图、活动图文素材、组件验收清单、浏览器开发者工具。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 组件需求导入 （5分钟）	分析重复活动信息和站内跳转需求，引出导航与卡片组件。	问题展示 展示样式各异的活动条目，提问：“新增一条活动时，怎样保持外观一致？” 任务明确 发布导航栏和活动卡片组件开发任务。	页面诊断 指出重复信息的共同结构和不一致之处。 组件识别 圈出导航项、卡片图片、标题、时间和按钮。	从维护问题引出组件复用，让学生理解统一结构和样式的工程价值。
2. 组件结构探究 （9分钟）	分析导航和卡片的 HTML 层级及类名设计。	结构拆解 画出 nav-list、event-card、event-card__title 等职责明确的类名关系。 范围讲解 比较 .event-card a 与所有 a 的匹配范围，说明局部样式的重要性。	结构标注 在页面模板上标注组件、子元素和重复部分。 命名练习 为三个组件元素拟定可读类名。	先识别稳定结构再写样式，培养模块边界和选择器范围意识。
3. 样式交互示范 （8分钟）	使用 Flex 排列导航，设计卡片边框、圆角、阴影及悬停状态。	代码演示 演示导航列表去除默认样式、横向排列和链接点击区域；为卡片添加圆角和轻量阴影。 状态演示 使用 :hover 改变链接背景或卡片位移，说明反馈应克制且可预测。	跟随编码 完成导航基础样式和一张卡片外观。 交互体验 用鼠标和键盘操作链接，观察反馈是否清晰。	将静态样式与操作反馈结合，提升组件的可用性和完整度。
4. 组件开发实践 （14分钟）	完成站内导航和至少四张活动卡片，测试新增内容的一致性。	任务发布 导航链接对应页面栏目；卡片结构一致并复用同一类样式；新增第五张卡片不得复制整段 CSS。 巡回指导 检查类名拼写、选择器过宽、图片比例和按钮点击区域，指导定位局部样式冲突。	组件制作 完成导航和四张卡片，填入不同活动数据。 复用验证 复制卡片结构新增一项，仅更换内容，确认样式自动应用。	用“新增组件无需新增样式”检验复用是否真正实现，强化模块化思维。
5. 成果评价总结 （4分钟）	依据结构一致、样式复用、操作清晰三项标准评价成果。	作品点评 展示类名清楚、组件统一的页面，指出过多动画和全局选择器问题。 方法总结 归纳“定结构—起类名—写一次样式—复制内容—测试状态”。	同伴互评 选择一张卡片和一个导航链接进行检查。 反思归纳 说明组件化为新增活动带来的便利。	以可维护性而非只看外观评价作品，建立初步组件开发标准。

板书设计

组件 = 稳定结构 + 可复用样式 + 操作状态

导航组件
nav > ul > li > a

活动卡片
.event-card
├── 图片
├── 标题
├── 时间地点
└── 操作链接

状态：:hover
检验：新增内容，不新增重复 CSS

教学成效与反思

教学成效	学生能够使用统一结构和类样式制作导航与活动卡片，并通过新增卡片验证样式复用。多数作品组件一致、链接反馈明确，类名可读性有所提升。
教学反思	一些学生仍为每张卡片设置独立类名，造成重复代码。评价时应把“新增第五张卡片是否需要改 CSS”作为硬性检验，并限制悬停效果数量，避免忽视信息清晰度。