Fireworks 8 中弹出菜单的详情

你们当中一直留意 Fireworks 论坛公告的人可能知道我的名字。作为反对使用 Macromedia Fireworks MX 2004 及更早版本中实现的原始 Fireworks 弹出菜单的斗士，我大概已经名声在外。在此我愿声明，我就是这么一个斗士。在我看来，不使用这些弹出菜单有很多理由，为此我已经花了相当多的时间公布我的理由。

这就是我为什么要写这篇文章的原因，那么，下一步该做什么？我拟定的工作事项如下：

• 我要告诉 Fireworks 小组，我很感谢他们为开发这个新的菜单系统所付出的努力。
• 我要告诉你们，我将不再发布我一向所发布的那些有关反对使用此菜单系统的意见了。
• 我非常希望 Dreamweaver 开发小组能够重视我的这些意见，并且在该程序将来的版本中对弹出菜单功能予以关注。

现在言归正传，我很高兴地告诉你们，在 Fireworks 8 中此功能有了极大的改进。

在本文中，我将简要介绍如何在各种模式下创建菜单。我将检查并论述 Fireworks 创建的准备导入 Dreamweaver 的标记，并介绍在结果标记中要考虑的一些改进，我认为这些改进可能会有所帮助。

要求

要完成本教程，您需要安装以下软件：

Fireworks 8

• 购买

Dreamweaver 8

• 购买

必备知识

对 HTML 和 CSS 有一定程度的熟悉和了解，使用过 Fireworks 中的弹出菜单。

构建弹出菜单

你们当中使用过 Fireworks 以前版本的弹出菜单功能的人对于当前版本将运用自如。Fireworks MX 2004 与 Fireworks 8 中的设置和对话框面板是相同的，从而提供了完全相同的选项。在 Fireworks 8 中使用此功能，可以构建视觉效果很好的菜单集。其吸引力显而易见。

要检查 Fireworks 8 创建的弹出菜单，需要创建几个极为简单的文件。首先，打开 Fireworks，选择“文件”>“新建”，以创建一个新页面，比如说 640 x 400 像素。选择文本工具，然后在页面上任意位置输入 Link1。

退出文本工具，然后在 Link1 周围绘制一个切片（我绘制的切片宽度为 41 像素、高度为 23 像素）。选择此切片，将其命名为 link1button，使用所选切片的中心下拉上下文菜单，然后从菜单选项中选择“添加弹出菜单”。将打开一个面板，您将使此切片显示一个简单的单选项子菜单。在此面板的“文本”列标题下，输入 Sub1-1。不需要输入链接或目标。

现在，单击“下一步”按钮进入“外观”选项卡（或直接单击该选项卡），在该选项卡中，您可以选择上述菜单为垂直菜单。无需进一步调整，即可在顶部菜单选项的顶部绘制该子菜单，因此，您应进入“位置”选项卡，单击左侧第二个位置图标。保持此选项卡和其它选项卡中其余设置的默认值不变，单击“完成”以完成此菜单。将此文件另存为 singlebutton.png。

选择“文件”>“在浏览器中预览”，然后选择浏览器，以便预览此菜单。此时应看到一个单按钮菜单，当鼠标经过时，该菜单下拉一个单选项子菜单。

如果 singlebutton.png 依然打开，则可以向该菜单中添加更多的按钮。在本教程中，您可以再添加三个菜单按钮，并为每个菜单按钮添加一个弹出子菜单。为此，请在“网页层”工具中取消选中可视切片选项，双击 Link1，并向其附加 Link2 Link3 Link4（我已在每个链接名称之间放置了两个空格）。

现在，退出文本模式，启用可视切片选项，选择切片工具以便向这三个新菜单选项中的每一个添加尺寸类似于 link1button 的切片。从 Link2 开始，使用与以前用过的名称类似的名称来命名每个新切片：link2button、link3button 和 link4button。逐一选择每个新切片，使用中心来添加带有一个子菜单的弹出菜单：Sub2-1、Sub3-1 和 Sub4-1。将此新菜单排列另存为 fourbutton.png。

通过在浏览器中进行预览，将再次显示您所做的良好的工作。

将弹出菜单导入 Dreamweaver

现在您已经创建了两个菜单，其中一个带有一个按钮和一个弹出菜单，另一个带有四个按钮并且每个按钮带有一个弹出菜单；下一步是将这两个菜单导入 Dreamweaver 并检查标记。

