DreamweaverCS3行为.docx

DreamweaverCS3行为.docx

《DreamweaverCS3行为.docx》由会员分享，可在线阅读，更多相关《DreamweaverCS3行为.docx（28页珍藏版）》请在冰豆网上搜索。

DreamweaverCS3行为

DreamweaverCS3行为

　　行为概述

　　DreamweaverCS3提供了丰硕的行为，这些行为的设置为网页对象添加一些动态成效和简单的交互功能，为使那些不熟悉JavaScript或VBScript的网页设计师能够方便的设计出通过复杂的JavaScript或VBScript语言才能实现的功能。

若是熟悉JavaScript或VBScript还能够编写一些特定的行为来利用。

行为是用来动态响应用户操作、改变当前页面成效或是执行特定任务的一种方式。

行为是由对象、事件和动作组成。

例如，当用户把鼠标移动至对象上（称：

事件），那个对象会发生预概念的转变（称：

动作）。

　　对象是产生行为的主体。

网页中的很多元素都能够成为对象，例如：

整个HTML文档、插入的一个图片、一段文字、一个媒体文件等。

对象也是基于成对显现的标签的，在创建时第一选中对象的标签。

　　事件是触发动态成效的条件。

网页事件分为不同的种类。

有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。

有的事件还和网页相关，如网页下载完毕，网页切换等。

关于同一个对象，不同版本的阅读器支持的事件种类和多少也是不一样的。

　　动作是最终产生的动态成效。

动态成效可能是图片的翻转、连接的改变、声音播放等。

　　行为能够附加到整个文档，还能够附加到连接、图象、表单元素或其他HTML元素中的任何一种，用户能够为每一个事件指定多个动作。

动作依照它们在行为面板的动作列表中列出的顺序发生。

注意：

不同的显示器支持的行为事件是不一样的。

DreamweaverCS3内置的大体行为如下图：

　　DreamweaverCS3行为面板

　　利用“行为”面板将行为附加到页元素（更具体地说是附加到标签）并修改以前所附加行为的参数。

　　假设要打开“行为”面板，请选择“窗口”>“行为”（SHIFT+F3）。

“行为”面板如以下图所示：

　　已附加到当前所选页元素的行为显示在行为列表中（面板的主区域），按事件以字母顺序排列。

若是同一个事件有多个动作，那么将以在列表上显现的顺序执行这些动作。

若是行为列表中没有显示任何行为，那么没有行为附加到当前所选的页元素。

　　设置“行为”面板选项：

“行为”面板具有以下选项：

　　显示设置事件仅显示附加到当前文档的那些事件。

事件被别离划归到客户端或效劳器端类别中。

每一个类别的事件都包括在一个可折叠的列表中，您能够单击类别名称隔壁的加号/减号按钮展开或折叠该列表。

“显示设置事件”是默许的视图。

　　显示所有事件按字母降序显示给定类别的所有事件。

　　添加行为（+）：

是一个弹出菜单，其中包括能够附加到当前所选元素的动作。

当从该列表当选择一个动作时，将显现一个对话框，您能够在该对话框中指定该动作的参数。

若是所有动作都灰显，那么没有所选元素能够生成的事件。

　　删除（-）：

从行为列表中删除所选的事件。

　　上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。

给定事件的动作以特定的顺序执行。

选中一个事件或动作能够更改执行的顺序。

　　事件是一个弹出菜单，依照所选对象的不同，显示的事件也有所不同。

若是未显示预期的事件，请检查是不是选择了正确的页元素或标签。

熟悉行为事件

　　行为是为响应某一具体事件而采取的一个或多个动作。

当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。

因此在创建行为时，必需先指定一个动作，然后再指定触发动作的事件。

行为是针对网页中的所有对象，要结合一个对象添加行为。

　　每一个阅读器都提供一组事件，这些事件能够与“行为”面板的“动作”（+）弹出菜单中列出的动作相关联。

当Web页的访问者与页进行交互时（例如，单击某个图像），阅读器生成事件；这些事件可用于挪用引发动作发生的JavaScript函数。

