荔园在线

荔园之美,在春之萌芽,在夏之绽放,在秋之收获,在冬之沉淀

[回到开始] [上一篇][下一篇]


发信人: guita (复杂爱), 信区: Multimedia
标  题: 在Fireworks4中制作弹出菜单全过程技巧大揭密
发信站: 荔园晨风BBS站 (Wed Apr  3 18:26:29 2002), 转信


在Fireworks4中制作弹出菜单全过程技巧大揭密
文 / Donger 整理 / jingr
一、 弹出菜单介绍
  随着动态交互式网页制作技术的发展,目前有很多网站都采用了一种弹出菜单
的技
术来实现网站的导航效果,例如微软及Macromedia的网站。在以前这都必须是具有
专业
的网页编程技术人员花费一定时间才能制作出来的效果,如今在Macromedia
Fireworks
4.0版本中能够轻松地制作了。弹出菜单的制作是Fireworks4中新增的一项强大的
功能,
利用它我们可以制作出常见的弹出菜单效果,甚至不需要花一点点的JavaScript编
程技
术。看来Macromedia Fireworks已经不满足于单纯的网页设计而是逐渐向丰富多彩
的交
互式网页设计制作靠拢了。
  何谓弹出菜单技术呢?或许有些人会这样问。所谓的弹出菜单通常是在Web页
中由鼠
标来触发的一种菜单导航效果,当鼠标移动到导航菜单上触发条件满足,就会显示
出弹
出菜单。当鼠标从导航菜单上移开,弹出菜单自动消失。触发条件既可以是鼠标通
过(
On Mouse Over),也可以是鼠标单击(On Click),这种结构的菜单使我们能更
加灵活
的组织我们的菜单结构,而且下载时间又比较迅速。弹出菜单结构非常类似于一个
表格
,每一个导航菜单条目就好 比一个单元格。当然,Fireworks4中提供了四种鼠标
动作,
还有两种是鼠标移出(On Mouse Out)和页面加载(On Load),但显然他们不适
合用在
这里,因为这和通常浏览者的浏览习惯不符合。
二、 在Fireworks4中如何制作弹出菜单
  看了上面的介绍,或许有很多人想知道该如何在Fireworks4中来制作这个看似
高难
度其实非常简单的效果呢,这部分我们就通过实例来讲解在Fireworks4中如何制作
弹出
菜单的基本制作过程。
  1、首先我们先来制作一个带有三个选项的菜单导航条,并为每个选项增加切
片对象
。Fireworks4的弹出菜单行为与其他行为一样,只能应用在按钮对象、切片对象或
是热
区对象上。(注:在Fireworks4中按钮对象上会自动添加切片对象,因此可以直接
在按
钮对象上使用各种行为。)
  2、为菜单导航条增加弹出菜单行为,首先必须选中一个按钮上的切片,有三
种方法
请选择其一:
  (1) 打开Behaviors面版,点击"+"按钮添加弹出菜单行为命令Set Pop-Up
Menu
  (2) 使用菜单命令Insert>Pop-Up Menu
  (3) 单击鼠标右健,在弹出的命令列表中选择Add Pop-up Menu命令
  3、选择了增加弹出菜单命令后,Fireworks4会出现弹出菜单制作向导窗口,
您可以
根据弹出菜单制作向导一步步地执行下去,其实过程非常的简单,仅仅只有二个步
骤。
二、 在Fireworks4中如何制作弹出菜单
  4、首先出现的一个向导窗口是用来增加弹出菜单中的子菜单选项和为子菜单
添加相
关属性的。如下图所示:
  下面我来解释一下各个选项的作用:
  (1) Menu选项:其右边有“+”、“-”二个按钮,根据Fireworks软件应用
习惯,
这二个按钮是用来添加或删除一个菜单选项时起作用的。
  (2) Text选项:定义菜单选项的内容
  (3) Target选项:用来选择点击菜单选项链接时打开的窗口位置,其选项和
Drea
mweaver之类的网页制作软件的链接选项内容一样,这儿不再介绍。
  (4) Link选项:用来设置菜单选项的链接属性
  (5) 这两个按钮可以控制子菜单的显示层次,点击右边的按钮可以使菜单项
