当前位置: 首页 > 图文教程 > 平面设计 > FireWorks > 创建按钮(Buttons)和导航条(Navigation Bars)

FireWorks
Macromedia Fireworks MX的新特性一
Macromedia Fireworks MX的新特性二
Macromedia Fireworks MX的新特性三
Macromedia Fireworks MX的新特性四
Fireworks4 巧用无缝填充处理图片
Fireworks4 制作透明字
Fireworks中螺旋运动字的制作
Fireworks常见问题解答(7)
Fireworks常见问题解答(6)
Fireworks常见问题解答(5)
样式在FW MX 2004中的应用
用Fireworks轻松制作网页交互按钮
巧用Style制作立体感文字
Fireworks制作产品展示图
FireWorks象素按纽教程
Fireworks MX 之 初体验5-2
Fireworks MX 之初体验3-1
撕纸边缘效果制作方法详解
立体贴图字特效制作
Fireworks MX 2004特效字系列教程:晶莹文字制作

FireWorks 中的 创建按钮(Buttons)和导航条(Navigation Bars)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-22   浏览: 81 ::
收藏到网摘: n/a

  创建按钮(Buttons)和导航条(Navigation Bars)(下)


刚才我们创建了一个按钮,接下来我们就可以利用这个按钮方便的创建导航条了。在Fireworks中你可以利用同一个按钮反复衍生出一系列类似的按钮来组成导航条,而无需重复创建多个类似的按钮,大大减少了工作量,这就是Fireworks神奇的地方!!!现在我们就去看看是怎么做的吧。

打开Library面版,将Home按钮拖到画板中,重复这个动作几次,使画板中有多个Home按钮,在这里我一共放了4个相同的按钮。


将这些按钮摆放整齐后,选择Window->object打开object面版,选中一个按钮可以在object面版中看到相关的参数,其中的Button Text就是每个按钮的文字,我们只要修改object面版中的文字就可以改变画板上按钮的文字。在弹出的窗口中选择Current,如果选择All就改变画板上所有按钮的文字。注意一下Library面版,你每改变一次就会自动生成一个按钮。


完成后Preview一下导航条的效果,图中绿色是点击(Down)后的按钮状态,白色是通常(Up)状态,黄色是鼠标悬浮(Over)的状态。


如果满意就可以把图象输出成HTML代码了,选择File->Export在弹出的窗口中设置输出的格式。选择Include Areas without Slices将把没有切割的部分也输出成相应大小的图片,如果不选择就会用一张1x1大小的透明gif图片(spacer.gif)来撑开单元格。选择Put Images in Subfolder将图片保存在不同的目录中。


点击Option进入更为细致的设置。
General:设置输出的文件的后缀名,文件名的大小写,以及对应何种网页编辑器。
Table:设置表格参数,建议使用默认方式,它会运用spacer.gif撑开空白的单元格使得输出结果在IE和Netscape中看起来一样。
Document Specific:设置自动命名文件的规则,值得一提的是这里隐藏了一个相当重要的选项Multiple Nav Bar HTML Pages,这个选项决定了是输出一个HTML文件还是多个HTML文件,如果选择的话Fireworks会为每个按钮生成一个自己的HTML页面,在这个页面上按钮处于Down的状态。如果要决定HTML文件的文件名就要回到Link Wizard窗口的File Name部分,不使用自动命名而手工输入按钮的文件名,这样按钮的文件名就会与输出后的HTML文件名相对应。


从按钮和导航条的创建中我们可以体会到Fireworks方便之处,它是真正为Web创作而设计的软件,以前在Photoshop中为了一个按钮的动态效果输多个文件,调整后再次输出多个文件的日子一去不复返了。