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

[复制链接]
查看: 232|回复: 0
gggds 发表于 2009-12-27 03:25:18 | 显示全部楼层 |阅读模式
■ Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单
; `# V+ G" @8 D( P( P  与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比,Macromedia公司的Fireworks 4(以下简称FW4)可谓短小精悍,同时,她对于网页图形制作的强大支持,也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver 4(以下简称DW4),FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉,看到代码就头疼,不如跟随笔者一起亲身体验FW4的魅力所在吧!
! O5 ]7 }$ X$ F' n. L+ Q+ n4 m1 S! b- B5 C
一、 在FW4中制作菜单1.制作母菜单按钮  打开FW4,选择File菜单下的New,或者按Ctrl+N快捷键,如图一新建一个文件,尺寸200X30像素,精度72像素/英寸,背景透明。
1 _& x- q7 \; Z; r; i3 d
, f7 v5 z' i' p
: n- X/ l0 c" N* R
( z- ?1 [4 o7 E% h1 @0 H  选择Window菜单下的Tools打开工具面板,从工具面板上选择矩形工具,
: H( ^( u5 y5 U4 r5 }0 q
  A9 [4 I1 N  ?$ t9 Y8 w; N7 |) N& m& ~2 p# V7 T+ H: Z  ?7 o' G9 U) Q
& d$ f) S; X% |8 U" H
  画一个100X30像素大小的矩形,选择Window菜单下的Info打开信息面板,直接输入数值精确调整尺寸和位置;
9 E: z; L- U4 M. j* ^0 b: q% W' O3 q0 u: U

0 T1 K2 A% T/ c4 g
% E+ ^/ F+ y0 O+ l( f  E8 W% ^选中这个矩形,Ctrl+C复制,Ctrl+V原地粘贴,这时候两个矩形重叠,将上面这个矩形拖到旁边,同样使用信息面板定位;
" l5 [! O/ g1 t+ \% K) g8 `0 h# M* s6 |, F' W

% o/ A; w5 l. I! }/ ~$ P8 [2 [5 @& i" j% c% e0 t7 [
  然后分别选中这两个矩形,调整它们的填充色和边框色,方法有两种,一是利用工具面板上的Color工具区里的Stroke和Fill按钮,6 U, ?0 M  I  N( \

( @5 J/ h! r- T  B. `$ b- Z- d8 d) u: d+ u7 ~( ]1 ?, W' O
* c/ L) n# N' n4 ^3 H
  二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板,在面板上选择,注意的是线型要选\"encilà1-Pixel Hard\"或\"BasicàHard Line\"(如图),2 {* z+ l& o! |, W6 [$ l
0 D- j. X' |' ^, }

5 p5 H) K2 W: e/ l2 o% D8 n7 r/ I+ Z4 G1 o8 ?) F2 X/ L
  这样输出后才能做出细边框效果;从工具面板上选择文字工具,输入文字,注意选择文字的平滑度为No Anti-Alias(关闭反锯齿,如图),
; |5 A& o# K4 ]8 S0 q5 g0 ]
5 T+ y. x; M7 D
5 L* N( [/ T; a% v& V8 s8 p0 o+ R) F5 E+ A9 r+ D" u
  然后同时选中文字和其中一个矩形,从Modify菜单下的Align中分别选择Center Vertical和Center Horizontal来对齐文字和矩形,效果如图所示。3 }/ v' V) @$ t/ v; h) W

' D! C$ C1 \! @3 F
5 {+ p4 @& @) Y1 x9 j4 G4 E  n3 ~' J1 l% b+ Y1 Q
2.制作弹出菜单条目  同时选中对齐后的文字和矩形,选择Insert菜单下的Convert to Symbol,或在矩形上点鼠标右键,在右键菜单里选Convert to Symbol,或者按F8快捷键,在弹出对话框里的Type中选Button(按钮),将这个矩形转换成一个按钮对象,( g& _5 g" d2 w: D% f% V% k- ~

4 B' W  W$ x4 z' d3 \
* [& S( h+ ?& }# N  N9 M
" S) O& }, e: {3 B  这时,将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形,单击圆形标志,在弹出菜单中选择Add Pop_up Menu…,
( G. F- ]& o% P- {5 k3 P. U( \
2 r* f$ g7 s' N& O2 B0 E

- E7 |) ]$ C* G6 `0 M- |# d  然后就可以在弹出的Set Pop-Up Menu设置窗中设置你的弹出菜单了。如下图,笔者已经设置了一些菜单条目。
0 J! L; O8 z5 X+ \( h+ u
6 u% N/ `/ d7 P" C' |) {4 c5 e
3 d4 z" k' Q+ }& y1 w
4 e) P) y5 O7 y3 C  大家可以在Text中设置条目的文字名称,在Link中设置条目的链接路径,在Target中设置打开链接的目标窗口,设置完后点一下\"+\"按钮就可以生成一个菜单条目了;如果想删掉,点中条目,再点\"-\"按钮就可以删除条目;如果想修改条目设置,只需点中条目,修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的,只要在根菜单条目下方建立子菜单条目,然后点中子菜单条目,再点窗口上方那两个蓝色图标按钮中的右边一个Indent Menu(菜单缩进,即设为子菜单)就可以了,反之,点左边那个Outdent Menu(菜单伸出,即设为根菜单)就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便,其实很简单,只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后,点Next进入菜单样式设置窗。3.设置弹出菜单条目样式  值得一提的是,菜单样式的设置可以分成两种类型,
  P0 e9 o& M2 ~- X$ H# B2 U/ @( l+ g8 p  W) _2 l
5 R# b3 c& {" [
6 c* i' S/ j, g6 x: N" y6 s8 U

本版积分规则

精彩图文

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