（中职）网页设计与制作项目四 编辑网页图像 任务三 插入图像对象电子教案

1、（中职）网页设计与制作项目四 编辑网页图像 任务三 插入图像对象电子教案（中职）网页设计与制作项目四 编辑网页图像 任务三 插入图像对象电子教案（中职）网页设计与制作项目四 编辑网页图像 任务三 插入图像对象电子教案任务三 插入图像对象活动一 插入图像占位符课程：网页设计与制作课题: 插入图像占位符教材分析与处理：本项目在前导创建规划站点和设置网页文本格式的基础上，通过在网页中添加图像，美化网页，更充分地想网页浏览者传达电子商务营销理念。本次任务以案例教学学生跟练的方式，使学生理解在网页中插入图像占位符的方法，为学生自己动手设计、制作网页打下基础。教学目标知识与技能目标：了解图像占位符。掌握在

2、Dreamweaver中插入图像占位符的方法。过程与方法目标：通过案例展示，学生动手掌握在网页中插入图像占位符的方法。情感态度与价值观：培养学生善于发现、勤于动脑、乐于动手的学习习惯；激发学生学习网页设计与制作的兴趣；3、培养学生的归纳总结能力。课时：1课时教学重点：了解图像占位符教学难点：掌握在Dreamweaver中插入图像占位符的方法教学过程：教学程序教学内容要点1、导入张精彩的网页往往需要很多精致的图像，但在图像没有设计完成前，能不能先进行网页的布局设计呢？现在很多网页中有精彩的用户交互功能，Dreamweaver中有没有呢？2、新课讲授知识链接一、图像占位符图像占位符是在准备好将最终

3、图形添加到网页之前使用的图形。您可以设置占位符的大小和颜色，并为占位符提供文本标签。图像占位符不在浏览器中显示图像。在您发布站点之前，应该用适用于 Web 的图像文件（例如 GIF 或 JPEG）替换所有添加的图像占位符。必备知识一、插入图像占位符二、替换图像占位符3、学做合一实践任务实例网页在【教学资源包】【配套资源】【4.3.1】文件夹中。【活动实施】用Dreamweaver打开网页index1.html【思考】网页设计中除了文字和图像，还有很多其他元素，比如音乐，动画，视频等，在相关素材没有设计完成情况情况下，如何在页面上进行体现？【练一练】请打开【教学资源包】【配套资源】【4.3.1】

4、文件夹中网页index完成1.html，在“【7】”位置需要放入一个flash动画，该动画预计大小为宽451像素、高502像素，请在这个位置插入一个图像占位符，以便直观查看网页效果。4、课堂小结教师回顾本节知识点总结操作中出现的问题教学反思：活动二 插入鼠标经过图像课程：网页设计与制作课题: 插入鼠标经过图像教材分析与处理：本项目在前导创建规划站点和设置网页文本格式的基础上，通过在网页中添加图像，美化网页，更充分地想网页浏览者传达电子商务营销理念。本次任务以案例教学学生跟练的方式，使学生理解在网页中插入鼠标经过图像的方法，为学生自己动手设计、制作网页打下基础。教学目标知识与技能目标：了解鼠标经

5、过图像。掌握在Dreamweaver中插入鼠标经过图像的方法。过程与方法目标：通过案例展示，学生动手掌握在网页中插入鼠标经过图像的方法。情感态度与价值观：培养学生善于发现、勤于动脑、乐于动手的学习习惯；激发学生学习网页设计与制作的兴趣；3、培养学生的归纳总结能力。课时：1课时教学重点：了解鼠标经过图像教学难点：掌握在Dreamweaver中插入鼠标经过图像的方法教学过程：教学程序教学内容要点1、导入张精彩的网页往往需要很多精致的图像，但在图像没有设计完成前，能不能先进行网页的布局设计呢？现在很多网页中有精彩的用户交互功能，Dreamweaver中有没有呢？2、新课讲授知识链接一、鼠标经过图像您

6、可以在页面中插入鼠标经过图像。鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。必须用以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将调整第二个图像的大小以与第一个图像的属性匹配。鼠标经过图像自动设置为响应onMouseOver事件。您可以将图像设置为响应不同的事件（例如，鼠标单击）或更改鼠标经过图像。二、在 Dreamweaver 文档中插入 Fireworks HTML 代码在 Fireworks 中，可以使用“导出”命令

7、将优化后的图像和 HTML 文件导出并保存到 Dreamweaver 站点文件夹下的某个位置。然后，可以在 Dreamweaver 中插入该文件。Dreamweaver 允许您将 Fireworks 生成的 HTML 代码连同相关图像、切片和 JavaScript 一起插入到文档中。具体操作如下。必备知识一、创建鼠标经过图像3、学做合一实践任务实例网页在【教学资源包】【配套资源】【4.3.2】文件夹中。【活动实施】用Dreamweaver打开网页“index完成2.html”【思考】在插入鼠标经过图像对话框中，如果原始图像和图标经过图像大小不一样大，会产生什么效果？【练一练】同样方法设置上面实例文件中其他5个菜单效果，具体参数，“蔬果品种”：原始图像“images024.png”、鼠标经过图像“images025.png”、替换文本“蔬果品种”。 “价格行情”：原始图像“images026.png”、鼠标经过图像“images027.png”、替换文本“价格行情”。 “有机蔬果”：原始图像“images028.png”、鼠标经过图像“images029.png”、替换文本“有机蔬果”。 “礼盒套餐”：原始图像“images030.png”、鼠标经过图像“images031.png”、替换文本“礼盒套餐”。 “行情资讯”：原