5.3.2可视化编辑行为

时间：2023-10-15 百科知识版权反馈

【摘要】：在Dreamweaver CS4中，通过使用“行为”面板可视化设置行为，不直接编写动作脚本代码，也能自动生成JavaScript代码，轻松实现丰富的动态页面效果，实现用户与网页的交互。在行为面板中选择一种行为，单击面板中的增加事件值按钮▲，可以向上移动行为；单击降低事件值按钮▼，可以向下移动行为。为主菜单项添加行为。

5.3.2　可视化编辑行为

在Dreamweaver CS4中，通过使用“行为”面板可视化设置行为(事件和动作)，不直接编写动作脚本代码，也能自动生成JavaScript代码，轻松实现丰富的动态页面效果，实现用户与网页的交互。

1. 行为面板简介

Dreamweaver CS4中，通过选择菜单“窗口”->“行为”命令，或直接按下快捷键Shift+F4即可打开“行为”面板，如图5-16所示。

图5-16　行为面板

行为面板基本操作如下。

(1)选择对象：行为是为对象服务的，要添加行为，先得在网页编辑区选择一个目标对象，如文本、图像、按钮等。

(2)添加行为：添加行分为两步，即添加动作和选择事件。

单击行为面板中的“+”按钮，在弹出的下拉菜单中，选择动作，如交换图像、弹出信息、恢复交换图像、打开浏览器窗口、显示-隐藏元素检查表单、设置导航栏图像、设置文本、调用JavaScript、跳转菜单、转到URL、预先载入图像等；选好一种动作以后，再设置触发事件，系统会默认一个事件(如onLoad等)，单击这个事件旁边的“∨”符号，就能弹出下拉选项，如onLoad、onUnload、onFocus、onClick、onMouseMove、onMouseUp、onMouseDown、onMouseOut等，从中选择一项合适的触发事件。

(3)删除行为：在行为面板中选择某个已经定义的行为(如图5-15中的“onLoad|弹出信息”行为)，再单击行为面板中的“-”号按钮即可。

(4)调整行为顺序：当为同一个对象的多个行为应用同一种触发事件时，就应为这多个行为赋予事件权值，权值高的优先。在行为面板中选择一种行为，单击面板中的增加事件值按钮▲，可以向上移动行为；单击降低事件值按钮▼，可以向下移动行为。

网页里的导航菜单是网站的枢纽，网站中众多的网页全靠导航菜单联接在一起。因此，设计简洁美观的导航菜单是网页程序员一项十分重要的任务。

下面以导航菜单为例，说明可视化行为编辑的方法。

2. 文本下拉菜单

文本下拉菜单是最常见的网页导航菜单，例如，导航菜单一般情况下如图5-17左边所示(“学院简介”、“机构设置”)，当单击“学院简介”以后，就弹出下拉式的菜单，如图5-16右图所示。这是JavaScript行为的一种应用。

图5-17　文本下拉菜单

下面来学习可视化地制作这种下拉菜单的过程。

1)创建对象

在Dreamewaver CS4新建一个名为str_updown_menu.html的网页，在网页里创建一个2∗2、宽度为300像素的表格，表格的边框粗细、单元格边距、单元格间距都设为0，如图5-17左边的右上所示。在表格第一行(设置居中)第一列输入“学院简介”、第一行第二列输入“机构设置”，将文字加粗，并设置背景色为#8aF880，如图5-18右下所示。

图5-18　创建无边框的表格对象

在表格第二行第一列插入一个Div布局对象，在属性面板中为该Div对象命名为menu_1,并通过单击属性面板中的“编辑CSS”按钮，新建一个自命名为div_css1的类，将该类的背景色设置为#FFC、“定位-visibility”，属性设置为hidden(设置该属性，目的是为了浏览网页时不显示应用了这个类的对象)，如图5-19所示。

图5-19　为Div对象新建一个名为div_css1的类

再在该Div对象内输入“学院概况<br/>现任领导<br/>历届领导<br/>校徽校歌<br/>媒体评论”，其中的“<br/>”是软回车符，通过按Shift+Enter键而获得，如图5-20所示。

图5-20　表格对象内嵌入Div对象

2)添加行为

我们的目的是浏览网页时，显示“学院简介”、“机构设置”等菜单标题，不显示下拉菜单；而当单击主菜单项时，下拉子菜单会弹出来；光标离开子菜单区域时，子菜单消失。所以，我们既要为主菜单“学院简介”等对象设置行为，也要为子菜单“学院概况、现任领导……”对象设置行为。

添加一个行为，要分别为其添加动作和事件。

(1)打开“行为”面板。单击Dreamweaver菜单栏里的“窗口”→“行为”，呈现出“行为”面板。

