当前位置:首页>网络学院>网页制作>Fireworks教程>文章内容

Fireworks MX(二十五)按钮和导航

[ 来源:www.it55.com | 作者: | 时间:2007-07-12 | 收藏 | 推荐 ] 【


  在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。

  创建带有样式的按钮

  使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。

  1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。

  2.“编辑” >“插入”>“新建按钮”。 

  

Fireworks MX(二十五)按钮和导航(图一)


  3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。

  
Fireworks MX(二十五)按钮和导航(图二)


  
Fireworks MX(二十五)按钮和导航(图三)
it55.com

  4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。

  
Fireworks MX(二十五)按钮和导航(图四)


  5. 也可以选中按钮,点属性面板上的+增加各种效果。

  
Fireworks MX(二十五)按钮和导航(图五)


  输入清晰的按钮文字

  在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。

  1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。

  
Fireworks MX(二十五)按钮和导航(图六)

sflj www.it55.com kg^&fgd



  输入文字后的按钮:

  
Fireworks MX(二十五)按钮和导航(图七)


  使“滑过”状态的按钮颜色相对“释放”状态变亮。

  1.选中“滑过”状态,点击“复制弹起时的图形”。

  
Fireworks MX(二十五)按钮和导航(图八)


  2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。

  
Fireworks MX(二十五)按钮和导航(图九)


  3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。

  
Fireworks MX(二十五)按钮和导航(图十)
www.it55.com

  重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。

  
Fireworks MX(二十五)按钮和导航(图十)


  为按钮增加链接。

  1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。

  
Fireworks MX(二十五)按钮和导航(图十二)


  
Fireworks MX(二十五)按钮和导航(图十三)
点击查看大图


  一个按钮就做好了。
  创建导航栏

  1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。

  
Fireworks MX(二十五)按钮和导航(图十四)
it55.com

  2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。

  
Fireworks MX(二十五)按钮和导航(图十五)


  3.从标尺上,拖出水平和垂直的引导线。

  
Fireworks MX(二十五)按钮和导航(图十六)


  4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
Fireworks MX(二十五)按钮和导航(图十七)


  5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。

  
Fireworks MX(二十五)按钮和导航(图十八)

(阅读次数:

返回顶部
共2页: 上一页 1 [2] 下一页  

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]