缩为
下一级,点击左边的按钮可以使下一级菜单项向上升一级,这二个按钮不是随时随
地都
能使用的,而是会根据实际情况让您进行使用。利用这二个按钮可以方便的制作出
多级
弹出菜单。
  (6) 如果您改变了某一条菜单项中的Text选项、Target选项或是Link选项中
的一
些值,可以点击Change按钮确定改变。
  向导窗口下面的大窗口表格中显示的是弹出菜单的结构,您定义的弹出菜单的
各级
内容都显示在这里。在本例中我定义了艺术字效果和动态字效果这二个菜单,在艺
术字
效果菜单中另外还分为卡通艺术字、变形艺术字、卷边艺术字这三个子菜单,在动
态字
效果菜单中也有其子菜单。您可以通过点击Menu 选项中的"+"按钮来增加菜单项,
并分
别设定它的链接地址和目标窗口;通过"-"按钮来删除选定的菜单项;您还可以选
定一个
菜单项后,修改已经填好的一些选项值,然后单击Change按钮改变它;您也可以选
中一
个菜单条目后上下拖动它到一个新的位置,以改变菜单的排序。当您将一个菜单项
缩进
时,它就自动变为下级子菜单。
  菜单结构设定好后就,点击Next按钮进入下一步向导窗口。
  5、接下来进入的向导窗口是用来定义弹出菜单的外观及文字属性的。
  如下图所示,我们将在这个窗口中定义弹出菜单的外观和文字属性,这个窗口
有下
面这几部分组成。
  (1) Cell选项:该选项用来定义将来输出的弹出菜单格式,有两种格式可以
选择
,一种是HTML表格形式的,另一种是图片形式的。需要说明的是,很多人以为使用
图形
格式的弹出菜单将比使用HTML格式的弹出菜单载入速度要慢许多,其实不然,不论
您的
图形格式的弹出菜单有多么复杂,Fireworks仅仅使用两个图片来定义它们:一个
是Up状
态,一个是Over状态,所以您可以根据您的实际情况挑选自己满意的弹出菜单格式

  (2) Font选项:用来指定文字的字体格式的,我们可以从字体下拉列表中选
择我
们需要的字体,此时我们会发现可选的字体种类非常少。这主要是因为我们输出的
弹出
菜单中的文本,不管您选择的弹出菜单是图形形式还是HTML表格形式,其实文字都
是纯
文本格式,我们必须考虑大多数浏览者的系统中都有的字体,以使弹出菜单的内容
在大
多数人的机器上都能正常显示。值得注意的是,如果想在弹出菜单中使用中文字体
,您
只能选择最后一项(Georgia,Times New Roman,Times,serif)。
  (3) Size选项:用来定义弹出菜单中的文字大小,默认的为12象素。您可以
从其
下拉列表中选择合适的字体大小或是自己根据需要在输入框中输入一个字体大小数
值。

  (4) “B”按钮、“I”按钮分别用来设定弹出菜单中应用字体的粗体和斜体

  (5) Up State和Over State选项根据选择的菜单输出类型不同而存在不同的
选项
,分别对应HTML和图形的不同外观。
  在HTML样式中,左边是Up状态时的菜单外观(既菜单默认的显示状态),右边
是Ov
er状态时的菜单外观(鼠标通过时的菜单外观)。我们分别可以定义两种状态下文
字和
单元格的色彩。
  在Image样式中时,唯一不同的一点就是我们可定义菜单图片的样式,
Fireworks内
置了几种样式,除此外我们还可以定制自己的样式,并将它应用到我们的菜单上,
通过
定制菜单样式,我们可以实现更为个性化的菜单,稍候我们将介绍详细的内容。
  (6) Preview选项:从该选项窗口中我们可以观察到定义的弹出菜单的外观
和文字
属性。
  (7) 根据需要选定合适的弹出菜单显示样式及文字颜色和单元格颜色,点击
Fini
sh按钮完成弹出菜单的制作过程。
  6、 返回到弹出菜单页面,您可能会惊奇的发现,什么也没出现,我们看不到
做好
的弹出菜单,仅仅能看到一级弹出菜单的外框图,这是因为由Fireworks4制作的弹
出菜
单只能在浏览器中查看到最终的效果,如果您等不及想看最终的结果按F12键就能
在浏览
器中看到效果了。
  7、 将鼠标移动到弹出菜单的位置时,鼠标会变为小手的形状,您可以拖动弹
