DW12使用行为详解

1、DW12使用行为详解第12章使用行为第一节 认识Dreamweaver的行为背景：JavaScript编程可以实现一些动态效果网页中挪动的广告、状态栏的文字提示，但增加了难度，DW集成了一套行为功能，便于简单地实现此类功能。行为：就是在特定的时间或者某个事件被触发时所产生的动作，如鼠标单击、网页加载完毕、阅读器解析出现错误等。一、行为的工作原理行为是由事件如用户挪动鼠标到某个特定的对象上或者在某个对象上按下鼠标键等和由该事件触发的动作即对该事件的响应构成的。在行为面板中看到这两个方面。从本质上讲，行为实际上是插入到网页中的一段JavaScript代码，利用这些代码实现一些动态效果。1、对象：是

2、产生行为的主体，大局部网页元素都可以成为对象，如：图片，文本，多媒体等，甚至网页Body主体。2、事件：是用户的某个操作，是触发动作的原因，定义使用者的操作行为或者网页的状态。被附加到各种页面元素上；对象不同，相应的事件不同。3、动作：由用户操作发生某个事件时，网页中通过动作代码作出响应。不同的事件对应不同的动作。动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如翻开阅读器窗口、显示或隐藏层、播放声音等。将行为附加到网页元素之后，只要对该元素发生了所指定的事件，阅读器就会调用与该事件关联的动作JavaScript代码。 如同：面向对象编程中的事件与事件代码。另外，触

3、发一个事件时，可以执行多个动作。如：多重链接。第二节 使用“行为面板一、显示行为面板选择“窗口/行为菜单，显示行为面板。“行为面板具有以下选项：动作 (+) 是一个弹出式菜单，其中包含可以附加到当前所选元素前提的多个动作。删除 (-) 从行为列表中删除所选的事件和动作。 上下箭头按钮将特定事件的所选动作在行为列表中向上或向下挪动改变行为动作的执行顺序。 二、增加行为给元素附加行为的方法：选中欲添加行为的网页元素，在行为面板上单击“+添加一个行为。再在左侧的列表中选相应的动作种类，以及该动作的详细参数。动作的默认事件显示在事件栏中，假设不是所要的事件，那么在事件下拉列表中选择所需的事件。可以将动

4、作附加到整个文档即body，在文档窗口底部左侧的标签选择器中单击标签，还可以附加到链接、图像、表单元素或多种其他HTML元素中的任何一种。三、删除行为方法：在页面中选中行为对象，在行为面板中的行为列表中选择欲删除的行为，单击“-。四、调整行为顺序当同一个对象对应多个不同的行为时，可以调整其响应顺序。方法：在页面中选中行为对象，在行为面板中的多个行为列表中选择欲调整顺序的行为，单击“或者“ 调整顺序。五、设置事件Dreamweaver中某个行为时会自动创立一个默认事件，默认的事件有时并不是用户需要的，比方弹出消息窗口，默认事件是Onload事件，即网页加载时弹出消息窗口，但用户假设希望单击网页后

5、弹出消息窗口，就必须更改事件为Onclick事件。方法：单击行为列表中所选事件名称旁边的箭头，在可以触发该动作的所有事件列表中选择。注意：事件和当前选择的网页对象是相关联的，因此事件下拉列表菜单中的内容随所选网页对象不同而变化。常见行为的触发事件及其含义onMouseOver：鼠标指针挪动到对象上时触发。onMouseOut：鼠标指针从对象上移走时触发。onMouseDown：按下鼠标键时触发。onMouseUp：鼠标按键抬起时触发。onClick：单击对象时触发。onDblClick：双击对象时触发。onLoad：指定对象装入内存时触发，通常用于Body对象。onUnLoad：卸载指定对象关

6、闭时触发。六、切换面板视图方法：在行为面板中单击视图切换按钮，即可在“显示设置的事件和“显示所有事件两种视图之间切换。行为对象切换按钮仅显示添加的事件显示所有可以添加的事件第三节 增加行为一般方法方法：在网页上选择一个元素，在行为面板上单击“+添加一个行为。注意：对于纯文本不能添加行为，只有将其设置为空链接#或者Javascript:;后，才可以添加行为。第四节 阅读器事件讲解每个阅读器(不同版本)都提供一组事件，且各类型的阅读器所支持的事件和种类不同。目前现有的阅读器根本上都支持以下的事件。一般事件事件描述onClick鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick鼠

