3.1.6-添加图像热点链接（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 添加图像热点链接 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解图像热点链接的概念和作用。 · 学会在网页中创建和设置图像热点链接。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 图像热点链接的概念。 2. 图像热点链接的设置方法。 教学难点 1. 如何准确选择热点区域。 2. 如何设置合适的链接目标。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析典型案例，引导学生理解图像热点链接的应用。 2. 实践操作法：通过动手实践，让学生掌握图像热点链接的设置方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养团队协作能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课内容，简要介绍网页中超链接的作用和类型。 2. 展示几个包含图像热点链接的网页实例，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 图像热点链接（Image Map）是一种特殊的超链接，它允许用户在图像的特定区域（热点）上点击，从而导航到指定的目标资源。图像热点链接将一个图像划分为多个区域，每个区域都可以设置独立的超链接。 图像热点链接的概念： 1. 图像映射：图像热点链接的基础是图像映射（Image Mapping），它将一个图像划分为多个区域，这些区域可以是任意形状（如圆形、矩形、多边形）。 2. 热点区域：图像映射中的每个区域被称为热点区域（Hotspot），用户可以在这些区域上点击以触发超链接。 3. 链接目标：热点区域可以链接到其他网页、网站、电子邮件地址、程序等。当用户点击热点区域时，浏览器会导航到指定的链接目标。 在Dreamweaver CS5中创建和设置图像热点链接的方法如下： 1. 打开Dreamweaver CS5，创建一个新的HTML文件或打开现有的HTML文件。 2. 在“设计”视图中，将一张图像拖放到网页中。 3. 选中图像，右键单击，然后选择“图像映射”。 4. 在弹出的“图像映射”面板中，您可以看到图像被划分为一个默认的矩形区域。您可以通过点击图像上的区域来选择热点区域。 5. 选择热点区域后，右键单击，然后选择“编辑区域属性”。 6. 在弹出的“区域属性”对话框中，您可以设置以下选项： - 链接目标：选择链接到的目标资源，如网页、网站、电子邮件地址等。 - 链接标题：为链接添加一个标题，当鼠标悬停在热点区域时，会显示该标题。 - 链接行为：设置链接的打开方式，如在当前窗口、新窗口或新标签页中打开。 7. 点击“确定”按钮，保存设置。 8. 如果需要添加更多热点区域，请在“图像映射”面板中点击图像上的区域，然后重复步骤5-7。 9. 保存文件并在浏览器中预览效果。 注意：在Dreamweaver CS5中，您还可以在“代码”视图中手动编辑HTML代码来创建和设置图像热点链接。但是，使用“图像映射”面板可以更方便地创建和设置图像热点链接。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 提供几个网页图像，要求学生为其添加热点链接。 2. 要求学生尝试使用不同的热点形状（如圆形、矩形、多边形）来设置热点链接。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计一个简单的网页，其中包含至少一个图像热点链接。要求热点区域的选择合理，链接目标明确。 1分钟 总结回顾 1. 图像热点链接的概念和作用。 2. 图像热点链接的设置方法，包括选择热点区域、设置链接目标等。 3. 通过实践操作，掌握图像热点链接的应用技巧。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$