Fireworks打造滑动菜单教程

先看下最后效果：



# b9 N7 t. b  P5 q' OHTML 效果
1、打开FW 8.0 (我用的是8.0，当然其它版本也是可以的了)
2、新建一个稳当大小760X400
  y9 }3 l/ J5 x6 F  b, t9 f7 V3、用矩形工具画一个渐变的矩形，这里这个矩形是要做为导航条的背景，所以你可以调配自己喜欢的颜色。

1 _) S! }: y- J( P/ s' y7 A- ]

6 V) @) X( Q0 y4 U0 F4、然后我用直线工具画了两条线见下图，做为分隔线来用。
3 k7 ]" b3 `, R+ z0 S5 d


0 G/ ~! F# C4 n4 |& a( i2 N* F' Q5、然后按住Shift+G把这两条线组合成对象，复制这个对象，从窗口对齐面板最后见下图：
5 K0 z, A3 t& G. f( o* {
' I. a# j- v/ \/ g+ V- f
$ m2 U$ g4 K$ X+ v0 w# I
6、呵呵下来这几部就比较关键了，按下快捷键Ctrl+f8,调出新建元件窗口选择“按钮”
8 U8 F* A2 A( F: n! A+ _! V


" ~9 h: o- f; V- m如果你看见这个对话框那么你这步是正确的的了。
  v$ I8 D8 Y/ l/ y1 K6 E0 r7、来让我们在这里创作按钮吧！用圆角矩形工具画下图，渐变见下图，边框为一个像素。


+ P+ P; M& u' x' [4 f: \
8、然后复制这个图形去掉边框，调节大小使按钮有凸出的感觉
7 B$ b3 o! p$ T! W) C! p

/ u2 o+ ~& r# X" @8 P0 Z
9、现在我们来做下面那个三角形我用的是路径。
（1）在刚才那个图形的上面点右键选折取消组合



（2）选折钢笔工具在下面路径加三个节点见下图

8 m8 ]% J& {5 w

选择白箭头工具,向下拖拉中间的节点成三角型


7 D3 F0 b3 E2 Y) g! K
（3）写上文字
! {- o3 L$ [  J/ k: F4 M/ c
/ E" J( V  }# g3 U1 [* H2 V4 R
0 c0 e$ D- f- G
6 K% m, v6 m2 a) {4 _（4）到这里其实我们直径完成了70%的工作量。不急往下看
. ]- ]& i0 U- W& |+ R2 N3 o
; Z' _2 p" A, \' U

看见元件编辑区这里的滑过，按下。。。。。。
分别点击滑过，按下。。。。
并且每步都要选者复制弹起时的图形，这个在什么地方见下图：
% I6 _3 J( R  A) J$ p8 T9 y/ ]
& t' Z8 M  ~) a5 J, @+ ~' N

4 w5 T( M' B4 s$ r如果还找不到的话，你就睁大眼睛使劲找了！
# ]  ~5 l3 r$ _- C6 q( d0 L- T（5）这里先不急着点完成，而是先回到释放状态下把按钮的背景图形删除，不要把文字也删了啊！
& f$ f' ]' G% W$ s8 Y$ s5 @0 a（6）点完成
/ w, F) i# n9 a% s10、呵呵现在我们又回到场景下，按F11打开库面板拖出按钮从库里
7 ?: o4 F! C4 N6 J11、你可以根据你要做的数目拖出你需要的按钮数
12、分别选择按钮，在属性栏输入不同的文字
" C% x0 p' m) _1 u2 G
- D3 ?$ A# A+ \4 p7 `2 o

13。调节好按钮之间的距离
7 [1 d6 x7 r; h% U
' c2 n' Y$ }# W+ Y- I) M
  d% x+ x! l8 _1 J6 O- {) u
% F% _" f" S1 c/ V14。选择“文件”---》“导出”

5 `5 T6 X4 W- q' p/ |

8 ^3 F9 ~. ^2 l7 D! B" V这里一定要选择“将图像防入字文件夹\\\"，要不你的图片就到出是了。
" i9 y7 l! f9 I6 B8 i3 d: @6 U2 D好了用浏览器看下是不是可以了，当然你还可以倒到DW处理下代码，我这里就不多说了。
& n7 n9 x' k9 x3 P! l6 D: l8 O作者：咖啡虫来源：蓝色理想