设为首页
收藏本站
3D模型素材下载
开启辅助访问
素材下载
展览专用单个3D模型下载
展位展览
在线看展
论坛
展示行业交流平台
关于
本版
文章
帖子
日志
相册
用户
QQ登录
微信登录
忘记密码?
注册
登录
展示网
»
论坛
›
中国展示培训学习/Demonstrate professional
›
展示设计教程,学习/Display design tutorial
›
Fireworks MX教程(二十五)创建按钮和导航栏
返回列表
发布主题
[平面教程]
Fireworks MX教程(二十五)创建按钮和导航栏
[复制链接]
查看:
855
|
回复:
0
gggds
当前离线
积分
22732
IP卡
狗仔卡
gggds
发表于 2009-12-27 14:04:58
|
显示全部楼层
|
阅读模式
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。
: G; j0 `, U# T s* ]$ w' }' b7 b
创建带有样式的按钮
使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。 2.“编辑” >“插入”>“新建按钮”。
1 l \, B+ h2 ?5 G
" ?% N4 S! q7 O _: Y
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。
- A$ l5 w2 ]8 ?
8 O* O' p1 ]3 ?; c2 ^) S; Z9 C
! ]4 K* w2 J/ o I+ u. ^
% J6 c/ Z2 m( A
4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
: F0 W8 W) F4 \$ H% b& l
+ y5 s7 N7 C7 D' ^3 U0 s7 _
5. 也可以选中按钮,点属性面板上的+增加各种效果。
8 I. F8 L/ y5 @9 f3 m, U- I- f% t
3 H' b {: Y$ r
- J* @# i* h" U. O, [2 e
输入清晰的按钮文字
在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。 1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”
( \: n: X9 {/ }; g6 X5 _: U( U) r
; L* i8 K2 c0 B5 w- a
,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。
) ?2 X$ n1 d' @& A+ |
/ h% l: _2 v( u6 A3 l& V! o
输入文字后的按钮:
. h1 s: y4 z" `5 \- t* e
; Z8 [0 H& U5 L5 r% w( n
- ^: l8 Y* r3 d" Y5 m) Y9 }
使“滑过”状态的按钮颜色相对“释放”状态变亮。
1.选中“滑过”状态,点击“复制弹起时的图形”。
% J, |0 v4 s2 Y1 `. W* _
( E1 j' ~+ t! w# L" ^1 s
2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
" b' F( E0 i. Y9 A. P6 j0 K8 l
, i! z' {* B. [1 H) H4 c7 C. o
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
/ ]/ |& R! H A: D) I
4 _8 `# m3 @' Z R
/ ?6 O! k( r* }; I! @$ h5 P
重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。
6 R! i" g1 j" N3 G+ F
k5 `" v2 M4 W/ |: i
, ~. T# A- `; L
为按钮增加链接。
1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
9 E& {/ {' J3 y" j
4 f* a2 N/ F% M
. [- M0 Q( i& ~8 u
0 k2 A3 c; ~, d3 }! s' u1 g
一个按钮就做好了。
7 a9 G: T. e( d
创建导航栏
1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。
9 C# A1 D% t% a( ~
$ m4 o5 t8 {" v. f4 `
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。
/ H% y4 V* N" Y5 ~
3 q: ~. H- u. A& n2 S! R
3.从标尺上,拖出水平和垂直的引导线。
3 z( ^, X/ d @- R
* y3 F& ^; B# V# c2 ?
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
/ _ y9 F5 }4 U8 y) F9 h
+ F/ B: h |" y% c
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。
4 V0 ]& o4 q2 k7 w5 F
! X7 R6 D4 H4 ~7 H$ a8 @2 f' s9 }4 M& V9 j
6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。
回复
使用道具
举报
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册中国展示论坛
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
精彩图文
快速回复
返回顶部
返回列表