《Dreamweaver CS3行为.doc》由会员分享，可在线阅读，更多相关《Dreamweaver CS3行为.doc（30页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS3行为行为概述Dreamweaver CS3提供了丰富的行为，这些行为的设置为网页对象添加一些动态效果和简单的交互功能，为使那些不熟悉JavaScript或VBScript的网页设计师可以方便的设计出通过复杂的JavaScript或VBScript语言才能实现的功能。如果熟悉JavaScript或VBScript还可以编写一些特定的行为来使用。行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为是由对象、事件和动作构成。例如，当用户把鼠标移动至对象上（称：事件），这个对象会发生预定义的变化（称：动作）。对象是产生行为的主体。网页中的很多元素都
2、可以成为对象，例如：整个HTML文档、插入的一个图片、一段文字、一个媒体文件等。对象也是基于成对出现的标签的，在创建时首先选中对象的标签。事件是触发动态效果的条件。网页事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。有的事件还和网页相关，如网页下载完毕，网页切换等。对于同一个对象，不同版本的浏览器支持的事件种类和多少也是不一样的。动作是最终产生的动态效果。动态效果可能是图片的翻转、连接的改变、声音播放等。行为可以附加到整个文档，还可以附加到连接、图象、表单元素或其他HTML元素中的任何一种，用户可以为每个事件指定多个动作。动作按照它们在行为面板的动作列表中列出的
3、顺序发生。注意：不同的显示器支持的行为事件是不一样的。Dreamweaver CS3 内置的基本行为如图所示： Dreamweaver CS3 行为面板使用“行为”面板将行为附加到页元素（更具体地说是附加到标签）并修改以前所附加行为的参数。若要打开“行为”面板，请选择“窗口”“行为”(SHIFT+F3)。“行为”面板如下图所示：已附加到当前所选页元素的行为显示在行为列表中（面板的主区域），按事件以字母顺序排列。如果同一个事件有多个动作，则将以在列表上出现的顺序执行这些动作。如果行为列表中没有显示任何行为，则没有行为附加到当前所选的页元素。设置“行为”面板选项：“行为”面板具有以下选项：显示设置
4、事件仅显示附加到当前文档的那些事件。事件被分别划归到客户端或服务器端类别中。每个类别的事件都包含在一个可折叠的列表中，您可以单击类别名称旁边的加号/减号按钮展开或折叠该列表。“显示设置事件”是默认的视图。显示所有事件按字母降序显示给定类别的所有事件。 添加行为(+)： 是一个弹出菜单，其中包含可以附加到当前所选元素的动作。当从该列表中选择一个动作时，将出现一个对话框，您可以在该对话框中指定该动作的参数。如果所有动作都灰显，则没有所选元素可以生成的事件。删除(-)：从行为列表中删除所选的事件。上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作以特定的顺序执行。选中一个事件
5、或动作可以更改执行的顺序。事件是一个弹出菜单，根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，请检查是否选择了正确的页元素或标签。认识行为事件行为是为响应某一具体事件而采取的一个或多个动作。当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。所以在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。行为是针对网页中的所有对象，要结合一个对象添加行为。每个浏览器都提供一组事件，这些事件可以与“行为”面板的“动作”(+) 弹出菜单中列出的动作相关联。当 Web 页的访问者与页进行交互时（例如，单击某个图像），浏览器生成事件；这些事件可用于调用引起动作发
6、生的 JavaScript 函数。（没有用户交互也可以生成事件，例如设置页每 10 秒钟自动重新载入。）DW CS3 提供许多可以使用这些事件触发的常用动作。根据所选对象和在“显示事件”子菜单中指定的浏览器的不同，显示在“事件”弹出菜单中的事件将有所不同。若要查明对于给定的页元素给定的浏览器支持哪些事件，请在您的文档中插入该页元素并向其附加一个行为，然后查看“行为”面板中的“事件”弹出菜单。如果页上尚不存在相关的对象或所选的对象不能接收事件，则这些事件将禁用（灰显）。如果未显示预期的事件，则检查是否选择了正确的对象，或在“显示事件”弹出菜单中更改目标浏览器。如果要将行为附加到某个图像，则一些事
7、件（例如 onMouseOver）显示在括号中。这些事件仅用于链接。当选择其中之一时，DW CS3 在图像周围使用 a 标签来定义一个空链接。在属性检查器的“链接”文本框中，该空链接表示为 javascript:;。如果要将其变为一个指向另一页的真正链接，您可以更改链接值，但是如果删除了 JavaScript 链接却未用另一个链接来代替它，则将删除该行为。在动作选单中，越是高版本的浏览器支持的动作越多，我们先认识一下它们：行为的使用您可以将行为附加到整个文档（即附加到 body 标签），还可以附加到链接、图像、表单元素或多种其它 HTML 元素中的任何一种。您选择的目标浏览器确定给定的元素支持
8、哪些事件。不能将行为附加到纯文本。诸如 p 和 span等标签不在浏览器中生成事件，因此无法从这些标签触发动作。但是，您可以将行为附加到链接。将行为附加到纯文本，请执行以下操作：在属性检查器的“链接”文本框中输入 javascript:;。一定要包括冒号和分号。 提示：您也可以在“链接”文本框中改用数字符号#。使用数字符号的问题在于当访问者单击该链接时，某些浏览器可能跳到页的顶部。单击“ JavaScript:;” 空链接不会在页上产生任何效果。在文本仍处于选中状态时打开“行为”面板（“窗口”“行为”）。从“动作”弹出菜单中选择一个动作，输入该动作的参数，然后选择一个触发该动作的事件。若要更改
9、链接文本的外观使它看上去不是一个链接，请执行以下操作：选择“查看”-“代码”打开“文档”窗口的“代码”视图。 查找该链接。 在该链接的 a href 标签中，插入以下属性： style=text-decoration:none; color:red。 此属性设置将禁用下划线并将文本的颜色设置为红色。请注意，此属性是一个内联 CSS 样式。应用于单个链接的内联样式覆盖应用于该链接的其它 CSS 样式，但不对该链接外的部分产生任何影响。若要更改页上各处或整个站点中链接文本的外观，请使用 CSS 样式为链接创建一个新的样式。您可以为每个事件指定多个动作。若要附加其它行为，请执行以下操作：在页上选择一
10、个元素，例如一个图像或一个链接。 若要将行为附加到整个页，请在“文档”窗口底部左侧的标签选择器中单击 标签。选择“窗口” -“行为”，打开“行为”面板。单击加号 (+) 按钮并从“动作”弹出菜单中选择一个动作。 菜单中灰显的动作不可选择。它们灰显的原因可能是当前文档中缺少某个所需的对象。例如，如果文档不包含 Shockwave 或 Macromedia Flash SWF 文件，则“控制 Shockwave 或 Flash”动作为灰显。如果所选的对象无可用事件，则所有动作都灰显。当您选择某个动作时，将出现一个对话框，显示该动作的参数和说明。为该动作输入参数，然后单击“确定”。触发该动作的默认事
11、件显示在“事件”栏中。如果这不是需要的触发事件，请从“事件”弹出菜单中选择另一个事件。调用JavaScript“调用 JavaScript”动作允许您使用“行为”面板指定当发生某个事件时应该执行的自定义函数或 JavaScript 代码行。若要使用“调用 JavaScript”动作，请执行以下操作：首先在当前的页面内插入一个按钮，然后选中该按钮。打开“行为”面板。单击加号 (+) 按钮并从“动作”弹出菜单中选择“调用 JavaScript”。如下图：在打开的调用JavaScript 窗口中键入： window.close() 如下图：点击确定退出对话框。并确认其缺省事件值为“OnClick”。
12、保存页面，点F12预览。在这里为了让大家对代码更加熟悉，这时我们可以打开代码视图。我们刚才的操作使文件新添节了一部分代码。如图：转到URL转到 URL”动作在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击更改两个或多个框架的内容。具体制作“转到 URL”动作的操作步骤：在文档中插入一个按钮把名字改为“转到首页”，选择该按钮对象并打开“行为”面板。 单击加号 (+) 按钮并从“动作”弹出菜单中选择“转到 URL”。弹出转到 URL 对话框如下设置：从“打开在”列表中选择 URL 的目标。“打开在”列表自动列出当前框架集中所有框架的名称以及主窗口。如果没有任何框架，则主窗口是唯一
13、的选项。注意：如果任何框架命名为 top、blank、self 或 parent，则此动作可能产生意想不到的结果。浏览器有时将这些名称误认为保留的目标名称。单击“浏览”选择要打开的文档，或在“URL”文本框中输入该文档的路径和文件名。单击“确定”，F12预览。相应的在代码视图中增加的代码，我们可以熟悉一下：交换图像“交换图像”动作通过更改 img 标签的 src 属性将一个图像和另一个图像进行交换。使用此动作创建按钮鼠标经过图像和其它图像效果。插入鼠标经过图像会自动将一个“交换图像”行为添加到您的页中。注意：因为只有 src 属性受此动作的影响，所以您应该换入一个与原图像具有相同尺寸（高度和宽
14、度）的图像。否则.自己试试吧！具体制作步骤：1.选择“插入”-“图像”插入一个图像。选择图像，在属性检查器中，在最左边的文本框中为该图像输入一个名称。本例命名为：img1。如下图：如果您未为图像命名，“交换图像”动作仍将起作用；建议大家学习时将所有插入的图像都预先命名，则在“交换图像”对话框中就更容易区分它们。 2.选择一个对象（通常是您将交换的图像）并打开“行为”面板。3.单击加号 (+) 按钮并从弹出菜单中选择“交换图像”。弹出交换图像对话框如下图：4.从“图像”列表中，选择要更改的源图像。 5.单击“浏览”选择新图像文件，或在“设定源文件为”文本框中输入新图像的路径和文件名。6.选择“预
15、先载入图像”选项在载入页时将新图像载入到浏览器的缓存中。 单击“确定”。点击F12预览。相应的在代码视图中增加的代码，我们可以熟悉一下：打开浏览器窗口使用“打开浏览器窗口”动作在一个在新的窗口中打开指定的URL。您可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。如果不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。指定窗口的任何属性都将自动关闭所有其它未显式打开的属性。例如，如果您不为窗口设置任何属性，它将以 800 x 600 像素的大小打开并具有导航条、地址工具栏、状态栏和菜单栏。如果您将宽度显式设置为 400、将高度设置为 300 并不设置其它属性，则该窗口将以 400 x 300 像素的大小打开，并且不具有任何导航条、地址工具栏、状态栏、菜单栏、调整大小手柄和滚动条。具体制作过程：创建一个按钮对象，选择对象并打开“行为”面板：单击“浏览”选择一个文件，或输入要显示的