（没有效户交互也能够生成事件，例如设置页每10秒钟自动从头载入。

）DWCS3提供许多能够利用这些事件触发的经常使用动作。

　　依照所选对象和在“显示事件”子菜单中指定的阅读器的不同，显示在“事件”弹出菜单中的事件将有所不同。

假设要查明关于给定的页元素给定的阅读器支持哪些事件，请在您的文档中插入该页元素并向其附加一个行为，然后查看“行为”面板中的“事件”弹出菜单。

若是页上尚不存在相关的对象或所选的对象不能接收事件，那么这些事件将禁用（灰显）。

若是未显示预期的事件，那么检查是不是选择了正确的对象，或在“显示事件”弹出菜单中更改目标阅读器。

　　若是要将行为附加到某个图像，那么一些事件（例如onMouseOver）显示在括号中。

这些事件仅用于链接。

被选择其中之一时，DWCS3在图像周围利用a标签来概念一个空链接。

在属性检查器的“链接”文本框中，该空链接表示为javascript:

;。

若是要将其变成一个指向另一页的真正链接，您能够更改链接值，可是若是删除JavaScript链接却未用另一个链接来代替它，那么将删除该行为。

　　在动作选单中，越是高版本的阅读器支持的动作越多，咱们先熟悉一下它们：

　　行为的利用

　　您能够将行为附加到整个文档（即附加到body标签），还能够附加到链接、图像、表单元素或多种其它HTML元素中的任何一种。

您选择的目标阅读器确信给定的元素支持哪些事件。

　　不能将行为附加到纯文本。

诸如p和span等标签不在阅读器中生成事件，因此无法从这些标签触发动作。

可是，您能够将行为附加到链接。

　　将行为附加到纯文本，请执行以下操作：

　　在属性检查器的“链接”文本框中输入javascript:

;。

必然要包括冒号和分号。

　　提示：

您也能够在“链接”文本框中改用数字符号#。

利用数字符号的问题在于当访问者单击该链接时，某些阅读器可能跳到页的顶部。

单击“JavaScript:

;”空链接可不能在页上产生任何成效。

　　在文本仍处于选中状态时打开“行为”面板（“窗口”>“行为”）。

　　从“动作”弹出菜单当选择一个动作，输入该动作的参数，然后选择一个触发该动作的事件。

　　假设要更改链接文本的外观使它看上去不是一个链接，请执行以下操作：

　　选择“查看”-->>“代码”打开“文档”窗口的“代码”视图。

查找该链接。

在该链接的ahref标签中，插入以下属性：

style="text-decoration:

none;color:

red"。

此属性设置将禁用下划线并将文本的颜色设置为红色。

　　请注意，此属性是一个内联CSS样式。

应用于单个链接的内联样式覆盖应用于该链接的其它CSS样式，但不对该链接外的部份产生任何阻碍。

假设要更改页上遍地或整个站点中链接文本的外观，请利用CSS样式为链接创建一个新的样式。

　　您能够为每一个事件指定多个动作。

　　假设要附加其它行为，请执行以下操作：

　　在页上选择一个元素，例如一个图像或一个链接。

假设要将行为附加到整个页，请在“文档”窗口底部左侧的标签选择器中单击标签。

　　选择“窗口”-->>“行为”，打开“行为”面板。

　　单击加号（+）按钮并从“动作”弹出菜单当选择一个动作。

　　菜单中灰显的动作不可选择。

它们灰显的缘故可能是当前文档中缺少某个所需的对象。

例如，若是文档不包括Shockwave或MacromediaFlashSWF文件，那么“操纵Shockwave或Flash”动作为灰显。

若是所选的对象无可用事件，那么所有动作都灰显。

　　当您选择某个动作时，将显现一个对话框，显示该动作的参数和说明。

为该动作输入参数，然后单击“确信”。

　　触发该动作的默许事件显示在“事件”栏中。

若是这不是需要的触发事件，请从“事件”弹出菜单当选择另一个事件。

挪用JavaScript

　　“挪用JavaScript”动作许诺您利用“行为”面板指定当发生某个事件时应该执行的自概念函数或JavaScript代码行。

