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