Fireworks打造滑动菜单教程

先看下最后效果：
$ l( f0 E+ e% z$ l

2 N) V+ h# j& i# E8 T- S
HTML 效果
. `) C& p1 ]  j0 o( _1、打开FW 8.0 (我用的是8.0，当然其它版本也是可以的了)
' g1 K: a% J& _% ~' O2、新建一个稳当大小760X400
3、用矩形工具画一个渐变的矩形，这里这个矩形是要做为导航条的背景，所以你可以调配自己喜欢的颜色。
0 T' p6 E8 J1 s" m
3 E- Y- V# h9 c9 U- X. c. I# L2 O( o' h! y

. i+ v9 h/ n- w! x, D4、然后我用直线工具画了两条线见下图，做为分隔线来用。

. \7 u; E% C- y3 J, m$ g7 o  r
4 p! i& W7 V; b7 [$ m' w4 c
5、然后按住Shift+G把这两条线组合成对象，复制这个对象，从窗口对齐面板最后见下图：
- Z5 s* S4 M* ^# @- o; z3 G8 A
9 |, P2 [/ Y1 F0 o# r* l
, |' j9 \% t& C- n, i+ Z& D1 q9 c
6、呵呵下来这几部就比较关键了，按下快捷键Ctrl+f8,调出新建元件窗口选择“按钮”
0 _& k# x2 l# Z
. [) N, b) G* b" c" @
! E' R5 O4 c" B5 M8 ^, y2 N/ E& J3 ]
如果你看见这个对话框那么你这步是正确的的了。
7、来让我们在这里创作按钮吧！用圆角矩形工具画下图，渐变见下图，边框为一个像素。

" u( P+ D/ v6 `& H
, \0 q! m1 f' q1 v4 X, F
8、然后复制这个图形去掉边框，调节大小使按钮有凸出的感觉
; j/ H3 z6 j  N1 H/ x


4 I1 A2 r; I- S8 k0 R9、现在我们来做下面那个三角形我用的是路径。
（1）在刚才那个图形的上面点右键选折取消组合


* a2 _6 R# g$ ~) w! h1 }
（2）选折钢笔工具在下面路径加三个节点见下图
# Q& v$ }0 o$ V" q/ t  v8 K7 ?


选择白箭头工具,向下拖拉中间的节点成三角型
) c  A( O, B$ t: s  n9 O+ e" a7 n& X


（3）写上文字

0 ~$ ]3 f  }& Q: L* I1 {" a
4 t3 ]; u: }' S7 U6 s
（4）到这里其实我们直径完成了70%的工作量。不急往下看

1 t& \1 \3 Y3 U* b" T$ r

看见元件编辑区这里的滑过，按下。。。。。。
分别点击滑过，按下。。。。
并且每步都要选者复制弹起时的图形，这个在什么地方见下图：
" f% \, [0 \$ v  h# K
( z  c# {/ X- k7 X; @& i2 ~
9 ~1 b3 ~$ z, `! {7 G8 m
如果还找不到的话，你就睁大眼睛使劲找了！
. Z8 I- ^7 f. n) p  B" k8 g（5）这里先不急着点完成，而是先回到释放状态下把按钮的背景图形删除，不要把文字也删了啊！
（6）点完成
10、呵呵现在我们又回到场景下，按F11打开库面板拖出按钮从库里
9 s' \* X/ ~; u& ]5 X8 s  R11、你可以根据你要做的数目拖出你需要的按钮数
+ m  s$ j5 W. x/ K  e12、分别选择按钮，在属性栏输入不同的文字
8 V* I4 r6 e" h& b- }0 j. U, Y9 M


7 Q' ~4 E0 {# Q1 T! m0 J; b, a13。调节好按钮之间的距离
% _9 }" o  V  V2 o% d# [

. J3 O% \; d% F) p/ x: B, L* T$ W
14。选择“文件”---》“导出”

8 {- Q% j3 t0 m5 @
$ T0 C/ W* v" C- Q8 ?2 I
这里一定要选择“将图像防入字文件夹\\\"，要不你的图片就到出是了。
) o( c4 I$ A* C. X4 N# B, D好了用浏览器看下是不是可以了，当然你还可以倒到DW处理下代码，我这里就不多说了。
( A: n& w0 _( W作者：咖啡虫来源：蓝色理想