(2)为主菜单项添加行为。选择字符串“学院简介”，单击行为面板里的“+”按钮，选择动作“显示-隐藏元素”，在弹出的对话框中，选择元素“div munu1”，并单击“显示”按钮，该动作的功能是将名为menu1的div对象显示出来(说明：由于menu1应用了div_css1样式，该样式默认的定位模式为隐藏)，确定以后，再在行为面板中为该行为选择事件为onClick(单击时发生)，如图5-21所示。

图5-21　为主菜单项添加行为

(3)为子菜单项添加行为。

选择名为menu1的div对象(子菜单)，类似地为该对象添加一个鼠标滑出(onMouseOut)时，menu1对象隐藏的行为，如图5-22所示。

图5-22　为子菜单添加行为

同样，可为“机构设置”主菜单项设置下拉子菜单。

保存并浏览网页，当单击“学院简介”时，弹出下拉子菜单，鼠标从子菜单里滑出时，子菜单消失，效果如图5-23所示。

图5-23　str_updown_menu浏览效果

查看网页代码，可看到str_updown_menu.html的代码如下。

----------------------清单　str_updown_menu.html---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>文本下拉菜单</title>

<!--

.div_css1 {

background-color: #ffffcc;

visibility: hidden;

}

-->

</style>

function MM_showHideLayers(){ //v9.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3)

with (document)if (getElementById &&

((obj=getElementById(args[i]))!=null)){ v=args[i+2];

if (obj.style){ obj=obj.style;

v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

obj.visibility=v; }

}

</script>

</head>

<body>

<br />

<table　width="300" border="0" cellspacing="0" cellpadding="0" >

<td><strong onclick="MM_showHideLayers('menu_1','','show')">学院简

介</strong></td>

</tr>

<td><div class="div_css1" id="menu_1"

onmouseout="MM_showHideLayers('menu_1','','hide')"

visibility:hidden>

学院概况<br />

现任领导<br />

历届领导<br />

校徽校歌<br />

媒体评论<br />

</div></td>

</tr>

</table>

</body>

</html>

--------------------------------------------------------------------

由此可见，通过给网页对象添加行为，自动添加了JavaScript动作函数(MM_showHideLayers())、CSS样式(.div_css1)，以及动作触发事件(onClick、onMouseOut)。

3. 图像下拉菜单

可视化编辑图像下拉菜单与编辑文本下拉菜单的方法有些近似。

1)创建对象

在Fireworks中编辑好四张小图：xygk-0.jpg、xygk-1.jpg、dzjg-0.jpg和dzjg-1.jpg，如图5-24所示。四张图的情况分别是：xygk-0.jpg(学院概况)和dzjg-0.jpg(党政机构)用作原始菜单图片；当鼠标滑过原始菜单图片时，分别变为相反颜色的xygk-1.jpg(学院概况)和dzjg-1.jpg(党政机构)图片。

启动Dreaweaver CS4，新建一个名为pic_updown_menu.html的网页文档，该文档与图片文件夹位于同一目录下。在网页中插入一个2∗2的表格，表格的边框粗细、单元格边距和单元格间距都设为0；然后，在第一行的第1、2单元格里分别插入图片xygk-0.jpg和图片dzjg-0.jpg，如图5-25所示。再在第二行第1个单元格里创建一个名为menu2的div对象，与上例相似，为该div对象设置一个名为div_css2的类，该类的背景色为#FF8、visibility定位属性为hidden(隐藏)，然后在div里输入文字：学院简介、现任领导等，换行采用软回车符(Shift+Enter)来实现，如图5-26所示。

图5-24　四个小图

图5-25　创建2∗2的表格

图5-26　主菜单与子菜单对象的建立

2)添加行为

(1)给主菜单图片添加行为。

主菜单图片“学院概况”有几种行为：鼠标滑过时变为反色的另一张图片(鼠标滑出时恢复原图)、鼠标单击菜单图片时出现下拉子菜单(div对象)。下面分别来添加这些行为。

选择“学院概况”图片，打开“行为”面板，单击行为面板中的“+”铵钮，在弹出的菜单中选择“交换图像”，弹出交换图像对话框，在该对话框中选择“图像image1”(就是xygk-0.jpg图片)；在“设置原始档为：”右边，单击“浏览”，选择要替换的图片(xygk-1.jpg)，并选中“鼠标滑开时恢复图像”选项，单击“确定”按钮。

查看“行为”面板，由于在“交换图像”对话框中选择了“鼠标滑开时恢复图像”，因此，行为面板中实际上产生了两个动作：交换图像和恢复交换图像。为“交换图像”动作选择事件：onMouseOver，恢复交换图像的事件已经设为了onMouseOut，如图5-27所示。

图5-27　“交换图像/恢复交换图像”行为设置

