|
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。 创建带有样式的按钮 使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。 1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。 - I) w& j- v# U3 a9 f* s. n
$ u% z7 o6 t' a: @0 V " O5 I" d' V2 C: A. \) h0 g
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。 ) ]8 ]4 ^1 n! q/ R* u: _' A/ S/ d
% m7 h5 y6 H4 ~" W/ I( \" g
![](http://www.blue1000.com/upload/2006_01/060108212742363.gif)
* b/ W2 s5 w% v
/ Y+ P% T/ a0 \7 V2 T1 s) y: x+ Z) j! a
![](http://www.blue1000.com/upload/2006_01/060108212742364.gif)
W f7 G! y' Q+ d9 ~0 l! T/ U: d- [" Y 4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。 , N1 Z. G. e9 x6 D7 x
$ _; S/ T3 ]! i. H4 J
![](http://www.blue1000.com/upload/2006_01/060108212742365.gif)
* x# b0 G2 r( D 5. 也可以选中按钮,点属性面板上的+增加各种效果。 & _$ r9 _6 J6 D) i+ |9 A; V/ y4 ?
1 _: ?7 A5 G+ o5 ?3 m0 x8 C * I! I. M# C% G- l3 F* ]- i; W) y
输入清晰的按钮文字 在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。 : L5 K l, j" R6 k+ F+ c
0 M& r1 ^2 B6 K) S- r- K2 @
![](http://www.blue1000.com/upload/2006_01/060108212742367.gif)
; u( L5 m0 N. |. u! }: n4 S 输入文字后的按钮: 3 Z. r3 B( g: d' @
. I1 G6 m* o. Q7 x$ t0 K. W! J& ?![](http://www.blue1000.com/upload/2006_01/060108212742368.gif)
- n( ?( t. M6 K* B. t( X2 j0 H 使“滑过”状态的按钮颜色相对“释放”状态变亮。 1.选中“滑过”状态,点击“复制弹起时的图形”。
/ t9 p$ m+ k% V4 x& I4 u, X' X( k
1 T7 ?6 y4 B3 \4 X# `& x6 `" n![](http://www.blue1000.com/upload/2006_01/060108212742369.gif)
8 G5 }# y' Q" _: z# b, S5 A 2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。 1 v% W9 T- F7 m1 _! g- `& @
# U# U# O. g" ^0 y2 J/ ?
# m X* r. e/ Y8 z$ ^6 J0 j
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。 7 a7 R- h5 e/ Q$ t
U2 V, w# P, ^
3 y ~ m: X2 r0 l
重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。
; j0 V/ U: M u1 C9 b' { f l" W1 N1 v: v0 t, ?6 d7 [) O
( J$ | C; P( q$ S2 m9 W
为按钮增加链接。 1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
z6 B8 D1 I2 w2 N1 {9 e" a/ b/ i& G
![](http://www.blue1000.com/upload/2006_01/0601082127423613.gif)
# q T; S8 ?/ c: Z6 J Q' W* z0 f* x! `9 y/ M
- L& P( K4 C9 p2 f6 l
1 Q7 g: T; G" F1 g6 k7 D# R! U# D
一个按钮就做好了。 创建导航栏 1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。 6 | z9 n/ L1 m5 K
7 x4 N/ i u( a! [& E4 U h7 g
/ `! J" C( w' A2 V5 o
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。 # \& ^. S7 ~, L x
1 c! [: q; j+ l& i9 u: m0 u . D' {) S( b+ u0 [/ [& u
3.从标尺上,拖出水平和垂直的引导线。
8 Y' V# O- U/ `9 z9 z( ~- z. \$ U, a' v' a9 }$ A( M) E" K# c4 z, B) [
) w8 E+ U3 f3 V; y& _. o3 a0 D
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
. ^+ f- S3 q [) S. i6 v" L% w
![](http://www.blue1000.com/upload/2006_01/0601082127423618.gif)
; H2 ]/ u2 I' ?) G 5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。 1 p7 Z% O" I6 s/ g- }7 ~; k
- h( m: ]! x& `) F" y/ [![](http://www.blue1000.com/upload/2006_01/0601082127423619.gif)
2 r2 V% v$ P n/ o+ M4 n 6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。 ) Z a$ f8 P. k s: Q: H5 I
![](http://www.blue1000.com/upload/2006_01/060108212742361.gif)
6 [* v3 h) Q6 n$ g4 v( t
1 Q6 j3 r+ j. m' {7 V3 D5 p【责任编辑 admin】 |
|