Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Dreamwaver教程 >> 正文

随心所梦之Dreamweaver行为篇--行为详解
文章来源:互联网

   在本节中我们将详细讲解各动作的用法,只要你能边学边用,就会做出令人难以置信的效果来。为了节约篇幅,我们的例子都没有引用太多的功能,做到尽量言简意赅。

Call JavaScript(调用 JavaScript )

   调用 JavaScript 是使选中的物件具有可执行的能力。方法:

   1、选取物件,并打开 Behaviors inspector 。

   2、在 Behaviors inspector 窗口中点击“ + ”号,打开下拉选单。在其中选择“ Call JavaScript ”动作。

   3、在打开的窗口中录入 JavaScript 语句或变量。我们可以录入: window.close()

   4、点击确定退出对话框。并确认其缺省事件值为“OnClick”。

   5、F12预览一下,当我们点击按按钮时,浏览器会自动关闭。


  Change Property (改变属性)

   使用本功能可以动态改变物件的属性,从而响应用户的动作,产生交互操作的效果。我们以动态改变一个层的背景色为例说明这个功能的用法:



   1、选择在网页中己存在的一个层,假定它的名称为: LyrRed 。

   2、在 Behaviors inspector 窗口中点击“ + ”号,打开下拉选单。在其中选择“ Change Property ”动作。

   3、这时将弹出一个对话框,如图修改其属。注意,只有当你选择了正确的目标浏览器时,这个效果才能正确显示出来。对于不熟悉语言的读者来说,这个动作是较难掌握的。

   4、本例子是当用户用鼠标点击层时,层的背景色变为我们定义的: #f1fafa 颜色。

Check Browser(检查目标浏览器)

  正如我们所知道的,两大有着各自个性化标准的浏览器给网页制作人员带来了很大的麻烦,当我们不知道用户是使用何种浏览器访问我们的网站时,就不得不得罪其中的一种浏览器用户。使用 Check Browser功能就可以智能地检测对方的浏览器类型及版本。为了实现智能检测用户浏览器类型并适当引入为不同浏览器所设计的页面,我们进行如下操作:

   1、首先做好两个分别为 IE 、 Navigator 优化的页面,存盘为: 4IE.HTML 、 4NN.HTML ,以备下一步调用。

   2、由于本项功能是在页面加载时( onload )进行 ,
相对应的物件就是页面本身 $#@60;body$#@62;,所以在进行下一步操作之前并不一定非要选择 $#@60;body$#@62;,系统默认值是指向整个页面的。

   3、打开 Behavior inspector ,并选点“ ”按键,在下拉菜单中选择 Check Browser。这时会打开一个对话框,要求您进行适当的设置。如图设置参数,注意在这里就使用到了前面己建好的两个页面。




   其中我们需要用逻辑思维进行跳转设置,学过程序的读者会觉得很轻松,“ Stay on this page”的意思是不进行任何操作,一般我们都是选取“ Goto URL”跳至首选地址或“ Go to Alt URL”跳至次要地址。

   4、点击“ ”,回到 Behavior inspector,确认事件项中为“; ”,可以预览了。

 
Check Plugin 检查插件

  虽然现在利用 FLASH 的主页越来越多,但并不是所有的用户都能在自己的浏览器上观看到效果,因为播放FLASH、SHOCKWAVE 等第三方多媒体程序时是需要使用适当的浏览器插件的。为了照顾不同的用户,也使得网站更具有人性化的特点,我们可以利用“检查插件”这一功能自动把不具备播放条件的用户引导到非FLASH
