第11章节 行 为.ppt

第11章 行 为 第11章 行 为 对于设计者来说，不写程序就能够制作出交互能力强的网页，是一直以来追求的目标之一。Dreamweaver中的行为恰好能够满足这个要求。行为是Dreamweaver中一个非常有特色的功能，它的使用可以使用户不需要手工编写代码，就可以设计出具有相当的交互功能和动态效果的页面。在本章中，主要介绍行为的基本概念，各种行为的特点以及使用技巧。 11.1 行为概述 通过行为技术可以实现弹出信息、打开窗口、产生动态效果、用鼠标指向某对象时播放音乐等奇妙的效果。行为的核心思想是：利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能，使那些不熟悉各种脚本语言的设计者，可以方便的设计出以往需要通过复杂的脚本代码才能实现的功能。 11.1 行为概述 11.1.1 行为的基本概念 行为是指在网页中运行的一系列动作，行为将JavaScript代码放在文档中以允许访问者与Web页进行交互，通过用户的操作引起某个任务的执行。行为的实质是内置在Dreamweaver中的JavaScript函数库。表现为用户可以通过各种行为，与网页进行交互，或者能够通过特定的动作执行某个任务。 11.1 行为概述 实际上，所有行为的HTML代码都是一个函数。例如，下面就是一个弹出信息的行为代码： script type=text/JavaScript !-- function MM_popupMsg(msg) { //v1.0 alert(msg); } //-- /script 11.1 行为概述 11.1.2 行为的构成要素 在Dreamweaver中，行为(behavior)是事件(event)和动作(action)的组合。这就相当于把行为看做一个因果关系，其中事件是触发器，是产生动作的原因，而动作是最终产生的结果。这里的事件包括很多情况，例如单击鼠标，单击按钮，关闭窗口，复制图片等等。对于不同的对象，所对应的事件有所不同。选定一个事件，再选择当该事件触发时发生的动作(如弹出信息、发出声音、调用函数等等)，这样就形成了一个完整的行为。 11.1 行为概述 事件的产生有两种：用户触发和系统触发。用户操作会触发事件并产生动作；有时候系统会定时触发事件而产生动作。一个事件可以与一个动作相关联，也可以与许多动作相关联，即一个事件会触发很多动作，这时，还需要指定这些动作的发生顺序，以达到预期的要求。 11.2 行为面板 11.2.1 打开行为面板 可以使用主菜单中【窗口】|【行为】命令打开行为面板。 行为面板如图11.1所示。 行为面板上的有关元素说明如下： ◆ (添加行为)：单击该按钮会弹出“添加行为”菜单，如图11.2所示。其中包含可以附加在当前所选元素上的可用动作列表(在行为面板的上方会显示出当前所选元素的标签，如图11.1中的body标签)。当从此列表中选择某个动作时，会出现一个对话框，可以在其中指定该动作的参数。 11.2 行为面板 在菜单下方有【显示事件】命令。Dreamweaver把浏览器适配类型加在该菜单中，需要选择浏览器类型时，打开该子菜单，如图11.3所示。选择不同的浏览器类型，能支持的事件种类和数量也会不同。浏览器版本越高。所能支持的事件种类也越多。用户可根据自身情况选择浏览器版本。如果未显示预期的事件，则可以查看是否是由于选择了较低版本的浏览器造成的。 ◆ (删除行为)：选中一个现有行为，点击该按钮可以把相应的行为删除。 11.2 行为面板 ◆ (显示设置事件)：单击该按钮，在事件列表中只显示已设置的事件内容。 ◆ (显示所有事件)：单击该按钮，在事件列表中显示所有事件内容。 ◆ (行为上下移动按钮)：用来调整行为面板中已有行为的顺序。 ◆ (行为编辑菜单按钮)：点击该按钮可以打开行为编辑菜单，对行为中相关属性以及行为面板进行编辑。 ◆ 事件列表：显示当前行为的触发事件或所有事件。与显示事件的设置有关。 ◆ 动作列表：显示所选元素上的行为最终产生的动作。 11.2 行为面板 11.2.2 标准行为事件 不同的浏览器支持的事件类型是不同的，浏览器版本越高支持的事件类型越多，所以设计带有行为的网页之前，要充分考虑到浏览者的浏览器版本和类型。在设计的过程中，如果选择高版本的浏览器，如IE6.0，则所有的事件都是可用的。以下是一些常用事件。 11.2 行为面板 1．鼠标类事件 ① onClick：鼠标单击页面元素时触发。支持IE3、Netscape3及其以上版本。 ② onDblClick：鼠标双击页面元素时触发。支持IE4、Netscape4及其以上版本。 ③ onMouseDown：按下鼠标左键触发该事件。支持IE4、Netscape4及其以上版本。 ④ onMouseMove：