用FireWorks 4轻松制作Web导航条 donger 2001年 18期 导航条是Web页面中常见的一个功能，它在同一个网站的多个Web页中都存在，通过点击导航条的一个栏目可以使页面跳转到指定的地方或是其他Web页面。其实导航条就是一系列带有翻转效果按钮的组合，每一个按钮都与其他的按钮相关联，当单击某个按钮将其设置为Down状态时，其他按钮自动变为Up状态。一个按钮最多可以设置四种状态效果。由于导航条存在于同一个站点的多个页面中，为了方便操作，我们可以把导航条单独输出成一个Html文件，下面我们通过一个实例来讲解如何在Fireworks 4中创建导航条的效果。 　　一、Fireworks 4中，使用菜单命令File→New，创建一个400×400像素的新文件，画布颜色为白色。 　　二、使用工具面板中的矩形工具画一矩形，打开Info面板，设置该对象大小为158×377像素，在Object面板中，设置Roundness大小为40。 　　三、打开Fill面板，选择填充类型为Solid，其RGB值为#003366，在Texture选项中选择纹理名称为Parchment，值为20%。打开Effect面板，在其下拉菜单中选择Bevel and Emboss→Inner Bevel，在Inner Bevel对话框中选择Bevel edge shape为Smooth类型。这样导航条的背景就算完成了（^18040703a^1）。 　　四、接下来制作翻转按钮效果。使用菜单命令Insert→New Button，在弹出来的Button1.png按钮编辑器窗口中制作按钮。具体的按钮创建在这儿就不再啰嗦了，重要的一点是按钮的Up、Over、Down、Over While Down四种状态都可以设置成不一样的，最少得设置Up、Over这两种状态。最简单的方法就是给按钮增加实时特效，在Effect面板中增加Inner Bevel或Outer Bevel效果，然后在参数设置窗口底部的Button Preset选项中对应地给四种按钮状态选择Raised、Highlighted、Inset 、Inverted选项。 　　五、关闭按钮编辑器窗口，回到当前文档窗口。此时按钮的一个实例已经出现在当前的文档窗口中。我们打开Library面板，可以看到刚才创建的按钮符号已经出现在Library面板中了（^18040703b^2）。 　　六、你可以从Library面板中不断地拖出按钮实例到文件中，或是按住Alt键，拖动已经存在的按钮到别的地方，进行按钮复制。这样导航条中所需要的按钮很容易就全部制作成了，但这些按钮并没有完全对齐，你可以全选这些按钮，使用菜单命令Modify→Align→Distribute Heights和Modify→Align→Center Vertical命令来对齐这些被选择的按钮（^18040703c^3）。 　　七、如图3所示，由于导航条上的按钮是复制得到的或是从Library面板中拖出来的，因此每个按钮保持着相同的外貌。接下来我们得给这些按钮添上不同的内容和链接。 　　八、用黑色箭头工具选择第一个按钮，打开Object面板，如果当前没有这块面板，可以按Alt+F2来打开，在Button Text输入框中输入按钮的内容，此时Fireworks4会弹出询问窗口问你是仅仅修改当前按钮还是同时修改所有由此符号创建的按钮实例。如果选择Current（当前）按钮，则仅修改所选按钮上的文字（^18040703d^4）。这儿我把原先的按钮上的Button改成了One（^18040703e^5）。 　　九、仍旧在Object面板中，点击面板底部的Link Wizard按钮，在弹出的Link Wizard窗口中，选择Link标签，在这块标签面板中我们可以将许多以往需要在网页编辑软件中做的工作一次完成。在Link窗口可以分别设定链接地址（URL），说明文字内容（ALT），状态条显示消息（Status Bar Text），设置完后点击OK按钮（^18040703f^6）。 　　十、重复步骤八和九，完成其余按钮的改名和链接操作。 　　十一、在这里需要注意的是：如果你制作的导航条将来输出为网页而其中一个按钮载入时要保持Down状态，则必须单独对它进行设置，双击此按钮进入按钮编辑器窗口中，切换到Down状态，勾选下面的Show Down State Upon Load复选框。 　　十二、如果我们将来输出的Html文件是一系列不在帧结构中的页面，接下来我们还要对将要输出的Html文件进行一些设置，打开File菜单下的Html Setup命令，在其中的Document Specific面板中勾选Mutiple Nav Bar HTML Pages，这样Fireworks将为每个按钮状态输出一个Html页面，每个页面都对应着一个按钮的Down状态。 　　十三、完成上面这些操作后，导航条所需的一些功能算是齐全了，在准备输出前我们还得进行一些操作。使用菜单命令Modify→Trim Canvas，该命令可以自动把当前文档中除导航条以外的多余的地方删除掉。再使用菜单命令Modify→Canvas Color命令，在Canvas Color对话框中选择Transparent选项，点击OK按钮（^18040703g^7），该命令可以把当前文档中的画布背景颜色设置成透明，这样该导航条就能适应Web页中各种颜色的背景了。 　　十四、使用菜单命令File→Export对该导航条进行输出，在Export对话框中，选择站点的根目录，并将该文件命名为navbar，在保存类型中选择Html and Image，其余的选项你可以根据实际情况进行选择，完成设置后点击保存按钮。 　　十五、打开Dreamweaver4软件，在该站点需要导航条的Web页中指定的地方使用菜单命令Insert→Interactive Images→Fireworks Html或是点击Object面板中的Insert Fireworks Html按钮，在弹出的Insert Fireworks Html对话框中点击Browser按钮选择刚才输出的navbar.htm文件，点击OK按钮，此时该导航条就会被插入到当前页面指定的地方。 　　十六、如果对该导航条哪儿觉得不满意，你可以通过在Dreamweaver中调用Fireworks进行导航条的编辑，也可以在Fireworks中直接进行编辑然后自动更新Dreamweaver中的Html文件。导航条文件被更新后，所有站点中应用到该导航条的地方都会自动进行更新。