版本页面中去。

   1、首先做好两个分别为含有 FLASH 的页面和不含有 FLASH 文件的页面,存盘为: flash.htm 、 noflash.htm ,以备下一步调用。

   2、同上例一样,本例中仍不需选中任何物件,直接打开 Behavior inspector,并选点“ + ”按键,在下拉菜单中选择 Check Plugin 。

   3、如图所示进行参数设置:在简体中文版的操作系统中,这个对话框会出现显示不全的毛病,不过只要你按项来填写,滚动条还是可以工作的。注意,要选中对话框下面的“ Always go to first URL if detection is not possible ”。

   4、本功能除了可以检测 FLASH 插件外,还可以检测: Shockwave, LiveAudio, Netscape media player, QuickTime。由于 Flash 5己经出版,大家还可以到 MacroMedia的网站上去扩充本项的功能。当然,如果你的程序足够厉害的话,也可以自行改造一个。这将在以后的课中涉及到。

   5、点击“ ”,回到 Behavior inspector,确认事件项中为“; ”,可以存盘预览了。

  Control Shockwave or Flash (控制 FLASH)

   使用本功能可以手工控制嵌入文档中的 FALSH 或 SHOCKWAVE 。 DreamWeaver 对同属本公司出品的 FLASH 格式在控制上有极大优势,我们不需要在 FLASH 动画中做出诸如“停止”、“播放”、“回放”、“转至”等功能控制,在后期的 中设置显得更富定制性。

   1、在这个例子中我们以 FLASH 动画为例,至于 SHOCKWAVE 的操作方法大同小异。首先做好一个 FLASH 动画,存盘为: flash.swf ,以备下一步调用。使用菜单中的插入媒体命令插入 FLASH 动画,并且一定要为其命名,我们在属性面板中录入: CotrlFls

   2、选中这个 FLASH 物件,直接打开 Behavior inspector ,并选点“ ”按键,在下拉菜单中选择 。

   3、在弹出的对话框中选择“停止”、“播放”、“回放”、“转至”控制命令即可以了。
Drag Layer (拖动层)

  此功能可以让浏览者在浏览器中拖动己有的层,常见的拼盘游戏、网络试题等都是使用了此功能。在 DeramWeaver的姐妹篇 coursebuilder中强化了这个功能并将其制成了功用更为强大模板,在此我们只介绍单纯利用 DreamWeaver来完成拖动层的实现。

   1、在网页中加入一个层(诸如此类的简单动作在以后的说明中不再详述)。使用加入图片或者改变背颜色的方法使得此层清楚可见。

   2、因为用户在拖动层以前这个行为必须在之前被执行,所以最好让此层在 BODY 中并且使用 onload 属性。同样直接打开 Behavior inspector ,并选点“ ”按键,在下拉菜单中选择 Drag Layer。

   3、在弹出的对话框中按要求定制。我们可以令此层只在水平或者垂直方向上移动,也可以令其在任意方向移动。使用“ Get Current Position”可以讯速得到当前层在网页中的位置座标。

   4、如果你不愿意使用 Onload 事件,也可以使用 OnMouseOver 事件,但之前你必须在层中设置一个空链接并以 OnMouseOver 事件来触发 Drag Layer ,有能力的读者可以自行尝试。


  Go To URL (在窗口中打开链接)

   使用本功能可以轻松实现在窗口中打开链接的功能。由于操作过程与前面的例子相似,十分简单,在此不做详述。值得注意的是在框架结构的网页中一定要养成为各框架命名的习惯,否则此功能无法正确实现。
   Jump Menu & Jump Menu Go

   使用此功能可以控制跳转菜单的定制,实际等于双击页面的中跳转菜单。此功能操作简便,在此不做详述。

   Open Browser Window (定制窗口)


   使用本功能可以定制打开窗口的大小、命名、是否有工具栏、是否有地址栏等属性。灵活使用本功能,可以得到意想不到的屏幕效果。

   我们利用点击按钮打开一个无边框、无工具栏的窗口为例。先准备一个 文件,取名为 show.htm ,插入一个按钮并使其链接指向这个页面。



   1、我们利用点击按钮打开一个无边框、无工具栏的窗口为例。先准备一个HTML 文件,取名为show.htm ,插入一个按钮并使其链接指向这个页面。

   2、选取按钮物件,并打开 Behaviors inspector 。在 Behaviors inspector 窗口中点击“ + ”号,打开下拉选单。在其中选择“ Open Browser Window ”动作。

   3、在弹出的窗口中,如图所示,在 width 与 Height 中分别录入要打开窗口的宽与高。在属性一项中可选取:导航栏、菜单、地址栏、滚动条、状态栏等等。在 Windows name中设置打开窗口的名字。

   4、点击确定,存盘预览。