打开 singlebutton.png，选择“文件”>“导出”。在此选择文件的存放位置（我创建了一个名为 single 的文件夹，并将这些文件放入该文件夹中）。仔细查看“导出”面板，确保“导出”字段设置为“HTML 和图像”，HTML 字段设置为“导出 HTML 文件”，“切片”字段设置为“导出切片”，并启用了“包括无切片区域”复选框。

单击“选项”按钮，选择您喜欢的 HTML 样式和扩展名。在“HTML 设置”面板的四个复选框中，至少需要选择靠下的两个复选框（“对弹出菜单应用 CSS”和“将 CSS 写入外部文件”）。单击“确定”退出此“HTML 设置”面板和前面的“导出”面板以保存文件。

对 fourbutton.png 执行相同的操作（我创建了一个名为 fourbutton 的文件夹，并将这些文件放入其中）。现在，您已创建了需要在本教程其余部分使用的所有文件。就我而言，此过程将在一个文件夹中生成下列相关文件（并在 fourbutton 文件夹中生成类似的文件）：singlebutton.html、singlebutton.css 和 mm_css_menu.js。singlebutton 文件将用来描述菜单及其构造的详细信息。fourbutton 文件用来检查这个较为“实际”的示例所需的 CSS。

将这些菜单插入 Dreamweaver 的过程与现行的几个版本中的插入过程完全相同。打开 Dreamweaver 页面，在希望插入菜单处放置插入点，然后选择“插入”>“图像对象”>“Fireworks HTML”。对于本教程的其余部分，需检查用 Fireworks 编写的代码，以了解这些菜单的构建方式和工作方式。我将使用通过 Fireworks 8 编写的原始文件来进行说明。

查看代码

浏览 HTML 立即就会发现这些菜单与早期版本的 Fireworks 中构建的菜单大不相同。最显著的区别在于不会将链接写入页面上的纯 HTML 标记中。

在 Dreamweaver 中，我专门为本教程定义了一个站点。此站点的根目录既包含单个文件夹又包含 fourbutton 文件夹。要查看 Fireworks 如何创建这些菜单，应从单个文件夹开始。使用 Dreamweaver 中的“代码”视图，可以查看单个文件夹中 singlebutton.html 的内容。应看到以下内容（后跟标记）：

• 该页面链接到 mm_css_menu.js 文件（与原始 mm_menu.js 相比，该文件就是一个 80 行的 JavaScript 文件），该文件包含显示和隐藏子菜单以及对子菜单在屏幕上显示进行计时所需的功能。
• CSS 样式表是使用嵌入的 @import 规则指定的，该规则隐藏了 Netscape 4 及更高版本中的样式。
• CSS 是使用“屏幕”媒体类型链接的，该类型将其隐藏，使其无法连接到打印机或其它设备。
• 菜单及其关联子菜单放在一个叫做“菜单 div”的外部 div 容器中。
• 菜单本身是一个位于表单元格中的标准 HTML 锚记。此表称为“菜单表”。
• 子菜单实际上是放在 div 容器中的一组嵌套的 div 标签，位于菜单 div 标记的底部，该标记在表的结束标签之下、在结束 </div> 标签之上。完成这一附加的嵌套可能是为了适应复杂的多级子菜单系统。
• 子菜单本身嵌套在该子菜单特定的容器 div 中。
• 在弹出菜单的设置（“外观”选项卡）中，可以为子菜单链接选择使用 HTML 或图像。在本教程中，保持默认值 (HTML) 不变。因此，通过纯文本链接创建子菜单，在本例中为“Sub1-1”。
• 可以使用固定的名称来标识这些元素：菜单 div、子菜单容器 div 和特定子菜单 div。如您所见，这种名称有些令人费解。

下面显示易于理解的 HTML 标记（加上我做的注释和适用于 div 的命名约定）：

