first commit

data/Web/8.md

@@ -0,0 +1,41 @@
+# 校园活动网站——盒模型与页面分区 教学设计
+
+| **课题** | **校园活动网站——盒模型与页面分区** |
+|:---|:---|
+| **课时** | 1课时（40分钟） |
+| **教学目标** | **知识目标**：理解内容区、内边距、边框和外边距组成的 CSS 盒模型，掌握宽度、间距、边框及 `box-sizing` 的作用。<br>**技能目标**：能够使用盒模型调整校园活动网站的页头、公告区和内容区尺寸与间距，解决元素拥挤和宽度溢出问题。<br>**素养目标**：培养用开发者工具测量和调试界面的习惯，形成以数据而非反复猜测调整布局的工程意识。 |
+| **教学重难点** | **重点**：盒模型四层结构；`padding` 与 `margin` 的区别；边框和宽度设置。<br>**难点**：理解默认盒模型下实际占用宽度的计算，正确使用 `box-sizing: border-box` 控制尺寸。 |
+| **教学资源准备** | 上节课项目、盒模型实体图、宽度计算练习卡、问题页面、浏览器开发者工具。 |
+
+## 教学过程
+
+| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
+|:---|:---|:---|:---|:---|
+| **1. 布局问题导入**<br>（5分钟） | 观察文字贴边、区域拥挤和横向溢出，提出页面分区优化任务。 | **问题呈现**<br>展示三个典型问题，提问：“为什么设置了宽度，元素仍超出容器？”<br><br>**任务明确**<br>要求本课完成页头、公告区和主体容器的间距设计。 | **现象描述**<br>指出各区域在尺寸和间距上的问题。<br><br>**原因猜测**<br>根据已有经验判断可能与边框、内外间距有关。 | 从可见问题引出盒模型，让抽象尺寸概念服务于具体页面优化。 |
+| **2. 盒模型探究**<br>（10分钟） | 学习 content、padding、border、margin 的位置和用途。 | **模型讲解**<br>用“礼盒”类比四层结构，在开发者工具中高亮元素并展示颜色区域。<br><br>**概念对比**<br>比较 `padding` 增加内部留白与 `margin` 拉开元素距离的效果。 | **模型标注**<br>在盒模型图中填写四层名称和作用。<br><br>**参数实验**<br>分别修改内外边距，观察文字和相邻元素的位置变化。 | 通过开发者工具可视化尺寸关系，避免把两个间距属性混用。 |
+| **3. 宽度计算示范**<br>（8分钟） | 理解标准盒模型占用宽度和 `border-box` 规则。 | **计算演示**<br>计算 `width: 300px` 加左右内边距和边框后的实际宽度，说明溢出原因。<br><br>**方案示范**<br>设置 `box-sizing: border-box`，观察总宽度保持不变。 | **计算练习**<br>完成两道实际宽度计算并核对工具显示值。<br><br>**代码验证**<br>切换盒模型规则，记录元素宽度变化。 | 将计算结果与浏览器测量对应，建立可验证的尺寸判断能力。 |
+| **4. 页面分区实践**<br>（13分钟） | 优化页头、公告区和主体容器，建立统一的间距规则。 | **任务发布**<br>要求设置全局 `border-box`、主体最大宽度、居中外边距、区域内边距和公告边框。<br><br>**巡回指导**<br>引导使用计算样式和盒模型面板定位溢出、间距叠加等问题。 | **样式调整**<br>按验收图完成三个区域的尺寸、边框和间距设置。<br><br>**工具测量**<br>选择元素查看实际宽高，修复横向滚动和贴边问题。 | 在完整页面中综合使用盒模型，以工具测量替代盲目修改数值。 |
+| **5. 展示总结评价**<br>（4分钟） | 比较优化前后页面，归纳尺寸与间距调试方法。 | **前后对比**<br>展示典型作品，说明统一间距如何提升秩序感。<br><br>**方法总结**<br>归纳“选元素—看盒模型—算尺寸—改属性—再验证”。 | **结果说明**<br>指出自己修复的一个布局问题及所用属性。<br><br>**规范自查**<br>检查是否存在随意叠加的重复间距。 | 将实践经验形成调试流程，增强对布局问题的分析能力。 |
+
+## 板书设计
+
+```text
+盒模型（由内到外）
+
+content → padding → border → margin
+
+标准盒模型：
+实际宽度 = width + 左右padding + 左右border
+
+推荐：
+* { box-sizing: border-box; }
+
+调试：选择元素 → 查看盒模型 → 测量 → 修改
+```
+
+## 教学成效与反思
+
+| | |
+|:---|:---|
+| **教学成效** | 学生能够区分内边距和外边距，使用盒模型优化页面分区。通过计算与开发者工具测量，多数学生成功解决了宽度溢出和内容贴边问题。 |
+| **教学反思** | 盒模型计算对部分学生仍较抽象，单纯公式讲解效果有限。应保持“纸面计算—浏览器测量—切换规则”的三步验证，并限制同一环节引入过多尺寸单位。 |