Fireworks打造滑动菜单教程

先看下最后效果：
$ }: E+ F3 v; l' c: k5 F9 p! W4 ^/ M
; O' {0 u7 E  G' R: e
. G, w+ n; p& o1 H! W# B  K
HTML 效果
9 G3 E4 L+ A) H6 v, N% V1、打开FW 8.0 (我用的是8.0，当然其它版本也是可以的了)
2、新建一个稳当大小760X400
3、用矩形工具画一个渐变的矩形，这里这个矩形是要做为导航条的背景，所以你可以调配自己喜欢的颜色。

: N% t  I) _2 N8 K$ t8 T% Y$ b  q6 c2 x

4、然后我用直线工具画了两条线见下图，做为分隔线来用。

8 f' q# X: z% K3 z0 v# H( |

5、然后按住Shift+G把这两条线组合成对象，复制这个对象，从窗口对齐面板最后见下图：

+ @/ c% W0 N1 P9 \
6 g+ g% Q" T0 ^# X* A6 a2 O3 j
- Q9 d/ X2 L, s1 M2 e! i& d6、呵呵下来这几部就比较关键了，按下快捷键Ctrl+f8,调出新建元件窗口选择“按钮”
% r7 P9 e. ^7 @. C  k4 e3 @
3 D3 A) o8 L" D4 \8 d

* O7 u+ l, q* ?' b3 F! i( [如果你看见这个对话框那么你这步是正确的的了。
7、来让我们在这里创作按钮吧！用圆角矩形工具画下图，渐变见下图，边框为一个像素。
6 _6 O2 _+ t; V; R5 X

5 N7 p& Y, U6 n
8 i7 @8 W' |: |' g' Y8、然后复制这个图形去掉边框，调节大小使按钮有凸出的感觉
0 _7 D0 `1 @5 ]4 h

* k. I+ X1 m: J9 V+ B* _
' S6 @% o( n; V5 S9、现在我们来做下面那个三角形我用的是路径。
（1）在刚才那个图形的上面点右键选折取消组合


7 A$ G2 P* J/ ]8 D+ U
8 V# M* S* H9 }- a1 N4 p( w（2）选折钢笔工具在下面路径加三个节点见下图
5 ~7 F' O9 N* V( k

9 T0 K/ \& @: b! H' H2 ~1 B% _
( K7 A: L8 F7 ~8 R0 ^选择白箭头工具,向下拖拉中间的节点成三角型
* F* z2 k7 c, `

8 Z" x' c, Y% x
+ ?/ [/ Y( U" v& `（3）写上文字
7 ?' n  t0 i; l1 p4 s4 H
% x6 n7 s+ R4 M$ K" R/ e6 H

- ?: b8 m0 f' O* _（4）到这里其实我们直径完成了70%的工作量。不急往下看

, H9 }/ ]2 B, B# s3 i
7 e' K0 E( c4 u9 `  a! }2 L  ~
: Y& |6 d. ~% t7 v, Q看见元件编辑区这里的滑过，按下。。。。。。
) Q4 P* B4 {8 D& b7 J1 l9 N分别点击滑过，按下。。。。
& T- J; U/ c* v9 U% Q; [+ \4 ]5 o并且每步都要选者复制弹起时的图形，这个在什么地方见下图：
8 P+ T7 p8 n8 Q  E& u# n5 E2 h* b3 W$ g
- C: N3 c' j4 o  x2 M, v

! }7 D: c4 a; n! }如果还找不到的话，你就睁大眼睛使劲找了！
0 T  h. c4 L; M- K( a（5）这里先不急着点完成，而是先回到释放状态下把按钮的背景图形删除，不要把文字也删了啊！
（6）点完成
8 `+ H# @0 q- @$ E: y5 ]10、呵呵现在我们又回到场景下，按F11打开库面板拖出按钮从库里
4 @/ ~/ U0 S" }- ?9 v& r! `11、你可以根据你要做的数目拖出你需要的按钮数
' [/ i$ {# O" R) y' d, g12、分别选择按钮，在属性栏输入不同的文字


5 a3 Y! @$ u2 A( y- @# C+ \
0 v: K9 n1 i( j) F/ t( G13。调节好按钮之间的距离
- ~9 c! k! k9 G

& m& B" |, O  y8 O$ l
14。选择“文件”---》“导出”
7 F. J$ X& }6 L) L2 q: o
) y" [5 m$ q7 l6 S

这里一定要选择“将图像防入字文件夹\\\"，要不你的图片就到出是了。
. K- f- M$ A+ M9 R% h好了用浏览器看下是不是可以了，当然你还可以倒到DW处理下代码，我这里就不多说了。
- P9 {" H( D5 g. z0 B作者：咖啡虫来源：蓝色理想