Play Sound (播放背景音乐)

  使用本功能可以设置当前页面的背景音乐,以及对音乐播放的控制。因为播放音乐是需要音频的支持,所以您需要确定你嵌入网页的音乐格式能够被设别。

   1、选取按钮物件,并打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Play Sound”动作。

   2、在弹出的对话框中选取一个音乐文件。一般来说小巧的MIDI或MP3文件是最适合选用的,如果你能找到相对较小的WAV 文件也是可以的。尽量不要选用不常用的文件格式而且文件字节也不要过大。

   3、确定事件为Onload。

   Popup Message (弹出信息对话框)

   此功能是最常用也是最有效率的提示方法。

   1、选取按钮物件,并打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Popup Message”动作。

   2、在弹出的对话框中录入需要显示的文字,这些文字将成为未来对话框的主体文字。除此之外你也可以在其中使用JavaScript语句,只需要加在大括号中。

   Preload Images (预下载图片)

   使用本功能只在提高网页的显示速度,当本页中存在许多图片之时,尤其是本页由多幅图片组成。否则因为下载速度较慢,文字部份先显示而图片迟迟不能显示,不利于浏览。本功能实现较简单,可以只选择BODY或不选择物件即可在指导下完成,本教程不做详述。

   Set Text of Layer(Frame ,Status Bar ,Text Field )动态改变层、框架、状态栏、文字域的文字

   这几项功能十分相近,我们在一起进行讲解。一般来说改变其中的文字只在提供交互性的提示或结果,我们就以改变状态栏的提示为例来一同讲解他们的使用方法:

   1、选取按钮物件,并打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择SetText-$#@62;Status Bar动作。

   在弹出的对话框中录入需要显示的文字,这些文字将成为浏览器状态栏的提示文字。除此之外你也可以在其中使用JavaScript语句,只需要加在大括号中。
2、点击确定退回到Behaviors inspector,在其中把事件选为OnMouseOver。

   3、存盘预览。这时你将发现当你的鼠标移到物件上时浏览器下方的状态栏文字变成了我们刚才设置的文字。

   注:如果你想让鼠标离开物件后状态栏恢复空白的话,重复前三步,在第一步的后期将对话框中文字设为无,并且在第二步把事件选为OnMouseOut即可。

   由于其它三项的实现与之相似,不再多说。需要强调的是,不要小看这些小命令,综合使用会实现看起来十分有气势的主页。好了,你亲自试试吧。

   Show-Hide Layers (显示隐藏层)

   显示隐藏层命令可以使我们能够利用交互行为控制在页面中的层的显示与隐藏。层在应用中是十分广泛的,但是由于两大浏览器对它的定义大有不同,所以在实际应用中并不是很多,但是我相信随着更高版本的浏览器的出现,对双方代码的兼容能够更上一层楼。

   1、打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Show-Hide Layers”动作。



   2、如图所示,在对话框中显示了在当前页中所有可用的层,如果页中加的层过多的话,为它们分别起个易于识别的名字则很重要。选中其中的一个层,再点击下面的“显示”或“隐藏”按钮来定制层的显隐。
