中文版 Dreamweaver CS6网页设计教程 第7章方案.ppt

第7章 行为的使用 本章主要内容 使用“行为”面板。 使用内置的行为。 下载和安装扩展行为。 本章重点 如何使用“行为”面板。 使用内置的行为的方法。 7.1 行为的基础 行为指的是设计者运用制作动态网页的 JavaScript 功能，并将其放置在网页文档中，以允许浏览器与网页本身进行交互，从而以多种方式更改网页或引起某些任务的执行。如果想运用行为，那么首先要选择运用行为的对象，即客体，然后决定要发生的动作，还要设置动作在何种情况下发生，即事件。行为是事件和由该事件触发的动作的组合体。 7.1.1 动作 动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定任务，例如打开浏览器窗口、显示或隐藏层等。Dreamweaver CS6中提供的动作是由 Dreamweaver 工程师精心编写的，提供了最大的跨浏览器兼容性。通过 Dreamweaver CS6中的“行为”面板可直接将代码加入页面中。 7.1.2 事件 事件是由浏览器生成的消息，指示该页的浏览者执行了某种操作。例如，当浏览者将鼠标指针移动到某一个链接时，浏览器为该链接生成一个onMouseOver 事件(鼠标滑过)，然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的 JavaScript 代码(这些代码是在被查看的页面中指定的)。不同的网页元素定义了不同的事件，例如，在大多数浏览器中，onMouseOver(鼠标滑过)和onClick(鼠标单击)是与链接关联的事件，而 onLoad(页面载入)是与图像和文档的主体部分关联的事件。 7.2 使用“行为”面板 上节介绍了各个事件的内容和实际意义，本节介绍如何将这些事件同动作关联起来，并执行一定的任务。 7.2.1 “行为”面板简介 “行为”面板是添加和控制行为的主要途径，使用“行为”面板可以为页面元素附加行为并修改所附加行为的参数。 如果要打开“行为”面板，则可以选择菜单中的“窗口”|“行为”命令，如图7-1所示为Dreamweaver CS6中的“行为”面板。 7.2.2 附加行为 在 Dreamweaver CS6中，可以将行为附加给整个文档、链接对象、图像、表单或其他对象，并由浏览器决定哪些对象可以接受行为，哪些对象不能接受行为。为对象附加行为时，可以一次为每个事件关联多个动作。多个动作的执行按照在“行为”面板的列表中的顺序执行。 为对象附加行为的具体操作步骤如下。 (1) 在文档窗口中选择要附加行为的对象，例如图像或层等。 (2) 在“行为”面板中单击按钮，从打开的下拉列表中选择一个动作。 (3) 在选择动作之后，会弹出一个参数设置对话框，设置完成后单击“确定”按钮。 (4) 这时在“行为”面板的列表中将显示添加的事件及对应的动作，如果该事件不是希望的事件，则可单击“事件”列表旁边的按钮，打开“事件”下拉列表，从中选择一个需要的事件。 7.2.3 为附加行为选择触发事件 在“行为”列表中选择一个行为，单击“事件”名称右侧的倒三角按钮，打开一个列表，列表中列出了所选行为所有可以使用的触发事件，用户可以根据网页的实际需要情况来进行选择，如图7-3所示。 在“行为”面板中，用户还可以设置事件的显示方式，观察面板左上角的两个按钮，即和按钮，它们分别表示“显示设置事件”和“显示所有事件”。 7.2.4 设置浏览器版本 选择菜单中的“显示事件”命令，在弹出的下一级菜单中可以选择浏览器的版本。不同的浏览器版本对应着不同的行为项目，以及该项目中可以触发的事件的数目。 浏览器版本越高，可以使用的功能就越多，但是兼容性就越差。网页是要给他人去浏览的，作为一个设计者，必须要考虑到浏览者之间可能存在的、不同的上网条件的差异，因此为了能够得到更好的兼容性，浏览器版本不要设得太高，如图7-3所示。 7.3 使用内置的行为 Dreamweaver CS6提供的JavaScript代码可以在Netscape 4和IE4.0及其更新的版本中使用。如果使用4.0以前的版本，就有可能出现错误，可查阅相关的资料了解浏览器的兼容性。目前最新的浏览器版本已经升级到了IE10，因此不必在意兼容性的问题。 Dreamweaver CS6中内置了20多种行为，如图7-2所示的“添加行为”下拉列表，这些行为基本上可以满足页面设计的需要。下面就结合丰富的实例对这些行为进行剖析。 7.3.1 “效果”行为 使用“效果”行为的操作步骤如下。 (1) 选择对象并打开“行为”面板。 (2) 单击按钮，从其下拉列表中选择“效果”选项，“效果”选项中有许多行为，如图7-4所示。 (3) 在列表中选择所需的效果并进行相就设置。 (4) 单击“确定”按钮，选择适当的事件。 7.3.2 “打开浏览器窗口”行为 使用“打开浏