边用边学Dreamweaver网页设计与制作教学课件 作者 李彪 杨仁毅 第12章.pptVIP

边学边用Dreamweaver CS4网页制作 教师： 职务： ——教育部实用型信息技术人才培养系列教材 第12章 使用行为制作网页特效 学习目标： Dreamweaver能够在众多的同类软件中赢得一席之地，主要归功于它提供了完全开放的插件环境及创造出令人耳目一新的网页特效。本章主要向读者介绍了Dreamweaver CS4中的行为，希望读者通过本章内容的学习，能够理解行为的概念、掌握内置行为的使用等知识。学习并掌握本章中所讲述的内容，对于制作网页中的特效是非常有用的。 第12章 使用行为制作网页特效 本章知识点： 行为的概念 使用行为面板 内置行为的使用 在网页中放大图像 制作汽车网站弹出广告 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 第12章 使用行为制作网页特效 * 12.1 行为的概念 行为由JavaScript函数和事件处理程序组成，JavaScript函数在Dremaweaver中作为动作，所有动作都响应事件。Dreamweaver中的行为是将JavaScript代码放置在文档中，以允许访问者与Web页进行交互，从而以多种方式更改页面或引起某些任务的执行。 行为是事件和触发该事件的动作组成。在“行为”面板中，可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中。 12.2 使用行为面板 在Dreamweaver CS4中，对行为的添加和控制主要通过“行为”面板来实现。执行“窗口→行为”命令，打开“行为”面板。也可以按下“Shift+F4”组合键打开“行为”面板。 12.3 内置行为的使用 12.3.1 交换图像 “交换图像”动作用于改变img标签的src属性，即用另一张图像替换当前的图像。使用这个动作可以创建按钮变换和其他图像效果（包括一次变换多幅图像）。 因为这个动作只影响到src属性，所以变换图像的尺寸应该一致（高度和宽度与初始图像相同），否则交换的图像显示时会被压缩或扩展。 12.3.2 恢复交换图像 “恢复交换图像”动作，指当鼠标指针移出对象区域后，所有被替换显示的图像恢复为原始图像。一般在设置替换图像的动作时，会自动添加替换图像恢复动作。如果在附加“交换图像”时选择了“恢复”选项，则就不需要手动选择“恢复交换图像”动作。 12.3.3 打开浏览器窗口 使用“打开浏览器窗口”动作在一个新的窗口中打开URL。可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。例如，用户可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像；使用此行为，可以使新窗口与该图像恰好一样大。 12.3.4 调用JavaScript 调用JavaScript动作允许使用“行为”面板指定发生某个事件时，应该执行的自定义或JavaScript代码行，可以自己编写或使用Web上免费的代码库提供的JavaScript代码。 12.3.5 转到URL “转到URL”，可以设置在指定的框架中或在当前的浏览窗口中载入指定的页面。此操作尤其适用于通过一次单击更改两个或多个框架的内容。 12.3.6 设置文本 1．设置文本域文字 2．设置框架文本 3．设置状态栏文本 12.4 应用实践 任务1——在网页中放大图像 本例中通过交换图像行为功能，制作当鼠标经过图像时在大图像区域显示大图像，完成后的效果如下图所示。 12.4 应用实践 任务2——制作汽车网站弹出广告 本实例在设计制作时，首先将将广告页面制作出来，为了使广告页面的美观，这需要应用外部图像编辑器来编辑，然后打开“爱车网”的首页，为其添加“打开浏览器窗口”动作，为了在“爱车网”的首页打开后立即弹出广告，最后还需要选择“onLoad”事件。完成后的效果如下图所示。 12.5 知识拓展 12.5.1 行为参数的修改 在Dreamweaver中在页面中附加了行为后，用户可以更改触发动作的事件、更改动作的参数以及添加或删除动作。 12.5.2 行为排序 在Dreamweaver中，多个行为是以按事件的字母顺序显示在面板上的。如果同一个事件有多个动作，则以执行的顺序显示这些动作。 12.5.3 删除行为 在行为过多或者用户认为某些行为已经不需要时，可以对其进行删除。 * *