出菜
单到任意位置。当您取消对该带有弹出菜单行为的切片选择时,弹出菜单会隐藏,
再次
选择此切片时,弹出菜单会再次显示。
  8、 如果您对弹出菜单中的内容感觉不满意想再次修改菜单的内容或格式,您
可以
选中该切片后双击弹出菜单轮廓图,或者打开行为(Behavior)面板,双击
POP-Up属性
,此时弹出菜单制作向导窗口会再次出现,您可以反复多次修改,直到满意为止。

  9、 至此在Fireworks4中所能做的弹出菜单的工作算是全部完工了,使用菜单
命令
File→Export选择一个站点文件夹进行输出,具体的我们分HTML表格形式和图像形
式在
定制弹出菜单文件中介绍。
  如果在Fireworks4中您选择的弹出菜单的样式是HTML表格形式,那么输出的站
点文
件夹中就只会有这么几个图片:arrows.gif图片和菜单本身的图片。此外就是一个
HTML
文件和一个控制弹出菜单的JS文件。
  在Dreamweaver中打开该HTML文件,切换至Show Code Views模式,此时您看到
的将
是代码模式的网页文件。Copy了其中一段来进行说明:
  "window.fw_menu_0_1 = new Menu("艺术字效果",110,19,"Georgia, Times
New R
oman, Times, serif",12, "#cccccc", "#ffffff","#006699","#009ce8");"
  这一段讲的是菜单项"艺术字效果"所引出的子菜单的格式,"110"和"19"是指
该弹出
菜单的宽度,你可以根据实际需要对该值进行修改;"Georgia, Times New Roman,
 Tim
es, serif"是刚才在Fireworks4的向导窗口中选定的字体格式;"12"是指字体尺寸
大小
;"#cccccc","#ffffff","#006699","#009ce8"这些颜色值分别代表的是默认的弹
出菜单
的文字颜色、当鼠标移到弹出菜单上时文字的颜色、默认的弹出菜单的背景颜色、
当鼠
标移到弹出菜单上时背景的颜色。所有的这些值您都可以根据需要进行修改,然后
保存
一下就能在浏览器中看到修改后的效果。
  弹出菜单中的同级菜单的设置标准都是相同的,不同级菜单却可以有不同的外
观设
置,例如本例?quot;艺术字效果"和"动态字效果"算是同级菜单,而"卡通艺术字"
、"变
形艺术字"和"卷边艺术字"也是同级菜单。"艺术字效果"这一级的菜单和"卡通艺术
字"这
一级菜单可以有完全不同的外观设置及文字属性设置,只要您设计得好,五颜六色
的弹
出菜单有什么不好吗?这些在Fireworks4中是不能简单地定义的。
  改变弹出菜单的定位。当我们将Fireworks4中输出的弹出菜单插入HTML文档预
览时
,我们常发现它并不象我们期望的那样出现在指定位置,特别是当插入的位置不是
紧靠
左和顶端的位置时,情况会显得更加糟糕。其实Fireworks4在输出弹出菜单文件时
,会
同时生成一个JavaScript文件,并定义一个CSS层,Jvascript代码赋予这个层一个
绝对
定位,这是为了确保弹出菜单和它的子菜单总是出现在同一个固定位置。但当触发
弹出
菜单的按钮被移动到其他位置时,由于层是绝对定位的,因此这个弹出菜单就会出
现在
错误的位置。
  解决这个问题需要我们修改在Dreamweaver中插入的这个弹出菜单的
JavaScript代码

  下图指出了弹出菜单的定位和相关代码的对应关系:
  首先我们枰≈写シ⒌霾说サ陌磁ィ缓蟠蚩狣reamweaver中的Show
Code View
s窗口,相关的代码会高亮显示,在此代码中寻找下面的一句:
  "window.FW_showMenu(window.fw_menu_#,#,#)"
  最后两个数字就是弹出菜单定位点的左边和顶部的坐标绝对位置,将这两个数
字修
改为您期望的值就可以了。
  如果在Fireworks4中您选择的弹出菜单的样式是图片形式,那么输出的站点文
件夹
中就会多这么二个图片fwmenu1_114x26_over.gif、fwmenu1_114x26_up.gif,该图
片是
以尺寸大小来命名的。而且它在Fireworks4的弹出菜单文件输出时会根据选择的字
体的
大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态,它在整
个弹
出菜单中都存在。还有一个arrows.gif文件,该文件是弹出菜单中指示下级菜单存
在的
箭头。
  我们可以将这三个文件都在Fireworks软件中打开,修改为我们所需要的样式
