设为首页
收藏本站
3D模型素材下载
开启辅助访问
素材下载
展览专用单个3D模型下载
展位展览
在线看展
论坛
展示行业交流平台
关于
本版
文章
帖子
日志
相册
用户
QQ登录
微信登录
忘记密码?
注册
登录
展示网
»
论坛
›
中国展示培训学习/Demonstrate professional
›
展示设计教程,学习/Display design tutorial
›
Fireworks MX教程(二十五)创建按钮和导航栏
返回列表
发布主题
[平面教程]
Fireworks MX教程(二十五)创建按钮和导航栏
[复制链接]
查看:
880
|
回复:
0
gggds
当前离线
积分
22798
IP卡
狗仔卡
gggds
发表于 2009-12-27 14:04:58
|
显示全部楼层
|
阅读模式
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。
$ T" v# C$ @' i# V1 q* j8 [
创建带有样式的按钮
使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。
. W: C" n8 S- P, h
' N( S D% M/ g+ r8 W; v
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。
0 \! i0 Y0 C0 Q9 j! t; t
# G' Z. @1 i1 i/ ^/ c+ Q0 o" ?9 q
' A. Z9 z/ q1 ~8 C( d8 l
! u* a) L% O4 [- X `4 \4 } `& }8 O- }
4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
6 }4 [% O: N) L: i; }! y9 g. G) b
& ]( }, v4 I% x
5. 也可以选中按钮,点属性面板上的+增加各种效果。
( ~% r, n" r7 F1 _
: r1 m" |. M: W; |+ a4 n5 n
- j1 m8 V m" U$ Q
输入清晰的按钮文字
在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”
0 Y5 J3 T2 C9 T4 R
9 p" S0 o5 w0 F0 s8 F
,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。
4 D7 ]7 v, h/ k W# B
5 Z" \' C1 E* _3 r0 p1 c6 b0 y$ F
输入文字后的按钮:
5 G! w1 Q9 Y6 F3 C; c; }
. ~6 P7 v0 j, ?
- a) \2 \! f4 d; s
使“滑过”状态的按钮颜色相对“释放”状态变亮。
1.选中“滑过”状态,点击“复制弹起时的图形”。
1 R/ C8 p4 g3 S- u* [) s
& Y5 d0 a5 ~0 o0 {: S' M' ?
2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
0 ~& \0 k2 t5 x" p
+ ?7 E2 F3 q1 W9 O1 C* z0 C" t
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
: g9 r8 b! ^# J3 k' a7 L
3 Q7 e1 Q9 [* Z% ^0 |2 j0 a
- ~$ J9 ~/ }+ Z
重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。
2 B9 P0 [& D2 A! l7 p
[, Y7 w6 B# B l' J
+ @8 F9 h- n# D
为按钮增加链接。
1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
/ A1 S+ S/ K1 u7 Z: n( `
% B" c& o+ ~& U" l$ w
) r% j2 L/ x. a1 n" C+ C
4 ~. y2 o; { b w4 c/ G; N
一个按钮就做好了。
4 a/ X" } l* _7 x1 ~! `
创建导航栏
1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。
& Y l' v- j; |& l1 W
9 r* s+ q' s4 p$ V7 ^
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。
) n/ i; n: s6 [3 [$ ?; v
- r0 j( g5 k; m% G
3.从标尺上,拖出水平和垂直的引导线。
/ [, v/ C9 S' h
8 G0 w! F: T @0 w
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
; ^' B9 k9 i* }7 ?8 w" r# W
: F) _0 d" D: h- q4 C% ^6 l
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。
, x$ h$ S3 M- [* X3 }9 J$ I4 {& u
3 U' O2 D& \' M5 |0 ?9 Q" e
6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。
回复
使用道具
举报
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册中国展示论坛
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
精彩图文
快速回复
返回顶部
返回列表