论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

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

文章类别:Fireworks | 发表日期:2008-9-20 19:30:51

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



按钮是网页中应用极多的元素,众多的按钮就形成了导航条,导航条的作用就是要让浏览者清楚知道当前所处的位置,并且通过导航条可以方便的将浏览者带到其他的地方而不会迷失。因此按钮表现有以下几中状态:
  • Up:默认状态,即通常的状态,这时的鼠标是不在按钮范围之内的。
  • Over:鼠标滑过按钮时的状态。
  • Down:按钮被点击后的状态,通常它是出现在目标网页中的。
  • Over While Down:鼠标滑过处于Down状态下按钮的时候按钮的状态,通常极少应用。
现在我们来创建一个按钮,选择:Insert->New Button 这样就会出现按钮编辑器,如图:


在Up状态下画一个按钮并写上Home,代表这是一个回到首页的按钮


切换到Over状态下,点击Copy Up Graphic,Fireworks直接将Up状态下绘制的图形复制到Over状态下,并会保持所有的可编辑属性,假如你需要更精细的加工,可以打开Onion Skinning使Up状态下的图形淡淡出现,以做参考。在这里,我们将Home字体的颜色改变。


类似的,我们切换到Down状态下,点击Copy Over Graphic,将Over状态下绘制的图形复制到Down状态下,并再次改变Home字体的颜色。假如你愿意,同样可以再创建一个Over While Down状态的按钮,这里就不重复了。

最后,我们切换到Active Area,在这里可以设定与链接有关的参数,所有设定的内容最后都会输出成标准的HTML代码,我们要做的只是简单的将输出的代码复制到网页中的相应位置。Set Active Area Automatically会自动设置一个切割,切割的大小与按钮的大小是一致的,建议使用这个设置,然后点击Link Wizard进行最后的设置。


Link Wizard有4项相关设置:
  • Export Setting:设置输出时图片所采用的色板。
  • Link:设置链接的URL,alt的文字,以及浏览器状态栏显示的文字。
  • Target:设置打开链接的方式。
  • File Name:你可以选择由Fireworks自动为文件命名或者是手工指定文件名。

一切都完成后,我们关闭按钮编辑器,回到通常的编辑界面,这时可以看到画板上出现了一个带有切割和热区的按钮,选择这个按钮,在左下角会出现一个小箭头,这是符号(symbol)的标记,因为按钮正是符号的一种。你可以移动这个按钮到你希望的位置。切换到preview状态,你可以马上看到这个按钮的效果。


选择Window->Library打开Library面版,你可以看到刚才所创建的这个按钮,在Library面版中双击这个按钮可以再次打开按钮编辑器对按钮进行编辑。

上一篇:创建按钮(Buttons)和导航条(Navigation Bars)<下> 人气:1862
下一篇:创建动画(Animation)<下> 人气:2093
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058