用Fireworks制作下拉菜单和交互图片

用FW做网页不仅和DW结合紧密，而且FW的交互功能也是非常强大的，今天来做一下很常见的2个实例，虽然很平凡
) W" F- l) `* `- M! U7 k但我希望加上大家创意以后会让你的灵感飞翔起来！
9 F2 @3 O, Z; e* Z, F1,新建一个200*200的画布 画成如图样子 要注意的是 图上的橙色的条是由4个50象素宽的条组成，然后复制一帧,如图。(图1)
4 |& g* c& O# v6 N6 `# p2 r8 A
; w, \' A0 X3 c2 Q/ M$ U. \9 f* p
6 f! U, }5 d6 {& k5 ?" R6 S

1 C/ ?( c5 P. l( W8 x3 L: V
2.选中第2帧，把中间的条改变任意的颜色。(图2)
  A- q% T1 G: J. _

4 f$ `# E, R' j8 @& D8 }0 `5 W
: O, L2 q' O& l! w! ?
$ G2 q4 v: e3 G$ |$ B& W- o% r5 m! V
3.将图片进行切割，然后右键单击条声的切片，选择图中选项。(图3)
9 r# o+ Y+ y0 G$ k/ V' @- s: h
0 k( I; r' J4 g" U% q; K4 p

5 O6 y3 T3 j3 j8 M* i/ D

4.注意看图中红色的筐，用鼠标可以直接点上面的热区，也知道自己设定。(图4)
4 o4 Y/ P8 X' m: o' a+ r6 n, a& D( R& ~( [! X
4 y# \4 W: K6 `% S[color=red'][1]
?[2]?下一页??
- F! L, _' z0 q/ g
4 J6 @% K3 L5 X2 w$ a





8 s* }2 w8 k+ q' q( b
5.打开“文件”》》“导出”会出现如图面版。 注意HTML和切片的设置 关于FW的图象优化我以后会专门写一篇教程，因为针对web的图象输出是一个大问题。(图5)


( j% P0 x- i, M+ b. [, `! s

& `4 e/ c9 U* _  B/ o, p
6.现在让我们来做下拉菜单，同样的用右键点某个切片，选择下拉菜单会出现如图画面，在内容中，你先要想好一共有些什么栏目，他们的从属关系又是怎么样的，我建议自己先画一个这样的类似站点地图的图案，然后开始新建一系列的菜单。按图中的“+ -”号旁边的两个图标可以调整各栏目的隶属关系。在外观中可以设定下拉菜单的风格，大小，字体等。在高级中有关于下拉菜单的高度宽度等设定。(图6)
0 N" {& _2 ?- L6 A
+ c1 u' H" m2 H" y9 d( f9 W
. x3 V4 W! U' }$ F


& Z. K  c$ l5 R! @7.用鼠标可以拖动图中兰色热区的位置，而热区的位置是代表了下拉菜单执行的位置。
2 f' k; x/ o: W( w" g还有一点值得注意，如果你没有严格定位，而是随意的用鼠标拖动下拉菜单的位置导出为HTML后 在800*600和1024*768分辨率下下拉菜单的位置会改变。(图7)
  A! O7 R% C* f. W1 M$ q- m


, S! F! g# d  }& A% ^
" ~. K) I$ n9 \; d. m
/ \% K" f) }! h9 ?6 V: Q- X) l7 j最终效果图
' e  m5 [* J- ^# b

$ n8 t3 H4 c  ~( ^7 M; S/ Z
& b; V* W* W( A  ^3 o上一页??[1]?
[color=red'][2]
?