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

用FW做网页不仅和DW结合紧密，而且FW的交互功能也是非常强大的，今天来做一下很常见的2个实例，虽然很平凡
# }0 X: ?1 K6 F8 A* \4 o' @但我希望加上大家创意以后会让你的灵感飞翔起来！
* I; h) X  n% W% N! U1,新建一个200*200的画布 画成如图样子 要注意的是 图上的橙色的条是由4个50象素宽的条组成，然后复制一帧,如图。(图1)



# _" u" w& G" a/ z0 {" @

2.选中第2帧，把中间的条改变任意的颜色。(图2)
1 I2 c! `$ l$ n" D, j

0 p& b+ I, O$ v& l. J


3.将图片进行切割，然后右键单击条声的切片，选择图中选项。(图3)
# U4 `  x6 B+ I! u" l

; \# H; m* i- Q( L. b6 v

3 [4 U7 O7 K: W" _% p! O, d; I
4.注意看图中红色的筐，用鼠标可以直接点上面的热区，也知道自己设定。(图4)

  k+ V5 \1 {3 r* ?[color=red'][1]
?[2]?下一页??


. P" I6 z' F; [) A) J6 A
/ J4 w& t* `+ n; {


. S- v! K) y" e
- X9 D6 w# ?) Q  G7 N* I* b
5.打开“文件”》》“导出”会出现如图面版。 注意HTML和切片的设置 关于FW的图象优化我以后会专门写一篇教程，因为针对web的图象输出是一个大问题。(图5)

' p, i/ `' y0 c, l+ `8 [

( H! `$ g$ X+ n* [5 @

) R$ [" ~5 o# Q/ d- M' F; ]! K" m( N6.现在让我们来做下拉菜单，同样的用右键点某个切片，选择下拉菜单会出现如图画面，在内容中，你先要想好一共有些什么栏目，他们的从属关系又是怎么样的，我建议自己先画一个这样的类似站点地图的图案，然后开始新建一系列的菜单。按图中的“+ -”号旁边的两个图标可以调整各栏目的隶属关系。在外观中可以设定下拉菜单的风格，大小，字体等。在高级中有关于下拉菜单的高度宽度等设定。(图6)



! ^0 ?3 S3 d0 q
  o8 k& L7 k- [  O1 {
2 c; p/ L* {6 ~) A! m- Y7.用鼠标可以拖动图中兰色热区的位置，而热区的位置是代表了下拉菜单执行的位置。
) _0 o  i+ A) a/ `8 V+ \& d  j还有一点值得注意，如果你没有严格定位，而是随意的用鼠标拖动下拉菜单的位置导出为HTML后 在800*600和1024*768分辨率下下拉菜单的位置会改变。(图7)
. A" i) }7 D- |


# r) d& X6 r5 [5 \3 p3 ?% T

: e% q- G: }$ Y- v最终效果图

+ [! v0 t: V8 O  T- J/ [

. o3 a) l8 v' P2 B# |# j' J7 [# A* Y上一页??[1]?
: A; F# e$ r+ o[color=red'][2]
" t, I, Y% `6 y2 `# Q: P3 m?