设计资源

Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单

■ Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单
作者:POPOEVER

  与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比,Macromedia公司的Fireworks 4(以下简称FW4)可谓短小精悍,同时,她对于网页图形制作的强大支持,也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver 4(以下简称DW4),FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉,看到代码就头疼,不如跟随笔者一起亲身体验FW4的魅力所在吧!

一、 在FW4中制作菜单

1.制作母菜单按钮

  打开FW4,选择File菜单下的New,或者按Ctrl+N快捷键,如图一新建一个文件,尺寸200X30像素,精度72像素/英寸,背景透明。

  选择Window菜单下的Tools打开工具面板,从工具面板上选择矩形工具,

  画一个100X30像素大小的矩形,选择Window菜单下的Info打开信息面板,直接输入数值精确调整尺寸和位置;

选中这个矩形,Ctrl+C复制,Ctrl+V原地粘贴,这时候两个矩形重叠,将上面这个矩形拖到旁边,同样使用信息面板定位;

  然后分别选中这两个矩形,调整它们的填充色和边框色,方法有两种,一是利用工具面板上的Color工具区里的Stroke和Fill按钮,

  二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板,在面板上选择,注意的是线型要选"Pencilà1-Pixel Hard"或"BasicàHard Line"(如图),

  这样输出后才能做出细边框效果;从工具面板上选择文字工具,输入文字,注意选择文字的平滑度为No Anti-Alias(关闭反锯齿,如图),

  然后同时选中文字和其中一个矩形,从Modify菜单下的Align中分别选择Center Vertical和Center Horizontal来对齐文字和矩形,效果如图所示。

2.制作弹出菜单条目

  同时选中对齐后的文字和矩形,选择Insert菜单下的Convert to Symbol,或在矩形上点鼠标右键,在右键菜单里选Convert to Symbol,或者按F8快捷键,在弹出对话框里的Type中选Button(按钮),将这个矩形转换成一个按钮对象,

  这时,将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形,单击圆形标志,在弹出菜单中选择Add Pop_up Menu…,

  然后就可以在弹出的Set Pop-Up Menu设置窗中设置你的弹出菜单了。如下图,笔者已经设置了一些菜单条目。

  大家可以在Text中设置条目的文字名称,在Link中设置条目的链接路径,在Target中设置打开链接的目标窗口,设置完后点一下"+"按钮就可以生成一个菜单条目了;如果想删掉,点中条目,再点"-"按钮就可以删除条目;如果想修改条目设置,只需点中条目,修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的,只要在根菜单条目下方建立子菜单条目,然后点中子菜单条目,再点窗口上方那两个蓝色图标按钮中的右边一个Indent Menu(菜单缩进,即设为子菜单)就可以了,反之,点左边那个Outdent Menu(菜单伸出,即设为根菜单)就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便,其实很简单,只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后,点Next进入菜单样式设置窗。

3.设置弹出菜单条目样式

  值得一提的是,菜单样式的设置可以分成两种类型,


  一种是如前图所示的HTML模式,一种是如后图所示的Image(贴图)模式。它们的区别是,HTML模式下,菜单样式完全由代码控制,即时计算生成,显示速度当然极快,非常流畅;Image模式下,菜单条目的背景可以显示图片,每次菜单弹出时,就会即时下载背景贴图,这样对高速网络用户来说几乎感觉不到,但是对慢速网络用户,就会明显觉察到贴图下载显示的时间滞后,造成不流畅的感觉。但是由于Image模式生成的菜单可以使用漂亮的贴图,虽然FW4种提供选择的贴图样式并不多,共21种,但只要在输出后,找到这些图片,用自定义的尺寸一致图片替换掉,就可以做出完全属于自己的个性菜单,比如在贴图上打上你自己的网站Logo等等。这里笔者选择HTML模式。样式设置窗中,Up State是用来设置菜单条目处于普通状态时的样式,Over State是用来设置鼠标移到菜单条目上时的样式。另外,Font是用来选择显示的字体,为了在网页上能清晰显示字体,建议大家在字体大小Size中选择12,"B"按钮是使用粗体字,"I"按钮是使用斜体字。样式设置将即时在下方的Preview区域中显示,完成设置后点Finish按钮生成弹出菜单。

4. 调整弹出菜单位置

  如图所示,生成的弹出菜单将以蓝色线框表示,它的位置就是鼠标移到母菜单按钮上它弹出的位置,大家可以点住弹出菜单的蓝色线框,拖拉到你想要它弹出的位置,比如笔者想让它在母菜单按钮下方弹出。

5.调整母菜单按钮与弹出菜单样式一致

   有的朋友说,既然弹出菜单已经有样式了,那么母菜单怎么办?其实笔者早已想到,所以刚开始把母菜单做成了按钮对象,双击母菜单按钮对象,打开按钮对象编辑窗,自己动手改按钮的各个状态吧,这属于FW4的基本操作,笔者这里就不罗嗦了。

