按钮是网页的重要组成元素之一，在网页中发挥着十分重要的作用。它主要起着两个作用：第一是起到提示性的作用，有提示性的文本或者图形来告诉浏览者点击后会有什么作用，这样的按钮可以是静态的图片，主要是让浏览者了解点击它起到什么作用，甚至可能仅仅是一个小的较为美观的图片。第二是动态响应的作用，即是指浏览者在进行不同的操作时，按钮能够呈现出不同的效果，响应不同的鼠标时间。
S$ {2 r; u0 g4 k163K网站系统官方论坛7 p' g+ a! y: T/ H# `- C
这样的动态网页按钮一般有四个状态，即Up（释放）、Over（滑过）、Down（按下）和Over While Down（按下时滑过），要编辑按钮的链接或行为还要设置按钮的Active Area（活动区域）。
为互联网事业发展提供源动力！- n4 w z+ r3 Y, z& ^" W
今天我们就来介绍如何在Fireworks中快速制作按钮四状态 。文章末尾提供原文件供大家下载参考。
为互联网事业发展提供源动力！9 h! [6 L+ a: C3 \( j) X
团购网站系统,团购网程序( ~; N/ H S- w6 R+ _' i6 T
（1）在Fireworks中新建一个大小为200×60的文件，使用工具箱上的圆角矩形工具绘制一个圆角矩形，在属性面板中设置圆角值为47，得到如图1所示的图像。
: {. j) i2 w4 C% a4 C163k团购网站系统官方服务论坛
5 z4 F4 a5 J, t' n8 W; S }9 _0 @团购网站系统,团购网程序163K网站系统官方论坛! v6 B: Y2 B* Y) [/ ~5 s
163k团购网站系统官方服务论坛% V9 t i- k/ a# A) J0 t, }
图1 绘制圆角矩形
163K网站系统官方论坛2 V" ]' [+ r+ S9 @6 k
2 W1 |3 v+ q5 t! \& Q( j! gbbs.163k.com （2）然后在属性面板中填充设置中选择"Gradient">>"Linear"，即选择线性填充，并在浮动颜色框中设置第一个颜色块值为#B6B6B6，第二个颜色块值为#FFFFFF，得到图2所示的图像。
5 Z3 c3 t( y' p' G# k163k团购网站系统官方服务论坛
2 x1 G9 i/ z- ]& w163k团购网站系统官方服务论坛
$ u5 Y6 E8 e/ s$ Y5 p7 P9 b1 kbbs.163k.com
A' T* O, w+ V0 Z- b163K网站系统官方论坛图2 设置渐变填充
9 ~; G2 T8 W1 _, ^bbs.163k.com
1 v; w+ y/ [4 |3 ]7 M为互联网事业发展提供源动力！ （3）由于现在是左右渐变，我们想实现上下渐变，其实只要调整渐变填充的控制杆就可以了，如图3所示。
163K网站系统官方论坛( s2 D# K* |. i$ k4 u: N
为互联网事业发展提供源动力！. h$ O# [+ p: ~% K
3 _7 P. |3 j. P# J5 i/ m
% l9 }" O1 G% _3 M为互联网事业发展提供源动力！图3 调整控制杆
$ w+ @/ e7 x/ ^ ]) R163k团购网站系统官方服务论坛163k团购网站系统官方服务论坛2 S, J5 \3 F. I- b- y8 k
（4）按住Ctrl＋Shift＋D克隆圆角矩形，然后使用工具箱上的矩形工具绘制一个矩形，并使用选择工具同时按住Shift键选择矩形和克隆所得的圆角矩形，如图4所示。
6 I" v& }% H+ ?9 Y6 C. l163K网站系统官方论坛
. `! h( T' C, D2 L# U163K网站系统官方论坛; F& p4 s' h4 O6 L" l
为互联网事业发展提供源动力！6 A3 v- Z7 R( l3 c k- f
图4 同时选中矩形和圆角矩形
+ E; b E7 _/ g* o; Z2 Obbs.163k.com为互联网事业发展提供源动力！% D' M& K4 a, h2 V# e! P/ N% `
（5）点击"Modify"菜单，选择"Combine Paths"（组合路径）>>"Punch"（打孔），将两个路径使用打孔效果，得到图5所示的图像。
163k团购网站系统官方服务论坛 G* K. W+ g: I9 P" _) W& Z- ~1 K- m
% r8 r" V* _7 y1 m为互联网事业发展提供源动力！为互联网事业发展提供源动力！5 [ O- ^* m- ^& l( g, F. d
团购网站系统,团购网程序$ G. d7 T6 N1 u/ ^: ]' |
图5 打孔后的图像效果
: U1 B* Z$ }4 _" B团购网站系统,团购网程序
+ z& o a& i2 M3 }1 y163k团购网站系统官方服务论坛 （6）选中打孔所得的图形，在属性面板中将其笔触设为无，线性填充的第一个颜色块设为#3399FF，第二个颜色块设为#D0F3FD，适当调整控制杆，并在属性面板中设置不透明度设为70%，得到如图6所示的图像。
团购网站系统,团购网程序( p7 e% A8 i, s% a! f- e+ W6 V
w; [6 i* m* P0 M f; T6 D2 {为互联网事业发展提供源动力！
5 x( w2 q- v6 |3 ^1 P$ \团购网站系统,团购网程序
! G& T& b3 Z* h* Y/ x" q$ Y图6 调整填充效果
163K网站系统官方论坛8 M" Y Y1 u6 @1 t7 r
163K网站系统官方论坛% i! j* [# i, }* H3 C; x
（7）为了实现高光的效果，我们将画布显示的比例调到400%，然后点击工具箱上的钢笔工具，绘制图7所示的路径。
+ \( r6 r' B5 _" x! h! h
: q/ D8 p( A+ t" Y6 o163k团购网站系统官方服务论坛3 S7 f$ p t8 I5 Q, t* Z5 h
bbs.163k.com6 V# V( v# K( p8 }1 @2 \
图7 绘制路径
8 d! {0 }; `; ? r/ q3 l6 ]163k团购网站系统官方服务论坛bbs.163k.com! E9 r" `" m: h3 d" i3 W
/ @ l1 L/ b. {, I' B# t# [9 j0 R! Vbbs.163k.com （8）调整路径的不透明度为90％，切换到100％视图，并适当调整一些填充效果让其达到视觉上的最佳，得到图8所示的图像。
" t3 S) ]' E5 x" Q
, H4 P8 s5 t( _" `+ u* o+ y团购网站系统,团购网程序163k团购网站系统官方服务论坛7 x) s/ G$ x4 K: d
3 q, r, _5 J, J, `4 dbbs.163k.com图8 添加路径后的效果
为互联网事业发展提供源动力！# ~6 |. {1 Y9 `& L
7 B* s3 l' g2 `, g163k团购网站系统官方服务论坛 （9）添加文本，并为文本添加发光效果，设置发光颜色为白色，得到如图9所示的图像。
+ Z4 _ E( R- D3 ]' \团购网站系统,团购网程序
+ C7 J2 j7 W* K7 F, b, L团购网站系统,团购网程序
; Y2 f, ^' H1 b1 h; }为互联网事业发展提供源动力！
, |9 S+ w. V6 F% g! R+ U0 G7 w ]163k团购网站系统官方服务论坛图9 添加文本
! |0 n( T: ~% y; m, d$ {! ^为互联网事业发展提供源动力！为互联网事业发展提供源动力！3 I! u' E6 j4 v \( x& S
（10）将画布显示的比例调到400%，用圆形工具和钢笔绘制一个简单的放大镜图像，线条颜色为白色，无填充。如图10所示。
, T$ x9 U6 h" ?% r" T s7 F, U163K网站系统官方论坛
: s, W2 E7 I D0 O5 U163K网站系统官方论坛163k团购网站系统官方服务论坛/ C7 o" j$ f. C
! [+ a5 q: }3 Q! R/ R2 [163k团购网站系统官方服务论坛图10 绘制"放大镜"
9 P: O9 ]- p% V o' z团购网站系统,团购网程序团购网站系统,团购网程序" t; j4 x4 Z$ f" |! U
（11）切换到100％视图，然后选中底下的圆角矩形，在其属性面板上为其添加阴影效果，最终我们得到图11所示的按钮图像。
) U: l+ Y" J1 U4 [( w163K网站系统官方论坛
5 l6 e6 r) W T( [* m7 nbbs.163k.com为互联网事业发展提供源动力！ _: N- _" x4 m% h- F1 A
" v G+ \5 G9 ^! S, E图11按钮图像
为互联网事业发展提供源动力！+ Z5 v1 T) s& o
! i1 y2 z/ }3 G% ~: S163k团购网站系统官方服务论坛 （12）打开前面制作好的按钮图像，按住Ctrl＋A全选对象，然后按Ctrl＋G将所有对象组合，如图12所示。
5 n# _: Z: A+ v为互联网事业发展提供源动力！
. Q5 p( N5 p( u) R
8 F0 X/ H- w# j163K网站系统官方论坛
9 K; K0 L l1 {7 h团购网站系统,团购网程序图12 组合所有对象
5 }3 ~- }6 m; i; p163K网站系统官方论坛163k团购网站系统官方服务论坛" G0 t8 y s5 O. Q; q( p
（13）按F8在弹出的符号属性对话框中选择转换为按钮单选框并命名，如图13所示。
bbs.163k.com/ F- I5 S) W$ K V
) z1 K. g3 A: t% {4 g( o# g9 Y$ N* O团购网站系统,团购网程序
" L* M* R8 t& R, ~0 }, u' m+ {: E163K网站系统官方论坛
" w+ C8 }6 j5 ?; \9 v图13 将组合对象转换为按钮符号
" S+ s* k9 |: d" J; K6 ^bbs.163k.com8 u6 F p$ j. Z. L( o" N: \
（14）点击"OK"，这时候发现刚才的组合已经被转换为按钮图像了，此时对象上已经添加了切片，并且左下角有个小箭头图标，表示现在已经是一个按钮符号了。
bbs.163k.com7 [8 O- P# [9 w# t2 a6 s
7 x8 Z. M+ O7 k6 E7 H; u- Z- s163k团购网站系统官方服务论坛 我们想制作各个状态的按钮图像那么只需要双击这个对象，就可以弹出图14所示的按钮编辑器了。选择左下角的"Import a Button"按钮我们甚至还可以导入Fireworks自带的按钮库，方便我们制作按钮，如图15所示。
bbs.163k.com" z0 u C, ?+ ~7 s
1 @8 C4 a; L8 f: N- |3 l( v为互联网事业发展提供源动力！ 另外Fireworks的"Edit">>"Libraries"菜单下自带了Animations（动画）、Bullets（小图标）、Buttons（按钮）和Themes（主题）四个符号库，分别如图15至18所示，使用它们我们可以方便地制作出许多精美的效果，这里读者可以自己去尝试。
团购网站系统,团购网程序 h8 {/ ~' V1 A( c6 D4 ]& @0 y
& d8 d9 w5 g5 e. rbbs.163k.com
5 B" v1 Z$ `0 ?" y; S; i6 T团购网站系统,团购网程序
, \# l7 C# f' C9 abbs.163k.com图14 按钮编辑器
为互联网事业发展提供源动力！. ^# X# y# a3 e2 R
bbs.163k.com8 k$ S9 J7 t5 l) x5 l
( C* W0 s" f5 K7 B% E# s为互联网事业发展提供源动力！图15 Animations符号库
1 l/ n% L( L- u/ P+ V/ ]为互联网事业发展提供源动力！
+ [/ O6 b: o* p; L
bbs.163k.com! X' b+ m- s) q2 h6 S
图16 Bullets符号库
6 A' L0 {4 z3 G! v! _: A& ~为互联网事业发展提供源动力！
) u+ H5 K- |! B" ~9 ~- r1 G( n为互联网事业发展提供源动力！
: z+ n0 u0 k- ^$ w& P为互联网事业发展提供源动力！图17 Buttons符号库
" O9 [# S# y& N; s
bbs.163k.com6 u$ ` ~" L" E6 X
/ |/ `2 G8 Y5 Z) e3 G w$ R; L7 j163K网站系统官方论坛图18 Themes符号库
, |# D S" o+ L0 R4 j5 e为互联网事业发展提供源动力！163k团购网站系统官方服务论坛0 Q( v* E& c) K' ]
' W- S% I# X+ j M1 J* S0 p; \# q团购网站系统,团购网程序 （15）按钮的Up状态我们就选择原来的按钮状态，不做改动，接着我们选择按钮的Over状态栏，这时候发现里面是空白的，如图19所示。不要着急，点击 我们可以将Up状态的按钮图像复制到Over状态，然后适当地修改文本和填充的颜色就可以制作好按钮的Over状态了，如图20所示。
" S* l8 Z' v5 x- T6 d* }163k团购网站系统官方服务论坛
' j) T$ s, @) }9 A为互联网事业发展提供源动力！
" O u& z3 ^# h团购网站系统,团购网程序
9 I9 @+ m# W/ n- v163K网站系统官方论坛
163K网站系统官方论坛. `4 I* Z+ i, `* e s9 }
图19 按钮Over状态没有图像
163K网站系统官方论坛1 w& x2 I r9 K3 l6 J% `2 m8 B
+ y9 g2 ?9 m* p! J. o9 g: ]3 U163k团购网站系统官方服务论坛
5 U( P# R! y# B+ ?" `163K网站系统官方论坛图20 复制Up状态修改后的效果
! g- P; {, j8 q! Hbbs.163k.com
0 i. W2 s" N7 {/ y9 _163k团购网站系统官方服务论坛 （16）使用同样的方式在Down选项栏中复制Over状态的按钮图像，然后调整按钮的填充和字体颜色等，得到图21所示的按钮的Down状态图像。
团购网站系统,团购网程序$ [1 e9 I( c! V8 v! J* j8 p4 c' N
bbs.163k.com z9 B! p9 h7 Z7 Y
bbs.163k.com( q. o9 j" p) u3 G$ L4 I
bbs.163k.com- A, L$ {6 E# k
图21 按钮的Down状态
4 W5 A- F$ s* t% g" ^3 [- j) h
, D6 j/ r7 k9 r1 r5 n为互联网事业发展提供源动力！ （17）接着用上面的方法制作按钮的Over While Down状态图像效果，如图22所示。
0 c7 U) D7 d5 i' y% t
/ M, R; J) m' E% l
' q- F+ n2 M, A. L团购网站系统,团购网程序
. Z M! h" L- ?: ]" d* B. z团购网站系统,团购网程序图22 按钮的Over While Down状态
为互联网事业发展提供源动力！! E0 v6 Z3 P6 ^8 @) x! A% `
# _2 Q5 V# U6 @为互联网事业发展提供源动力！ （18）接着选择"Active Area"选项栏，使用鼠标拖动活动区域切片的大小，使得它和按钮大小基本符合，如图23所示。
163K网站系统官方论坛4 a( e/ l I4 ?2 o& D3 }8 d
163K网站系统官方论坛8 _; M/ z, g# \( ~
- Q, x1 R q. M% I2 @为互联网事业发展提供源动力！
: S( j K1 u% \( u" {
图23 设置按钮活动区域
2 [0 D% T; O4 g. i& E# W6 sbbs.163k.com为互联网事业发展提供源动力！7 @3 z9 J8 J$ _* s f0 J: E
（19）完成之后选择"Done"按钮，回到工作区，切换到4幅模式的图像预览看看按钮的效果，如图24所示，这样我们的响应按钮就制作好了。
原文件下载 为互联网事业发展提供源动力！% L7 S) I$ k+ o3 f1 L
- c' D' F. ]! _7 i8 mbbs.163k.com为互联网事业发展提供源动力！$ W5 |" T# |! C9 s* D
) g4 L! b( C, \2 M团购网站系统,团购网程序图24 四幅视图模式预览按钮效果