Swap Image (/Restore)交叠图片

  一般来说交叠图片用于接收用户的动作而动态改变图像的地方,比如当我们把鼠标指向某个图片链接时,这个图片会变成另外的一个图像,而当鼠标移出图片区时图片再恢复到原来的样子。 我们使用一个例子来说明使用方法及注意事项:

   首先我们要准备两个图片备用,值得说明的是这两个图片的尺寸需要一致,否则会因尺寸的不同而导至后一组图片拉伸或变形。

   2、使用菜单命令插入图片序列中的第一幅图片(PIC1)。

   3、打开Behaviors inspector。在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“ Swap Image”动作。

   4、在弹出的对话框中,选取图片序列中的第二幅图片(PIC2),有必要同时选中“预下载图像”与“鼠标移出时恢复图像”选项。

   事实上接受用户鼠标的动作而转换图像可以最多达到四幅:原始图、鼠标悬浮时显示图、鼠标点击时显示图、鼠标点击后显示图。有精力的读者可自行在此代码基础上研究开发,当然你也可以借鉴由FireWorks产生的代码。

   Go To Timeline Frame 在时线中跳转

   TimeLine是DreamWeaver提供的最富特色的动画功能,虽然它最终会为新兴的动画技术所取代,但是在一段相当长的时间内,使用语句来控制TimeLine的动画还是极有意义的。

   相比于Flash动画,在“时线”中的对帧的控制还是显得比较薄弱,但是如果你使用“Go To Timeline Frame”功能,可以控制对某帧的跳转,从而实现动画停止、回转、跳至某帧的功能。

   1、打开一个含有Timeline的页面,使用菜单中“窗口”—$#@62;“时线”来打开Timeline inspector。对于如何创建Timeline读者可以参照其他教程,我推荐一个站点:http://mail.3322.net/。
  2、选择物件,并打开Behavior inspector,在Behaviors inspector窗口中点击“+”号,打开下拉选单。其中选择“Go To Timeline”动作,并适当选择命令。



   3、如图所示,我们在下拉菜单中选择要控制的时线,并键入跳至的帧数。

   4、点击确定,回到Behaviors inspector中,确认一种动作。

   Validate Form检测表单合法性

   当我们在网上填写一些比如个人资料的表单时,当我们因错误录入时会有一个窗口弹出提示我们录入的规范。一般我们可以利用CGI程序来完成比较复杂的检验工作,但是当检验是需要即时提示或者不具备CGI环境时,我们可以利用Validate Form命令来检验表单填写的合法性。

   我们先以填写年龄为例:



   1、先在面页中插入一个表单,为其命名。选取这个表单项并打开并打开Behavior inspector,在Behaviors inspector窗口中点击“+”号,打开下拉选单。在其中选择“Validate Form”命令。

   2、在弹出的对话框和上半部选择需要控制的表单项,并在Value项中选中Required,这一点很重要,在下面的选项中我们可以进行数种过滤:Anything(任意)、数字、邮件地址、限制区间数字。我们在这个例子中输入合法年龄,从1到110。

   3、点击确定回到Behavior inspector,确定动作为:OnBlur,现在你可以预览了,当你在此表单中录入的数字不在1~110之间时,浏览器马上会提示:“需要录入1~110之间的数字”

   还有一个情况是针对群体表单项进行设置,操作基本与单项相同,只是在第一步时,是选中$#@60;form$#@62;标签,而不是单个单元罢了。

   至此我们就己经利用一些浅显的例子讲解了各行为的具体用法,但还是要强调的是不要小看这些功能,只要你灵活应用,就能做到别人难以企及的精彩页面。还有一点就是为了考虑低配置、低传输率的用户,也不要在同一页中过多地使用行为,那样会使得整个页面的下载与显示十分缓慢。
   3、值得注意的是,由于继承的关系,当嵌套关系的层实现显示与隐藏时必须考虑其父层的显隐属性。

   4、点击“OK”,回到Behavior inspector,在事件选项中为其设置适当的事件以触发此动作。
  在上一单元中我们初步了解了如何在DreamWeaver中插入行为,如何设置各项动作。在这一讲中,我们将继续学习各动作、事件的用法,以及手工定制自己的行为的方法。由于我们的教程是针对高级用户的,所以在下面的课程中会出现大量的编程语言的知识,如果你觉得你的编程语言基本功不扎实,我还是建议你现在拿出JavaScript语法手册,一边读教程,一边复习JS的语法吧。

   我们知道,DreamWeaver的最大特点就是让不懂编程的人能轻易应用行为并使得网页具有交互能力。经验丰富的网页设计师也可以自行设计制做自己的行为供别人或自己日后调用。对于前者,你会得到同别人分享工作成果的乐趣,而对于后者,通常是因为我们要插入一个经常要用到的一段公共代码,但这段代码的参数又需要经常改变,所以自行设计行为就成为必要了。

   DreamWeaver支持至少两种SCRIPT语言,一种是JavaScript,一种是VBScript。但对于VBScript,不能直接加入到DreamWeaver中,需要通过DOM来完成。所以我们就以能直接应用于DreamWeaver的JavaScript为例来讲解扩展行为的方法。

   正如我们以前所讲述的那样,一个完整的行为是由“事件”与“动作”两个部份组成的,比如一个转换图片的动作需要一个OnMouseOver事件来激活,由于事件属于浏览器所解析的范围,所以在我们进行行为的扩充的过程中,只需要利用现有的事件而没有必要再自行编写事件代码。

   DreamWeaver的事件是以*.js文件形式存放于DW安装目录/configration/behaviors/actions/下,我们所写的代码也要以.js存盘于此,否则除非事先对DreamWeaver设置,否则无法在DW中直接应用。

   为了扩展DreamWeaver的行为,需要先了解一下DreamWeaver的API。正如操作系统中的windows API一样,在应用环境中包含许多与应用环境直接有关的函数,这些函数称为API(Application Programming Interface,应用编程界面。)函数。DreamWeaver包含了八个这样的API函数。他们分别是:applyBehavior()、behaviorFunction()、canAcceptBehavior()、displayHelp()、 deleteBehavior()、identifyBehaviorArguments()、inspectBehavior()、 windowDimensions()。熟悉可视化编程的读者可能对Windows API的声明比较熟悉,但在Dreamweaver中声明这些函数显得很简单,不需要过多考虑数据类型等因素。
