Fireworks 4作为Dreamweaver 4的最佳拍当一起双双出台.Fireworks 4此次也集合了许多小巧的工具和一些改进.首先让我们以一个非常有趣的功能:制作下拉菜单开始我们的Fireworks 4新功能旅程.下拉菜单是目前比较热门的一种网页交互方式之一.仿Windows界面的下拉菜单非常流行.但是由于制作菜单需要懂得一定的Javascript语言或者操作步骤比较麻烦.因此在一段时间内还少有人制作这样的东东.现在有了Fireworks就简单了.下面我们就来Step by Step制作一个Fireworks 4的下拉菜单.

第一步:准备工作

首先画好菜单的样子.然后用Fireworks中的切图工具把菜单切割出来.

第二步:添加Pop-menu弹出菜单行为

单击Dreamweaver部分选择Dreamweaver,单击右键选择Add Popup Menu弹出菜单行为.

第三步:添加菜单项

首先在 Text 域输入菜单条的名字. Target选择出现的目标位置. Link:填写菜单的对应地址.完毕之后按 Menu 右侧的"+"号添加菜单项.
"-"删除选中的菜单项.

选中一个菜单项,然后按Indent Menu可以将菜单变成上级菜单的子菜单.按Out dent Menu 可以将子菜单还原成同级菜单.

所有菜单添加完毕以后按Next继续.

第四步:设置菜单项风格

接下来就是菜单风格设置了,我们可以看到单元格Cells也就是菜单项有两类风格: 一个是HTML方式.一个是图像方式.

我们可以选择其中的一个先来看看HTML风格.

• Font: 用于设置英语字体,这个只有默认的四类字体可以选择.如果是使用中文的话可以完全不必理会.
• Size:设置文字大小.
• Up state: 设置菜单项的一般样式. Text为文字颜色 cell为背景颜色.
• Over State:设置菜单项的鼠标移动上去时候的样式.Text为文字颜色 cell为背景颜色.

在Preview中可以看到效果.啊呀?中文全部是乱码?没关系虽然乱码但是不影响输出.做成的菜单中文是正常的.最后按Finish结束菜单的设置.

Image效果是采用图片作为菜单项的背景.这样会更好看.和上面的HTML方式相比Upstate和Over State多了两个图片的样式.可以制作出丰富的菜单样式来.

第五步:移动菜单位置

一个菜单就做好了.现在可以调整菜单弹出的位置

最后选择菜单File-->Export连图片带HTML输出.一个菜单就做好了.

综上所述,Fireworks为我们提供了,一个简单方便的菜单制作环境.但是就菜单这个功能本身而言,还是不够强大的.没有专业菜单的制作工具功能丰富.同时也存在着一些子菜单的对位问题.但他毕竟是一个制作下拉菜单的选择.