用Fireworks轻松制作网页交互按钮

庸懒的阳光

　　使用Fireworks的网页按钮制作向导(Step-by-step button maker)，可以轻松制作出漂亮的网页交互按钮。下面以实例说明具体的制作步骤。
% z+ w2 c' c$ v4 ?/ u0 A/ }2 I' i. u
2 G" G" z1 h4 K" O5 S　　1. 启动Fireworks ，单击工具栏的新建文档按钮，弹出新文档对话框。单击该对话框中的OK按钮，打开一个新文档页面(图1)。% U' Q5 y; Z7 ?; W- W
5 K" v/ B0 j% j, ^* Y

- M% a  p$ V2 d) w( c- W图1! ~  X* n: l, {8 B, J1 o) A

  X- q0 \$ \' T( `5 h' P4 o9 ]. t& T! O5 K* o1 ]& \4 X
　　2. 从Insert(插入)菜单上选择New Button(新按钮)命令，启动按钮制作向导，弹出按钮编辑器窗口(图2)。
/ d- @" |3 p3 ^4 L6 j
8 Y4 O4 d4 X3 F' C6 `- m$ v$ O) m
图2- }: Y% h' T9 C
6 b0 C6 b4 h+ P6 y
0 y; b, z: ?+ |" Q, q2 d7 W
　　3. 在工具箱中选择矩形工具，在按钮编辑器窗口中拖动鼠标，画一个适当大小的矩形。( F! y' z# b5 o1 J
/ w6 N, Q! N/ N( _# O
　　4. 从填充面板中选择想要的填充特效(如果填充面板没有显示，可以从Windows菜单上选择Fill命令，打开填充面板)，制作漂亮的按钮图像。本例选择Ripples(波纹)图案、Emerald Green(鲜绿色) ，如图3所示。
# I$ Q1 Y6 n" C0 A: S5 y7 b* A9 `+ b. a: F$ V  J# k9 U- S
. B0 |# I3 [) ]4 B
图3
3 u9 F" }4 _9 L6 g8 A: L* Z3 D' \6 P+ q, x9 X
( A/ ^4 z2 V6 n, \! L
　　5. 输入按钮文本：选择文本工具，在按钮编辑器中单击矩形中心附近，弹出文本编辑对话框。从文本编辑对话框中的字体弹出菜单上选择一种字体，选择点大小，从颜色弹出菜单上选择一种颜色，单击居中对齐按钮(本例选用隶书，25点，红色，居中对齐)，最后单击OK按钮(图4)。
: o. P7 J8 Y# t+ G5 ^( v
* O* @4 w" X! {, W0 D* h4 K( ?5 S
1 I: p( O" v; t# ^
图47 h, P6 [; ?; C; c) G" s4 R8 I
" W! Z; T" n: k/ p! ?
7 w* o. G1 Z7 X/ C* L; p
　　6. 完成上步操作后，得到按钮的Up状态 (正常状态)，如图5所示。
: Z1 {: X' [/ a& V$ x6 d' v
1 x6 V# d. ^1 ]* {8 N# B
) i1 o+ o' i* x0 y7 T, v图57 G2 k, `: F! l# s/ h+ x

" G" ]. b. T; K6 k6 M2 C5 S. o! q6 B: S) D+ ~- R; H; Q
　　7. 设计按钮的Over状态：按钮的Over状态是指在制作完成的网页中鼠标指针掠过按钮时显示的状态。单击按钮编辑器中的Over标签，按钮编辑器窗口的右下角增加了一个Copy Up Graphic(拷贝Up图像)按钮。单击该按钮，把Up状态的图像复制过来。此时，按钮的Up状态和Over状态相同。要使Over状态有别于Up状态，可以按照上述第4步的方法，改变按钮的填充特效。
3 r  z4 }3 `2 m- s1 U% J: H& P, O- E
　　8. 设计按钮的Down状态：按钮的Down状态是指在制作完成的网页中按下按钮时显示的状态。单击Down标签，按照上述第7步的方法，可以设计出与前两种状态不同的Down状态。
2 ~1 Z& c! ~; P$ U# O$ z* d1 g8 D; S- A. i4 M5 k: H
　　9. 为按钮建立链接：单击Active Area(激活区)标签，然后单击右下角的Link Wizard(链接向导)按钮，弹出Link Wizard对话框。单击Link(链接)标签，在对话框上部的文本框中输入URL，例如http://www.infosea.126.com，最后单击OK按钮。
1 M' w3 v  O4 T. `$ y( \: @5 K
5 w: g& F* b, I1 \# L
# y0 l6 g$ A( G, I) B5 U& X& u图6' ?/ s; L! d7 u' _/ e6 y. A! s0 b1 L
6 K# P4 v$ g7 o5 m' b! B

5 a" R9 ^3 C. k$ S: i$ b' k8 Q　　10. 关闭按钮编辑器窗口，回到文档编辑窗口(图7)。+ V& L6 S4 \, Y' m% z2 ]! C; h
) {5 v" K8 V' a: @. F0 E" k

( E. M. Q% k0 N$ o9 e& y8 F* D$ r图7$ T# ]% [% _6 X# ^  ]
! V0 }' W+ K, D% E

, T/ X+ I1 M( z　　11.单击Preview标签就可以预览交互按钮的效果。
  h7 ]6 r% i9 Z. ]
6 m7 N* I. J2 i8 P" L6 U  M　　12.输出HTML文档：从File(文件)菜单上选择Export(输出)命令，弹出Export对话框，在Base Name文本框中输入文件名，选定HTML文档的风格(Style)和存放位置(Location)，单击保存按钮(图8)。
4 j) ^5 E. g) l4 A0 |# b, h% c) Y' G1 r) B# c* [  w6 }' [
3 ?) ?) K& D2 j7 D" }. J
图8
, W# L6 o4 X) J- P7 x# J* u! l' S
* |. y; L% d0 |- ?' s7 t" h5 H
4 M4 a, x) X. p, h, v; t　　13.用浏览器浏览生成的HTML文档，查看设计效果。
7 G; P8 f' D" n% t0 [! i, W0 A: m0 [( m% v# h6 p! f, [" e
　　附注：①Dreamweaver 提供了直接插入或粘贴Fireworks 生成的HTML文档的功能；
/ L; |; i& a: J% j% g' |" M8 L6 ?- w. u+ [
　　　　　②通过按钮复制，改变按钮文本的方法，可以快速、高效地制作出一组外观一致只是文本不同的按钮。