• 创建菜单

  • 更改弹出菜单的外观

  • 向弹出菜单编辑器添加自定义菜单样式

  • 设置高级单元格属性

  • 更改弹出菜单和子菜单的位置

  • 编辑或移动弹出菜单中的项目

  • 导出弹出菜单

当用户将指针移到具有触发功能的 Web 对象(如切片或热点)上或单击此类对象时,浏览器中将显示弹出菜单。

  • 每个弹出菜单项都显示为 HTML 或图像单元格。单元格包含“弹出”状态、“滑过”状态以及两种状态中的文字。

  • 您可以将 URL 链接附加到弹出菜单项以方便导航,还可以在弹出菜单中创建任意多级子菜单。

  • 可以使用任何或全部选项卡,还可以随时编辑选项卡设置。

  • 您必须在“内容”选项卡中添加至少一个菜单项,以创建您可以在浏览器中预览的菜单项。

  • 若要预览弹出菜单,请按 F12。弹出菜单不会显示在 Fireworks 工作区中。


创建菜单

创建简单的弹出菜单

  1. 选择要用作弹出菜单的触发器区域的热点或切片。

  2. 执行下列操作之一:

    • 选择“修改”>“弹出菜单”>“添加弹出菜单”。

    • 单击切片中间的行为手柄,然后选择“添加弹出菜单”。

  3. 单击“内容”选项卡,然后单击“添加”菜单。

  4. 双击每个单元格,然后输入或选择适当的文本、链接和目标信息。对于“链接”和“目标”字段,可输入自定义信息或从显示的菜单中选择。在窗口中的最后一行输入内容后,会在该行的下面增加一个空行。

    按 Tab 可在单元格之间移动,按向上箭头和向下箭头键可垂直滚动列表。

  5. 重复执行步骤 3 和 4,直到添加完所有菜单项。若要删除菜单项,请单击“删除菜单”按钮。

  6. 单击“下一步”或“完成”,或选择另一个选项卡。

    在工作区中,您用来生成弹出菜单的热点或切片会显示一条蓝色行为线,该行为线附加在弹出菜单的顶级菜单轮廓上。

在弹出菜单内创建子菜单

子菜单是当用户移过指针或单击另一个弹出菜单项时显示的弹出菜单。您可以创建任意多级子菜单。

  1. 打开弹出菜单编辑器的“内容”选项卡并创建菜单项。将要对子菜单使用的菜单项直接放在将拥有它们的菜单项下。

  2. 高亮显示您要设为子菜单项的弹出菜单项,然后单击“缩进菜单”按钮。

  3. 若要将下一项添加到该子菜单,先高亮显示它,然后单击“缩进菜单”。或者,要在高亮显示项下方紧邻该项的位置插入一个新项,请高亮显示菜单或子菜单项,然后单击“添加菜单”。

    所有相邻且缩进级别相同的项将构成一个弹出子菜单。

  4. 若要在弹出子菜单中创建子菜单,请在弹出菜单编辑器的“内容”选项卡中高亮显示子菜单项,然后再次单击“缩进菜单”按钮。

  5. 单击“下一步”以继续创建弹出菜单,或单击“完成”。

更改弹出菜单的外观

在创建了基本菜单和可选子菜单之后,即可在弹出菜单编辑器的“外观”选项卡上,对文本进行格式设置,对滑过状态和弹起状态应用图形样式,以及选择垂直或水平方向。

  1. 在弹出菜单编辑器中,使弹出菜单处于打开状态,单击“外观”选项卡。

  2. 从“选择弹出菜单的对齐方式”中选择“垂直”或“水平”。

  3. 选择“单元格”选项:

    HTML

    仅使用 HTML 代码设置菜单的外观。该设置产生的页面的文件大小较小。


    图像

    为您提供一组精选的图形图像样式,以用作单元格的背景。该设置产生的页面的文件大小较大。



  4. 从“大小”弹出菜单中选择预设大小,或者在“大小”文本框中输入一个值。

    注:  如果在弹出菜单编辑器的“高级”选项卡中,单元格宽度和高度都设置为“自动”,则将由文本大小来决定与该菜单项关联的图形的大小。

  5. 从“字体”弹出菜单中选择一个系统字体组,或者输入自定义字体的名称。

    注:  如果用户在其系统上未安装您选择的字体,则他们的 Web 浏览器中将显示一种替换字体。

  6. (可选)对文本应用样式、对齐和颜色。

  7. 为每种状态选择文本和单元格颜色。

  8. 如果已选择“图像”作为单元格类型,请为每种状态选择一种图形样式。

  9. 继续创建弹出菜单,或单击“完成”。

向弹出菜单编辑器添加自定义菜单样式

选择在“图像”被选定为单元格样式时使用的单元格样式。有关样式的详细信息,请参阅创建和删除样式。

注:  Menu Bars 文件夹的确切位置会因操作系统的不同而不同。有关详细信息,请参阅自定义使用配置文件。

  1. 将笔触、填充、纹理和动态滤镜的任意组合应用于对象,然后使用“样式”面板将该组合保存为样式。

  2. 在“样式”面板中选择该新样式,然后从“样式”面板的“选项”菜单中选择“保存样式库”。

  3. 定位到硬盘上的 Menu Bars 文件夹,如果需要,可重命名该样式文件,然后单击“保存”。