　　假设要利用“挪用JavaScript”动作，请执行以下操作：

　　第一在当前的页面内插入一个按钮，然后选中该按钮。

　　打开“行为”面板。

单击加号（+）按钮并从“动作”弹出菜单当选择“挪用JavaScript”。

如以下图：

　　在打开的挪用JavaScript窗口中键入：

（）如以下图：

　　点击确信退出对话框。

并确认其缺省事件值为“OnClick”。

　　保留页面，点F12预览。

　　在那个地址为了让大伙儿对代码加倍熟悉，这时咱们能够打开代码视图。

咱们适才的操作使文件新添节了一部份代码。

如图：

转到URL

　　转到URL”动作在当前窗口或指定的框架中打开一个新页。

此操作尤其适用于通过一次单击更改两个或多个框架的内容。

　　具体制作“转到URL”动作的操作步骤：

　　在文档中插入一个按钮把名字改成“转到首页”，选择该按钮对象并打开“行为”面板。

单击加号（+）按钮并从“动作”弹出菜单当选择“转到URL”。

弹出转到URL对话框如下设置：

　　从“打开在”列表当选择URL的目标。

“打开在”列表自动列出当前框架集中所有框架的名称和主窗口。

若是没有任何框架，那么主窗口是唯一的选项。

　　注意：

若是任何框架命名为top、blank、self或parent，那么此动作可能产生意想不到的结果。

阅读器有时将这些名称误以为保留的目标名称。

　　单击“阅读”选择要打开的文档，或在“URL”文本框中输入该文档的途径和文件名。

　　单击“确信”，F12预览。

　　相应的在代码视图中增加的代码，咱们能够熟悉一下：

　互换图像

　　“互换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行互换。

利用此动作创建按钮鼠标通过图像和其它图像成效。

插入鼠标通过图像会自动将一个“互换图像”行为添加到您的页中。

　　注意：

因为只有src属性受此动作的阻碍，因此您应该换入一个与原图像具有相同尺寸（高度和宽度）的图像。

不然....自己试试吧！

　　具体制作步骤：

　　1.选择“插入”-->>“图像”插入一个图像。

选择图像，在属性检查器中，在最左侧的文本框中为该图像输入一个名称。

本例命名为：

img1。

如以下图：

　　若是您未为图像命名，“互换图像”动作仍将起作用；建议大伙儿学习时将所有插入的图像都预先命名，那么在“互换图像”对话框中就更易区分它们。

　　2.选择一个对象（一般是您将互换的图像）并打开“行为”面板。

　　3.单击加号（+）按钮并从弹出菜单当选择“互换图像”。

弹出互换图像对话框如以下图：

　　4.从“图像”列表中，选择要更改的源图像。

　　5.单击“阅读”选择新图像文件，或在“设定源文件为”文本框中输入新图像的途径和文件名。

　　6.选择“预先载入图像”选项在载入页时将新图像载入到阅读器的缓存中。

　　单击“确信”。

点击F12预览。

　　相应的在代码视图中增加的代码，咱们能够熟悉一下：

打开阅读器窗口

　　利用“打开阅读器窗口”动作在一个在新的窗口中打开指定的URL。

您能够指定新窗口的属性（包括其大小）、特性（它是不是能够调整大小、是不是具有菜单栏等）和名称。

　　若是不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。

指定窗口的任何属性都将自动关闭所有其它未显式打开的属性。

例如，若是您不为窗口设置任何属性，它将以800x600像素的大小打开并具有导航条、地址工具栏、状态栏和菜单栏。

若是您将宽度显式设置为400、将高度设置为300并非设置其它属性，那么该窗口将以400x300像素的大小打开，而且不具有任何导航条、地址工具栏、状态栏、菜单栏、调整大小手柄和转动条。

　　具体制作进程：

　　创建一个按钮对象，选择对象并打开“行为”面板：

　　单击“阅读”选择一个文件，或输入要显示的URL。

　　设置以下任一选项：

　　窗口宽度指定窗口的宽度（以像素为单位）。

