1、2,第7章 行为的使用,本章主要内容使用“行为”面板。使用内置的行为。下载和安装扩展行为。本章重点如何使用“行为”面板。使用内置的行为的方法。,3,7.1 行为的基础,行为指的是设计者运用制作动态网页的 JavaScript 功能，并将其放置在网页文档中，以允许浏览器与网页本身进行交互，从而以多种方式更改网页或引起某些任务的执行。如果想运用行为，那么首先要选择运用行为的对象，即客体，然后决定要发生的动作，还要设置动作在何种情况下发生，即事件。行为是事件和由该事件触发的动作的组合体。,4,7.1.1 动作,动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定任务，例如打开浏览器
2、窗口、显示或隐藏层等。Dreamweaver CS6中提供的动作是由 Dreamweaver 工程师精心编写的，提供了最大的跨浏览器兼容性。通过 Dreamweaver CS6中的“行为”面板可直接将代码加入页面中。,5,7.1.2 事件,事件是由浏览器生成的消息，指示该页的浏览者执行了某种操作。例如，当浏览者将鼠标指针移动到某一个链接时，浏览器为该链接生成一个onMouseOver 事件(鼠标滑过)，然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的 JavaScript 代码(这些代码是在被查看的页面中指定的)。不同的网页元素定义了不同的事件，例如，在大多数浏览器中，onMous
3、eOver(鼠标滑过)和onClick(鼠标单击)是与链接关联的事件，而 onLoad(页面载入)是与图像和文档的主体部分关联的事件。,6,7.2 使用“行为”面板,上节介绍了各个事件的内容和实际意义，本节介绍如何将这些事件同动作关联起来，并执行一定的任务。,7,7.2.1 “行为”面板简介,“行为”面板是添加和控制行为的主要途径，使用“行为”面板可以为页面元素附加行为并修改所附加行为的参数。如果要打开“行为”面板，则可以选择菜单中的“窗口”|“行为”命令，如图7-1所示为Dreamweaver CS6中的“行为”面板。,8,7.2.2 附加行为,在 Dreamweaver CS6中，可以将行
4、为附加给整个文档、链接对象、图像、表单或其他对象，并由浏览器决定哪些对象可以接受行为，哪些对象不能接受行为。为对象附加行为时，可以一次为每个事件关联多个动作。多个动作的执行按照在“行为”面板的列表中的顺序执行。 为对象附加行为的具体操作步骤如下。 (1)在文档窗口中选择要附加行为的对象，例如图像或层等。 (2)在“行为”面板中单击按钮，从打开的下拉列表中选择一个动作。 (3)在选择动作之后，会弹出一个参数设置对话框，设置完成后单击“确定”按钮。 (4)这时在“行为”面板的列表中将显示添加的事件及对应的动作，如果该事件不是希望的事件，则可单击“事件”列表旁边的按钮，打开“事件”下拉列表，从中选择
5、一个需要的事件。,9,7.2.3 为附加行为选择触发事件,在“行为”列表中选择一个行为，单击“事件”名称右侧的倒三角按钮，打开一个列表，列表中列出了所选行为所有可以使用的触发事件，用户可以根据网页的实际需要情况来进行选择，如图7-3所示。在“行为”面板中，用户还可以设置事件的显示方式，观察面板左上角的两个按钮，即和按钮，它们分别表示“显示设置事件”和“显示所有事件”。,10,7.2.4 设置浏览器版本,选择菜单中的“显示事件”命令，在弹出的下一级菜单中可以选择浏览器的版本。不同的浏览器版本对应着不同的行为项目，以及该项目中可以触发的事件的数目。浏览器版本越高，可以使用的功能就越多，但是兼容性就
6、越差。网页是要给他人去浏览的，作为一个设计者，必须要考虑到浏览者之间可能存在的、不同的上网条件的差异，因此为了能够得到更好的兼容性，浏览器版本不要设得太高，如图7-3所示。,11,7.3 使用内置的行为,Dreamweaver CS6提供的JavaScript代码可以在Netscape 4和IE4.0及其更新的版本中使用。如果使用4.0以前的版本，就有可能出现错误，可查阅相关的资料了解浏览器的兼容性。目前最新的浏览器版本已经升级到了IE10，因此不必在意兼容性的问题。Dreamweaver CS6中内置了20多种行为，如图7-2所示的“添加行为”下拉列表，这些行为基本上可以满足页面设计的需要。
7、下面就结合丰富的实例对这些行为进行剖析。,12,7.3.1 “效果”行为,使用“效果”行为的操作步骤如下。(1)选择对象并打开“行为”面板。(2)单击按钮，从其下拉列表中选择“效果”选项，“效果”选项中有许多行为，如图7-4所示。(3)在列表中选择所需的效果并进行相就设置。(4)单击“确定”按钮，选择适当的事件。,13,7.3.2 “打开浏览器窗口”行为,使用“打开浏览器窗口”行为的具体操作步骤如下。(1)选择对象并打开“行为”面板。(2)单击按钮并在其下拉列表中选择“打开浏览器窗口”选项，打开如图7-12所示的对话框。(3)单击“浏览”按钮选取要打开的文件，或者在“要显示的URL”文本框中输
8、入需要显示的URL。,14,7.3.2 “打开浏览器窗口”行为,(4)继续在对话框中设置下列选项。窗口宽度：指定窗口的宽度，以像素为单位。窗口高度：指定窗口的高度，以像素为单位。导航工具栏：包括前进、后退、主页和刷新等浏览器按钮。菜单条：包括文件、编辑、查看、转到、帮助等。如果不选择该选项，用户在新窗口中将只能关闭或最小化窗口。地址工具栏：包括地址域的浏览器选项。需要时使用滚动条：如果内容超过可见区域，则滚动条自动出现。如果不选择该选项，则滚动条不会出现。如果“调整大小手柄”选项也被关闭，则无法显示超出窗口范围的内容。状态栏：浏览器窗口底部的区域，用于显示信息。调整大小手柄：指定用户是否可以调
9、整窗口大小。窗口名称：设置新窗口的名称。(5)完成设置后单击“确定”按钮。(6)选择适当的事件。,15,7.3.3 “弹出信息”行为,使用“弹出信息”行为将显示JavaScript警告和一个“确定”按钮。使用“弹出信息”动作的具体操作步骤如下。(1)选择对象并打开“行为”面板。(2)单击按钮并从其下拉列表中选择“弹出信息”选项，打开如图7-13所示的对话框。(3)在“消息”文本框中输入JavaScript警告显示的信息。(4)设置完成后单击“确定”按钮。(5)在“行为”面板上的事件下拉列表中选择适当的事件。,16,7.3.4 “调用JavaScript”行为,“调用JavaScript”行为可
10、以指定当事件发生时要执行的函数或者JavaScript代码。使用“调用JavaScript”行为的具体操作步骤如下。(1)选取对象并打开“行为”面板。(2)单击按钮并从其下拉列表中选择“调用JavaScript”选项，打开如图7-14所示的对话框。(3)在JavaScript文本框中输入要执行的自定义函数名称或者JavaScript代码。如果已经将代码封装为函数，则只需要输入函数名称即可。(4)单击“确定”按钮，给选取的对象调用函数。(5)选择适当的事件触发“调用JavaScript”动作。,17,7.3.5 “改变属性”行为,使用“改变属性”行为可以更改页面元素的属性。所能修改的属性取决于所
11、使用的浏览器，在IE4.0及以上版本中可以更改的属性比较多。使用该行为的具体操作步骤如下。(1)将光标放在文档中并打开“行为”面板。(2)单击“行为”面板上的按钮并从其下拉列表中选择“改变属性”选项。打开如图7-15所示的对话框。,18,7.3.5 “改变属性”行为,(3)在“改变属性”对话框可中对下列选项进行设置。元素类型：选择要改变属性的对象类型。元素ID：列出所选择类型的已命名对象。 选择：在其右侧的下拉列表框中选择属性名称。输入：在该文本框中输入要改变的属性名称。新的值：输入对象的新值。(4)单击“确定”按钮。(5)在“行为”面板中为触发动作选择适当的事件。,19,7.3.6 “检查表
12、单”行为,使用“检查表单”行为的具体操作步骤如下。(1)在文档中插入表单和文本域。(2)执行下列步骤之一。如果要在用户填写表单时验证单个文本域，则选取一个文本域，打开“行为”面板。如果要在用户提交表单时验证多个文本域，则单击文档窗口左下角标签选择器中的标签并打开“行为”面板。(3)从“添加行为”下拉列表中选择“检查表单”选项，打开如图7-16所示的对话框。(4)重复以上操作检查其他的文本域。(5)单击“确定”按钮，在“行为”面板中选择适当的事件。,20,7.3.7 “检查插件”行为,使用“检查插件”行为可以根据用户的浏览器是否安装了指定插件来将它们导向到不同的页面。例如，可能需要将安装有Fla
13、sh的用户引导向一个页面，而没有安装的用户引导到另一个页面。使用该行为的具体操作步骤如下。(1)选择对象并打开“行为”面板。(2)单击“行为”面板上的按钮并从其下拉列表中选择“检查插件”选项，打开如图7-17所示的对话框。(3)单击“确定”按钮。(4)选择适当的事件。,21,7.3.8 “预先载入图像”行为,使用“预先载入图像”行为将那些暂时不出现在页面上的图像加载到浏览器缓存中，以增进显示的速度和效果。使用该行为的具体操作步骤如下。(1)选择对象并打开“行为”面板。(2)从“添加行为”下拉列表中选择“预先载入图像”选项，打开如图7-18所示的对话框。(3)在“预先载入图像”对话框中可进行如下
14、操作。单击对话框顶部的按钮向“预先载入图像”列表中添加图像。单击“浏览”按钮，选取要预先加载的图像文件，或者在“图像源文件”文本框中输入图像的路径和名称。(4)设置完成后，单击“确定”按钮。(5)在“行为”面板中选择适当的事件。,22,7.3.9 “交换图像”行为,“交换图像”行为通过改变img标签的src属性来将一幅图像替换为另外一幅，使用该行为可以创建交换图像和其他图像效果。 使用“交换图像”行为的具体操作步骤如下。(1)在文档中插入图像。(2)在图像“属性”面板上为图像指定名称。(3)选取对象并打开“行为”面板，单击按钮并从其下拉列表中选择“交换图像”选项，打开如图7-19所示的对话框。
15、(4)设置完成后单击“确定”按钮。(5)在“行为”面板中选择适当的事件。(6)使用同样的方法，设置其他的交换图像。,23,7.3.10 “恢复交换图像”行为,“交换图像”和“恢复交换图像”经常是成对出现的，这样就省去了使用人工恢复交换图像的工作。单击“行为”面板上的按钮，并从其下拉列表中选择“恢复交换图像”选项，打开如图7-20所示的对话框。单击对话框中的“确定”按钮，即可恢复交换图像。,24,7.3.11 “显示-隐藏元素”行为,使用“显示-隐藏元素”行为可以进行显示或者隐藏所选择的元素操作。使用该行为的具体操作步骤如下。(1)在文档中选择元素。(2)打开“行为”面板，单击按钮并从其下拉列表
16、中选择“显示-隐藏元素”选项，打开图7-21所示的对话框。(3)设置完成后，单击“确定”按钮。(4)选择适当的事件触发该动作。,25,7.3.12 “设置文本”行为,使用Dreamweaver CS6内置的“设置文本”行为可以动态地设置层、框架、文本域以及状态栏的文本。“设置文本”行为包括“设置容器文本”、“设置框架文本”、“设置文本域文字”、“设置状态栏文本”等四个行为，它们的使用方法很相似，下面就以“设置状态栏文本”行为为例，介绍“设置文本”行为的使用方法，具体操作步骤如下。(1)在页面中绘制层，然后打开“行为”面板。(2)单击按钮并从其下拉列表中选择“设置文本”|“设置状态栏文本”选项，
17、打开如图7-22所示的对话框。(3)在“消息”文本框中输入相应的信息。(4)设置完成后，单击“确定”按钮。,26,7.3.13 “转到URL”行为,使用“转到URL”行为可以在当前窗口或指定窗口中打开一个URL地址。使用该行为的操作步骤如下。(1)选择对象，打开“行为”面板，单击按钮并从其下拉列表中选择“转到URL”选项，打开如图7-23所示的对话框。(2)设置完成后单击“确定”按钮，在“行为”面板中选择适当的事件触发该动作。,27,7.4 下载和安装扩展行为,可扩展性是Dreamweaver CS6的特性之一，在Macromedia Exchange站点中有很丰富的JavaScript代码资源，用户可以下载有用的扩展资源，扩展Dreamweaver CS6的设计能力。下面是下载和安装扩展行为的操作步骤。(1)打开“行为”面板，单击按钮，从其下拉列表中选择“获取更多行为”选项，连接到Macromedia Exchange站点。(2)搜索并下载有用的扩展资源。(3)使用Macromedia扩展管理器安装和管理这些扩展资源。(4)重新启动Dreamweaver CS6，然后就可以使用扩展的功能得心应手地进行设计了。,28,7.5 课 后 习 题,一、选择题二、填空题三、上机题 参见教材P160,
