Fireworks 4 制作弹出菜单全过程（一）
一、弹出菜单介绍 随着动态交互式网页制作技术的发展，目前有很多网站都采用了一种弹出菜单的技术来实现网站的导航效果，例如微软及Macromedia的网站。在以前这都必须是具有专业的网页编程技术人员花费一定时间才能制作出来的效果，如今在Macromedia Fireworks4.0版本中能够轻松地制作了。弹出菜单的制作是Fireworks4中新增的一项强大的功能，利用它我们可以制作出常见的弹出菜单效果，甚至不需要花一点点的JavaScript编程技术。看来Macromedia Fireworks已经不满足于单纯的网页设计而是逐渐向丰富多彩的交互式网页设计制作靠拢了。 何谓弹出菜单技术呢？或许有些人会这样问。所谓的弹出菜单通常是在Web页中由鼠标来触发的一种菜单导航效果，当鼠标移动到导航菜单上触发条件满足，就会显示出弹出菜单。当鼠标从导航菜单上移开，弹出菜单自动消失。触发条件既可以是鼠标通过（On Mouse Over），也可以是鼠标单击（On Click），这种结构的菜单使我们能更加灵活的组织我们的菜单结构，而且下载时间又比较迅速。弹出菜单结构非常类似于一个表格，每一个导航菜单条目就好 比一个单元格。当然，Fireworks4中提供了四种鼠标动作，还有两种是鼠标移出（On Mouse Out）和页面加载（On Load），但显然他们不适合用在这里，因为这和通常浏览者的浏览习惯不符合。 二、在Fireworks4中如何制作弹出菜单 看了上面的介绍，或许有很多人想知道该如何在Fireworks4中来制作这个看似高难度其实非常简单的效果呢，这部分我们就通过实例来讲解在Fireworks4中如何制作弹出菜单的基本制作过程。 1、首先我们先来制作一个带有三个选项的菜单导航条，并为每个选项增加切片对象。Fireworks4的弹出菜单行为与其他行为一样，只能应用在按钮对象、切片对象或是热区对象上。（注：在Fireworks4中按钮对象上会自动添加切片对象，因此可以直接在按钮对象上使用各种行为。）http://it365cn.com/articleimg/166-1.gif
2、为菜单导航条增加弹出菜单行为，首先必须选中一个按钮上的切片，有三种方法请选择其一： （1） 打开Behaviors面版，点击\"+\"按钮添加弹出菜单行为命令Set Pop-Up Menu （2） 使用菜单命令Insert>Pop-Up Menu （3） 单击鼠标右健，在弹出的命令列表中选择Add Pop-up Menu命令 3、选择了增加弹出菜单命令后，Fireworks4会出现弹出菜单制作向导窗口，您可以根据弹出菜单制作向导一步步地执行下去，其实过程非常的简单，仅仅只有二个步骤。 4、首先出现的一个向导窗口是用来增加弹出菜单中的子菜单选项和为子菜单添加相关属性的。
http://it365cn.com/articleimg/166-2.gif
下面我来解释一下各个选项的作用： （1） Menu选项：其右边有“+”、“-”二个按钮，根据Fireworks软件应用习惯，这二个按钮是用来添加或删除一个菜单选项时起作用的。 （2） Text选项：定义菜单选项的内容 （3） Target选项：用来选择点击菜单选项链接时打开的窗口位置，其选项和Dreamweaver之类的网页制作软件的链接选项内容一样，这儿不再介绍。 （4） Link选项：用来设置菜单选项的链接属性。 （5）
http://it365cn.com/articleimg/166-3.gif
这两个按钮可以控制子菜单的显示层次，点击右边的按钮可以使菜单项缩为下一级，点击左边的按钮可以使下一级菜单项向上升一级，这二个按钮不是随时随地都能使用的，而是会根据实际情况让您进行使用。利用这二个按钮可以方便的制作出多级弹出菜单。 （6） 如果您改变了某一条菜单项中的Text选项、Target选项或是Link选项中的一些值，可以点击Change按钮确定改变。 向导窗口下面的大窗口表格中显示的是弹出菜单的结构，您定义的弹出菜单的各级内容都显示在这里。在本例中我定义了艺术字效果和动态字效果这二个菜单，在艺术字效果菜单中另外还分为卡通艺术字、变形艺术字、卷边艺术字这三个子菜单，在动态字效果菜单中也有其子菜单。您可以通过点击Menu 选项中的\"+\"按钮来增加菜单项，并分别设定它的链接地址和目标窗口；通过\"-\"按钮来删除选定的菜单项；您还可以选定一个菜单项后，修改已经填好的一些选项值，然后单击Change按钮改变它；您也可以选中一个菜单条目后上下拖动它到一个新的位置，以改变菜单的排序。当您将一个菜单项缩进时，它就自动变为下级子菜单。 菜单结构设定好后就，点击Next按钮进入下一步向导窗口。 5、接下来进入的向导窗口是用来定义弹出菜单的外观及文字属性的。 如下图所示，我们将在这个窗口中定义弹出菜单的外观和文字属性，这个窗口有下面这几部分组成。
http://it365cn.com/articleimg/166-4.gif
（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状态时的菜单外观（既菜单默认的显示状态），右边是Over状态时的菜单外观（鼠标通过时的菜单外观）。我们分别可以定义两种状态下文字和单元格的色彩。
http://it365cn.com/articleimg/166-5.gif
在Image样式中时，唯一不同的一点就是我们可定义菜单图片的样式，Fireworks内置了几种样式，除此外我们还可以定制自己的样式，并将它应用到我们的菜单上，通过定制菜单样式，我们可以实现更为个性化的菜单，稍候我们将介绍详细的内容。 （6） Preview选项：从该选项窗口中我们可以观察到定义的弹出菜单的外观和文字属性。 （7） 根据需要选定合适的弹出菜单显示样式及文字颜色和单元格颜色，点击Finish按钮完成弹出菜单的制作过程。 6、 返回到弹出菜单页面，您可能会惊奇的发现，什么也没出现，我们看不到做好的弹出菜单，仅仅能看到一级弹出菜单的外框图，这是因为由Fireworks4制作的弹出菜单只能在浏览器中查看到最终的效果，如果您等不及想看最终的结果按F12键就能在浏览器中看到效果了。
http://it365cn.com/articleimg/166-6.gif
7、 将鼠标移动到弹出菜单的位置时，鼠标会变为小手的形状，您可以拖动弹出菜单到任意位置。当您取消对该带有弹出菜单行为的切片选择时，弹出菜单会隐藏，再次选择此切片时，弹出菜单会再次显示。
http://it365cn.com/articleimg/166-7.gif
8、 如果您对弹出菜单中的内容感觉不满意想再次修改菜单的内容或格式，您可以选中该切片后双击弹出菜单轮廓图，或者打开行为（Behavior）面板，双击POP-Up属性，此时弹出菜单制作向导窗口会再次出现，您可以反复多次修改，直到满意为止。 9、 至此在Fireworks4中所能做的弹出菜单的工作算是全部完工了，使用菜单命令File→Export选择一个站点文件夹进行输出，具体的我们分HTML表格形式和图像形式在定制弹出菜单文件中介绍。
页:
[1]