<div id="FWTableContainer165705776"><!-- 这是外部菜单容器 div -->
<table border="0" cellpadding="0" cellspacing="0" width="640"><!-- 这是菜单表 -->
<!-- fwtable fwsrc="singlebutton.png" fwbase="singlebutton.gif" fwstyle="Dreamweaver" fwdocid = "165705776" fwnested="0" -->
<tr>
<!-- 高度为 1 的填隙行 -->
...snip...
<tr><!-- 第 1 行 -->
...snip...
</tr>
<tr><!-- 第 2 行 -->
<td rowspan="2">...snip...</td>
<td><a href="javascript:;" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer0817151145_0', 'MMMenu0817151145_0',0,23,'link1button');"><img name="link1button" src="images/link1button.gif" width="41" height="23" border="0" alt=""></a></td><!-- 这是顶部菜单链接图像 (link1button) --> 
<td rowspan="2">...snip...</td>
<td>...snip...</td>
</tr>
<tr><!-- 第 3 行 -->
<td>...snip...</td>
<td>...snip...</td>
</tr>
<!--   此表是使用 Macromedia Fireworks 自动创建的   -->
<!--   http://www.macromedia.com   -->
</table>
<div id="MMMenuContainer0817151145_0"><!-- 这是子菜单 div -->
<div id="MMMenu0817151145_0" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();">
<a href="#" id="MMMenu0817151145_0_Item_0" class="MMMIFVStyleMMMenu0817151145_0" onMouseOver="MM_menuOverMenuItem('MMMenu0817151145_0');">
Sub1-1
</a>
</div>
</div>
</div>

菜单功能由应用于各种 </div> 标签的事件处理程序来控制，其逻辑与若干年前我们使用 DHTML 时间轴创建此类菜单时使用的逻辑非常类似！将鼠标移到顶部菜单链接上，将通过调用 MM_menuShowMenu 显示子菜单；将鼠标移开，则将启动一个内部计时器。当此计时器启动时，子菜单将会关闭。将鼠标移到子菜单 div 上，将通过调用 MM_menuResetTimeout 停止前面启动的计时器；将鼠标从此 div 移开，则会再次启动计时器。

此菜单的 CSS 按如下方法编写：

• 一个初始规则，该规则强制表单元格中的图像为 display:block。这一解决方法用于 Netscape 对图像的内嵌显示的严格解释，即如果缺乏有效并且完整的 doctype，则对于页面上的文本下超部分使用一个下方的空格。
• 一系列规则，用于按照您所期望的方式来控制各种菜单和子菜单 div 及其内容的样式。
• 菜单 div 的 position:relative。这样，即使菜单使用绝对定位，必要时也可以位于表单元格中。
• 子菜单上的框模型 Hack，适用于 IE6 以前的 Internet Explorer。
• 子菜单 div 的绝对定位，用于按需要在顶部菜单链接下放置该 div。

检查导出操作生成的相应的 CSS 文件，从而获得 CSS 文件的规则详细信息。

对于 singlebutton.html，CSS 文件的长度为 81 行；对于 fourbutton.html，CSS 文件的长度为 282 行；可用于各个子菜单的个别样式要求附加行。这意味着菜单越复杂，要求的 CSS 文件越长。

如果我没有就此特定的命名方案进行详细说明，那我就是不负责任的。div 标签 ID（连同其样式规则选择器）的名称相当令人费解，更不用说它有多么冗长。也许可以将切片名称看作一种方法，用于简化这些 ID，从而减少列出（不仅在 Dreamweaver 中的标签选择器上列出，而且在代码和 CSS 中列出）这些 ID 所需的空间。作为一名用户，您可能希望将这些 ID 手动编辑为更具可读性的内容。

此外，提供一个选项为每个子菜单设置与其它子菜单无关的样式（这实际上是由菜单的用户界面决定的，因为每个子菜单都是一个单独的实体）似乎可以提供极大的灵活性，但要付出高昂的代价。页面上的标记和选择器的名称不一定会因这一灵活性而变得复杂。我个人的意见是，没有必要为每个子菜单设置这种附加的样式。这一简化将使菜单系统获益匪浅。

总之，我认为这些弹出菜单的设计即使不是前沿技术，也相当标准。现在显示、讨论和使用的大多数菜单系统是在嵌套列表模型上构建的，而不是通过显示/隐藏 div 操作在隔离的锚记标签上创建的。前一种方法的实际优点是表示形式（当 JavaScript 不可用时）和语义标记都很简单，即列表具有内在含义，不被一系列相邻锚记标签共享。我个人希望这种方法能够成为 Fireworks 将来的增强功能。

菜单应与 Dreamweaver 模板进行良好的配合，还应便于具有适当 HTML/CSS 技能的人员进行修改或调试。虽然菜单本身像许多其它菜单系统一样，不启用 JavaScript 就无法工作，但可由搜索引擎蜘蛛程序读取。

我想最后应该说上几句鼓励的话。令我感到鼓舞的是，可以打开“旧样式”菜单，然后将其重新保存为 CSS 菜单。在我看来，对那些有可能还在以前的所有 JavaScript 菜单中苦苦挣扎的用户来说，这是一条必不可少的生命线。我对此项功能的引入深表欢迎。

关于作者