用FireWorks 4轻松制作Web导航条

Author: donger Date: 2001年 18期

?牐牭己教跏荳eb页面中常见的一个功能,它在同一个网站的多个Web页中都存在,通过点击导航条的一个栏目可以使页面跳转到指定的地方或是其他Web页面。其实导航条就是一系列带有翻转效果按钮的组合,每一个按钮都与其他的按钮相关联,当单击某个按钮将其设置为Down状态时,其他按钮自动变为Up状态。一个按钮最多可以设置四种状态效果。由于导航条存在于同一个站点的多个页面中,为了方便操作,我们可以把导航条单独输出成一个Html文件,下面我们通过一个实例来讲解如何在Fireworks 4中创建导航条的效果。
  ?牐犚弧ireworks 4中,使用菜单命令File→New,创建一个400×400像素的新文件,画布颜色为白色。
  ?牐牰⑹褂霉ぞ呙姘逯械木匦喂ぞ呋痪匦危蚩狪nfo面板,设置该对象大小为158×377像素,在Object面板中,设置Roundness大小为40。
  ?牐犎⒋蚩狥ill面板,选择填充类型为Solid,其RGB值为#003366,在Texture选项中选择纹理名称为Parchment,值为20%。打开Effect面板,在其下拉菜单中选择Bevel and Emboss→Inner Bevel,在Inner Bevel对话框中选择Bevel edge shape为Smooth类型。这样导航条的背景就算完成了(^18040703a^1)。
  ?牐犓摹⒔酉吕粗谱鞣磁バЧJ褂貌说ッ領nsert→New Button,在弹出来的Button1.png按钮编辑器窗口中制作按钮。具体的按钮创建在这儿就不再啰嗦了,重要的一点是按钮的Up、Over、Down、Over While Down四种状态都可以设置成不一样的,最少得设置Up、Over这两种状态。最简单的方法就是给按钮增加实时特效,在Effect面板中增加Inner Bevel或Outer Bevel效果,然后在参数设置窗口底部的Button Preset选项中对应地给四种按钮状态选择Raised、Highlighted、Inset 、Inverted选项。
  ?牐犖濉⒐乇瞻磁ケ嗉鞔翱冢氐降鼻拔牡荡翱凇4耸卑磁サ囊桓鍪道丫鱿衷诘鼻暗奈牡荡翱谥小N颐谴蚩狶ibrary面板,可以看到刚才创建的按钮符号已经出现在Library面板中了(^18040703b^2)。
  ?牐犃⒛憧梢源覮ibrary面板中不断地拖出按钮实例到文件中,或是按住Alt键,拖动已经存在的按钮到别的地方,进行按钮复制。这样导航条中所需要的按钮很容易就全部制作成了,但这些按钮并没有完全对齐,你可以全选这些按钮,使用菜单命令Modify→Align→Distribute Heights和Modify→Align→Center Vertical命令来对齐这些被选择的按钮(^18040703c^3)。
  ?牐犉摺⑷缤?3所示,由于导航条上的按钮是复制得到的或是从Library面板中拖出来的,因此每个按钮保持着相同的外貌。接下来我们得给这些按钮添上不同的内容和链接。
  ?牐牥恕⒂煤谏饭ぞ哐≡竦谝桓霭磁ィ蚩狾bject面板,如果当前没有这块面板,可以按Alt+F2来打开,在Button Text输入框中输入按钮的内容,此时Fireworks4会弹出询问窗口问你是仅仅修改当前按钮还是同时修改所有由此符号创建的按钮实例。如果选择Current(当前)按钮,则仅修改所选按钮上的文字(^18040703d^4)。这儿我把原先的按钮上的Button改成了One(^18040703e^5)。
  ?牐牼拧⑷跃稍贠bject面板中,点击面板底部的Link Wizard按钮,在弹出的Link Wizard窗口中,选择Link标签,在这块标签面板中我们可以将许多以往需要在网页编辑软件中做的工作一次完成。在Link窗口可以分别设定链接地址(URL),说明文字内容(ALT),状态条显示消息(Status Bar Text),设置完后点击OK按钮(^18040703f^6)。
  ?牐犑⒅馗床街璋撕途牛瓿善溆喟磁サ母拿土唇硬僮鳌?
  ?牐犑弧⒃谡饫镄枰⒁獾氖牵喝绻阒谱鞯牡己教踅词涑鑫扯渲幸桓霭磁ピ厝胧币3諨own状态,则必须单独对它进行设置,双击此按钮进入按钮编辑器窗口中,切换到Down状态,勾选下面的Show Down State Upon Load复选框。
  ?牐犑⑷绻颐墙词涑龅腍tml文件是一系列不在帧结构中的页面,接下来我们还要对将要输出的Html文件进行一些设置,打开File菜单下的Html Setup命令,在其中的Document Specific面板中勾选Mutiple Nav Bar HTML Pages,这样Fireworks将为每个按钮状态输出一个Html页面,每个页面都对应着一个按钮的Down状态。
  ?牐犑⑼瓿缮厦嬲庑┎僮骱螅己教跛璧囊恍┕δ芩闶瞧肴耍谧急甘涑銮拔颐腔沟媒幸恍┎僮鳌J褂貌说ッ頜odify→Trim Canvas,该命令可以自动把当前文档中除导航条以外的多余的地方删除掉。再使用菜单命令Modify→Canvas Color命令,在Canvas Color对话框中选择Transparent选项,点击OK按钮(^18040703g^7),该命令可以把当前文档中的画布背景颜色设置成透明,这样该导航条就能适应Web页中各种颜色的背景了。
  ?牐犑摹⑹褂貌说ッ頕ile→Export对该导航条进行输出,在Export对话框中,选择站点的根目录,并将该文件命名为navbar,在保存类型中选择Html and Image,其余的选项你可以根据实际情况进行选择,完成设置后点击保存按钮。
  ?牐犑濉⒋蚩狣reamweaver4软件,在该站点需要导航条的Web页中指定的地方使用菜单命令Insert→Interactive Images→Fireworks Html或是点击Object面板中的Insert Fireworks Html按钮,在弹出的Insert Fireworks Html对话框中点击Browser按钮选择刚才输出的navbar.htm文件,点击OK按钮,此时该导航条就会被插入到当前页面指定的地方。
  ?牐犑⑷绻愿玫己教跄亩醯貌宦猓憧梢酝ü贒reamweaver中调用Fireworks进行导航条的编辑,也可以在Fireworks中直接进行编辑然后自动更新Dreamweaver中的Html文件。导航条文件被更新后,所有站点中应用到该导航条的地方都会自动进行更新。