分享
 
 
 

下拉菜单全攻略之Fireworks篇

王朝other·作者佚名  2006-11-23
窄屏简体版  字體: |||超大  

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

与图形设计制作软件的龙头老大-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就可以了。

下一篇我们将讲如何用Flash来制作下拉菜单。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有