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

FireWorks
Fireworks 强化胶囊 制作过程
fireworks 制作倾慕系列系统图标教程
Fireworks 制作青花陶瓷按钮
Fireworks涂鸦效果的制作步骤
Fireworks ray暗黑中的花朵制作图解教程
Fireworks制作燃烧效果图解教程
Fireworks 实现在物件和文字上营造残破的效果
Fireworks立体倒影制作教程
Fireworks绘制甲壳虫小轿车
用Fireworks轻松制作闪动文字
Fireworks教程:gif动画图片批量增加水印教程
Fireworks教程:美女照片超绚背景制作
Fireworks教程:3D旋转gif动画
Fireworks教程:制作粉色恋人闪字
Fireworks CS3教程:切片工具切网页模板
Fireworks教程:切割导图做漂亮网页
Fireworks钢笔工具简单钩制破损边缘
Fireworks教程:绘制夏天清凉折扇
Fireworks教程:简单功能试用实例
Fireworks教程:以实例精通涂抹工具

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


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