7、标双击事件onMouseDown鼠标上的按钮被按下了onMouseUp鼠标按下后，松开时激发的事件onMouseOver当鼠标移动到某对象范围的上方时触发的事件onMouseMove鼠标移动时触发的事件onMouseOut当鼠标离开某对象范围时触发的事件onKeyPress当键盘上的某个键被按下并且释放时触发的事件onKeyDown当键盘上某个按键被按下时触发的事件onKeyUp当键盘上某个按键被按放开时触发的事件页面相关事件事件描述onAbort图片在下载时被用户中断onBeforeUnload当前页面的内容将要被改变时触发的事件onError捕抓当前页面因为某种原因而出现的错误onLoad

8、页面内容完成传送到浏览器时触发的事件，包括外部文件引入完成onMove浏览器的窗口被移动时触发的事件onResize当浏览器的窗口大小被改变时触发的事件onScroll浏览器的滚动条位置发生变化时触发的事件onStop浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload当前页面将被改变时触发的事件表单相关事件事件描述onBlur当前元素失去焦点时触发的事件onChange当前元素失去焦点并且元素的内容发生改变而触发的事件onFocus当某个元素获得焦点时触发的事件onReset当表单中RESET的属性被激发时触发的事件onSubmit一个表单被递交时触发的事件滚动字幕事件

9、事件描述onBounce在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish当Marquee元素完成需要显示的内容后触发的事件onStart当Marquee元素开始显示内容时触发的事件编辑事件事件描述onBeforeCopy页面中被选择内容将要复制到浏览者系统的剪贴板前触发的事件onBeforeCut当页面中的一部分或者全部的内容将被移离当前页面剪切并移动到浏览者的系统剪贴板时触发的事件onBeforeEditFocus当前元素将要进入编辑状态onBeforePaste内容将要从浏览者的系统剪贴板传送粘贴到页面中时触发的事件onBeforeUpdate当浏览者粘

10、贴系统剪贴板中的内容时通知目标对象onContextMenu当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件onCopy当页面当前的被选择内容被复制后触发的事件onCut当页面当前的被选择内容被剪切时触发的事件onDrag当某个对象被拖动时触发的事件onDragDrop一个外部对象被鼠标拖进当前窗口或者帧onDragEnd当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了onDragEnter当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver当某被拖动的对象在另一对象容器范围内拖动

11、时触发的事件onDragStart当某对象将被拖动时触发的事件onDrop在一个拖动过程中，释放鼠标键时触发的事件onLoseCapture当元素失去鼠标移动所形成的选择焦点时触发的事件onPaste当内容被粘贴时触发的事件onSelect当文本内容被选择时的事件onSelectStart当文本内容选择将开始发生时触发的事件数据绑定事件事件描述onAfterUpdate当数据完成由数据源到对象的传送时触发的事件onCellChange当数据来源发生变化时onDataAvailable当数据接收完成时触发事件onDatasetChanged数据在数据源发生变化时触发的事件onDatasetCom

12、plete当来子数据源的全部有效数据读取完毕时触发的事件onErrorUpdate当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onRowEnter当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit当前数据源的数据将要发生变化时触发的事件onRowsDelete当前数据记录将被删除时触发的事件onRowsInserted当前数据源将要插入新数据记录时触发的事件外部事件事件描述onAfterPrint当文档被打印后触发的事件onBeforePrint当文档即将打印时触发的事件onFilterChange当某个对象的滤镜效果发生

13、变化时触发的事件onHelp当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange当对象的属性之一发生变化时触发的事件onReadyStateChange当对象的初始化属性值发生变化时触发的事件第五节 使用Dreamweaver CS5预定义行为一、交换图像和恢复交换图像“交换图像行为通过改变标签的src属性将一幅图像交换成为另外一幅图像。使用此行为可以创立鼠标经过按钮的效果。方法：在文档中插入一副图像，属性面板的“ID文本框中输入图像的ID以便识别；选择要交换的图像，在行为面板单击“添加行为+按钮，在弹出的下拉菜单中选择“交换图像命令，在交换图像对话框中指定交换的图

14、像。鼠标移开时恢复鼠标移入时交换图像：选择一个需要改变其源文件的图像。设定原始档为：输入新图像的文件途径和名称，或者点击“阅读按钮选取一个新的图像文件。预先载入图像：选择此项可以将新图像预先加载到阅读器缓存中，防止图像延迟。鼠标滑开时恢复图像：用于自动创立交换图像的行为完成后，以相反的事件恢复原状。如鼠标移入图像上时交换，移开后恢复。注意：在交换图片时，最好使用与原始尺寸一样的图像进展交换。否那么，交换的图像为了适应原图片的大小宽度和高度显示时会出现不必要的变形，比方被压缩或扩展。例：将素材中的与两副图片设置图像交换。另外，再设置取消鼠标滑开时恢复图像选项。二、弹出信息应用“弹出信息行为的方法

