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

FireWorks
巧用Fireworks渐变工具处理图片
放弃PS,Fireworks也能为黑白照片上色
Fireworks鼠绘CG性感美女
Fireworks三个案例教你使用涂抹工具
Fireworks打造草样年华gif动画
Fireworks 打造炫彩网点广告效果
Fireworks CS3切片工具的使用简述
Fireworks快速打造水晶图标
Fireworks 8打造精致指南针图标全过程
Fireworks绘制精致Rss图标
Fireworks快速简单打造网页“闪字”动画
Fireworks打造动态banner全过程
Fireworks教程:用FW自带滤镜打造动画效果
Fireworks教程:绘制可爱卡通Q版电视机图标
Fireworks教程:利用FW笔触工具绘制飘逸白云
Fireworks教程:打造雪花纷飞节日贺卡
Fireworks教程:利用“建立控点法”绘制炫彩画面
Fireworks教程:用滤镜打造漂亮极光字效果
fireworks教程:自制树叶笔触绘制一棵榕树
Fireworks教程:教你制作特殊的切角图形

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


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