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

[复制链接]
查看: 696|回复: 0
gggds 发表于 2009-12-27 14:04:58 | 显示全部楼层 |阅读模式
  在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。
$ E* y! f( l% Z6 _/ C' c创建带有样式的按钮  使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。- u4 `0 F) E8 ^- J' _8 _6 Y" H& y

2 P3 |4 A6 G: I7 Q4 M, |: l 3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。% y  i/ C6 p- m8 T3 c( L& l$ B8 v5 ]
1 J7 O& b1 q3 i

7 M; w* L$ h5 M0 Q* C0 y$ _( x. J, c8 J8 k! S
4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
6 h8 F+ W1 G. t" p! L8 m* n! n9 Q; _
5. 也可以选中按钮,点属性面板上的+增加各种效果。
. @: J0 H; K  X  W
6 Q: b5 L3 `) v4 N1 Q1 |& _. @ . [, a  U& [6 Q9 r- u, D
输入清晰的按钮文字  在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”
$ p- k; L0 _0 O! S( R7 D0 I) q  Y
,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。" z6 W  k0 x; m; w& Y& s, F

% [6 R" I3 b( e. y+ `9 O) l; L( q) V: Y输入文字后的按钮:
5 W3 Z- O% z- l/ r. e
! T9 I6 O$ U* ~1 {* d) y
3 F1 O& w4 |0 l8 n2 @使“滑过”状态的按钮颜色相对“释放”状态变亮。1.选中“滑过”状态,点击“复制弹起时的图形”。
$ y, B! j4 ?/ ?* Z# u- @! w' Z" \5 N
: t; n6 W0 ^! C8 n) `$ r7 [2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。* |4 E1 o* g' f/ d/ z6 ]. c. U, }0 j
: D+ k& k, ?+ ?% W1 {: Z& |
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
/ K$ A* A: h$ b  u0 ^) g( K
* o1 f, M: O0 s
0 d* c1 U7 h& U( H2 `5 U  C2 P重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。/ |* c" S% L' `0 o

, ]; j0 V$ Q4 D) D% i8 @+ v  X% e
为按钮增加链接。1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。! C8 O4 K' k/ q, n; n6 c* E4 y$ L

6 G! U: D* l8 x4 w
( c( j  s: p$ H$ X( _! Z/ J- z' j9 {$ R$ {9 X
一个按钮就做好了。# U. w* g& i  C) L2 {7 h
创建导航栏1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。$ j+ ]7 Z; {* k; T9 N$ k9 K* d+ ?
3 J- T0 y2 n! \7 X6 h# _8 ~! r! C$ Y
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。  z0 e/ [  w  V4 o5 j& D0 \: p3 ^" q

* T" K; U+ `, ~3 Q3.从标尺上,拖出水平和垂直的引导线。: ]$ H& G" {: w! t8 R2 a

! q- l  t$ ?% B1 b$ V. M4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
4 ^2 I) I# E4 u; X5 n7 z  T4 P! Y1 W& [
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。 8 m/ k1 ]+ x0 Y' B4 S4 n

/ Z4 L6 }- s- O. F: @2 F: n6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。

本版积分规则

精彩图文

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