Dreamweaver的行为事件-Dreamweaver教程
2024-09-12 12:29:44
供稿：网友
dreamweaver这个名字相信大家都不会生疏了。自打上市以来以其鲜明的特性和完善的功能赢得了众多网友的青睐。dreamweaver能够在众多的同类软件中赢得一席之地，主要归功于它完全开放的插件环境以及它所能创造出的那些另人耳目一新的网页特效。我即将要向大家介绍的就是通过dreamweaver的行为事件所制作出的一些网页特效。这其中有一些是通过dreamweaver的插件来实现的。希望大家可以通过这些特效使自己的网页更加的绚丽多彩。
一．通过链接实现对flash的控制
为了使网页本身活动起来，我们在制作网页时往往会插入一些诸如flash的动画，那么有没有什么方法使浏览者在浏览时可以控制这些动画的运程呢？答案是有的！
首先我们选中将要附加行为的对象，例如一段加有链接的文字。随后按下快捷键f8，单击行为面板上的" "按钮，打开动作菜单，选择"control shckwave or flash"此时会弹出如图1的对话框。（当然在此之前你的网页中一定要已经插入了flash的动画，并对其命名）。从"movie"(动画)下拉菜单中选择将要控制的对象名称以及嵌入对象所使用的标记。再在"action"(动作)区域选择所要实现的效果。
·play（播放） 选择该项是当鼠标移动到链接上时播放动画。
·stop（停止） 选择该项是当鼠标移动到链接上时停止动画的播放。
·rewind（返回） 选择该项是当鼠标移动到链接上时动画返回到最前端。
·go to frame(跳转) 选择该项是当鼠标移动到链接上时动画跳转到所指定位置。并停
留在该位置上。
设置完后按快捷键f12，在浏览器中预览。怎么样这回flash听话了吧！
二．可拖动的层
这个网页特效可以使浏览者通过鼠标的拖动来移动一个层，这样不但给了浏览者一定的
自主空间，同时在无形之中也给你的网页加入了一条亮丽的风景线。
首先选中要拖动的层，按下快捷键f8，单击行为面板上的" "，选择"drag lager"（拖
动分层）命令，这时将弹出如图2的对话框。在lager下拉菜单中选择将要拖动的分层，在
"movement"选择要拖动分层的移动方式。移动方式分为两种，一种是受限制的移动方式（constrained）,指可移动层只能在你所规定的范围内移动。你可在后方的文本框中定义可移动区域的位置值，单位是像素。另外一种是不受限制的移动方式（unconstrained）指可移动层可以在任意范围内移动。在"drop target"区域可设置当前分层的移动，点击"get cunrrent position"可获得当前分层的位置。随后单击"ok"，按快捷键f12，在浏览器中预览，怎么样？刚才定义的那个分层是不是已经可以被鼠标拖动了？
三．弹出信息对话框
我们在制作主页的过程中，总是有许多要说明的地方，假如把这些说明内容全部加入到页面中，又会使页面显得过于凌乱。因此我们可以应用dreamweaver的行为事件所提供的另外一项功能解决这个问题。
首先我们假设要对一个链接进行说明，用鼠标选定该链接按下快捷键f8，单击行为面板中的" "按钮，在弹出的菜单中选择"pop message"（弹出信息）。随后在弹出对话框中的message文本框里输入说明的内容，单击"ok"。按下f12键在浏览器中预览。当你的鼠标移动到该链接上时就会弹出信息对话框，对话框中就是你刚才所输入的内容。
四．弹出菜单
我们在浏览别人的网页时经常会碰到当你的鼠标移动到一个链接上时就会弹出一个菜单；而你的鼠标离开时该菜单又会自动的隐藏，这个网页特效在fontpage中要加入四段代码才可以实现，非常的麻烦。但在dreamweaver中我们可以运用行为事件中的显示-隐藏-分层轻松搞定。
首先建立一个分层对其命名并将其设置为隐藏的形式，随后选中一段有链接的文字，单击行为面板上的" "，在弹出菜单中选择"show-hide-layer"(显示-隐藏-分层)。此时会弹出如图3的对话框。在name layers文本框中显示的是当前页面中的所有分层，选定你刚才命名并隐藏的分层，点击下方的show(显示)按钮。"ok"可以在浏览器中预览了，将你的鼠标移动到你附加行为的链接上时，就会显示出刚才隐藏的那个分层了。同时应用这个网页特效你也可以使一个本来存在的分层消失，只要在定义分层属性的时候选择hide(隐藏)就可以了。|||
五．变换图象
这个特效可以使图象随鼠标变化。当你的鼠标移动到一个图片上时该图就会变为另外一幅图片。这样可以生动的体现出图片链接的内容。
首先我们预备好两张大小完全相同的图片，将其中一张（图象1）插入到网页之中，并对其命名。这张图是预备在网页中直接显示的，选中它按下快捷键f8，点击行为面板上的" "，选择弹出菜单中的"swap image"（替换图象）。此时会弹出如图4的对话框。在"image"文本框中会显示出当前页面中的所有图象。选中刚才命名的图象点击"set source to"文本框右方的"browse"，加入另一张事先预备好的图象（图象2）。假如你希望在浏览时当鼠标离开图象2时图象仍可恢复成原来状态，则在下方的"restore image onmouseout"前打勾。"ok"大功告成，按下f12，在浏览器中预览。效果如何，满足吗？
六．创建自动加入收藏夹功能。（插件）
`最近我在网上找到了一个插件(add favourite)，通过这个插件可以使你的网页在每次显示时都自动提醒浏览者将你的主页放入收藏夹。虽然这样做会很烦人，不过对于提高你的浏览量还是有一定的帮助的。该插件下载地址为：
http://dream.zj.cninfo.net/dream/plugin/behaviors/ieaddfavourite.zip
下载后解压至…/dreamweaver/configuration/behaviors/actions/下，启动dreamweaver。相应的在行为菜单中就会出现"ie add favourito"（添加收藏）。选择该项就会弹出相应的对话框。只要在title in文本框中输入收藏你的网站时计算机默认的名字就可以了。单击"ok"，按f12预览一下，怎么样？
七．逐渐缩小的层（插件）
最近还找到了另外的一个插件，其效果是使一个层从四面向中间逐渐的缩小，最后消失。（division in）该插件下载链接为：
http://nic.shtle.net.cn/hato/dreamteam/download/dreamweaver_plugnis/behaviour/behaviour/division.zip
下面我就向大家介绍一下这个插件的使用方法。首先按照（六）的步骤将其安装到相应的目录内，启动dreamweaver。建立一个分层并对其命名，为了可以看出演示效果最好对这个分层定义背景颜色或背景。按下快捷键f8，单击行为面板上的" "，这时在行为菜单中会多出"transition:division in"（缩小分层）选项。在所弹出对话框的第一行文本框中输入刚才定义的分层的名字，在第二行文本框中输入你希望分层从缩小开始到完全消失所需要的时间，单位是秒。设置完毕后单击"ok"，按下f12在浏览器中预览！
八．使网页背景随时间变化（插件）
这个插件可以使你的网页的背景随时间逐渐的变化。下载地址为：
http://nic.shtel.net.cn/hato/dreamweaver/download/dreamweaver_plugnis/behaviour/behaviour/fade.zip
首先按照（六）的步骤将其安装至相应的目录内，然后启动dreamweaver。按下快捷键f8键，单击行为面板上的" "，你会发现在行为菜单中会多出"cross browser background fade"（浏览器背景转换）选择该项，在弹出对话框的第一行文本框中输入网页启始背景颜色的相应代码，在第二行文本框中输入变化后颜色的代码。最后一行中输入整个变化过程所需要的时间，单位是秒。假如不进行设置系统默认的是由黑色变为白色，单位是一秒。好了可以在浏览器预览了！按下f12，看看效果吧！
九．网页右方滚动出现层
这个插件可以控制一个层，使其自动的从网页右方出现并向左移动。 下载地址为：
http://dream.zj.cninfo.net/dream/plugin/behaviors/wm_chg_link_bh.zip
首先仍然按照（六）的步骤将其正确安装至相应目录内，随后启动dreamweaver。在网页中建立一个分层，并对其命名。为了可以更好的看到演示效果建议对该层定义背景颜色或加入相应背景。随后按下快捷键f8，单击行为面板上的" "，在弹出的菜单中就会多出"cross browser emerge form right"（从右方穿过浏览器）。选择该项，将弹出如图5的对话框。在上方的layer文本框中选中刚才命名并加入背景的那个层。在下方的定义时间文本框中输入完成整个移动过程所需要的时间，单位是秒。在最后一行中输入该层将向左方移动的距离大小，单位是像素。设置完毕后单击"ok"。在浏览器中看看效果如何吧！|||
以上的九中网页特效都是通过dreamweaver的行为事件来完成的，很好的利用这些功能并对其进行不断的完善和扩充，就会使你的网页更加的亮丽，出众。
