46 lines
4.8 KiB
Markdown
46 lines
4.8 KiB
Markdown
# 校园活动网站——响应式布局与媒体查询 教学设计
|
||
|
||
| **课题** | **校园活动网站——响应式布局与媒体查询** |
|
||
|:---|:---|
|
||
| **课时** | 1课时（40分钟） |
|
||
| **教学目标** | **知识目标**：理解响应式设计、视口和断点的含义，掌握视口设置、相对尺寸、图片自适应和媒体查询基本语法。<br>**技能目标**：能够使用浏览器设备模拟发现小屏问题，并通过媒体查询调整导航、卡片和页面间距，使网站适配桌面与手机。<br>**素养目标**：建立多设备用户意识和移动优先的基础观念，养成在不同视口下持续测试网页的习惯。 |
|
||
| **教学重难点** | **重点**：视口设置；弹性图片；媒体查询；小屏布局调整。<br>**难点**：根据内容出现问题的位置选择断点，而不是照搬固定设备宽度；避免横向滚动和文字过小。 |
|
||
| **教学资源准备** | 校园活动网站项目、桌面与手机效果对比图、浏览器设备工具、响应式验收清单。 |
|
||
|
||
## 教学过程
|
||
|
||
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||
|:---|:---|:---|:---|:---|
|
||
| **1. 多端问题导入**<br>（5分钟） | 在手机视口打开现有网站，发现导航拥挤、图片溢出和卡片过窄问题。 | **设备演示**<br>用开发者工具切换桌面和手机视口，展示同一页面的差异。<br><br>**任务发布**<br>提出“让网站在窄屏仍可阅读、可操作”的适配任务。 | **问题记录**<br>按结构、文字、图片、操作四类记录小屏问题。<br><br>**优先排序**<br>选出最影响使用的两个问题。 | 从真实设备体验出发，让学生理解响应式设计服务于不同用户环境。 |
|
||
| **2. 响应原理探究**<br>（10分钟） | 学习视口、流式尺寸、最大宽度和内容断点。 | **概念讲解**<br>说明视口元标签的作用，演示固定宽度与百分比宽度的差异。<br><br>**断点观察**<br>缓慢缩小窗口，在布局开始拥挤的位置记录宽度，解释断点应由内容决定。 | **宽度实验**<br>拖动窗口观察布局变化并记录首次出现问题的宽度。<br><br>**概念判断**<br>区分固定尺寸、相对尺寸和最大宽度的适用场景。 | 通过连续变化观察断点形成过程，避免把响应式等同于记忆某个数值。 |
|
||
| **3. 媒体查询示范**<br>（8分钟） | 学习 `@media (max-width: ...)`，调整导航方向、卡片宽度和页面间距。 | **代码演示**<br>在窄屏条件下将导航改为纵向或换行，卡片改为单列，缩小容器内边距。<br><br>**图片优化**<br>设置图片最大宽度不超过容器并保持比例。 | **跟随编码**<br>添加一组媒体查询，观察规则在断点前后是否生效。<br><br>**工具验证**<br>从计算样式中确认覆盖规则来源。 | 用最小适配规则理解条件样式和覆盖关系，连接前面选择器知识。 |
|
||
| **4. 多端适配实践**<br>（13分钟） | 完成导航、卡片、图片和间距的响应式优化。 | **任务分解**<br>要求无横向滚动、图片不溢出、导航可操作、卡片在小屏单列、正文保持可读。<br><br>**巡回指导**<br>针对固定宽度、断点冲突和规则顺序问题，引导用设备工具逐项定位。 | **样式改造**<br>根据内容问题设置断点并完成四项适配。<br><br>**设备测试**<br>在至少三种视口宽度下测试，填写验收结果并修正问题。 | 以多视口验收保证响应式不是“写了媒体查询”，而是实际解决使用问题。 |
|
||
| **5. 成果总结评价**<br>（4分钟） | 对比桌面与手机效果，归纳响应式测试流程。 | **作品抽测**<br>随机选择视口宽度检查作品，点评内容完整性和操作可达性。<br><br>**流程总结**<br>归纳“缩放观察—定位问题—设置断点—编写覆盖—多端复测”。 | **动态展示**<br>拖动窗口展示布局连续变化。<br><br>**自查归档**<br>确认三种宽度均通过清单。 | 用随机宽度避免只适配某个设备，形成持续测试和内容驱动断点意识。 |
|
||
|
||
## 板书设计
|
||
|
||
```text
|
||
响应式设计
|
||
|
||
同一份内容 → 适配不同视口
|
||
|
||
基础：
|
||
viewport
|
||
max-width: 100%
|
||
弹性布局
|
||
|
||
媒体查询：
|
||
@media (max-width: 700px) {
|
||
/* 小屏覆盖规则 */
|
||
}
|
||
|
||
流程：观察 → 断点 → 覆盖 → 多端复测
|
||
```
|
||
|
||
## 教学成效与反思
|
||
|
||
| | |
|
||
|:---|:---|
|
||
| **教学成效** | 学生能够使用设备模拟识别小屏问题，并通过媒体查询调整导航、卡片和间距。多数网站在三种视口下无横向滚动，图片和文字保持可读。 |
|
||
| **教学反思** | 学生容易先套用断点数值再寻找问题，或只测试一种手机尺寸。教学应坚持先缩放观察并记录问题宽度，再编写规则；验收采用随机宽度可有效检验适配的真实性。 |
|