窗口高度指定窗口的高度（以像素为单位）。

　　导航工具栏是一行阅读器按钮（包括“后退”、“前进”、“主页”和“从头载入”）。

　　地址工具栏是一行阅读器选项（包括地址文本框）。

　　状态栏是位于阅读器窗口底部的区域，在该区域中显示消息。

　　菜单栏是阅读器窗口上显示菜单（例如“文件”、“编辑”、“查看”、“转到”和“帮忙”）的区域。

若是您不设置此选项，那么在新窗口顶用户只能关闭或最小化窗口。

　　需要时显示转动条指定若是内容超出可视区域应该显示转动条。

若是不显式设置此选项，那么不显示转动条。

若是“调整大小手柄”选项也关闭，那么访问者将不容易看到超出窗口原始大小之外的内容。

　　调整大小手柄指定用户应该能够调整窗口的大小，方式是拖动窗口的右下角或单击右上角的最大化按钮。

若是未显式设置此选项，那么调整大小控件将不可用，右下角也不能拖动。

　　窗口名称是新窗口的名称。

若是您要通过JavaScript利用链接指向新窗口或操纵新窗口，那么应该对新窗口进行命名。

此名称不能包括空格或特殊字符。

　　单击“确信”，点击F12预览。

　　相应的在代码视图中增加的代码，咱们能够熟悉一下：

　　显示－隐藏层

　　“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的默许可见性。

此动作用于在用户与页进行交互时显示信息。

“显示－隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失（可做一个广告成效，记得在新浪见过如此的广告）。

　　“显示－隐藏层”动作，具体操作：

　　选择“插入”-->>“布局对象”-->>“层”然后在“文档”窗口中绘制一个层。

　　重复此步骤能够创建其它的层。

　　在“文档”窗口中单击取消对层的选择，然后打开“行为”面板。

　　单击加号（+）按钮并从“动作”弹出菜单当选择“显示－隐藏层”。

在“命名的层”列表当选择要更改其可见性的层。

单击“显示”以显示该层、单击“隐藏”以隐藏该层、或单击“默许”以恢复层的默许可见性。

如图：

　　对所有剩下的现在要更改其可见性的层重复以上步骤。

单击“确信”。

这时的行为面板如下图：

　　具体应用，当指向一个图片时显示隐藏的层，具体制作步骤：

　　1.插入一个事前预备好的图片；

　　2.选择“插入”-->>“布局对象”-->>“层”，在层内图片的说明文本。

　　在“文档”窗口中单击取消对层的选择，然后打开“行为”面板。

从“动作”弹出菜单当选择“显示－隐藏层”。

在“命名的层”列表中,单击“隐藏”隐藏该层。

　　3.选择图片，打开行为面板。

单击加号（+）按钮并从“动作”弹出菜单当选择“显示－隐藏层”。

单击“隐藏”按钮如以下图，单击确信。

　　4.重复上述步骤，单击加号（+）按钮并从“动作”弹出菜单当选择“显示－隐藏层”。

单击“显示”按钮如以下图，单击确信。

　　5.设置行为面板如以下图：

　　保留按F12能够预览到成效：

当鼠标移入图片时，显示相关说明文本。

　　假设要创建预先载入层，请执行以下操作：

　　在“插入”栏的“经常使用”类别中单击“绘制层”按钮，然后在“文档”窗口的“设计”视图中绘制一个较大的层。

该层必然要覆盖页上的所有内容。

　　在“层”面板中，将该层名称拖到层列表的顶部以指定该层应该在堆叠顺序的最前面。

若是未选择，那么选择该层，并利用层属性检查器中最左侧的文本框将其命名为“load”。

　　在层仍处于选中状态时，在属性检查器中将层的背景颜色设置为与页背景相同的颜色。

　　若是需要，在层中（该层此刻应该挡住其余的页内容）单击并键入消息。

例如“请稍候，正在载入页”或“正在载入...”，这些消息提示访问者正在发生的操作，以便他们明白该页包括有内容。

　　单击“文档”窗口左下角标签选择器中的标签。

