下拉菜单全攻略之Fireworks篇-1

[复制链接]
查看: 218|回复: 0
gggds 发表于 2009-12-27 03:25:18 | 显示全部楼层 |阅读模式
■ Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单" q% O9 a- V" P, `) H+ p
  与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比,Macromedia公司的Fireworks 4(以下简称FW4)可谓短小精悍,同时,她对于网页图形制作的强大支持,也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver 4(以下简称DW4),FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉,看到代码就头疼,不如跟随笔者一起亲身体验FW4的魅力所在吧!
& W' Y& {. I% H8 A6 z
+ J% n8 b7 k3 Z0 Q( w8 P一、 在FW4中制作菜单1.制作母菜单按钮  打开FW4,选择File菜单下的New,或者按Ctrl+N快捷键,如图一新建一个文件,尺寸200X30像素,精度72像素/英寸,背景透明。
1 U  C5 \2 C" T) C3 s9 C
: J9 |8 `+ c. K% f4 T: s
5 a3 }. F9 m6 \+ w+ {
* A7 {9 y/ C0 {" x3 H" z" s  选择Window菜单下的Tools打开工具面板,从工具面板上选择矩形工具,
4 H- V" s$ D2 [9 t6 B0 E$ N; P! W/ t1 _* h- Z0 G8 ^$ `

) [! I# o/ A) Z9 g
) S5 b$ p' Z) k/ j. [+ e2 |  画一个100X30像素大小的矩形,选择Window菜单下的Info打开信息面板,直接输入数值精确调整尺寸和位置;: r4 v. t8 ^$ J; V; H* q* C* ~# K2 ^

! M, Y. u% \  _% l' P0 p4 V) s. z- A# J2 g: t) m9 Z( e

, _& x4 Y( S# d* p. U选中这个矩形,Ctrl+C复制,Ctrl+V原地粘贴,这时候两个矩形重叠,将上面这个矩形拖到旁边,同样使用信息面板定位;
0 N' I5 t5 ^% V, ]+ ~0 U/ a4 k1 a5 a7 ?+ i
4 V1 y/ d! m6 w& O9 N# W2 M$ O- V* X
4 \% I2 n9 ]  }$ f. ^( ^, U
  然后分别选中这两个矩形,调整它们的填充色和边框色,方法有两种,一是利用工具面板上的Color工具区里的Stroke和Fill按钮,
/ R! q% Z/ U1 f  W9 W! g6 k
, |2 j; E" V2 k/ P# A
, U" d8 r/ ^5 J5 ~6 K9 z8 B$ d! v5 V
  二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板,在面板上选择,注意的是线型要选\"encilà1-Pixel Hard\"或\"BasicàHard Line\"(如图),& U  X- x) m8 M( Q" J

9 w" s8 `( Z( v+ z$ m; |, m9 N& z* ]8 e- Z
0 K2 V( m1 [; C: u, B( i  Y
  这样输出后才能做出细边框效果;从工具面板上选择文字工具,输入文字,注意选择文字的平滑度为No Anti-Alias(关闭反锯齿,如图),. E+ R, M. V9 q* V

6 Q8 @( v# Q7 W! n" r
* p7 b5 Q, q. Y7 o' O" O, d+ S* I4 v- A7 U8 e+ W9 d4 X/ z3 }
  然后同时选中文字和其中一个矩形,从Modify菜单下的Align中分别选择Center Vertical和Center Horizontal来对齐文字和矩形,效果如图所示。
0 T0 W: @; ~- C6 h! V& Q& i* {
/ E) t( v& M+ ?/ {8 c
* G6 r& r5 `7 M! k9 D5 g7 G" S
% h% M( E" }, E1 n2.制作弹出菜单条目  同时选中对齐后的文字和矩形,选择Insert菜单下的Convert to Symbol,或在矩形上点鼠标右键,在右键菜单里选Convert to Symbol,或者按F8快捷键,在弹出对话框里的Type中选Button(按钮),将这个矩形转换成一个按钮对象,
% ~6 z1 C% I6 |: |* h6 N! w9 v3 N- Z  @) B
3 N5 f% L+ Z$ Z* L: f8 {

: b, C% v. p5 ^" w  这时,将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形,单击圆形标志,在弹出菜单中选择Add Pop_up Menu…,
5 _! P- G  ?1 v' i
2 G1 O! y0 Z3 L, V" `/ `  X
7 t, r/ o1 U' i) p
3 R& j) L/ c( v" i% i  然后就可以在弹出的Set Pop-Up Menu设置窗中设置你的弹出菜单了。如下图,笔者已经设置了一些菜单条目。9 m& k3 V/ F" ?' D

, _$ Y* k& P2 j- o3 ?8 M, {% L% a! h$ F* m

; ]/ w( [, c' f0 W, D" H2 h/ w  C) x) y  大家可以在Text中设置条目的文字名称,在Link中设置条目的链接路径,在Target中设置打开链接的目标窗口,设置完后点一下\"+\"按钮就可以生成一个菜单条目了;如果想删掉,点中条目,再点\"-\"按钮就可以删除条目;如果想修改条目设置,只需点中条目,修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的,只要在根菜单条目下方建立子菜单条目,然后点中子菜单条目,再点窗口上方那两个蓝色图标按钮中的右边一个Indent Menu(菜单缩进,即设为子菜单)就可以了,反之,点左边那个Outdent Menu(菜单伸出,即设为根菜单)就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便,其实很简单,只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后,点Next进入菜单样式设置窗。3.设置弹出菜单条目样式  值得一提的是,菜单样式的设置可以分成两种类型,# a' ]* `$ V" D9 j4 F# h6 |- y' |. O

$ I; P. |% h' p' N+ |
, y( b/ O: L* t
) Y, f( a9 l: D

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )