用FireWorks 4轻松制作Web导航条
?牐犚弧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文件。导航条文件被更新后,所有站点中应用到该导航条的地方都会自动进行更新。