　　在“行为”面板中，从“动作”弹出菜单当选择“显示－隐藏层”。

　　从“命名的层”列表当选择名为“load”的层。

单击“隐藏”。

单击“确信”。

　　确保行为列表中“显示－隐藏层”动作隔壁列出的事件是onLoad。

（一样情形下都是默许onload，若是不是咱们能够更改。

）

　　这时保留文档，按F12预览成效吧。

　　别忘了咱们是在学习啊！

打开相应的在代码视图看看文件中新增加的代码，如此咱们能够熟悉代码了啊！

　改变属性

　　利用“改变属性”动作更改对象某个属性（例如层的背景颜色或表单的动作）的值。

您能够更改的属性是由阅读器决定的。

　　例如，您能够动态设置层的背景颜色。

只有在您比较熟悉HTML和JavaScript的情形下才利用此动作。

　　假设要利用“改变属性”动作，请执行以下操作：

　　选择一个对象并打开“行为”面板，从“动作”弹出菜单当选择“更改属性”。

　　从“对象类型”弹出菜单当选择您要更改其属性的对象的类型。

　　“命名对象”弹出菜单马上列出所有所选类型的命名对象。

　　从“命名对象”弹出菜单当选择一个对象。

　　从“属性”弹出菜单当选择一个属性，或在文本框中输入该属性的名称。

　　举例：

在网页中插入一个图片，而且设置图片的名字为image1，最终要求：

阅读者用鼠标单击图片时，图片变成另一幅（你要事前预备好哦！

）。

如以下图：

　　按上图的参数修改其属性，点击确信。

然后在行为面板中把动作改成onclick。

　　保留页面，F12预览。

　　相应的在代码视图中增加的代码，咱们能够熟悉一下：

　播放声音

　　利用“播放声音”动作来播放声音。

例如，您可能要在每次鼠标指针滑过某个链接时播放一段声音成效，或在页载入时播放音乐剪辑，或点击某个按钮播放声音等等。

　　注意：

阅读器可能需要用某种附加的音频支持（例如音频插件）来播放声音。

因此，具有不同插件的不同阅读器所播放声音的成效通常会有所不同。

很难准确地预测出站点的访问者对您提供的声音感受如何。

　　具体操作：

　　插入一个按钮，选择该对象，打开“行为”面板。

如选择如下按钮打开“行为”面板，从动作当选择“播放声音”。

如图：

　　单击“阅读”选择一个声音文件，或在“播放声音”文本框中输入途径和文件名。

　　然后在行为面板中能够更改咱们的动作，在那个地址我选择的是onclick，也确实是单击按钮开始播放声音。

　　保留页面，F12预览。

单击按钮就会有声音播放了。

　　别忘了咱们是在学习啊！

打开相应的在代码视图看看文件中新增加的代码，如此咱们能够熟悉代码了啊！

　弹出消息

　　“弹出消息”动作显示一个带有您指定的消息的JavaScript提示。

因为JavaScript提示只有一个按钮（“确信”），因此利用此动作能够提供信息，而不能为用户提供选择。

　　注意：

您无法操纵JavaScript提示的外观，它取决于访问者的阅读器。

若是您希望对消息的外观进行更多的操纵，可考虑利用“打开阅读器窗口”行为。

　　具体制作进程：

　　插入一个按钮，选择按钮，打开“行为”面板，从动作当选择“弹出消息”。

而且输入咱们要在消息窗口中显示的内容。

如图：

　　在“消息”文本框中输入您要告知阅读者的信息。

别忘了看看行为面板中设置的动作是onclick，单击“确信”，保留文档，按F12预览。

　　别忘了咱们是在学习啊！

打开相应的在代码视图看看文件中新增加的代码，如此咱们能够熟悉代码了啊！

　跳转菜单

　　跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。

能够创建到整个Web站点内文档的链接、到其它Web站点上文档的链接、电子邮件链接、到图形的链接，也能够创建到可在阅读器中打开的任何文件类型的链接。

（能够当友谊连接用啊，如此站一个空间可是能够连接多个地址啊，能够增加你的网站的PR值啊）

