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

[复制链接]
查看: 286|回复: 0
gggds 发表于 2009-12-27 03:17:03 | 显示全部楼层 |阅读模式
  在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。   创建带有样式的按钮   使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。   1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。   2.“编辑” >“插入”>“新建按钮”。    - m  f! O7 y) u9 X1 y8 T) S

; r) B5 c7 {6 Q9 o0 r* E- {- ~/ m) K2 S, T' f
  3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。   
- G! Y9 {6 m- {9 T! u( k, o3 f8 f, v$ R# T

3 J2 V9 v: u- K  ( f9 H, a4 L# h  m$ u6 u* X

; Z3 n( G# Y; y9 E3 n- L* |& u" _
  4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。   
6 w; Q- }3 P/ D& e* ~! ]0 g# Q. p; J  `8 q
2 \( f! r; {# N  _8 R
  5. 也可以选中按钮,点属性面板上的+增加各种效果。   4 n5 y& z7 S4 \  z7 s' R
. r" s4 s& r6 h, }" b5 o

' D4 ]7 {! F5 d, B& a0 a8 o  输入清晰的按钮文字   在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。   1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。   
- N3 S; l' J1 k8 g3 J9 M; [
0 y* T/ W2 m* B) H4 }) b2 }- V, Y( _9 q$ R
  输入文字后的按钮:   " s+ \% R) Q$ s( b' }& w
' _# s5 Q( V- m  f6 \: D6 C

6 ?, C+ W" G% ]: `  使“滑过”状态的按钮颜色相对“释放”状态变亮。   1.选中“滑过”状态,点击“复制弹起时的图形”。   ! N0 J) o' K) P- @

) `3 W7 l, k2 u8 s
' i) X9 S: g, e  P0 |- k  f  2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。   & ]) C5 f# ^' Y7 O
2 X( Y' M9 L& O9 G  R

3 y( W2 c# z& n0 ]! t  3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。   
, r, z( Y. n' a0 M/ S: y+ F4 K# l5 K0 c

2 Y2 ~% _- U! E# H/ ?7 ?  重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。   ! W& V, k- \* j
2 I1 j4 v& p! ^- c2 R

4 D  I) k$ V" B, G. y  为按钮增加链接。   1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。   
0 U# s' V, ^2 ^3 k2 O' I
7 T# }" x+ q* c: W( \8 S( H/ `6 B) W2 a5 `% L
  
$ N! D9 |0 V1 Y
! \) m' \2 ?+ p: m: [1 V7 z# M  G. R% M. \
  一个按钮就做好了。  创建导航栏   1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。   * h1 `2 ~4 @# H; R- P
2 r8 s7 K& W0 v* u8 G

; A2 t* j; Y9 ~  2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。   . ^, f1 f+ ?, D2 s+ u8 ?6 a0 n0 T
3 k& T) o% G2 x1 a( ]

! f6 J0 `' y7 g+ K1 O  3.从标尺上,拖出水平和垂直的引导线。   ' R9 q2 ]6 I' S; G) c6 Y

2 E# O6 `. ]- S6 F2 c$ z/ B% |0 V0 K; `2 V2 |
  4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
, v) D. X) J$ ^" i! T$ I$ \$ D; O

0 Y5 b+ D4 j* |6 e; e$ i  5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。   $ b6 m8 }8 |! f7 U1 X3 Y

! D5 }  u6 N: k# r' q, r) U6 u$ [$ y# S( I
  6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。   " L2 m# A& W" w% h: h$ s

  g5 i& m9 i, _" Q5 Y8 Z# E( m" K7 ]! i. L
【责任编辑 admin】

本版积分规则

精彩图文

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