2.1.5-Dreamweaver CS5载入“跟踪图像”（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5载入“跟踪图像” 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解跟踪图像的概念和作用 · 学会在Dreamweaver CS5中载入跟踪图像 · 掌握跟踪图像的设置和应用方法 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 跟踪图像的概念和作用 2. 在Dreamweaver CS5中载入跟踪图像的方法 3. 跟踪图像的设置和应用技巧 教学难点 1. 跟踪图像与背景图像的区别 2. 如何根据实际需求选择合适的跟踪图像 3. 跟踪图像的设置方法和技巧 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析典型实例，引导学生理解跟踪图像的概念和作用。 2. 实践操作法：通过动手实践，让学生掌握在Dreamweaver CS5中载入跟踪图像的方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 简要介绍网页设计中的图像应用，包括背景图像和跟踪图像。 2. 提出问题：什么是跟踪图像？它在网页设计中的作用是什么？ 2分钟 讲授新课 练习指导 跟踪图像是Dreamweaver的一个功能，它允许用户在网页中将原来的平面设计稿作为辅助的背景。这样，用户可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置。 具体使用跟踪图像的步骤如下： 1. 使用绘图软件制作一个想象中的网页排版格局图。 2. 将此图保存为网络图像格式（包括gif、jpg、jpeg和png）。 3. 用Dreamweaver打开所编辑的网页，在菜单中选择“修改>页面属性”。 4. 在弹出的对话框中的“跟踪图像”项中输入刚才创建的网页排版格局图所在位置。 5. 在图像透明度中设定跟踪图像的透明度。 使用跟踪图像的网页在用Dreamweaver编辑时不会显示背景图案，但当使用浏览器浏览时，跟踪图像会消失，所见的就是经过编辑的网页（当然能够显示背景图案）。 在Dreamweaver CS5中载入跟踪图像的方法如下： 1. 打开Dreamweaver CS5，创建或打开一个HTML文档。 2. 在“属性”面板中，找到“跟踪图像”部分。 3. 点击“跟踪图像”按钮，选择要载入的跟踪图像文件。 4. 在“属性”面板中，您可以看到跟踪图像的相关设置。 跟踪图像的设置和应用方法： 1. 透明度：设置跟踪图像的透明度，范围为0%（完全透明）到100%（完全不透明）。您可以通过拖动滑块或直接输入百分比值来调整透明度。 2. 重复：设置跟踪图像的重复方式。有以下几种选项： - 默认：跟踪图像将在水平和垂直方向上重复。 - 水平：跟踪图像仅在水平方向上重复。 - 垂直：跟踪图像仅在垂直方向上重复。 - 不重复：跟踪图像不重复。 3. 位置：设置跟踪图像的位置。有以下几种选项： - 左上角：跟踪图像位于页面的左上角。 - 右上角：跟踪图像位于页面的右上角。 - 左下角：跟踪图像位于页面的左下角。 - 右下角：跟踪图像位于页面的右下角。 - 居中：跟踪图像位于页面的中心。 4. 偏移量：设置跟踪图像的水平和垂直偏移量。您可以通过输入像素值来调整偏移量。 在设置跟踪图像后，您可以在Dreamweaver CS5的设计模式下查看效果。请注意，跟踪图像仅在Dreamweaver CS5的设计模式下可见，在实际浏览器中查看时，跟踪图像将不会显示。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中创建一个新文档，然后尝试载入一张跟踪图像。 2. 分析跟踪图像与背景图像的区别，并说明它们在网页设计中的应用场景。 3. 为一个简单的网页设计项目选择合适的跟踪图像，并进行设置和应用。 12分钟 布置作业 1. 完成课后习题练习，巩固所学知识。 2. 设计一个简单的网页，要求使用跟踪图像，并在班级展示作品。 1分钟 总结回顾 1. 跟踪图像的概念和作用：跟踪图像是一种特殊的背景图像，它可以随着鼠标指针的移动而移动，增强网页的交互性和视觉效果。 2. 在Dreamweaver CS5中载入跟踪图像的方法