,再将
它们按原名覆盖回去。值得注意的是,Fireworks输出的菜单上的文字是真正的文
本格式
,我们不需要每个菜单项都有Up和Over两个状态的图片,fw_menu.js文件只是在重
复利
用上面的两个图片作为菜单项的背景图片。
四、 如何定制弹出菜单
  很一些朋友可能对Fireworks4生成的弹出菜单不太满意,例如表格边框不能自
己控
制,有部分颜色也不能通过向导窗口进行设置,诸多的不满积累起来变成了对用
Firewo
rks4制作弹出菜单这个新增行为的反感,甚至不愿意去使用它。其实我们可以通过
手工
修改Fireworks生成的fw_menu.js文件来对弹出菜单进行细微调整。用Fireworks4
输出的
弹出菜单文件的HTML文件中包含着控制菜单的fwLoadMenus()函数,该函数主要包
括了我
们在设置弹出菜单向导窗口中设定的一些参数,如字体、大小、链接地址等等,以
及各
级菜单的结构等这些前台显示的数据。
  然而真正控制菜单交互性行为的是另外的一个命名为fw_menu.js文件,它被一
同输
出在与该HTML同级的站点文件夹中。fw_menu.js文件里面定义了一个Menu()函数,
通过
它与HTML文件中的fwLoadMenus()函数相互传递参数来显示我们的弹出菜单。在此
函数中
设定了弹出菜单的一些缺省参数,例如:如果我们不指定字体,那么最终默认显示
的就
是"Arial, Helvetica, Verdana,sans-serif"这一类型的字体;如果不定义字体大
小,
最终显示的就是这里指定的默认12象素大小。
  然而还有些属性是我们不能在制作向导中设定的,如果您有些基本的
JavaScript知
识,您完全可以自己定义它们,接下来我们来介绍一下这些可定制的弹出菜单内容

(1) 定制外观
  在Dreamweaver或是其他编辑软件中打开fw_menu.js文件,在刚开始的代码中
这么一
段初始的定义:
  function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh) (
  this.version = "990702 [Menu; menu.js]";(当前弹出菜单的版本号,这是
Fire
works4默认的)
  this.type = "Menu";(菜单类型)
  this.menuWidth = mw;(菜单项的宽度,如果不改变的话,默认的是从
fwLoadMenu
s()函数中传递过来的值,当然您可以在这儿自定义菜单项的宽度)
  this.menuItemHeight = mh; (菜单项的高度,如果不改变的话,默认的是从
fwLo
adMenus()函数中传递过来的值,当然您可以在这儿自定义菜单项的高度)
  this.fontSize = fs||12;(默认的字体大小为12象素,您可以自己设置默认
的值)

  this.fontWeight = "plain";(默认的字体样式)
  this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif ";(默认
的字体
类型,您可以改变这其中的字体)
  this.fontColor = fclr||"#000000";(默认的字体颜色)
  this.fontColorHilite = fhclr||"#ffffff";(默认的当鼠标移上去时高亮显
示的
字体颜色)
  this.bgColor = "# 555555";(默认的表格背景颜色)
  this.menuBorder = 1;(默认的外边框宽度值)
  this.menuItemBorder = 1;(默认的各单元格之间的间隔值)
  this.menuItemBgColor = bg||"#cccccc";(默认的单元格背景色)
  this.menuLiteBgColor = "#ffffff";(表格亮边框色值)
  this.menuBorderBgColor = "#777777";(表格外框颜色值)
  this.menuHiliteBgColor = bgh||"#000084";(默认的当鼠标移上去时单元格
背景
色)
  this.childMenuIcon = "arrows.gif";(子菜单箭头标示图片)
  此部分定义了弹出菜单的一些颜色设置,当我们制作弹出菜单时,如果选择了
HTML
表格形式菜单,最终输出的菜单文件其实是以表格形式存在的,我们可以通过修改
上面
的这些值来改变表格的外观。其中有几个选项的格式如下:
  ·this.fontColorHilite = fhclr||"#ffffff";
  这表示它有一个默认值,是由fhclr变量定义的,如果您想自定义它的色彩您
