Fireworks MX 2004 中的新增功能可以帮助我们非常方便地在网站上添加图形和交互元素。对于对不太熟悉和了解代码编写或JavaScript的新手来说,Fireworks MX 2004 可以最大限度地提高工作效率。
今天我们用Fireworks MX 2004来设计一个很酷的弹出式下拉菜单,不需要掌握javascript编程语言,你只需要按照我给你的步骤做下去,你就可以随心所欲地制作自己的弹出式下拉菜单了。文章末尾提供原文件供大家下载参考。
完成页面如下:(将鼠标移动到灰色按钮上即可出现下级菜单)
步骤1:设计制作图标按钮
运行Fireworks MX 2004,新建一个776*80的编辑区,设置背景颜色为#737e90,我们的目的是把这个编辑区打造成一个包含Javascript的下拉菜单导航条。在编辑区利用工具矢量区的矩形工具画好按钮的初始图形,编辑重点在按钮的视觉效果。我们首先用矩形工具画6个80*22的矩形,矩形边框颜色设置为透明,矩形背景颜色为#515764,然后选中所有的矩形,再在属性窗口中设置矩形圆度为60,如图:

为了达到很好的视觉效果,需要对按钮进行加工,还是在属性窗口中,在“效果”弹出列表中选择“斜角和浮雕”,在“斜角和浮雕”弹出列表中选择“凸起浮雕”,设置参数如下图:

你可以更改参数设置,达到你想要的效果,当然,你还可以选择其它的效果如“凹入浮雕”等等,可以进行不同风格的尝试。
重复地对每一个矩形进行如上操作,设置好后将它们一字排开,间距为1,底线与编辑区底线重合。利用矩形工具再画一个背景颜色与上面六个矩形背景一样的矩形,长度与高度分别为485和10,将这个矩形拖到上面六个矩形的前面,底线与编辑区底线重合(这个矩形的作用在于遮挡上面六个矩形之间的间隙,形成一个倒弓状的按钮排列阵),效果视图如下:

OK,基本工作已经完成,接下来编辑按钮上的文字。
一般认为,按钮上的文字最好是在网页中编辑,这样以便灵活地更换链接名称,但如果您所要做的链接名称已经定了下来,也不妨把这些链接名称直接做成图片,下面我们来进行操作。
鼠标选取文本工具,在第一个按钮前定位并输入“设计在线”四个字,设置字体为仿宋,字体大小为12,字体颜色为白色,如果你觉得色彩不够鲜艳你可以选择其它的颜色,或者选中刚才输入的文本,在属性窗口中的“效果”列表框中将其锐化。分别对其他按钮进行如上操作,得到如下视图:

接下来的操作就是要对编辑区进行切割使之形成热点区,在工具的web栏中选择“切片”工具,对每一个按钮进行切割,其余部分不用管它,切割时以按钮的边线为切割线,切割好后,整个编辑区形成9块,如图所示:
(图片较大,请拉动滚动条观看)
步骤2:在切片上添加弹出式下拉菜单
对于第一个按钮“设计在线”,鼠标右键单击按钮上的切片,选择“添加弹出菜单”,弹出一个窗口如图:

这是一个弹出菜单编辑器,可以对弹出的菜单进行内容、外观、高级和位置四个选项的设置。
[1] [2] 下一页