Fireworks 4 制作下拉菜单
http://it365cn.com/articleimg/46-1.gifFireworks 4作为Dreamweaver 4的最佳拍当一起双双出台.Fireworks 4此次也集合了许多小巧的工具和一些改进.首先让我们以一个非常有趣的功能:制作下拉菜单开始我们的Fireworks 4新功能旅程.下拉菜单是目前比较热门的一种网页交互方式之一.仿Windows界面的下拉菜单非常流行.但是由于制作菜单需要懂得一定的JavaScript语言或者操作步骤比较麻烦.因此在一段时间内还少有人制作这样的东东.现在有了Fireworks就简单了.下面我们就来Step by Step制作一个Fireworks 4的下拉菜单。第一步:准备工作首先画好菜单的样子.然后用Fireworks中的切图工具
http://it365cn.com/articleimg/46-2.gif
把菜单切割出来。
http://it365cn.com/articleimg/46-3.gif
第二步:添加Pop-menu弹出菜单行为
http://it365cn.com/articleimg/46-4.gif
第三步:添加菜单项首先在 Text 域输入菜单条的名字. Target选择出现的目标位置. Link:填写菜单的对应地址.完毕之后按 Menu 右侧的\\\"+\\\"号添加菜单项， \\\"-\\\"删除选中的菜单项。选中一个菜单项,然后按Indent Menu
http://it365cn.com/articleimg/46-5.gif
可以将菜单变成上级菜单的子菜单.按Out dent Menu
http://it365cn.com/articleimg/46-6.gif
可以将子菜单还原成同级菜单。
http://it365cn.com/articleimg/46-7.gif
第四步:设置菜单项风格接下来就是菜单风格设置了,我们可以看到单元格Cells也就是菜单项有两类风格: 一个是HTML方式.一个是图像方式.我们可以选择其中的一个先来看看HTML风格. Font: 用于设置英语字体,这个只有默认的四类字体可以选择.如果是使用中文的话可以完全不必理会.Size:设置文字大小.Up state: 设置菜单项的一般样式. Text为文字颜色 cell为背景颜色.Over State:设置菜单项的鼠标移动上去时候的样式.Text为文字颜色 cell为背景颜色.在Preview中可以看到效果.啊呀?中文全部是乱码?没关系虽然乱码但是不影响输出.做成的菜单中文是正常的.最后按Finish结束菜单的设置。
http://it365cn.com/articleimg/46-8.gif
Image效果是采用图片作为菜单项的背景.这样会更好看.和上面的HTML方式相比Upstate和Over State多了两个图片的样式.可以制作出丰富的菜单样式来。
http://it365cn.com/articleimg/46-9.gif
第五步:移动菜单位置一个菜单就做好了.现在可以调整菜单弹出的位置最后选择菜单File-->Export连图片带HTML输出.一个菜单就做好了。
http://it365cn.com/articleimg/46-10.gif
综上所述,Fireworks为我们提供了,一个简单方便的菜单制作环境.但是就菜单这个功能本身而言,还是不够强大的.没有专业菜单的制作工具功能丰富.同时也存在着一些子菜单的对位问题.但他毕竟是一个制作下拉菜单的选择。
页:
[1]