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