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

[复制链接]
查看: 882|回复: 0
gggds 发表于 2009-12-27 14:04:58 | 显示全部楼层 |阅读模式
  在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。0 d$ P+ T4 M" C" i
创建带有样式的按钮  使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。
$ P8 F, t; M$ W, h9 \' i" T* D! x; g: [
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。* T8 J* z/ O/ P4 t; p% L
) ^" {6 c6 @# [# \: `
/ `- g7 Y. C* g7 ^* @. A

7 k( J  u) ~4 c% B1 v, F4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。: G5 d! z: G/ ?) v# {2 X$ @. }% e7 a

* C0 x) v/ a! F  C5. 也可以选中按钮,点属性面板上的+增加各种效果。
2 [) n2 H. A" P. B4 S7 d# r; D" g! r; v0 |; N, [

. s* l: ~# Q. S9 F$ ^$ i$ x输入清晰的按钮文字  在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”& Y$ N  m& k* u  s: j
2 {5 |( ~4 f/ i2 J) I
,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。" a/ k, y/ U& p! s7 K5 u6 D: @
1 L, p4 o, F# n. {' F  `
输入文字后的按钮:
0 K6 O6 l# b! Q* O  Z$ A" T3 {" w) R* i; n: E
- k; A. e2 [1 r6 \7 x% P
使“滑过”状态的按钮颜色相对“释放”状态变亮。1.选中“滑过”状态,点击“复制弹起时的图形”。% S- C/ W3 {( q5 I! E) \) B/ a

; S6 k& m/ L' ~2 o8 U0 }: K2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
% r  g# m) V& f; c' a# m
% T% k! a7 O# c. ^+ u$ d# P3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。: R1 f5 P# E% t& i: ~  C

4 M/ x7 H% m! C2 D  O
- d3 p& r: m2 t- g( I* M重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。
% p1 L0 ~8 G. ]/ @8 W$ ]4 B0 o3 e/ V  Q; n

' t) O, V+ R5 Y; Z4 o" e: L1 T为按钮增加链接。1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
/ n" S5 d6 j/ s1 ]8 _) D( m8 j$ M5 S  ?) k  J" n  W

- }, ~2 ]  B0 {# V6 j4 O; r& G7 I- S' A  N$ c
一个按钮就做好了。
7 [6 x6 @; {  T- F" [创建导航栏1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。
) Y8 l5 [$ a. Y$ m; p" x  z* T& h" f
! [7 ~$ t' ]1 n7 L( ?2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。
3 i! |  c1 z/ o7 h9 Z) |0 {: f' s7 ]4 X5 B5 c2 i4 C  k/ ]8 H0 o
3.从标尺上,拖出水平和垂直的引导线。9 C1 |( H1 U% _, a  \
9 }) i! u' W' s( y- I+ n
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
# G- X* z1 c% a+ N7 C. V4 I. `4 L" y
$ a5 q* J3 f3 V  U5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。 1 c+ ^( k0 A5 A* b5 M4 W4 B6 I
" I  [4 H' _. v1 y
6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。

本版积分规则

精彩图文

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