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

FireWorks
Fireworks写实作品绘制实例:我的手机
自己打造动画广告 用Fireworks泛起水波涟漪
古代智慧结晶 用Fireworks“铸造”古钱币
巧用Fireworks MX 2004制作金属字特效
Fireworks使用技巧及常见问题解答
Fireworks制作GIF动画广告BANNER
Fireworks制作下雨动画效果
Fireworks and Dreamweaver指南介绍
使用Fireworks MX 绘制手机
Fireworks MX 滤镜讨论
Fireworks MX制作下拉菜单
Fireworks MX对网页的逆向导入
Fireworks MX制作像素动画
巧用Fireworks遮罩做平面设计
Fireworks创意遮罩动画制作
Fireworks制作透明按钮一例
Fireworks MX图层混合实例剖析
Fireworks 制作立体旋转地球
Fireworks 巧制生肖鼠票
Fireworks制作空间环绕文字动画

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


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