接着来设置该图像对象的另一个行为：单击“学院概况”时的下拉菜单动作。选择“学院概况”图像(xygk-0.jpg)，在行为面板中单击“+”按钮，在弹出的菜单中选择“显示-隐藏元素”动作，在弹出的对话框中选择元素div“menu_2”，并单击“显示”按钮，再单击“确定”按钮，如图5-28(a)所示。

回到行为面板，为“显示-隐藏元素”动作的事件设置为onClick，如图5-28(b)所示。从图中可以看出：已给“学院概况”图像(xygk-0.jpg)对象添加了三个行为。

图5-28　单击主菜单显示子菜单行为设置

单击主菜单图片时，会弹出子菜单层出来，但一直会出现在网页里。一般希望光标离开子菜单项时，子菜单应该消失。接着进行下面的设置。

(2)给子菜单层添加行为。

给子菜单添加行为，使得当光标滑出子菜单时，子菜单消失。选择名为menu_2的div子菜单层，在行为面板中按“+”按钮，选择“显示-隐藏元素”动作，在弹出的对话框中，选择div“menu2”，并单击“隐藏”按钮，单击“确定”按钮。如图5-29(a)所示。回到“行为”面板中，为该动作选择触发事件为onMouseOut，如图5-29(b)所示。

图5-29　子菜单的行为设置

保存并浏览该网页，效果如图5-30所示。打开网页时，效果如图5-30(a)所示；鼠标滑过主菜单“学院概况”时，效果如图5-30(b)所示；单击“学院概况”时，弹出下拉菜单，效果如图5-30(c)所示。

图5-30　pic_updown_menu.html的浏览效果

在Dreamweaver CS4中查看源代码如下。

----------------------清单　pic_updown_menu.html---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>交换图片下拉菜单</title>

<!--

.div_css2 {

background-color: #FFC;

visibility: hidden;

}

-->

</style>

<!--

function MM_preloadImages(){ //v3.0

var d=document; if(d.images){ if(!d.MM_p)d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;

i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;

d.MM_p[j++].src=a[i];}}

}

function MM_swapImgRestore(){ //v3.0

var i,x,a=document.MM_sr;

for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;

}

function MM_findObj(n, d){ //v4.01

var p,i,x;　if(!d)d=document;

if((p=n.indexOf("?"))>0&&parent.frames.length){

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all)x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)

x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++)

x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById)x=d.getElementById(n); return x;

}

function MM_swapImage(){ //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;

for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)

x.oSrc=x.src; x.src=a[i+2];}

}

function MM_showHideLayers(){ //v9.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3)

with (document)if (getElementById &&

((obj=getElementById(args[i]))!=null)){ v=args[i+2];

if (obj.style){ obj=obj.style;

v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

obj.visibility=v; }

}

-->

</script>

</head>

<body>

<tr>

<td><img src="images/xygk-0.jpg" width="120" height="33"

id="Image1" onclick="MM_showHideLayers('menu_2','','show')"

onmouseover="MM_swapImage('Image1','','images/xygk-1.jpg',0)"

onmouseout="MM_swapImgRestore()" /></td>

<td><img src="images/dzjg-0.jpg" width="120" height="33"

id="Image2" /></td>

</tr>

<tr>

<td><div align="center" class="div_css2" id="menu_2"

onmouseout="MM_showHideLayers('menu_2','','hide')">学院简介<br />

现任领导<br />

历届领导<br />

校歌校徽<br />

媒体报道</div></td>

</tr>

</table>

</body>

</html>

--------------------------------------------------------------------

可以看到，通过可视化下拉菜单的创建，自动生成MM_preloadImages()、MM_swapImgRestore()、MM_findObj(n, d)、MM_swapImage()和MM_showHideLayers()五个函数。图片对象images/xygk-0.jpg上添加了onClick、onMouseOut和onMouseOver三个事件，以及相应的动作；Div对象上也应用了onMouseOut事件和相应的动作。在这4个动作中分别应用了预定义的5个JavaScript函数。触发事件和相应的动作，便构成了行为。

同样地，可以为多个主菜单图片添加下拉子菜单。回顾第4章，设计的一个网站首页里面有一个图片式导航主菜单，可以采用这种方法给每个主菜单项添加下拉式子菜单。

这两个例子都采用JavaScript行为，可视化地制作导航菜单，还可以采用JavaScript行为制作网页上许多其他交互性动作。

如果对JavaScript很熟悉了，也可以手工给网页添加行为。

4. 手工添加行为

可视化编辑行为是一种较好的方法，但对行为(事件+动作)比较熟悉以后，有时直接用手工方法给对象添加简单的行为更加便捷，代码也更加简单。

例如，要制作一个列表式跳转菜单，先在Dreamweaver中，给网页插入一个表单，再在表单里插入“跳转菜单”项，在图5-31所示对话框中，添加跳转选项。