Dreamweaver这个名字相信大家都不会陌生了。自打上市以来以其鲜明的特性和完善的功能赢得了众多网友的青睐。Dreamweaver能够在众多的同类软件中赢得一席之地,主要归功于它完全开放的插件环境以及它所能创造出的那些另人耳目一新的网页特效。我即将要向大家介绍的就是通过Dreamweaver的行为事件所制作出的一些网页特效。这其中有一些是通过Dreamweaver的插件来实现的。希望大家可以通过这些特效使自己的网页更加的绚丽多彩。
一.通过链接实现对Flash的控制
为了使网页本身活动起来,我们在制作网页时往往会插入一些诸如FLASH的动画,那么有没有什么方法使浏览者在浏览时可以控制这些动画的运程呢?答案是有的!
首先我们选中将要附加行为的对象,例如一段加有链接的文字。随后按下快捷键F8,单击行为面板上的"+"按钮,打开动作菜单,选择"control shckwave or flash"此时会弹出如图1的对话框。(当然在此之前你的网页中一定要已经插入了FLASH的动画,并对其命名)。从"movie"(动画)下拉菜单中选择将要控制的对象名称以及嵌入对象所使用的标记。再在"Action"(动作)区域选择所要实现的效果。
·
一.通过链接实现对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)指可
·STOP(停止) 选择该项是当鼠标移动到链接上时停止动画的播放。
·REWIND(返回) 选择该项是当鼠标移动到链接上时动画返回到最前端。
·GO TO FRAME(跳转) 选择该项是当鼠标移动到链接上时动画跳转到所指定位置。并停
留在该位置上。
设置完后按快捷键F12,在浏览器中预览。怎么样这回FLASH听话了吧!
二.可拖动的层
这个网页特效可以使浏览者通过鼠标的拖动来移动一个层,这样不但给了浏览者一定的
自主空间,同时在无形之中也给你的网页加入了一条亮丽的风景线。
首先选中要拖动的层,按下快捷键F8,单击行为面板上的"+",选择"Drag lager"(拖
动分层)命令,这时将弹出如图2的对话框。在lager下拉菜单中选择将要拖动的分层,在
"Movement"选择要拖动分层的移动方式。移动方式分为两种,一种是受限制的移动方式(constrained),指可移动层只能在你所规定的范围内移动。你可在后方的文本框中定义可移动区域的位置值,单位是像素。另外一种是不受限制的移动方式(Unconstrained)指可
手机里params是什么意思移动层可以在任意范围内移动。在"Drop Target"区域可设置当前分层的移动,点击"Get Cunrrent Position"可获得当前分层的位置。随后单击"OK",按快捷键F12,在浏览器中预览,怎么样?刚才定义的那个分层是不是已经可以被鼠标拖动了?
三.弹出信息对话框
我们在制作主页的过程中,总是有许多要说明的地方,如果把这些说明内容全部加入到页面中,又会使页面显得过于凌乱。因此我们可以应用Dreamweaver的行为事件所提供的另外一项功能解决这个问题。
首先我们假设要对一个链接进行说明,用鼠标选定该链接按下快捷键F8,单击行为面板中的"+"按钮,在弹出的菜单中选择"POP Message"(弹出信息)。随后在弹出对话框中的Message文本框里输入说明的内容,单击"OK"。按下F12键在浏览器中预览。当你的鼠标移动到该链接上时就会弹出信息对话框,对话框中就是你刚才所输入的内容。
四.弹出菜单
我们在浏览别人的网页时经常会遇到当你的鼠标移动到一个链接上时就会弹出一个菜单;
三.弹出信息对话框
我们在制作主页的过程中,总是有许多要说明的地方,如果把这些说明内容全部加入到页面中,又会使页面显得过于凌乱。因此我们可以应用Dreamweaver的行为事件所提供的另外一项功能解决这个问题。
首先我们假设要对一个链接进行说明,用鼠标选定该链接按下快捷键F8,单击行为面板中的"+"按钮,在弹出的菜单中选择"POP Message"(弹出信息)。随后在弹出对话框中的Message文本框里输入说明的内容,单击"OK"。按下F12键在浏览器中预览。当你的鼠标移动到该链接上时就会弹出信息对话框,对话框中就是你刚才所输入的内容。
四.弹出菜单
我们在浏览别人的网页时经常会遇到当你的鼠标移动到一个链接上时就会弹出一个菜单;
而你的鼠标离开时该菜单又会自动的隐藏,这个网页特效在Fontpage中要加入四段代码才可以实现,非常的麻烦。但在Dreamweaver中我们可以运用行为事件中的显示-隐藏-分层轻松搞定。
首先建立一个分层对其命名并将其设置为隐藏的形式,随后选中一段有链接的文字,单击行为面板上的"+",在弹出菜单中选择"show-hide-layer"(显示-隐藏-分层)。此时会弹出如图3的对话框。在Name layers文本框中显示的是当前页面中的所有分层,选定你刚才命名并隐藏的分层,点击下方的Show(显示)按钮。"OK"可以在浏览器中预览了,将你的鼠标移动到你附加行为的链接上时,就会显示出刚才隐藏的那个分层了。同时应用这个网页特效你也可以使一个本来存在的分层消失,只要在定义分层属性的时候选择Hide(隐藏)就可以了。
五.变换图象
这个特效可以使图象随鼠标变化。当你的鼠标移动到一个图片上时该图就会变为另外一幅图片。这样可以生动的体现出图片链接的内容。
首先我们准备好两张大小完全相同的图片,将其中一张(图象1)插入到网页之中,并对其
首先建立一个分层对其命名并将其设置为隐藏的形式,随后选中一段有链接的文字,单击行为面板上的"+",在弹出菜单中选择"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),通过这个插件可以使你的网页在每次显示时都自动提醒浏览者将你的主页放入收藏夹。虽然这样做会很烦人,不过对于提高你的浏览量还是有一定的帮助的。该插件下载地址为:
dream.zjinfo/dream/plugin/behaviors/IEAddFavourite.zip
下载后解压至…\Dreamweaver\configuration\Behaviors\actions\下,启动Dreamweaver。相应的在行为菜单中就会出现"IE Add Favourito"(添加收藏)。选择该项就会弹出相应的对话框。只要在TITLE IN文本框中输入收藏你的网站时计算机默认的名字就可以了。单击"
六.创建自动加入收藏夹功能。(插件)
`最近我在网上到了一个插件(Add Favourite),通过这个插件可以使你的网页在每次显示时都自动提醒浏览者将你的主页放入收藏夹。虽然这样做会很烦人,不过对于提高你的浏览量还是有一定的帮助的。该插件下载地址为:
dream.zjinfo/dream/plugin/behaviors/IEAddFavourite.zip
下载后解压至…\Dreamweaver\configuration\Behaviors\actions\下,启动Dreamweaver。相应的在行为菜单中就会出现"IE Add Favourito"(添加收藏)。选择该项就会弹出相应的对话框。只要在TITLE IN文本框中输入收藏你的网站时计算机默认的名字就可以了。单击"
OK",按F12预览一下,怎么样?
七.逐渐缩小的层(插件)
如何自己制作视频最近还到了另外的一个插件,其效果是使一个层从四周向中间逐渐的缩小,最后消失。(Division in)该插件下载链接为:
nic.shtle/hato/Dreamteam/download/Dreamweaver_plugnis/Behaviour/Behaviour/division.zipdw怎么制作网页
下面我就向大家介绍一下这个插件的使用方法。首先按照(六)的步骤将其安装到相应的目录内,启动Dreamweaver。建立一个分层并对其命名,为了可以看出演示效果最好对这个分层定义背景颜或背景。按下快捷键F8,单击行为面板上的"+",这时在行为菜单中会多出"Transition:Division in"(缩小分层)选项。在所弹出对话框的第一行文本框中输入刚才定义的分层的名字,在第二行文本框中输入你希望分层从缩小开始到完全消失所需要的时间,单位是秒。设置完毕后单击"OK",按下F12在浏览器中预览!
八.使网页背景随时间变化(插件)
这个插件可以使你的网页的背景随时间逐渐的变化。下载地址为:
七.逐渐缩小的层(插件)
如何自己制作视频最近还到了另外的一个插件,其效果是使一个层从四周向中间逐渐的缩小,最后消失。(Division in)该插件下载链接为:
nic.shtle/hato/Dreamteam/download/Dreamweaver_plugnis/Behaviour/Behaviour/division.zipdw怎么制作网页
下面我就向大家介绍一下这个插件的使用方法。首先按照(六)的步骤将其安装到相应的目录内,启动Dreamweaver。建立一个分层并对其命名,为了可以看出演示效果最好对这个分层定义背景颜或背景。按下快捷键F8,单击行为面板上的"+",这时在行为菜单中会多出"Transition:Division in"(缩小分层)选项。在所弹出对话框的第一行文本框中输入刚才定义的分层的名字,在第二行文本框中输入你希望分层从缩小开始到完全消失所需要的时间,单位是秒。设置完毕后单击"OK",按下F12在浏览器中预览!
八.使网页背景随时间变化(插件)
这个插件可以使你的网页的背景随时间逐渐的变化。下载地址为:
数据分析线下周末班nic.shtel/hato/Dreamweaver/download/Dreamweaver_Plugnis/Behaviour/Behaviour/fade.zip
首先按照(六)的步骤将其安装至相应的目录内,然后启动Dreamweaver。按下快捷键F8键,单击行为面板上的"+",你会发现在行为菜单中会多出"Cross Browser Background Fade"(浏览器背景转换)选择该项,在弹出对话框的第一行文本框中输入网页启始背景颜的相应代码,在第二行文本框中输入变化后颜的代码。最后一行中输入整个变化过程所需要的时间,单位是秒。如果不进行设置系统默认的是由黑变为白,单位是一秒。好了可以在浏览器预览了!按下F12,看看效果吧!
九.网页右方滚动出现层
这个插件可以控制一个层,使其自动的从网页右方出现并向左移动。 下载地址为:
dream.zjinfo/dream/plugin/behaviors/wm_chg_link_bh.zip
首先仍然按照(六)的步骤将其正确安装至相应目录内,随后启动Dreamweaver。在网页中建立一个分层,并对其命名。为了可以更好的看到演示效果建议对该层定义背景颜或加入相应背景。随后按下快捷键F8,单击行为面板上的"+",在弹出的菜单中就会多出"Cross Browser Emerge form Right"(从右方穿过浏览器)。选择该项,将弹出如图5的
首先按照(六)的步骤将其安装至相应的目录内,然后启动Dreamweaver。按下快捷键F8键,单击行为面板上的"+",你会发现在行为菜单中会多出"Cross Browser Background Fade"(浏览器背景转换)选择该项,在弹出对话框的第一行文本框中输入网页启始背景颜的相应代码,在第二行文本框中输入变化后颜的代码。最后一行中输入整个变化过程所需要的时间,单位是秒。如果不进行设置系统默认的是由黑变为白,单位是一秒。好了可以在浏览器预览了!按下F12,看看效果吧!
九.网页右方滚动出现层
这个插件可以控制一个层,使其自动的从网页右方出现并向左移动。 下载地址为:
dream.zjinfo/dream/plugin/behaviors/wm_chg_link_bh.zip
首先仍然按照(六)的步骤将其正确安装至相应目录内,随后启动Dreamweaver。在网页中建立一个分层,并对其命名。为了可以更好的看到演示效果建议对该层定义背景颜或加入相应背景。随后按下快捷键F8,单击行为面板上的"+",在弹出的菜单中就会多出"Cross Browser Emerge form Right"(从右方穿过浏览器)。选择该项,将弹出如图5的
对话框。在上方的Layer文本框中选中刚才命名并加入背景的那个层。在下方的定义时间文本框中输入完成整个移动过程所需要的时间,单位是秒。在最后一行中输入该层将向左方移动的距离大小,单位是像素。设置完毕后单击"OK"。在浏览器中看看效果如何吧!
以上的九中网页特效都是通过Dreamweaver的行为事件来完成的,很好的利用这些功能并对其进行不断的完善和扩充,就会使你的网页更加的亮丽,出众。
以上的九中网页特效都是通过Dreamweaver的行为事件来完成的,很好的利用这些功能并对其进行不断的完善和扩充,就会使你的网页更加的亮丽,出众。
DW中行为的使用收集的资料 2009-12-01 18:17:24 阅读11 评论0 字号:大中小
“行为”(Behaviors)是Dreamweaver中一个很重要的概念。它集成在Dreamweaver中,可用来自动实现网页的动态效果和交互的JavaScript脚本程序。“行为”是Dreamweaver独特的概念,它使得我们不必去学习复杂的JavaScript程序也能方便迅速地实现一些网页的特殊效果。
一、“行为”基础
1.“行为”详解
我们先来了解一下“行为”的原理。一个完整的行为由“动作”和“事件”两个部分组成。“动作”是Dreamweaver预先编写好的JavaScript脚本程序,这些程序可以控制,例如打开一个新窗口、显示或隐藏层、播放一段音乐等动作;而“事件”是指我们对网页进行某种操作时,如鼠标点击、移动到某个图片上、键盘按下等,是否触发该事件。例如,当访问者将鼠标移动到某个链接上时,浏览器为该链接生成一个 onMouseOver事件。然后浏览器(IE或Netscape)检查是否存在一个为该链接生成事件时应该调用的JavaScript程序,也就是是否有一个预先设定的动作,如果这个动作是show layer,那么浏览器就将指定的那个层显示出来。
2.为网页添加一条“行为”
在“设计”面板上可以到“行为”面板,如果不到此面板,可点击“窗口→行为”菜单命令以打开“行为”面板。
添加一条“行为”的一般步骤是:首先在页面上选择需要添加“行为”的对象,如一个图片、一个链接。点击“行为”面板上的“+”按钮,从弹出的菜单中选择一个动作,如“播放声音”,在打开的动作设置对话框中设置好各个参数后回到“行为”面板。然后点击“事件”栏的倒三角形按卫生系统登录界面设计
钮,选择一个合适的事件。
(1)选择浏览器版本:
如果你是第一次使用行为面板,你会发现当你添加一个动作时,可供选择的事件非常少。这是因为Dreamweaver默认的浏览器版本是IE 3.0。所以为了能在特定浏览器下正常使用“行为”,首先要选择合适的事件集。选择事件集的方法是点击“行为”面板上部的“+”按钮,在弹出菜单中选择“显示事件”,这时会出现浏览器版本列表,从中选择“IE 5.0”选项。
注意:选择的浏览器版本越高,所支持的事件就越多。但并不是事件越多就越好,因为并不是所有人都使用的是最高版本的浏览器。
(2)选择动作:
在页面上选择好需要应用动作的对象后,我们为它添加动作。点击“行为”面板上的“+”按钮会出现所有动作的列表,选择你需要的动作后,在打开的设置对话框中进行具体的设置。
(3)选择触发事件:
点击“事件”栏的倒三角形按钮,选择一个合适的事件。当动作发生时即触发该事件。
二、基本动作应用
下面我们将逐一探讨Dreamweaver MX中内置的各种动作,详细介绍每一种动作的操作方法、参数设置及技巧。
1.播放声音
此动作的作用是为网页加入一段背景音乐。设置非常简单,选择此动作后将打开“播放声音”对话框,点击“浏览”按钮选择好需要播放的音乐文件即可。此动作的默认执行事件是onLoad,即打开网页就开始播放音乐,一般我们不必改动该事件。
注意:网页只支持MID和WAV两种格式的音乐文件。
2.打开浏览器窗口
此动作用于弹出新的网页,我们可以设置弹出的新网页的大小和外观。它实际上是调用JavaScript中的window.open()方法。该动作有多个设置选项:
pilipili网站注意:“要显示的URL”为必填项,其他参数均可不填,此时打开网页为正常大小;当页面中应用了多个此动作,而所有此动作设置的“窗口名称”都相同时,打开的网页都将在同一浏览器窗口出现,而不会打开多个;设置了窗口宽度和高度后,打开的网页窗口将不能改变大小,除非在“属性”选项中设置选中“调整大小手柄”项。
3.弹出信息
此动作经常用于在特定的条件下提示浏览者某些信息。如告诉注册者输入的密码太短等,它调用的是JavaScript的alert()方法,该动作也只有一个设置选项,在打开对话框中的“消息”栏中输入需要出现的信息即可。
4.调用JavaScript
此动作用于调用某一个JavaScript方法或函数,在打开的对话框中的“JavaScript”框中直接键入相应的文件即可。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论