[平面教程] Fireworks MX教程(二十五)创建按钮和导航栏

[复制链接]
查看: 880|回复: 0
gggds 发表于 2009-12-27 14:04:58 | 显示全部楼层 |阅读模式
  在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。$ T" v# C$ @' i# V1 q* j8 [
创建带有样式的按钮  使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。
. W: C" n8 S- P, h
' N( S  D% M/ g+ r8 W; v 3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。0 \! i0 Y0 C0 Q9 j! t; t

# G' Z. @1 i1 i/ ^/ c+ Q0 o" ?9 q' A. Z9 z/ q1 ~8 C( d8 l

! u* a) L% O4 [- X  `4 \4 }  `& }8 O- }4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。6 }4 [% O: N) L: i; }! y9 g. G) b

& ]( }, v4 I% x5. 也可以选中按钮,点属性面板上的+增加各种效果。( ~% r, n" r7 F1 _

: r1 m" |. M: W; |+ a4 n5 n
- j1 m8 V  m" U$ Q输入清晰的按钮文字  在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”
0 Y5 J3 T2 C9 T4 R9 p" S0 o5 w0 F0 s8 F
,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。
4 D7 ]7 v, h/ k  W# B5 Z" \' C1 E* _3 r0 p1 c6 b0 y$ F
输入文字后的按钮:
5 G! w1 Q9 Y6 F3 C; c; }. ~6 P7 v0 j, ?

- a) \2 \! f4 d; s使“滑过”状态的按钮颜色相对“释放”状态变亮。1.选中“滑过”状态,点击“复制弹起时的图形”。1 R/ C8 p4 g3 S- u* [) s

& Y5 d0 a5 ~0 o0 {: S' M' ?2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
0 ~& \0 k2 t5 x" p+ ?7 E2 F3 q1 W9 O1 C* z0 C" t
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
: g9 r8 b! ^# J3 k' a7 L
3 Q7 e1 Q9 [* Z% ^0 |2 j0 a- ~$ J9 ~/ }+ Z
重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。2 B9 P0 [& D2 A! l7 p
  [, Y7 w6 B# B  l' J
+ @8 F9 h- n# D
为按钮增加链接。1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
/ A1 S+ S/ K1 u7 Z: n( `% B" c& o+ ~& U" l$ w

) r% j2 L/ x. a1 n" C+ C4 ~. y2 o; {  b  w4 c/ G; N
一个按钮就做好了。4 a/ X" }  l* _7 x1 ~! `
创建导航栏1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。& Y  l' v- j; |& l1 W
9 r* s+ q' s4 p$ V7 ^
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。
) n/ i; n: s6 [3 [$ ?; v
- r0 j( g5 k; m% G3.从标尺上,拖出水平和垂直的引导线。/ [, v/ C9 S' h

8 G0 w! F: T  @0 w4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
; ^' B9 k9 i* }7 ?8 w" r# W: F) _0 d" D: h- q4 C% ^6 l
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。 , x$ h$ S3 M- [* X3 }9 J$ I4 {& u

3 U' O2 D& \' M5 |0 ?9 Q" e6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )