|
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。 创建带有样式的按钮 使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。 1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。
9 `! ]; U( E( L! ^
2 O c. \1 E6 p* P# w- k9 Y, u- p0 ~' p/ s3 l/ L
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。 ) g3 J1 q2 r2 k# i" K; @/ z) v
1 M4 Y( {6 h3 {7 r% O: P' E$ m7 ~1 w8 N/ Q5 {3 {3 K
( P9 K. N: ^* k
5 E' H/ k Z0 f$ }
6 N% H$ P1 n* M$ y+ ` 4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
' l( k0 o. b& e# v% ~3 b+ D* u- z3 I6 o* P
9 J- y% x4 Z1 u' W8 t7 S
5. 也可以选中按钮,点属性面板上的+增加各种效果。
# }& o$ w6 {( J* w' m q& q L2 J3 ?: }! b- v: p b
' L9 W2 d7 E2 N' _/ M1 ? 输入清晰的按钮文字 在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。 p5 Z! S; M- o/ J
/ c: @* v) a. @: g W- O( \/ ^7 m
' i: d8 C F O- F: `' B% [ 输入文字后的按钮: 8 u. c7 k" y( ^/ ^4 p( ? M
' y* S0 h/ N" B1 X# k: {
$ B ~- M# v. J1 x$ h/ a
使“滑过”状态的按钮颜色相对“释放”状态变亮。 1.选中“滑过”状态,点击“复制弹起时的图形”。 " v+ b* B+ L# G9 m
* `% Y/ C' w/ P: M
" x4 ~. U/ l1 f* @: B 2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。 . o5 U4 e ~0 `7 Q5 j" ]) K5 A$ P& [
; K9 }) @6 @& w
5 n1 D* U7 F7 q5 p& ?( p! u 3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
% U# z) `- z+ p1 o2 b/ H! p9 r# y& Y: ]6 S; R, u
# Q1 b7 y0 K1 z8 O6 v" p, y 重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。 6 K# o/ Z c( A* Y7 L
5 b* G, N( C# \" F, A+ C
( a: F5 b" m* ], \2 d/ i5 q 为按钮增加链接。 1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
! C. \- n a# d3 ?3 K/ B; h. k6 t9 p. T" f1 E3 G
5 R2 g2 n) C$ P3 l5 d( ?
* D* |: V+ f8 A: l3 N/ A5 S6 n1 w9 T# ~/ I$ i; @( b
z3 U0 m" B+ T. f
一个按钮就做好了。 创建导航栏 1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。
: V K& w/ t' G4 ]- U$ Z7 e6 @: l/ t. w T% ~/ D
2 {0 K f0 h9 J( T" [' Z1 Q/ S 2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。 6 q) n4 X% Z8 L, R
; O# S8 Q/ ]; N" N7 Y2 o, @
0 Y) O( U/ R8 p+ [, Y0 x" p 3.从标尺上,拖出水平和垂直的引导线。
) `( H7 s5 X3 S0 c* M% G8 T/ S
5 e" R) M4 l* P
6 Y* c7 V8 L8 g' _ 4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。2 n, Y( z" l- A$ G
* V+ [6 i& o6 E4 _) c3 J3 ]& ]% ?3 O
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。
( u H7 n+ p" p% h s- A, ~6 B8 h+ E3 p- m
$ [' d/ `- A9 Q$ h 6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。
: I7 G: S: v) ?- r1 N6 r4 _4 |) _: [
7 b- x, H1 Y, S* z6 ~& t ` a! q
【责任编辑 admin】 |
|