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

FireWorks
Fireworks教程:gif动画图片批量增加水印
Fireworks制作多样式实用网页按钮
Fireworks历史面板制作连续背景教程
Fireworks制作个性的文字LOGO教程
Fireworks制作卷边花纹字体的思路
Fireworks绘制矢量风格精致手提纸袋图解教程
利用Fireworks补间打造华丽仿3D炫光DNA特效的教程
Fireworks 不同的切角效果
Fireworks 精美横向闪图漂亮动画
Fireworks MM照片破边缘
FireWorks 人物暗夜里的光影涂鸦
Fireworks Vista样式按钮的制作初学版
Fireworks 制作超级光线水晶球
Fireworks 制作魅力流光超炫特效
Fireworks 给黑白照片调色全攻略
Fireworks 弯曲文字效果如何制作
FireWorks xara3D打造3D文字特效
Fireworks历史面板制作连续背景
Fireworks简单制作个性的文字LOGO
Fireworks教程:制作卷边花纹字体的思路

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-22   浏览: 93 ::
收藏到网摘: 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中为了一个按钮的动态效果输多个文件,调整后再次输出多个文件的日子一去不复返了。