网站建立任务十三网站特效—行为.pptVIP

项目五 美化网页 技能目标 在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果。 能够利用行为创设与众不同的网页效果。 知识目标 理解行为、事件的含义。 熟练掌握行为的添加与删除操作。 掌握触发事件的更换方法。 理解JavaScript脚本的运用。 熟练掌握Dreamweaver CS3 新增加的Spry炫目效果。 5.3.1使用行为制作特效 5.3.2 问题探究—行为与事件 5.3.3 知识拓展—行为的应用 5.3.4 知识拓展—内置行为 工作任务 虽然行为是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。使用行为可以使访问者与网页之间产生一种交互，改变页面或触发任务。Dreamweaver CS3中所有的动作都是经过精心编写的JavaScript，以便适用于尽可能多的浏览器。通过任务中内置行为的灵活运用，增添页面的动感效果。 工作流程 打开指定页面。 选中body标签添加“设置状态栏文本”行为。 继续选中body标签添加“弹出信息”行为。 给指定图片添加“晃动”效果。 继续给指定图片添加“交换图像/恢复交换图像”行为。 选定图片添加“显示/渐隐”效果。 选定图片添加“增大/收缩”效果。 行为与事件 行为(behavior)随着JavaScript技术的发展而得以快速扩张。行为有三个重要组成部分：对象、事件（Event）、动作(Action)，对象是产生行为的主体，许多页面元素或标记都可以成为对象，如图片、文字、多媒体等；事件是触发动态效果的条件，它可以被附加到各种页面元素上，也可以被附加到HTML标记中，任何一个动作都需要一个事件激活，两者相辅相成。 事件和动作 事件 事件是指示访问者执行了何种操作，是触发动作的原因。事件可以与“行为”面板的“动作(+)”弹出菜单中的动作相关联。例如，当访问者将鼠标指针移到某个链接上时，将为该链接生成一个onMouseOver事件；调用JavaScript代码并进行响应。不同的页元素定制了不同的事件， onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和文档的body部分关联的事件。事件针对不同对象分为鼠标事件、键盘事件、表单事件、页面事件四大类。 。 动作 动作是一段预先编写的JavaScrip代码，这些代码执行特定的任务，并提供了最大程度的跨浏览器兼容性，是事件的直接后果。使用Dreamweaver CS3提供的行为控制面板不需要书写任何代码，就可以向页面中添加或修改指定动作，每个动作可以实现特定的任务。 行为面板 Dreamweaver CS3提供了一个专门管理和编辑行为的工具——行为面板，它为用户提供了丰富的行为动作，涉及网页制作各个方面。 在Dreamweaver CS3窗口中选择“窗口/行为”（快捷键Shift+F4），就可以打开行为面板，如图5-53所示。 选择一个行为项后，可以通过单击事件右边的箭头，打开一个菜单，为这个行为动作选择不同的事件，如图5-55所示。 选择目标浏览器的类型 事件有很多种，不同的浏览器所能支持的事件不尽相同。在行为控制面板上单击“+”按钮，在下拉菜单中选择“显示事件”，可以选择目标浏览器的类型，所设置的行为只有在指定的类型浏览器上才能够正常工作，如图5-56所示。 1、行为的应用 添加行为 行为可以附加到整个文档（即附加到body标签），还可以附加到链接、图像、表单元素以及其他任何HTML元素。所选择的目标浏览器将确定对于给定的元素支持哪些事件。Deamweaver中每个事件可以指定多个动作，动作将按其在行为动作列表中的顺序依次发生。 修改行为 在附加了行为之后，如果对添加的行为不满意，可对其进行修改，更改触发动作的事件、添加或删除动作以及更改动作的参数。 将行为附加到文本 不能将行为附加到纯文本上，但可以将行为附加到链接。因此，若要将行为附加到文本，最简单的方法就是向文本添加一个空链接（不指向任何内容），然后将行为附加到该链接上。请注意，如果这样做，文本将显示为链接状态。如果实在不想让它显示为链接，可以更改链接颜色并删除下划线，但这样站点访问者可能不知道可以点击该文本。 JavaScript技术 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，它可以直接嵌套在HTML页面中，运行时不需要单独编译。它通过嵌入或调用在网页中实现动态交互功能，