下拉菜单全攻略之Fireworks篇(一)

[复制链接]
查看: 255|回复: 0
gggds 发表于 2009-12-27 03:24:17 | 显示全部楼层 |阅读模式
■ Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单  与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比,Macromedia公司的Fireworks 4(以下简称FW4)可谓短小精悍,同时,她对于网页图形制作的强大支持,也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver 4(以下简称DW4),FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉,看到代码就头疼,不如跟随笔者一起亲身体验FW4的魅力所在吧!一、 在FW4中制作菜单
8 B* t+ Q: S9 u0 N! ]7 }1.制作母菜单按钮. n0 h% D; ?6 ?& f; w8 _) T9 e
  打开FW4,选择File菜单下的New,或者按Ctrl+N快捷键,如图一新建一个文件,尺寸200X30像素,精度72像素/英寸,背景透明。
  j& j2 o) f- d( C: ~$ T$ p* M
7 |2 R; }5 @9 q( ?" s# d, r: Q# Y0 R7 O* e& P
5 v9 b! j' n  v$ ?  N! ~3 I
  选择Window菜单下的Tools打开工具面板,从工具面板上选择矩形工具,
6 t* }$ y9 i3 i5 R1 x9 U' e  N9 o, j7 Z" E+ p* I" A$ B! O

% T  D7 l  ?/ q
4 l% t/ b+ u: |( e/ i  画一个100X30像素大小的矩形,选择Window菜单下的Info打开信息面板,直接输入数值精确调整尺寸和位置;- v0 y9 J% _2 W! Q- C5 m

2 J" h* M" V' \% ^
9 g6 x- |) \" G' G8 b
+ h2 [5 B) o! `( e0 W: ]% s?' R1 b$ C* l& P# O, o8 D( h
选中这个矩形,Ctrl+C复制,Ctrl+V原地粘贴,这时候两个矩形重叠,将上面这个矩形拖到旁边,同样使用信息面板定位;
7 r$ J- y; S$ v4 ]3 |
  h) A- d- n& J7 \% r0 f. r& Q4 J: t4 k9 s
  n3 y8 [- k; Q# d8 ^- L% |
  然后分别选中这两个矩形,调整它们的填充色和边框色,方法有两种,一是利用工具面板上的Color工具区里的Stroke和Fill按钮,4 J3 u+ q9 p3 K& b) B! L( _

0 A6 M3 N  e1 ]' D" u( v5 ^5 @/ A8 W; ~/ _, q, w$ h- k" G
' j3 G$ }/ g! s3 M  W9 |
  二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板,在面板上选择,注意的是线型要选\"encilà1-Pixel Hard\"或\"BasicàHard Line\"(如图),1 E$ [( ~& a7 ]! C4 M$ @9 x
. u# I" ^5 ?% i

9 |* y7 a, o  o/ K
" c" A$ h! \8 i2 _. p  这样输出后才能做出细边框效果;从工具面板上选择文字工具,输入文字,注意选择文字的平滑度为No Anti-Alias(关闭反锯齿,如图),
' O/ w* s7 {5 F# k! R
8 C) K1 h/ o# h1 J7 r2 \& {$ T. c

! Z' ^. q# S& r" d/ W" u# r. F  然后同时选中文字和其中一个矩形,从Modify菜单下的Align中分别选择Center Vertical和Center Horizontal来对齐文字和矩形,效果如图所示。( Q8 `( T- G4 d0 V0 Y- X
& y: O1 m! J& m6 S
. N* B& M# m: u" ^% k
/ f+ k: _! E* \# _% V
2.制作弹出菜单条目% L4 i, U9 c! {6 I# p) z6 u
  同时选中对齐后的文字和矩形,选择Insert菜单下的Convert to Symbol,或在矩形上点鼠标右键,在右键菜单里选Convert to Symbol,或者按F8快捷键,在弹出对话框里的Type中选Button(按钮),将这个矩形转换成一个按钮对象,
% Z* E' @: ]% b0 ~( e
/ Q! g- j  L+ t! c9 R$ F. [7 L9 O/ _6 j) N

1 x/ t+ l# k& }  P" y" a2 u  这时,将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形,单击圆形标志,在弹出菜单中选择Add Pop_up Menu…,! p! N1 z* L1 y' l/ c( D# ~- p
6 G# N$ s: ~4 z  b* g6 `3 P5 A$ v+ j$ m
' _. V3 n4 \/ p+ `8 I; j( _
- R) ?9 h8 x' z0 F) G$ Q3 ?5 Q5 W. K' R
  然后就可以在弹出的Set Pop-Up Menu设置窗中设置你的弹出菜单了。如下图,笔者已经设置了一些菜单条目。: S9 H$ b) m  P; u3 @) C
0 C4 o* d, a; [# D# D3 e1 k0 ]
' u8 t' I4 E4 t+ |/ e
+ s( V; y1 ?, \0 B3 j/ V/ f
  大家可以在Text中设置条目的文字名称,在Link中设置条目的链接路径,在Target中设置打开链接的目标窗口,设置完后点一下\"+\"按钮就可以生成一个菜单条目了;如果想删掉,点中条目,再点\"-\"按钮就可以删除条目;如果想修改条目设置,只需点中条目,修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的,只要在根菜单条目下方建立子菜单条目,然后点中子菜单条目,再点窗口上方那两个蓝色图标按钮中的右边一个Indent Menu(菜单缩进,即设为子菜单)就可以了,反之,点左边那个Outdent Menu(菜单伸出,即设为根菜单)就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便,其实很简单,只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后,点Next进入菜单样式设置窗。7 P; y9 X" U+ R4 C7 o
3.设置弹出菜单条目样式
, i* K* Y1 k9 v  U* }5 k2 E  值得一提的是,菜单样式的设置可以分成两种类型,0 v$ o% y5 K* N: ^  h
: E2 }+ p: s* @
( v( p8 Z4 p" P6 u3 {' e
/ R" H; D4 _  q1 p$ F

* m) y% h$ a# u$ A2 Q5 i" ]$ g# o/ R* D

" U9 F6 [: O2 _( U# O2 M& m?

本版积分规则

精彩图文

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