设置高级单元格属性

  1. 打开弹出菜单编辑器,然后单击“高级”选项卡。

  2. 从“自动/像素”弹出菜单中选择宽度或高度约束:

    自动

    强制单元格高度符合在弹出菜单编辑器的“外观”选项卡中设置的文本大小,并强制单元格宽度符合包含最长文本的菜单项


    像素

    允许您以像素为单位在“单元格宽度”和“单元格高度”文本框中输入特定尺寸



  3. 在“单元格边距”文本框中输入一个值,用以决定弹出菜单文本和单元格边缘之间的距离。

  4. 在“单元格间距”文本框中输入一个值,用以设置菜单单元格之间的间距。

  5. 在“文字缩进”文本框中输入一个值,用于设置弹出菜单文本的缩进量。

  6. 在“菜单延迟”文本框中输入一个值,用以设置当指针从菜单移开后,菜单仍保持可见的时间(单位为毫秒)。

  7. 选择是显示还是隐藏弹出菜单边框。如果您选择显示边框,请设置边框属性。

  8. 继续创建弹出菜单,或单击“完成”。

更改弹出菜单和子菜单的位置

使用弹出菜单编辑器的“位置”选项卡指定弹出菜单的位置。当“网页层”可见时,您还可以通过在工作区中拖动顶级弹出菜单的轮廓来调整其位置。

设置弹出菜单或子菜单的特定位置

  1. 在弹出菜单编辑器中,使所需弹出菜单处于打开状态,单击“位置”选项卡。

  2. 通过执行下列操作之一定义菜单位置:

    • 单击“位置”按钮可相对于触发弹出菜单的切片来调整菜单的位置。

    • 输入 xy 坐标。如果坐标为 (0,0),则使弹出菜单的左上角和触发它的切片或热点的左上角对齐。

  3. 定义子菜单位置:

    • 单击“子菜单位置”按钮可相对于触发该子菜单的弹出菜单项调整子菜单的位置。

    • 输入 xy 坐标。如果坐标为 (0,0),则会将弹出子菜单的左上角和触发它的菜单或菜单项的右上角对齐。

  4. 设置相对位置:

    • 若要相对于触发子菜单的父级菜单项来排列每个子菜单的位置,请取消选择“与父级菜单放在同一位置”。

    • 若要相对于父级弹出菜单来排列每个子菜单的位置,请选中“与父级菜单放在同一位置”。

  5. 单击“完成”以关闭弹出菜单编辑器,或者单击“后退”修改其它选项卡中的属性。

通过拖动弹出菜单设置其位置

  1. 请执行下列操作之一以显示网页层:

    • 单击“工具”面板中的“显示切片和热点”按钮。

    • 在“层”面板中,单击包含眼睛图案的列。

  2. 选择用作弹出菜单的触发器的 Web 对象。

  3. 将弹出菜单的轮廓拖到工作区中的其它位置。

编辑或移动弹出菜单中的项目

在弹出菜单编辑器中,可以编辑或更新弹出菜单的内容,重新排列菜单项,或者更改四个选项卡中任一选项卡上的其它属性。

  1. 请执行下列操作之一以显示网页层:

    • 单击“工具”面板中的“显示切片和热点”按钮。

    • 在“层”面板中,单击包含眼睛图案的列。

  2. 选择弹出菜单附加到的切片。

  3. 在工作区中双击弹出菜单的蓝色轮廓。

  4. 在弹出菜单编辑器中,在任一选项卡上进行更改。

编辑菜单文本

  1. 在弹出菜单编辑器中打开弹出菜单,然后单击“内容”选项卡。

  2. 双击“文本”、“链接”或“目标”文本框并编辑菜单文本。然后在项目列表外单击以应用更改。

移动菜单项

  1. 在弹出菜单编辑器的“内容”选项卡上,高亮显示该菜单项。

  2. 请执行下列任一操作:

    • 若要将菜单项移到更高级子菜单或移到主弹出菜单中,请单击“左缩进菜单”按钮。

    • 若要将菜单项移到同一菜单中的不同位置,请将该项拖到列表中所需的位置。

导出弹出菜单

Fireworks 会生成在 Web 浏览器中查看弹出菜单所需的全部 CSS 代码或 JavaScript(具体取决于您选择哪个选项)。

如果您对弹出菜单使用 CSS 代码,则包含弹出菜单的 Fireworks 文档会导出为使用 CSS 代码的 HTML。您也可以将 CSS 写入到一个外部 .css 文件,并将此文件与 mm_css_menu.js 文件一起导出到 HTML 文件所在的位置。

可以使用 JavaScript 来代替使用 CSS 代码。如果使用 JavaScript,包含弹出菜单的 Fireworks 文档会导出为 HTML,同时会将一个名为 mm_menu.js 的 JavaScript 文件导出到该 HTML 文件所在的位置。

在上传文件时,请将 mm_css_menu.js(如果是 JavaScript,则为 mm_menu.js)上传到包含该弹出菜单的网页所在的目录位置。若要将该文件发布到其它位置,请在 Fireworks HTML 代码中更新引用 mm_css_menu.js 和 .css 文件(或 mm_menu.js)的超级链接,以便反映自定义位置。对于包含 CSS 弹出菜单的每个文档,在从 Fireworks 中导出为 HTML 和图像时,都会导出一个唯一的 .css 文件。

在包括子菜单时,Fireworks 会生成一个图像文件 (arrows.gif),即在包含子菜单的菜单项旁边显示的小箭头。无论文档中包含多少个子菜单,Fireworks 始终使用同一个 arrows.gif 文件。


,