可以修
改为: this.fontColorHilite = "#ffffff";
  · this.menuHiliteBgColor = bgh||"#000084";
  该参数代表的是当鼠标移上去时单元格背景色,该值有个默认值,就是您在
Firewo
rks4的弹出菜单向导窗口中设置的Over State中的Cell的颜色值,它通过bgh变量
传递值
,如果您想自定义它的色彩您可以修改为:this.menuHiliteBgColor =
"#cc0000s";
  此外该fw_menu.js文件中还有如下两句代码需要引起注意:
  var defaultHeight = menu.fontSize+6;(这句代码是用来控制单元格中文字
的行
高值)
  var defaultIndent = menu.fontSize-5;(这句代码是用来控制单元格中文字
的缩
进值)
  通过以上这些简短的介绍,我们可以看出,通过修改这个js文件,我们完全可
以定
制弹出菜单的外观、字体、颜色等属性。有一点需要指出 fw_menu.js文件将只被
载入一
次,然后浏览器将从缓存里调用它,这个23K大小的fw_menu.js文件将从浏览者进
入站点
后就一直放在缓存中。同理,如果我们的站点中存在多个弹出菜单,fw_menu.js也
只能
调用一个。
  如果您对您的定制结果非常满意,并希望将您设置的弹出菜单风格设置为
Firework
s弹出菜单输出的默认风格,您可以将您的这个fw_menu.js文件复制到Fireworks的
\ Co
nfiguration\ HTML Code\目录下,记得先将原来的文件备份一下。
(2) 定置弹出菜单的弹出速度
  或许有些人会觉得在浏览器中浏览由Fireworks4生成的弹出菜单文件时,弹出
菜单
的显示速度并不像我们预期的那样。往往当鼠标移到弹出菜单的按钮上时,菜单的
弹出
速度非常快,但当鼠标离开弹出菜单按钮时,刚才触发弹出的菜单仍旧会留在原来
的位
置一段时间,而不像我们希望的那样能够立刻消失。其实这个问题我们依旧可以通
过修
改fw_menu.js文件来进行解决。在Dreamweaver 或是其他编辑器中打开该JS文件,
我们
找到这段代码:
  setTimeout("fwDoHide()", 1000)
  (elapsed < 1000)
  setTimeout("fwDoHide()", 1100-elapsed)
  上面这段代码是用来控制弹出菜单显示速度的。默认的数值1000表示当前的延
迟时
间是1秒,如果想将延迟时间修改为原来的一半,可以将上述代码里的数值修如下

  setTimeout("fwDoHide()", 500)
  (elapsed < 500)
  setTimeout("fwDoHide()", 550-elapsed)
  你可以通过不断的修改找到你满意的数值,注意不要将这个延迟时间设置的太
短,
以避免浏览者还没有看清菜单内容,菜单内容就消失了。
(3)定制弹出菜单的图片样式
  如果在弹出菜单的输出格式选择的图片形式的话,那么我们就可以对该图片样
式进
行定制。Fireworks4弹出菜单的样式文件放在 \Configuration\Nav Menu目录下,
文件
名是Styles.stl,我们可以定制自己的样式并将它输出为单独的样式文件,然后存
放在
Nav Menu目录下,当再次打开弹出菜单制作向导时,我们先前定制的样式就可以在
制作
向导中出现,可以随意选择使用了。由于Fireworks中可以制作出非常丰富的样式
文件,
因此我们的弹出菜单也可以通过应用样式实现更为丰富的外观。
五、小结
  综上所述,可见Fireworks4提供了功能非常强大的定制方法来制作弹出菜单导
航条
,以往让网页设计师或是程序员头疼的这一部分工作如今可以通过Fireworks4来轻
松地
解决。不过每件事情只有通过自己亲手试验以后才会有更深一步的体会,希望这篇
文章
可以给您带来一个思路,一个启发,既然我们可以通过定制的js文件得到了制作弹
出菜
单的功能,我们也可以扩充Fireworks来实现更丰富的想法。这就是Fireworks软件
的构
想,即通过良好的可扩展性实现自身功能的不多扩充。


※ 来源:·BBS汕头大学郁金香站 bbs.stu.edu.cn·[FROM: 202.96.144.222]

--
※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 192.168.55.226]


[回到开始] [上一篇][下一篇]

荔园在线首页 友情链接:深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店