　　跳转菜单可包括三个大体部份：

　　（可选）菜单项选择择提示，如菜单项的类别说明，或一些提示信息等。

　　（必需）所链接菜单项的列表：

用户选择某个选项，那么链接的文档或文件被打开。

　　（可选）“前去”按钮。

　　插入跳转菜单

　　跳转菜单可成立URL与弹出菜单列表中的选项之间的关联。

通过从列表当选择一项，用户将被重定向（或“跳转”）到指定的URL。

　　成立跳转菜单的具体工程：

　　新建一个文档，然后将插入点放在“文档”窗口中。

选择“插入”-->>“表单”-->>“跳转菜单”，显现“插入跳转菜单”对话框。

如图：

　　保留按F12预览，选择跳转菜单列表中的链接，即可打开相应的目标。

　　编辑更改跳转菜单项：

　　可更改列表顺序或项所链接到的文件，也可添加、删除或重命名项；假设要更改链接文件的打开位置，或添加或更改菜单项选择择提示，必需利用“行为”面板；假设要利用属性检查器编辑跳转菜单项，如图：

　　通过上面的图的内容咱们能够编辑咱们的跳转菜单。

　　别忘了咱们是在学习啊！

打开相应的在代码视图看看文件中新增加的代码，如此咱们能够熟悉代码了啊！

　拖动层

　　拖动层动作许诺访问者拖动层。

利用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。

　　您能够指定访问者能够向哪个方向拖动层（水平、垂直或任意方向），访问者应该将层拖动到的目标、若是层在目标必然数量的像素范围内是不是将层靠齐到目标，当层接触到目标时应该执行的操作和其它更多的选项。

　　因为在访问者能够拖动层之前必需先挪用“拖动层”动作，因此请确保触发该动作的事件发生在访问者试图拖动层之前。

最正确的方式是（利用onLoad事件）将“拖动层”附加到body对象上，只是您也能够利用onMouseOver事件将它附加到填满整个层的链接上。

　　具体制作的进程如下：

　　选择“插入”-->>“布局对象”-->>“层”，在文档窗口中插入了一个层。

该层为：

Layer1。

咱们能够在层中插入一个图片。

　　通过单击“文档”窗口底部标签选择器中的选择body标签。

　　打开“行为”面板，从“动作”当选择“拖动层”。

如以下图：

　　在“层”弹出菜单中，选择要使其可拖动的层，如图：

选“层Layer1”。

　　从“移动”弹出菜单当选择“限制”或“不限制”。

如图：

选“不限制”。

　　在“左”和“上”文本框中为拖放目标输入值（以像素为单位）。

　　拖放目标是一个点，您想要访问者将层拖动到该点上。

当层的左坐标和上坐标与在“左”和“上”文本框中输入的值匹配时便以为层已经抵达拖放目标。

这些值是与阅读器窗口的左上角相对的。

　　在“靠齐距离”文本框中输入一个值（像素）确信访问者必需放目标多近，才能将层靠齐到目标。

较大的值能够使访问者较容易找到拖放目标。

　　注意行为面板中的动作为onload。

保留页面，F12预览。

　　别忘了咱们是在学习啊！

打开相应的在代码视图看看文件中新增加的代码，如此咱们能够熟悉代码了啊！

预先载入图像

　　“预先载入图像”动作将可不能当即出此刻网页上的图像（例如那些将通过行为或JavaScript换入的图像）载入阅读器缓存中。

如此可避免当图像应该显现时由于下载而致使延迟。

　　注意：

“互换图像”动作自动预先载入当您在“互换图像”对话框当选择“预先载入图像”选项时所有高亮显示的图像，因此当利用“互换图像”时您不需要手动添加预先载入图像。

　　具体利用预先载入图像的步骤：

　　插入一个对象，选择该对象，打开“行为”面板，从“动作”当选择“预先载入图像”。

　　单击“阅读”选择要预先载入的图像文件，或在“图像源文件”文本框中输入图像的途径和文件名。

　　单击对话框顶部的加号（+）按钮将图像添加到“预先载入图