teaching-design/data/Web/3.md

个人主页——图片链接与多媒体展示 教学设计

课题	个人主页——图片链接与多媒体展示
课时	1课时（40分钟）
教学目标	知识目标：掌握 img、a、audio 或 video 标签的基本属性，理解相对路径、替代文本和链接目标。 技能目标：能够为个人主页添加头像、作品图片、站内锚点和外部链接，并正确处理本地资源路径。 素养目标：树立图片版权、个人隐私和无障碍意识，养成资源分类、文件压缩和链接测试的习惯。
教学重难点	重点：图片与链接标签；相对路径；alt 替代文本；站内外链接。 难点：根据当前文件位置推导资源路径，定位图片不显示和链接失效问题。
教学资源准备	个人主页项目、经过授权的示例图片与短音视频、路径关系图、图片压缩工具、链接测试清单。

教学过程

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

板书设计

personal-homepage/
├── index.html
└── images/
    ├── avatar.jpg
    └── work-1.jpg

图片：src + alt
链接：href + 可读文字
页内跳转：href="#works" ↔ id="works"

排错：目录 → 文件名 → 路径 → 保存刷新

教学成效与反思

教学成效	学生能够使用相对路径添加图片和链接，完成个人主页图文展示。交叉测试发现并修正了多处大小写、文件名和锚点错误，资源管理与用户测试意识得到强化。
教学反思	路径问题仍是主要障碍，直接告知答案不利于形成能力。后续指导应先让学生画出目录树，再按“文件在哪里、页面在哪里、如何到达”逐步推导，同时限制大体积媒体以保障课堂效率。