applyBehavior()函数是一个必需的函数,每个行为都需要通过使用它来完成一定的任务。

   通过它来插入用户页面一个由behaviorFunction()调用的事件柄(event handler)。本函数也可以单独完成一个任务,但必需依赖于页面中某个的物件,这个物件是用来激活事件的载体。

   behaviorFunction()用来向页面的HTML头中插入以$#@60;Script language = javascript $#@62; $#@60; / script $#@62; 所包围的代码。

   canAcceptBehavior()用来确定所引用的动作是否适合于选中的HTML代码域,并指定对于本动作的缺省事件值。本函数还可以确定当前页面中是否存在特定的文件(比如Shockwave动画)。

   displayHelp() 如果引用了本函数,在参数对话框中将出现“帮助”按钮,当用户点击此按钮时函数执行。

   deleteBehavior() 用来删除一个己经存在的行为。如想删除一个由applyBehavior()产生的行为。

   identifyBehaviorArguments() 用此来改变包含于行为之中的参数值。比如你将本页另存为其它页面并保存于其它目录中时,此函数会保证行为中的参数值(比如URL)随之而改变。

   inspectBehavior() 用来检测用户页面中己经存在的相同行为,并将其参数值赋给当前的参数设置对话框。如果页面中没有相同行为,那么将用缺省值赋给当前的参数设置对话框。

   windowDimensions() 用来指定参数对话框的显示模式,如果不使用本函数,窗口将自动生成。因此除非你需要定义一个大于640 pixels * 480 pixels的对话框,否则不必使用本函数。
