Fireworks MX(二十五)按钮和导航

[复制链接]
查看: 300|回复: 0
gggds 发表于 2009-12-27 03:17:03 | 显示全部楼层 |阅读模式
  在 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 k1 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】

本版积分规则

精彩图文

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