15、：选择一个事件对象链接、图象、导航按钮或整个文档“Body，在“行为面板上，单击加号+按钮并从“动作弹出菜单中选择“弹出信息。在“弹出信息对话框中，“信息域中输入要显示的信息，如“欢送光临等。单击“确定按钮，关闭设置对话框。通常显示如：阅读器的分辨率要求，购卖信息。三、翻开新阅读器窗口翻开阅读器窗口即在翻开当前网页的同时，另外翻开一个新的窗口显示一个指定的网页，可根据需要对它的菜单、页面尺寸、滚动条等进展设置。如：CH09中的弹出式广告。添加“翻开阅读器窗口行为方法：选择一个事件对象图像、超链接或body等并翻开“行为面板。单击加号+按钮并从“动作列表中选择“翻开阅读器窗口。在“要显示的URL

16、域中输入要显示网页的URL或通过“阅读按钮选择一个要显示的网页文件。另外设置窗口大小以及其它内容的显示与否等。注意给文本添加行为时，要注意将其设置为超级链接#，否那么很多行为都无法添加。窗口宽度：指定窗口的宽度以像素为单位。窗口高度：指定窗口的高度以像素为单位。属性：选择是否在新的阅读器窗口中包含：导航工具栏、地址工具栏、状态栏、菜单条、滚动条、调整大小手柄等内容。窗口名称是新窗口的名称。制作Click图像册单击缩略图，显示大图。制作load招聘启事，广告Body 的load事件中添加翻开阅读器行为是一个好的操作。四、拖动AP元素拖动AP元素行为可以允许在页面上拖动AP元素。方法：选择对象，在

17、行为面板上单击“+，在行为的动作列表中选择“拖动AP元素。例：制作案例(CH09)中的拼图页面。先演示效果。设计步骤：先建立7个AP DIV层，并分别将每一个拼块置于一个层中，调整层的大小，使图片刚好包容其中，可先让层的大小大于图片大小，再调整其大小，但层的大小不能小于图片，否那么拖动时有些区域不能拖。对照原始图片，将各层排列到一起，形成完好图片。选中Body，添加“拖动AP元素，为每个层(列表选)逐一设置拖动层效果，为其Onload事件添加行为。选中Body对象，添加行为；“层列表中选择被拖动的对象层。获得当前位置使得当对象被置于该位置并在“靠近间隔 范围内时，会自动归位。在高级选项卡中，提

18、示拖动结果，加代码：alert(唔,还不错哟!)假设没有添加拖动层行为，层是不能被拖动的。再建立一个层，用于放置操作提示文本！注意：将层的标签类型由DIV改为SPAN后选中多个层，再在属性面板上改，层的边界不显示。五、改变属性“改变属性行为可以动态改变某一对象的属性值。方法：选择对象，在行为面板上单击“+，在行为的动作列表中选择“改变属性。在对话框中确定欲改变的对象类型和对象的属性。如改变一个层的背景颜色backgroundcolor。实例：使用改变属性制作图片阴影效果如CH09实例中的“改变属性.htm演示 1实例创意大多数行为的属性都可以修改，而且这些行为的显示效果取决于所使用的阅读器，本

19、实例将实现图片阴影效果的功能，当鼠标移至图片上时，阴影效果显示，当鼠标分开图片时，阴影效果消失。 2制作步骤1新建网页，保存页面，在该页面中插入一个层，将图片插入到该层中，调整图层大小，使图层比图像略大一点所示。 2选择图像后，在行为选择菜单中选择“改变属性命令。 3在弹出的对话框中作如以下图的选择本例效果是改变“Layer1的背风荣耀。 4为了得到阴影效果，在“新的值框中输入“black ，当然也可以输入其他色彩名称或代码。 5默认的事件是“onload，在这里用鼠标单击其右方的黑三角，在弹出的下拉选项中选择“onMouseOver鼠标经过)。 6用同样的方法添加行为，再在Moveout事件

20、时设置为白色。7保存网页后，按F12预览，如图示：当鼠标经过图片时，图片显示阴影效果。 注意：鼠标分开图片，阴影效果消失的效果。六、显示-隐藏元素显示-隐藏层可以对页面中所有的层进展设置，使其可显示或隐藏。可通过显示-隐藏层的功能制作一个网页中常见的导航用下拉菜单。其本质是网页中共有多个菜单，分别对应有多个层，每一层即一个下拉菜单，网页加载时，这多个层全部隐藏，当鼠标挪动到某菜单上时，对应层显示，并可单击其中的超链接，而其它层隐藏。方法：选择行为对象如文字链接，在行为面板上单击“+，在行为的动作列表中选择“显示隐藏层，选中某一层，单击“显示，选中其它层，单击“隐藏，逐一设置多个层。制作层菜单，

21、其中菜单项都在层中，这种菜单很实用。如青海大学的主页用IE翻开。步骤：设置页面的导航条，并添加各层及相应层中的超链接。在Body的load事件中，隐藏所有层。再在导航条或菜单项的单击或越过事件中选择显示相应的层菜单。显示一个，隐藏其它注意：每一个菜单项的文字须是虚链接方可添加“显示隐藏层行为。而在每一个层中又以表格布局添加相应的超级链接。这种菜单比较常用。七、检查插件使用“检查插件行为根据访问者是否安装了指定的插件这一情况将他们发送到不同的页。方法：选择一个事件对象链接、图片、body等并翻开“行为面板。单击加号+按钮并从“动作弹出式菜单中选择“检查插件。从“插件弹出式菜单中选择一个插件，或单

22、击“输入并在相邻的域中键入插件确实切名称。在“假设有，前往URL域中，为具有该插件的访问者指定一个URL。假设指定一个远程URL，那么必须在地址中包括“ :/前缀。在“否那么，前往URL域中，为不具有该插件的访问者指定一个替代URL。假设要让不具有该插件的访问者留在同一页上，将此域留空。 通常，假设插件内容对于您的页面是必不可少的一局部，请选择“假设无法检测，总是转到第一个 URL选项，阅读器通常会提示不具有该插件的访问者下载该插件。假设插件内容对于您的页面不是必要的，请保存此选项的未选中状态。八、设置文本1设置容器的文本“设置容器的文本动作允许将网页中某容器的文本动态交换为特定的内容。前提：

23、为欲设置文本的每一个容器对象某一个完好的标签设置一个唯一的ID属性。方法：选中欲设置文本的容器对象，单击“行为面板上加号+按钮，选择“设置文本中的“设置容器的文本。例：将一个段落标签的内容交换为一张图片。新建一个页面，输入两行文本:“设置容器的文本、“请单击我看看发生什么，前者设置为H1标题，后者设置一个段落，并设置ID为p1。选中p1段落，单击“行为面板上加号+按钮，设置容器中的文本如下：再将事件改为Click；被替容器对象交换内容2设置文本域文本“设置文本域文本行为可用指定的内容交换表单中文本域的内容。方法：选中欲设置文本的文本域，单击“行为面板上加号+按钮，选择“设置文本中的“设置文本域

24、文本。例：建立一个输入用户名的文本域，ID名为：Username，设计如下页中的图所示，设置文本域文本行为，当该文本域获得焦点时，清空文本域的内容，输入详细的用户名。此处为空在事件列表中更改触发的事件为OnFocus3设置状态栏文本“设置状态栏文本动作可在阅读器窗口底部左侧的状态栏中显示特定的文本。方法：选中欲添加行为的对象如Body，单击“行为面板上加号+按钮，选择“设置文本中的“设置状态栏文本。如：Body标签的load事件中设置状态栏文本，将状态栏的内容自己期望的文本内容。4设置框架文本*“设置框架文本动作允许动态设置框架的文本，用指定的内容交换框架的内容和格式设置。可以先获取当前框架中

25、的内容，再设置新的内容；另外可用HTML标签设置格式。用指定的内容交换框架中原有的内容。 被交换对象交换内容九、调用JavaScript调用JavaScript行为触发时用于调用一段JavaScript代码或者函数。方法：选择一个事件对象文本链接、图片、body等，在“行为面板中单击加号+按钮，从“动作弹出式菜单中选择“调用JavaScript。如：网页中输入“关闭窗口文本，选中对其设置调用JavaScript代码为：window.close()，对应事件为：Onclick。即可在单击时关闭本窗口。十、跳转菜单*通过跳转菜单，可以使访问者从由多个链接列表中选择一项，跳转到其他页面。如友谊链接。

