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

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

* b/ W2 s5 w% v  
/ Y+ P% T/ a0 \7 V2 T1 s) y: x+ Z) j! a

  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

* 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 @

; u( L5 m0 N. |. u! }: n4 S  输入文字后的按钮:   3 Z. r3 B( g: d' @

. I1 G6 m* o. Q7 x$ t0 K. W! J& ?
- 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
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

# 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

; H2 ]/ u2 I' ?) G  5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。   1 p7 Z% O" I6 s/ g- }7 ~; k

- h( m: ]! x& `) F" y/ [
2 r2 V% v$ P  n/ o+ M4 n  6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。   ) Z  a$ f8 P. k  s: Q: H5 I

6 [* v3 h) Q6 n$ g4 v( t
1 Q6 j3 r+ j. m' {7 V3 D5 p【责任编辑 admin】

本版积分规则

精彩图文

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