为了让大家能够完整理解行为的编制方法,我们引用了一个DreamWeaver附带的例程来说明如何自行编写行为,以下是插入新行为后页面的完整代码:

$#@60;html$#@62;
$#@60;head$#@62;
$#@60;title$#@62;浏览器类型测定$#@60;/title$#@62;
$#@60;meta http-equiv="Content-Type" content="text/html"$#@62;
$#@60;script language="JavaScript"$#@62;
//所有的函数声明都会被插入到HTML页面的$#@60;head$#@62;$#@60;/head$#@62;之间
function WhichBrowserIs(netscapeURL,explorerURL) {
if (navigator.appName == "Netscape") {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == "Microsoft Internet Explorer") {
if (explorerURL) location.href = explorerURL;
}
}
//定义一个新函数:WhichBrowserIs() ,函数可以检测IE与netscape两种浏览器名称。

//*****以下开始的是API调用部分*****

function canAcceptBehavior(){
return true;
}
// 函数返回值为即将插入到HTML头的函数名。
function behaviorFunction(){
return "WhichBrowserIs";
}
//建立一个函数处理事件柄。
function applyBehavior() {
var nsURL = escape(document.theForm.nsURL.value);
var ieURL = escape(document.theForm.ieURL.value);
if (nsURL && ieURL) {
return "WhichBrowserIs("" + nsURL + "","" + ieURL + "")";
}else{
return "Please enter URLs in both fields."
}
}
//自事件柄所指函数中提取出变量并将其赋值给对象
function inspectBehavior(fnCall){
var argArray = getTokens(fnCall, "()",");
var nsURL = unescape(argArray[1]);
var ieURL = unescape(argArray[2]);
document.theForm.nsURL.value = nsURL;
document.theForm.ieURL.value = ieURL;
}

//*****下面开始的是自定义函数部分*****

// 使第一个文字框具有焦点性质,即光标定位于第一个文字框中。
function initializeUI()
// 使浏览器跳转到己定义的页面去。
function browseForURLs(whichButton){
var theURL = dreamweaver.browseForFileURL();
if (whichButton == "nsURL"){
document.theForm.nsURL.value = theURL;
}else{
document.theForm.ieURL.value = theURL;
}
}

//*****结束定义*****

$#@60;/script$#@62;
$#@60;/head$#@62;
$#@60;body$#@62;
$#@60;form method="post" action="" name="theForm"$#@62;
$#@60;table border="0" cellpadding="8"$#@62;
$#@60;tr$#@62;
$#@60;td nowrap="nowrap"$#@62; 如果浏览器为Netscape Navigator,则转入到地址:$#@60;br$#@62;
$#@60;input type="text" name="nsURL" size="50" value=""$#@62;
$#@60;input type="button" name="nsBrowse" value="Browse..."
onClick="browseForURLs("nsURL")"$#@62;$#@60;/td$#@62;
$#@60;/tr$#@62;
$#@60;tr$#@62;
$#@60;td nowrap="nowrap"$#@62; 如果浏览器为Internet Explorer,则转入地址:$#@60;br$#@62;
$#@60;input type="text" name="ieURL" size="50" value=""$#@62;
$#@60;input type="button" name="ieBrowse" value="Browse..."
onClick="browseForURLs("ieURL")"$#@62;$#@60;/td$#@62;
$#@60;/tr$#@62;
$#@60;/table$#@62;
$#@60;/form$#@62;
$#@60;/body$#@62;
$#@60;/html$#@62;

   我们将其中的JavaScript语句存成*.js文件存放于Actions目录即可。如果你想在Behavior inspector的下拉菜单中看到你定义的行为的身影,还得需要修改DreamWeaver的界面文件。其文件存在于Configurationmenu目录下,为XML文件写成。如果你通过网上下载了第三方的行为代码,就可以方便地进行安装,在此我们不做更多的说明。

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有