26、当空间有限，但需要显示许多链接项或需要把链接项集中归类时，跳转菜单非常有用。使用跳转菜单行为，先通过表单对表插入一个跳转菜单。方法：首先将插入点放在要插入跳转菜单的位置。单击“插入面板中“表单中的“跳转菜单工具 ，或者“插入菜单的“表单中的“跳转菜单。61跳转菜单行为用于对跳转菜单进展编辑修改。方法：选中建立的跳转菜单，在行为面板中双击“跳转菜单项，即可对其跳转菜单进展进一步的修改。可以改变菜单顺序，可以增减菜单项以及详细某一项的内容等十一、跳转菜单开场*跳转菜单开场是对跳转菜单功能的一种扩展，一般情况下，当在跳转菜单中单击选择某一项后，自动转移到指定的链接。或者选择某一项后，单击“前往按钮即

27、可；但是有时希望在跳转菜单中选择某一项，再单击某个对象时，再实现跳转，这时可用跳转菜单开场行为。方法：选择一个事件对象文本链接、图片等，在“行为面板中单击加号+按钮，从“动作弹出式菜单中选择“跳转菜单开场。添加跳转菜单行为后，跳转菜单在行为列表中原有的行为被删除，而是加了跳转菜单开场行为。选择欲开场的跳转菜单，单击确定即可实现相应的功能。十二、转到URL当行为被触发时，可将直接跳转到指定的URL上。方法：选择一个事件对象文本、图片等，在“行为面板中单击加号+按钮，从“动作弹出式菜单中选择“转到URL。如同翻开阅读器窗口行为，可以给一个对象添加多个该行为。十三、隐藏弹出式菜单(略)在CS5中没有

28、此项功能。十四、预先载入图像对于类似交换图像类的行为，在显示图像前，需要先载入图像，等需要时直接显示。方法：选择一个事件对象文本、图片等，在“行为面板中单击加号+按钮，从“动作弹出式菜单中选择“预先载入图像。分别设置需要预先载入的图像文件。第六节 管理行为一、更新行为已经设置的行为，可以改变动作参数。方法：双击欲修改行为对应的“动作栏，在该动作的参数设置对话框中修改各项参数。 添加行为按钮删除行为按钮事件列表多动作时，可用来调整先后次序双击可设置参数二、排序行为一个事件可以触发多个动作，比方Onload这一事件可以触发如播放声音，翻开阅读器窗口等动作。在这种情况下就存在一个动作发生的先后问题，

29、可以通过单击行为面板中“，“按钮来解决这个问题。 三、删除行为在行为面板上选取欲删除的行为，单击行为面板左上方的“-按钮，或按Delete键。四、获取第三方行为方法：在“行为面板中单击加号+按钮，从“动作弹出式菜单中选择“获取第三方行为。在网站中获取。第七节 定义Spry效果Dreamweaver中的Spry功能是由JavaScript定义的，类似于函数调用，用于拓展DW的功能，由四个局部组成： Spry构件。 Spry验证表单。 Spry XML数据显示。 Spry特效。在Dreamweaver中Spry动画效果主要增强视觉效果，效果行为可应用于使用JavaScript的HTML页面上的几乎

30、所有元素。通常用于在一段时间内高亮显示信息，创立动画过渡或以可视方式修改页面元素。Spry动画效果可以修改元素的不透明、缩放比例、位置和款式属性如背景颜色，还可以组合两个或多个属性来创立有趣的视觉效果。要对某个元素应用效果，必须使该元素处于选定状态，或该元素已指定一个ID。当使用效果时，系统会在“代码视图中将不同的代码行添加到您的文件中。其中用来标识文件包含所有Spry效果所必须的JavaScript脚本库。请不要从代码中删除该行，否那么这些效果将不起作用。Spry效果包括显示/渐隐、高亮颜色、遮帘、滑动、增大/收缩、晃动、挤压等动画效果，它可以设置元素的不透明、缩放比例、位置和款式属性如背景颜色，还可以组合两个或多个属性来创立有趣的视觉效果。由于这些效果都基于Spry，因此，当单击应用了效果的对象时，只有对象会进展动态更新，不会刷新整个HTML页面。 一、显示渐隐效果利用该Spry效果，可以使元素产生淡淡显示或隐藏的动画效果。新建一个页面文档，插入一幅图像并选中该图像。单击行为面板上的“+按钮，从弹出菜单中选择“效果显示/渐隐，弹出“显示/渐