首页 > 办公 > Fireworks > 正文

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

2024-09-11 13:33:06
字体:
来源:转载
供稿:网友
  创建按钮(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面版中双击这个按钮可以再次打开按钮编辑器对按钮进行编辑。

 
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表