用Fireworks 3快捷创建网页导航栏

Macromedia公司的网页图像制作软件Fireworks 3功能强大，使用它的网页按钮制作向导和现场效果，可以快速制作出漂亮的网页导航栏。网页导航栏一般是由一组按钮组成，而这一组按钮除了文本和链接不同外，其它外观特性一般都是相同的。我们可以通过复制的办法，轻而易举地获得一组相同的按钮，然后修改按钮的文本和链接，就可快捷完成导航栏的制作。下面以实例说明具体的制作步骤。 　　1.在Fireworks 3主操作介面，单击工具栏的新建文档按钮，弹出新文档对话框。把画布的宽度和高度设置为合适的大小(本例设为400和200)，单击该对话框中的OK按钮，打开一个新文档页面(图1)。 图1 　　2.从Insert(插入)菜单上选择New Button(新按钮)命令，启动按钮制作向导,弹出按钮编辑器窗口。从工具箱中选择矩形工具，在按钮编辑器窗口中拖动鼠标，画一个适当大小的矩形按钮(图2)。 图2 　　3.从填充面板(Fill)中选择想要的填充类型和填充色(如果填充面板没有显示，可以从Windows菜单上选择Fill命令，打开填充面板)，制作漂亮的按钮图像，得到按钮的Up状态(正常状态)。方法是：单击填充类型(Fill Category)的下箭头按钮，从弹出的下拉列表中选择Ellipse(椭圆)图案；单击填充名称(Fill Name)的下箭头按钮，从弹出的下拉列表中选择Silver(银白色)，结果如图3所示。 图3 　　4.单击按钮编辑器中的Over标签，按钮编辑器窗口的右下角增加了一个Copy Up Graphic(拷贝Up图像)按钮。单击该按钮，把按钮的Up状态复制过来。用箭头工具选取复制过来的按钮，按照上一步的方法，改变按钮的填充特效。本例选择Ellipse(椭圆)图案、Copper(黄铜色)，如图4所示。此为按钮的Over状态(在制作完成的网页中鼠标指针掠过按钮时显示的状态)。 图4 　　5.单击Down标签，编辑器窗口右下角的按钮变为Copy Over Graphic(拷贝Over图像)。单击该按钮，把按钮的Over状态复制过来。依照上述方法，把填充色改为Spectrum(光谱色)，如图5所示。此为按钮的Down状态(指在制作完成的网页中按下按钮时显示的状态)。 图5 　　6.单击Over While Down标签，编辑器窗口右下角的按钮变为Copy Down Graphic(拷贝Down图像)。单击该按钮，把按钮的Down状态复制过来。依照上述方法，把填充色改为Pastels(彩色蜡笔)，如图6所示。此为按钮的Over While Down状态(指在制作完成的网页中,当按钮处在按下状态，鼠标掠过时显示的状态)。 图6 　　7.单击Active Area(激活区)标签,然后单击右下角的Link Wizard(链接向导),弹出Link Wizard对话框。单击Link(链接)标签，在对话框上部的文本框中输入URL(如http://www.infosea.126.com)(图7)，最后单击OK按钮。本步操作的目的是为按钮建立链接。 图7 　　8.关闭按钮编辑器窗口，返回到文档编辑窗口。从工具栏中选择文本工具，在按钮编辑器中单击矩形按钮中心附近，弹出文本编辑对话框。从该对话框中的字体弹出菜单上选择一种字体，选择点大小，从颜色弹出菜单上选择一种颜色，单击居中对齐按钮(本例选用隶书，30点，蓝色，加粗，居中对齐)(图8)，最后单击OK按钮。 图8 　　9.上步操作完毕，返回到文档编辑窗口。现在可以根据需要复制若干个按钮。操作方法是：首先从工具栏中选取箭头工具，然后按住Shift键，同时选择按钮图像和按钮文字。接着按住Alt键，用鼠标往下(也可往右)拖放编辑窗口中的按钮，即可完成按钮的复制。要几个按钮就复制几个。这样就可得到一个由完全相同的按钮组成的按钮组。本例为3个按钮。 　　10.修改按钮文本：从工具栏中选取箭头工具，双击要修改按钮的文字，弹出文字编辑窗口，即可修改按钮文字。本例把第二和第三个按钮的文字分别修改为"电脑英语"和"网页设计"(图9)。 图9 　　11.修改按钮的链接：双击要修改按钮的图像,弹出一个对话框,询问要编辑所有按钮还是编辑当前按钮，此时请单击Current(当前)按钮。接着打开按钮编辑窗口，按第7步的说明操作，即可修改按钮的链接。 　　12.剪裁画布：从Modify(修改)菜单上选择Trim Canvas(剪裁画布)命令，把与按钮组无关的画布剪除，得到由多个按钮组成的导航栏(本例为3个)(图10)。 图10 　　13.输出HTML文档：从File(文件)菜单上选择Export(输出)命令，弹出Export对话框，在Base Name文本框中输入文件名，选定HTML文档的风格(Style)和存放位置(Location)，单击保存按钮(图11)。 图11 　　14.把导航栏插入网页中：启动网页编辑程序Dreamweaver 3，在对象面板上单击插入Fireworks HTML图标，弹出Insert Fireworks HTML对话框，单击其中的Browse(浏览)按钮，找到第13步生成的HTML文档，单击OK按钮，即可把导航栏插入到网页中。 　　上面所述只说明了基本制作步骤。如果在按钮设计过程中能灵活运用Fireworks的特效(Effect)，可以制作出更加美观的导航栏。 　　摘自《赛迪网》　莫治雄/文