6.输出弹出菜单

   刚才一直跟着做一定很累,所以另外还有一个矩形就留给大家自己练习一下。完成后可以选择File菜单下的Export Preview,或者按Ctrl+Shift+X快捷键打开输出设置窗口。如图十七所示,在Option标签页下方的透底选项中选择Alpha Transparency,Matte(基底色)中选择你实际网页使用的背景色,这样菜单就可以和你的网页天衣无缝地融为一体。

  点Export按钮,如图十八,自己设置输出路径和文件名,并选择保存类型为HTML and Images,HTML选项中选Export HTML File,Slices选项中选Export Slices,最后点保存按钮,弹出菜单就输出完成了。

现在你可以打开你输出的HTML文件看看你的工作成果了。关掉FW4吧,下面没它的事儿了。

二、 在DW4中设置弹出菜单

1. 将弹出菜单导入DW4

   打开DW4,新建或打开一个站点(Site),在站点中新建一个HTML文件,存盘,然后选择Insert菜单下的Interactive Images中的Fireworks HTML,或者选择Window菜单下的Objects或按Ctrl+F2快捷键打开Objects(对象)面板,从面板上的Common类中选择那个Fireworks的图标(如图十九),

在弹出的对话窗中点Browser按钮,选择你刚才FW4中输出的HTML文件,点OK按钮,刚才做好的弹出菜单就导进来了。如果你的FW4弹出菜单输出文件没有在当前的站点中,那么DW4还会问你是否要将这些文件复制到站点中来,一定要选OK,并且最好单独为这些文件在站点中建一个文件夹。现在可以按F12预览一下效果了,是不是不像想象中的那么cool?弹出菜单好象边框很粗!因为当前使用的是默认的样式。没关系,接下来就来动点小手术!

2. 在DW4中重新设置菜单样式

   如图可以看到刚才复制到站点中来的FW4弹出菜单文件中有这样一个文件--fw_menu.js,

用DW4将它打开,在文件的开头部分可以看到这样一段代码:

this.menuWidth = mw;
this.menuItemHeight = mh;
this.fontSize = fs||12;
this.fontWeight = "plain";
this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif";
this.fontColor = fclr||"#000000";
this.fontColorHilite = fhclr||"#ffffff";
this.bgColor = "#555555";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


  注意this.后面的变量名,下面是直接影响菜单效果的变量名对应的菜单属性:

menuWidth: 菜单宽度
menuItemHeight : 菜单条目高度
fontWeight: 菜单条目文字粗细
fontFamily: 菜单条目文字字体
fontSize: 菜单条目文字大小
fontColor: 菜单条目文字颜色
fontColorHilite: 菜单条目文字高亮色(即鼠标移到菜单上时文字的颜色)
bgColor: 菜单暗边背景色
menuBorder: 菜单边框宽度
menuItemBorder: 菜单条目边框宽度(其实是菜单内各条目之间分隔线的宽度)
menuItemBgColor: 菜单条目背景色
menuLiteBgColor: 菜单亮边背景色
menuBorderBgColor: 菜单边框背景色
menuHiliteBgColor: 菜单条目背景高亮色(即鼠标移到菜单上时背景的颜色)
childMenuIcon: 子菜单扩展标记(默认是个小黑箭头)


   弹出菜单的样式是遵循下图中的规则的,大家可以细细研究一下,对照起来修改参数。

  由于篇幅限制,笔者在这里就不赘述了,先给出一个修改其中一些参数的样例,余下的大家可以自行测试:

this.bgColor = "#000000";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#000000";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


   存盘,回到菜单的HTML文件,F12预览,菜单样式已经发生了变化,菜单边框变细致了,是不是很cool啊!



3. 弹出菜单缩回停留时间的修改

  大家会发现弹出菜单要收回似乎要等待一两秒的时间,没关系,在fw_menu.js中找到这句代码:

fwHideMenuTimer = setTimeout("fwDoHide()", 1000);

  将其中的1000改成300,再找到这句代码:

if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}


  将其中的1000改成300,1100改成330,存盘,再回到HTML文件按F12预览一下,是不是快多了。这些数值是以毫秒为单位的,也就是说1000代表1秒,建议这些数值不要设得太小,否则菜单收回太快会导致你点不中弹出菜单。

4. 特殊效果的弹出菜单

  运用Javascript来调用和控制CSS滤镜还可以为菜单带来意想不到的效果。在fw_menu.js中使用这样的参数设置:

this.bgColor = "";
this.menuBorder = 3;
this.menuItemBorder = 3;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


  并在下面加上一句:

this.alpha = "Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)";


  然后找到这句:

l.style.backgroundColor = menu.menuItemBgColor;


  在它下面加上一句:

l.style.filter = menu.alpha;


  存盘,回到HTML文件按F12预览,效果如下图所示,是不是很有趣啊!这样的CSS滤镜还有很多,大家可以自己找一些相关资料实践一下。
顺便提一下,大家在查找代码时可以充分利用DW4的查找替换功能,在页面中按Ctrl+F快捷键调出查找替换窗,输入要查找的代码,按Find Next就可以了。

  好了,写到这里写意正浓,但不得不罢笔,免得小编骂我骗稿费,有什么不清楚的大家可以给电脑报的栏目编辑去e-mail询问。
  下一篇我们将讲如何用Flash来制作下拉菜单。

>>想建设网站请点这里 TOP
南京网站建设 南京网站建设公司 南京网页设计 南京网站推广 南京网站设计
Copyright© 2004 reeyee™ All rights reserved.