[平面教程] Fireworks MX教程(二十五)创建按钮和导航栏

[复制链接]
查看: 698|回复: 0
gggds 发表于 2009-12-27 14:04:58 | 显示全部楼层 |阅读模式
  在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。
. f) i7 I0 X; A创建带有样式的按钮  使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。, i' @8 j  ]% \! i
  p( @. A7 N  u7 Z, G" b- A
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。6 g5 e8 E, n1 Z

9 \: t& p6 ]0 {2 G% m  o" C& e% P, F' x, j

9 X: h! j3 x" {7 f# c4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
/ C1 c- a! V7 t1 w7 i( \6 f$ ~0 T7 H# g) B1 f0 C; d8 V
5. 也可以选中按钮,点属性面板上的+增加各种效果。6 O/ V' W3 o4 Q, n' q9 S0 d$ G$ d& t

7 m$ s# {3 D; Y, ` 6 q- v; O, K% C1 A$ y
输入清晰的按钮文字  在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”
4 Y: J! i5 d1 h) n5 S# H0 E; q- o; w. E; h- X
,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。/ n+ x5 [: S; F7 y
2 U: A  c5 h$ Z! s
输入文字后的按钮:
, f0 r! P# K/ @$ O7 C& y$ \
, O9 T6 ^- W0 M! C
/ I- d& y( l/ e/ g* p( s* _' v7 b使“滑过”状态的按钮颜色相对“释放”状态变亮。1.选中“滑过”状态,点击“复制弹起时的图形”。! n, y+ J5 x# w& y4 S# _( L! a
/ f& u% i! y" T- B  g3 V' B
2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
6 L# d- D7 B) b- k, @5 O; w9 Q
- \. R. i( y! ]' K9 y3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。$ M9 G" M  }% C3 t5 u/ E
' N, p+ r0 U# j) U& ^- V! `

7 X" i9 O" I3 E- g7 k重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。1 K' Q: v1 s' h

9 h3 f: |! h  X  T: i. s0 e9 Z4 [, ^. W$ [
为按钮增加链接。1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。) J; W5 u  N" Z* d8 g( s7 F5 I
9 H( W" ^; @7 w) l# U( @; N
& q# J/ A& D3 b; x6 U6 c6 v! C

% y9 Z' H! T- E# n4 D一个按钮就做好了。
, y+ f3 X' Y' p7 a创建导航栏1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。, M3 {" ^* m! D, t' F: S# @6 e

2 z. {* e* z4 D: b2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。
# v' W; c3 I) L9 R( C0 ^. B7 v2 {
: C; e% N1 h$ Z4 Y# S% O; n3.从标尺上,拖出水平和垂直的引导线。! c; Y8 F7 N. E2 O( ~$ c) W7 M& }
; L4 ]& H1 f  I# e: X
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。& A" u7 `8 n+ o7 B9 ]- t

" v0 [4 ^- U& w3 M! p" D4 c5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。 " s' B' F. y9 {% a/ D& s

4 D9 h' p6 Y, a7 o* k$ j6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )