# 个人主页——图片链接与多媒体展示 教学设计
| **课题** | **个人主页——图片链接与多媒体展示** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：掌握 `img`、`a`、`audio` 或 `video` 标签的基本属性，理解相对路径、替代文本和链接目标。
**技能目标**：能够为个人主页添加头像、作品图片、站内锚点和外部链接，并正确处理本地资源路径。
**素养目标**：树立图片版权、个人隐私和无障碍意识，养成资源分类、文件压缩和链接测试的习惯。 |
| **教学重难点** | **重点**：图片与链接标签；相对路径；`alt` 替代文本；站内外链接。
**难点**：根据当前文件位置推导资源路径，定位图片不显示和链接失效问题。 |
| **教学资源准备** | 个人主页项目、经过授权的示例图片与短音视频、路径关系图、图片压缩工具、链接测试清单。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 展示需求导入**
（5分钟） | 分析纯文字主页的不足，提出增加头像、作品图片和跳转入口的任务。 | **对比展示**
呈现纯文字版与图文版主页，提问：“哪些资源让个人特点更直观？”
**规范提醒**
说明不公开敏感信息，不使用来源不明的图片。 | **观察比较**
说出图像和链接对信息表达的作用。
**资源筛选**
从授权素材中选择头像和作品图片。 | 以项目展示需求引出多媒体，同时把版权与隐私规范置于操作之前。 |
| **2. 路径原理探究**
（9分钟） | 理解同级、下级和上级目录关系，学习相对路径写法。 | **图示讲解**
以 `index.html` 和 `images/avatar.jpg` 为例绘制目录树，演示浏览器如何查找资源。
**故障演示**
故意修改文件名和路径，展示图片破损图标并分析原因。 | **路径推导**
根据三组目录图填写正确资源路径。
**故障判断**
检查文件名、大小写和所在目录，说明错误位置。 | 用目录图和真实故障突破路径难点，培养按证据排查问题的意识。 |
| **3. 标签属性示范**
（8分钟） | 学习图片、链接和多媒体标签的核心属性与安全使用方式。 | **代码演示**
演示 `
`，讲解 `src`、`alt`；演示外部链接和 `target="_blank"`。
**锚点示范**
为“作品展示”栏目设置 `id`，创建页内跳转链接。 | **跟随编码**
添加头像和一个外部学习资源链接，编写准确的替代文本。
**即时测试**
点击链接并临时修改路径，观察不同结果。 | 通过最小可运行示例掌握属性作用，让学生立即验证代码与页面行为。 |
| **4. 图文主页实践**
（14分钟） | 完成头像、作品展示、站内导航和可选多媒体区域。 | **任务发布**
要求添加一张头像、两张作品图、一个页内链接和一个外部链接；图片必须分类存放并写 `alt`。
**巡回指导**
帮助处理路径、中文文件名、图片过大和链接协议缺失等问题。 | **功能开发**
整理资源文件，完成图文和链接代码；进度较快者添加带控制条的短音频或视频。
**交叉测试**
与同伴交换项目，逐项测试图片、锚点和外部链接。 | 以多项可测试功能整合标签知识，通过交叉测试培养用户视角和质量意识。 |
| **5. 评价归纳总结**
（4分钟） | 展示作品并总结资源引用与链接测试方法。 | **案例点评**
对路径规范、替代文本准确和资源体积合理的作品进行点评。
**方法归纳**
总结“看目录、核文件、查路径、再刷新”的排错顺序。 | **展示交流**
说明自己解决的一次路径问题。
**清单自查**
确认资源均能打开且未暴露敏感信息。 | 将排错经验显性化，强化资源管理、版权和隐私责任。 |
## 板书设计
```text
personal-homepage/
├── index.html
└── images/
├── avatar.jpg
└── work-1.jpg
图片：src + alt
链接：href + 可读文字
页内跳转：href="#works" ↔ id="works"
排错：目录 → 文件名 → 路径 → 保存刷新
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够使用相对路径添加图片和链接，完成个人主页图文展示。交叉测试发现并修正了多处大小写、文件名和锚点错误，资源管理与用户测试意识得到强化。 |
| **教学反思** | 路径问题仍是主要障碍，直接告知答案不利于形成能力。后续指导应先让学生画出目录树，再按“文件在哪里、页面在哪里、如何到达”逐步推导，同时限制大体积媒体以保障课堂效率。 |