|
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。 创建带有样式的按钮 使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。 1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。 ) @% L! a9 e5 @) v
% _. {6 I" I+ s/ n2 ^
; d; o# q" ?0 p
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。
& x0 u4 s% T# h# H' W: i. J6 p% h" j. K

5 z) e7 j# s$ F( Y0 Q$ p' N
) e' J; f- j$ r" U' E, ?( s6 B* q V! s8 _+ I

7 S2 H# b$ a% j0 s# {" z 4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
) ~ E! H( h2 X$ r$ d( x) K O$ p. M* }# @1 u

! q8 m. F* E% ], e 5. 也可以选中按钮,点属性面板上的+增加各种效果。 ! p4 k* `4 |' Z5 H: g2 z
, w8 w: W: J- v. Y, J3 h
2 [$ O X! q9 Y& @9 G 输入清晰的按钮文字 在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。 6 z# ^; f7 z9 D t& k
: W A8 |% E7 c5 N i1 M
& y& M6 u, C4 \' E 输入文字后的按钮:
0 J5 j7 u" \8 l: I1 | U( k7 \9 ]6 ?. i

, H! \% p8 }0 Y/ U* X+ D+ [ l 使“滑过”状态的按钮颜色相对“释放”状态变亮。 1.选中“滑过”状态,点击“复制弹起时的图形”。 - x. `: e' W( n+ {- W/ v! ?+ X
( F/ t3 J+ Q" e5 a# A+ z& O E

& o. g! s$ g6 z+ { 2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
3 I6 e& n1 l$ T, D& s8 ]" t% B
/ a) {/ W$ E' L) [- C! |; G* c $ r# R* t& Z4 R3 f6 a
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
% |. r0 H4 s. I6 L+ N* g
& k, v G- p& c& }4 L& g% M5 s. j
7 p& q3 P( R4 i8 ` 重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。 2 Z& X3 |; T4 `; q& X+ Z- t
6 G6 r" v7 B) H& G0 y/ @& |
8 N' b- t! U7 Q 为按钮增加链接。 1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
6 t; T; g" p3 h: z
) T7 m" O8 u5 A8 d6 k 1 A3 p6 f/ X0 ~. B
# \4 N6 x4 ]; o/ T0 s9 g
C7 E) M7 [8 D; @* L' Z) ?

; @/ a6 ]2 [" D6 G' [$ m; L3 N 一个按钮就做好了。 创建导航栏 1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。
7 v6 A! T6 @" u% @
8 l f# M+ P+ k8 i- C: O5 R' c* d , Y" P2 e: b! ^" }3 H
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。 9 c/ y' x! R0 G3 m" { q. V
: c2 ^/ x# W6 w- X# ^% N0 \
0 s. u/ I: L) ], o 3.从标尺上,拖出水平和垂直的引导线。 / j) `$ p& R4 e& @
* g+ m- G, c$ x2 A8 B6 ~
2 |/ P( C: J. O) ^
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。% X! X3 J2 t q, P+ c& ]2 \
4 T6 _) F# f! q: }! _- | ?4 A$ }- a/ c, a5 X- J
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。
+ d& ^3 i Q& X2 \5 }$ c* e! Y0 o$ i2 z

7 I. Q- U0 l! m9 l 6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。 : @1 ]( |3 p% m* _0 p+ _

0 p0 ]. d! L2 Z4 k) r" r2 N1 q& T- h$ {2 ^- v: O+ B: X4 Z+ {, R
【责任编辑 admin】 |
|