打造弹出菜单.doc

打造弹出菜单■Fireworks4/Dreamweaver4双剑合壁造弹出菜单作者:POPOEVER 与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比,Macromedia公司的Fireworks4(以下简称FW4)可谓短小精悍,同时,她对于网页图形制作的强大支持,也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver4(以下简称DW4),FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉,看到代码就头疼,不如跟随笔者一起亲身体验FW4的魅力所在吧!一、,选择File菜单下的New,或者按Ctrl+N快捷键,如图一新建一个文件,尺寸200X30像素,精度72像素/英寸,背景透明。选择Window菜单下的Tools打开工具面板,从工具面板上选择矩形工具, 画一个100X30像素大小的矩形,选择Window菜单下的Info打开信息面板,直接输入数值精确调整尺寸和位置;选中这个矩形,Ctrl+C复制,Ctrl+V原地粘贴,这时候两个矩形重叠,将上面这个矩形拖到旁边,同样使用信息面板定位; 然后分别选中这两个矩形,调整它们的填充色和边框色,方法有两种,一是利用工具面板上的Color工具区里的Stroke和Fill按钮, 二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板,在面板上选择,注意的是线型要选"Pencilà1-PixelHard"或"BasicàHardLine"(如图), 这样输出后才能做出细边框效果;从工具面板上选择文字工具,输入文字,注意选择文字的平滑度为NoAnti-Alias(关闭反锯齿,如图), 然后同时选中文字和其中一个矩形,从Modify菜单下的Align中分别选择CenterVertical和CenterHorizontal来对齐文字和矩形,效果如图所示。,选择Insert菜单下的ConverttoSymbol,或在矩形上点鼠标右键,在右键菜单里选ConverttoSymbol,或者按F8快捷键,在弹出对话框里的Type中选Button(按钮),将这个矩形转换成一个按钮对象, 这时,将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形,单击圆形标志,在弹出菜单中选择AddPop_upMenu…, 然后就可以在弹出的SetPop-UpMenu设置窗中设置你的弹出菜单了。如下图,笔者已经设置了一些菜单条目。大家可以在Text中设置条目的文字名称,在Link中设置条目的链接路径,在Target中设置打开链接的目标窗口,设置完后点一下"+"按钮就可以生成一个菜单条目了;如果想删掉,点中条目,再点"-"按钮就可以删除条目;如果想修改条目设置,只需点中条目,修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的,只要在根菜单条目下方建立子菜单条目,然后点中子菜单条目,再点窗口上方那两个蓝***标按钮中的右边一个IndentMenu(菜单缩进,即设为子菜单)就可以了,反之,点左边那个OutdentMenu(菜单伸出,即设为根菜单)就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便,其实很简单,只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后,点Next进入菜单样式设置窗。,菜单样式的设置可以分成两种类型, 一种是如前图所示的HTML模式,一种是如后图所示的Image(贴图)模式。它们的区别是,HTML模式下,菜单样式完全由代码控制,即时计算生成,显示速度当然极快,非常流畅;Image模式下,菜单条目的背景可以显示图片,每次菜单弹出时,就会即时下载背景贴图,这样对高速网络用户来说几乎感觉不到,但是对慢速网络用户,就会明显觉察到贴图下载显示的时间滞后,造成不流畅的感觉。但是由于Image模式生成的菜单可以使用漂亮的贴图,虽然FW4种提供选择的贴图样式并不多,共21种,但只要在输出后,找到这些图片,用自定义的尺寸一致图片替换掉,就可以做出完全属于自己的个性菜单,比如在贴图上打上你自己的网站Logo等等。这里笔者选择HTML模式。样式设置窗中,UpState是用来设置菜单条目处于普通状态时的样式,OverState是用来设置鼠标移到菜单条目上时的样式。另外,Font是用来选择显示的字体,为了在网页上能清晰显示字体,建议大家在字体大小Size中选择12,"B"按钮是使用粗体字,"I"按钮是使用斜体字。样式设置将即时在下方的Preview区域中显示,完成设置后点Finish按钮生成弹