分享
 
 
 

Fireworks/Dreamweaver双剑合壁造弹出菜单(1)

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

与图形设计制作软件的龙头老大-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吧,下面没它的事儿了。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有