《创建按钮和弹出菜单.ppt》由会员分享，可在线阅读，更多相关《创建按钮和弹出菜单.ppt（16页珍藏版）》请在金锄头文库上搜索。
1、精通精通Fireworks 8 主讲：李志伟第第13课：切片、变换图像和热点课：切片、变换图像和热点 n n即使对即使对 JavaScript JavaScript 和和 CSS CSS 代码一无所知，也可以在代码一无所知，也可以在 Macromedia Fireworks 8 Macromedia Fireworks 8 中中创建多种创建多种 JavaScript JavaScript 按钮和按钮和 CSS CSS 或或 JavaScript JavaScript 弹出菜单。弹出菜单。n nFireworks Fireworks 的按钮编辑器将引导您完成按钮的创建过程，并且自动完成许多按的按
2、钮编辑器将引导您完成按钮的创建过程，并且自动完成许多按钮制作任务。您将得到一个便于使用的按钮元件。创建了按钮元件后，就可钮制作任务。您将得到一个便于使用的按钮元件。创建了按钮元件后，就可以轻松地创建该元件的实例来制作导航栏了。以轻松地创建该元件的实例来制作导航栏了。n nFireworks Fireworks 中还有一个弹出菜单编辑器，利用它可以快速方便地创建垂直或水中还有一个弹出菜单编辑器，利用它可以快速方便地创建垂直或水平弹出菜单。弹出菜单编辑器的平弹出菜单。弹出菜单编辑器的“ “高级高级” ”选项卡使您能够发挥您的创造力来选项卡使您能够发挥您的创造力来控制单元格间距和边距、文字缩进、单元
3、格边框以及其它属性。控制单元格间距和边距、文字缩进、单元格边框以及其它属性。n n在导出按钮或弹出菜单时，在导出按钮或弹出菜单时，Fireworks Fireworks 会自动生成在会自动生成在 Web Web 浏览器中显示所必需浏览器中显示所必需的的 CSS CSS 代码或代码或 JavaScriptJavaScript。在。在 Macromedia Dreamweaver Macromedia Dreamweaver 中，可以轻松地将中，可以轻松地将 Fireworks Fireworks 中的中的 CSS CSS 代码、代码、JavaScript JavaScript 和和 HTML H
4、TML 代码插入到网页中，也可以将代码插入到网页中，也可以将这些代码剪切后粘贴到任何这些代码剪切后粘贴到任何 HTML HTML 或或 CSS CSS 文件中。文件中。n n本章包含以下主题：本章包含以下主题：n n创建按钮元件创建按钮元件创建按钮元件创建按钮元件n n创建导航栏创建导航栏创建导航栏创建导航栏n n创建弹出菜单创建弹出菜单创建弹出菜单创建弹出菜单创建按钮元件创建按钮元件n n按钮是网页的导航元素。在按钮编辑器中创建的按钮具有以下特点：按钮是网页的导航元素。在按钮编辑器中创建的按钮具有以下特点：n n几乎可以将任何图形或文本对象制作成按钮。几乎可以将任何图形或文本对象制作成按钮。
5、 n n可以从头创建新按钮，也可以将现有对象转换为按钮，或者导入已创建可以从头创建新按钮，也可以将现有对象转换为按钮，或者导入已创建好的按钮。好的按钮。 n n按钮是一种特殊类型的元件。可以将它的实例从元件库拖到文档中。按钮是一种特殊类型的元件。可以将它的实例从元件库拖到文档中。 这这样就使您可以在更改了单个按钮的图形外观后，自动更新导航栏中所有样就使您可以在更改了单个按钮的图形外观后，自动更新导航栏中所有按钮实例的外观。有关元件的更多信息，请参阅按钮实例的外观。有关元件的更多信息，请参阅使用元件使用元件。n n可以在不影响同一按钮的其它实例并且不断开元件和实例之间关系的前可以在不影响同一按钮
6、的其它实例并且不断开元件和实例之间关系的前提下，编辑某个按钮实例的文本、提下，编辑某个按钮实例的文本、URL URL 和目标。和目标。 n n按钮实例是经过封装的。在文档中拖动按钮实例时，按钮实例是经过封装的。在文档中拖动按钮实例时，Fireworks Fireworks 会移动与会移动与之关联的所有组件和状态，因此无需进行多帧编辑。之关联的所有组件和状态，因此无需进行多帧编辑。 n n按钮易于编辑。双击画布上的实例后，就可以在按钮编辑器或按钮易于编辑。双击画布上的实例后，就可以在按钮编辑器或“ “属性属性” ”检查器中对其进行更改了。检查器中对其进行更改了。 n n同其它元件一样，按钮也有注
7、册点。注册点即一个中心点，该中心点有同其它元件一样，按钮也有注册点。注册点即一个中心点，该中心点有助于在按钮编辑器中将文本和不同的按钮状态对齐。助于在按钮编辑器中将文本和不同的按钮状态对齐。关于按钮状态关于按钮状态n n按钮最多有四种不同的状态。每种状态表示该按按钮最多有四种不同的状态。每种状态表示该按钮在响应各种鼠标事件时的外观：钮在响应各种鼠标事件时的外观：n n“ “弹起弹起弹起弹起” ”状态状态状态状态是按钮的默认外观或静止时的外观。是按钮的默认外观或静止时的外观。n n“ “滑过滑过滑过滑过” ”状态状态状态状态是当指针滑过按钮时该按钮的外观。此是当指针滑过按钮时该按钮的外观。此状态
8、提醒用户单击鼠标时很可能会引发一个动作。状态提醒用户单击鼠标时很可能会引发一个动作。n n“ “按下按下按下按下” ”状态状态状态状态表示单击后的按钮。按钮的凹下图像通表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。此按钮状态通常在多按钮导常用于表示按钮已按下。此按钮状态通常在多按钮导航栏上表示当前网页。航栏上表示当前网页。n n“ “按下时滑过按下时滑过按下时滑过按下时滑过” ”状态状态状态状态是在用户将指针滑过处于是在用户将指针滑过处于“ “按下按下” ”状态的按钮时按钮的外观。此按钮状态通常表明指状态的按钮时按钮的外观。此按钮状态通常表明指针正位于多按钮导航栏中当前网页的按钮上方
9、。针正位于多按钮导航栏中当前网页的按钮上方。n n利用按钮编辑器，可以创建所有这些不同的按钮利用按钮编辑器，可以创建所有这些不同的按钮状态以及用来触发按钮动作的区域。状态以及用来触发按钮动作的区域。创建具有两种状态的简单按钮创建具有两种状态的简单按钮n n使用按钮编辑器，可以通过绘制形状、导入图形图像或者从文档窗口中拖动使用按钮编辑器，可以通过绘制形状、导入图形图像或者从文档窗口中拖动对象等方法来创建自定义按钮。然后，按钮编辑器会引导您完成各种控制按对象等方法来创建自定义按钮。然后，按钮编辑器会引导您完成各种控制按钮行为的步骤。钮行为的步骤。n n若要创建若要创建若要创建若要创建“ “弹起弹起
10、弹起弹起” ”状态：状态：状态：状态：n n选择选择“ “编辑编辑” ”“插入插入” ”“新建按钮新建按钮” ”打开按钮编辑器。打开按钮编辑器。 按钮编辑器打开时显示按钮编辑器打开时显示的是的是“ “弹起弹起” ”状态选项卡。状态选项卡。n n导入或创建导入或创建“ “弹起弹起” ”状态图形：状态图形： n n将要显示为按钮将要显示为按钮“ “弹起弹起” ”状态的图形拖放或导入到按钮编辑器的工作区。状态的图形拖放或导入到按钮编辑器的工作区。 n n使用绘图工具创建一个图形，或者使用使用绘图工具创建一个图形，或者使用“ “文本文本” ”工具创建基于文本的按钮。工具创建基于文本的按钮。 n n单击
11、单击“ “导入按钮导入按钮” ”，然后从，然后从“ “按钮导入按钮导入” ”库中选择一个现成的可编辑按钮。如果选择了库中选择一个现成的可编辑按钮。如果选择了该选项，就不必为创建其余的按钮状态而费心了。每个按钮状态中都会自动填充适当的该选项，就不必为创建其余的按钮状态而费心了。每个按钮状态中都会自动填充适当的图形和文本。图形和文本。 n n如果需要，请选择如果需要，请选择“ “文本文本” ”工具，然后创建按钮的文本。工具，然后创建按钮的文本。 n n若要创建若要创建若要创建若要创建“ “滑过滑过滑过滑过” ”状态：状态：状态：状态：n n当按钮编辑器打开时，单击当按钮编辑器打开时，单击“ “滑过
12、滑过” ”选项卡。选项卡。 n n执行下列操作之一，以创建按钮的执行下列操作之一，以创建按钮的“ “滑过滑过” ”状态：状态： n n单击单击“ “复制弹起时的图形复制弹起时的图形” ”可将可将“ “弹起弹起” ”状态按钮的副本粘贴到状态按钮的副本粘贴到“ “滑过滑过” ”窗口中，然后窗口中，然后对其进行编辑以更改它的外观或文本。对其进行编辑以更改它的外观或文本。 n n拖放、导入或绘制图形。拖放、导入或绘制图形。创建具有三种或四种状态的按钮在创建按钮时，除了在创建按钮时，除了“ “弹起弹起” ”状态和状态和“ “滑过滑过” ”状态状态之外，您可能还需要添加之外，您可能还需要添加“ “按下按下
13、” ”状态和状态和“ “按下按下时滑过时滑过” ”状态。这些状态为网页用户提供了额外状态。这些状态为网页用户提供了额外的可视化提示。的可视化提示。n n可以使用包含两种状态或三种状态的按钮创建导可以使用包含两种状态或三种状态的按钮创建导航栏，但只有包含所有这四种状态的按钮才能够航栏，但只有包含所有这四种状态的按钮才能够真正作为真正作为 Fireworks Fireworks 中的导航栏按钮。中的导航栏按钮。Fireworks Fireworks 包括几种导航栏行为，使得各个按钮之间似乎是包括几种导航栏行为，使得各个按钮之间似乎是相互关联的。例如，您可以创建类似于老式车载相互关联的。例如，您可以
14、创建类似于老式车载收音机按钮的导航栏按钮：收音机按钮的导航栏按钮： 当用户单击某个按钮当用户单击某个按钮时，该按钮将保持按下状态，直至单击另一个按时，该按钮将保持按下状态，直至单击另一个按钮为止。钮为止。使用斜角滤镜绘制按钮状态使用斜角滤镜绘制按钮状态n n在创建每个按钮状态的图形时，可以应用预设的动态滤镜来创建每种状态的常用外观。 将将 Fireworks 变换图像转换为按钮变换图像转换为按钮n n您可以利用在以前版本的您可以利用在以前版本的 Fireworks Fireworks 中创建的变换图像来中创建的变换图像来创建按钮。所有组件都转换为一个按钮，并将新按钮放创建按钮。所有组件都转换为
15、一个按钮，并将新按钮放入库中。入库中。n n若要将若要将若要将若要将 Fireworks Fireworks 变换图像转换为按钮：变换图像转换为按钮：变换图像转换为按钮：变换图像转换为按钮：1. 1.删除覆盖变换图像的切片或热点。删除覆盖变换图像的切片或热点。 2. 2.从从“ “帧帧” ”面板的面板的“ “洋葱皮洋葱皮” ”弹出菜单上选择弹出菜单上选择“ “显示所有帧显示所有帧” ”。 3. 3.选择要包括在按钮中的所有对象。选择要包括在按钮中的所有对象。 提示：提示：提示：提示：使用使用“ “选择后方对象选择后方对象” ”工具来选择隐藏在其它对象后面的对象。有关更多信息，请参阅工具来选择隐
16、藏在其它对象后面的对象。有关更多信息，请参阅使用使用“ “选择后方对象选择后方对象” ”工具工具。4. 4.选择选择“ “修改修改” ”“元件元件” ”“转换为元件转换为元件” ”。 “ “元件属性元件属性” ”对话框对话框打开。打开。5. 5.在在“ “名称名称” ”文本框中输入元件的名称。文本框中输入元件的名称。 6. 6.选择选择“ “按钮按钮” ”元件类型。元件类型。 7. 7.单击单击“ “确定确定” ”。 新按钮即被添加到库中。新按钮即被添加到库中。将按钮插入到文档中将按钮插入到文档中n n您可以在您可以在“ “库库” ”面板中将按钮元件的实例插入到文档中。面板中将按钮元件的实例插
17、入到文档中。n n若要将按钮元件的实例放置到文档中：若要将按钮元件的实例放置到文档中：若要将按钮元件的实例放置到文档中：若要将按钮元件的实例放置到文档中：n n打开打开“ “库库” ”面板。面板。 n n将按钮元件拖到文档中。将按钮元件拖到文档中。 n n若要将更多按钮元件实例放置到文档中，请执行下列操作若要将更多按钮元件实例放置到文档中，请执行下列操作若要将更多按钮元件实例放置到文档中，请执行下列操作若要将更多按钮元件实例放置到文档中，请执行下列操作之一：之一：之一：之一：n n选择一个实例，然后选择选择一个实例，然后选择“ “编辑编辑” ”“克隆克隆” ”直接将另一个实例放直接将另一个实例
18、放在所选实例的前面。此新实例即变为所选对象。在所选实例的前面。此新实例即变为所选对象。 提示：提示：提示：提示：在创建对在创建对齐的导航栏时使用克隆按钮实例的方法是很方便的，因为您可以齐的导航栏时使用克隆按钮实例的方法是很方便的，因为您可以使用箭头键沿一个方向移动克隆的实例，同时与另一个位置坐标使用箭头键沿一个方向移动克隆的实例，同时与另一个位置坐标保持对齐。保持对齐。n n将另一个按钮实例从将另一个按钮实例从“ “库库” ”面板拖到文档中。面板拖到文档中。 n n按住按住 Alt Alt 键并拖动画布上的一个实例以创建另一个按钮实例。键并拖动画布上的一个实例以创建另一个按钮实例。 n n复制
19、一个实例，然后粘贴更多实例。复制一个实例，然后粘贴更多实例。导入按钮元件导入按钮元件n n“ “库库” ”面板中的按钮元件是特定于文档的。如果您已经打开了一个文面板中的按钮元件是特定于文档的。如果您已经打开了一个文档，并且在档，并且在“ “库库” ”面板中已经有一些元件，则如果再创建一个新文档，面板中已经有一些元件，则如果再创建一个新文档，该新文档中的该新文档中的“ “库库” ”面板将是空的。但是，从一个库或另一个面板将是空的。但是，从一个库或另一个 Fireworks Fireworks 文档将按钮元件导入文档的文档将按钮元件导入文档的“ “库库” ”面板的方法有多种。面板的方法有多种。n
20、n若要将按钮元件导入一个文档的若要将按钮元件导入一个文档的若要将按钮元件导入一个文档的若要将按钮元件导入一个文档的“ “库库库库” ”面板，请执行下列操作之一：面板，请执行下列操作之一：面板，请执行下列操作之一：面板，请执行下列操作之一：n n将按钮实例从其它将按钮实例从其它 Fireworks Fireworks 文档拖放到该文档中。文档拖放到该文档中。 n n将按钮实例从其它将按钮实例从其它 Fireworks Fireworks 文档剪切并粘贴到该文档中。文档剪切并粘贴到该文档中。 n n从某个从某个 Fireworks PNG Fireworks PNG 文件中导入按钮元件。文件中导入
21、按钮元件。 n n将按钮元件从其它将按钮元件从其它 Fireworks Fireworks 文档导出到文档导出到 PNG PNG 库文件中，然后将按钮元库文件中，然后将按钮元件从件从 PNG PNG 库文件导入到该文档中。库文件导入到该文档中。 n n选择选择“ “编辑编辑” ”“库库” ”，并将按钮元件从子菜单的按钮库导入到该文档的，并将按钮元件从子菜单的按钮库导入到该文档的“ “库库” ”面板中。这些库包含由面板中。这些库包含由 Macromedia Macromedia 准备的种类繁多的预制按钮元准备的种类繁多的预制按钮元件。件。 n n导入和导出按钮元件就象导入和导出动画和图形元件一样
22、。导入和导出按钮元件就象导入和导出动画和图形元件一样。编辑按钮元件编辑按钮元件n nFireworks 按钮元件是一种特殊的元件。它们具有两种属性： 当您编辑元件的实例时，某些属性将在所有实例中发生更改，而其它属性则只影响当前实例。n n使用 Fireworks 按钮元件，您就可以利用元件带来的方便，即在编辑一个按钮实例的某些属性（如文本）时不会影响其它实例编辑元件级属性编辑元件级属性n n在在“ “按钮编辑器按钮编辑器” ”中可以编辑按钮元件。可以修改的实例属性是指在中可以编辑按钮元件。可以修改的实例属性是指在导航栏按钮中通常一致的属性：导航栏按钮中通常一致的属性：n n对图形外观（如笔触颜
23、色和类型、填充颜色和类型、路径形状以及图像）对图形外观（如笔触颜色和类型、填充颜色和类型、路径形状以及图像）的改进的改进 n n应用于按钮元件中的各个对象的动态滤镜或不透明度应用于按钮元件中的各个对象的动态滤镜或不透明度 n n活动区域的大小和位置活动区域的大小和位置 n n核心按钮行为核心按钮行为 n n优化和导出设置优化和导出设置 n nURL URL 链接（也可用作实例级属性）链接（也可用作实例级属性） n n目标帧（也可用作实例级属性）目标帧（也可用作实例级属性） n n若要编辑元件级的按钮属性：若要编辑元件级的按钮属性：若要编辑元件级的按钮属性：若要编辑元件级的按钮属性：n n执行下
24、列操作之一以便在按钮编辑器中打开按钮：执行下列操作之一以便在按钮编辑器中打开按钮： n n双击工作区中的按钮实例。双击工作区中的按钮实例。 n n在在“ “库库” ”面板中，双击按钮预览或按钮元件旁边的元件图标。面板中，双击按钮预览或按钮元件旁边的元件图标。 n n更改按钮的特性，然后单击更改按钮的特性，然后单击“ “完成完成” ”。 所做的更改将应用于按钮元件的所做的更改将应用于按钮元件的所有实例。所有实例。编辑实例级属性编辑实例级属性n n选择单个实例后，可在选择单个实例后，可在“ “属性属性” ”检查器中编辑实例级属性。您可以更检查器中编辑实例级属性。您可以更改实例的这些属性，而不会影响
25、该元件的关联元件或任何其它实例。改实例的这些属性，而不会影响该元件的关联元件或任何其它实例。在一系列按钮中，这些属性通常随按钮的不同而不同：在一系列按钮中，这些属性通常随按钮的不同而不同：n n实例的对象名称，它出现在实例的对象名称，它出现在“ “层层” ”面板上，并用于在导出时为按钮实例面板上，并用于在导出时为按钮实例命名导出的切片命名导出的切片 n n应用于整个实例的动态滤镜或不透明度应用于整个实例的动态滤镜或不透明度 n n文本字符和文本格式，如字体、字号、方向和颜色文本字符和文本格式，如字体、字号、方向和颜色 n nURL URL 链接（优先于以元件级属性形式存在的任何链接（优先于以元
26、件级属性形式存在的任何 URLURL） n n替换图像描述替换图像描述 n n目标框架（优先于以元件级属性形式存在的任何目标框架）目标框架（优先于以元件级属性形式存在的任何目标框架） n n使用使用“ “行为行为” ”面板指定给实例的其它行为面板指定给实例的其它行为 n n导航栏内实例的导航栏内实例的“ “属性属性” ”检查器中的检查器中的“ “载入时显示按下状态载入时显示按下状态” ”选项选项 n n若要编辑单个按钮元件实例的实例级属性：若要编辑单个按钮元件实例的实例级属性：若要编辑单个按钮元件实例的实例级属性：若要编辑单个按钮元件实例的实例级属性：n n在工作区域中选择按钮实例。在工作区域
27、中选择按钮实例。 n n在在“ “属性属性” ”检查器中设置属性。检查器中设置属性。 设置交互按钮属性设置交互按钮属性n n使用 Fireworks 可以控制按钮的交互元素，包括活动区域、URL、目标和替换图像描述。 创建导航栏创建导航栏n n导航栏是指提供到网站不同区域的链接的一组按钮。它通常在整个站点保持导航栏是指提供到网站不同区域的链接的一组按钮。它通常在整个站点保持一致，从而可以提供一种固定的导航方法，而不管用户处在站点中的什么位一致，从而可以提供一种固定的导航方法，而不管用户处在站点中的什么位置上。所有网页的导航栏外观都是一样的，但在某些情况下，这些链接可能置上。所有网页的导航栏外观
28、都是一样的，但在某些情况下，这些链接可能会特定于每个页面的功能。会特定于每个页面的功能。n n您可以在您可以在 Fireworks Fireworks 中制作导航栏，方法是：首先在按钮编辑器中创建一个按中制作导航栏，方法是：首先在按钮编辑器中创建一个按钮元件，然后将该元件的实例放到工作区中。钮元件，然后将该元件的实例放到工作区中。n n若要创建基本导航栏：若要创建基本导航栏：若要创建基本导航栏：若要创建基本导航栏：1. 1.创建一个按钮元件。有关更多信息，请参阅创建一个按钮元件。有关更多信息，请参阅创建按钮元件创建按钮元件。 2. 2.从从“ “库库” ”面板中，将该元件的一个实例（副本）拖到
29、工作区中。面板中，将该元件的一个实例（副本）拖到工作区中。 3. 3.执行下列操作之一以便制作一个按钮实例副本：执行下列操作之一以便制作一个按钮实例副本： n n选择该按钮实例，然后选择选择该按钮实例，然后选择“ “编辑编辑” ”“克隆克隆” ”。 n n按住按住 Alt Alt 键（在键（在 Windows Windows 中）或中）或 Option Option 键（在键（在 Macintosh Macintosh 中）并拖动该按钮实例。中）并拖动该按钮实例。 4. 4.按住按住 Shift Shift 键并拖动按钮可使其水平或垂直对齐。如果要进行更为精确的控制，请键并拖动按钮可使其水平或
30、垂直对齐。如果要进行更为精确的控制，请使用箭头键来移动实例。使用箭头键来移动实例。 5. 5.重复步骤重复步骤 3 3 和和 4 4，创建其它按钮实例。，创建其它按钮实例。 6. 6.选择每个实例，然后使用选择每个实例，然后使用“ “属性属性” ”检查器为其指定唯一的文本、检查器为其指定唯一的文本、URL URL 和其它属性。和其它属性。创建弹出菜单创建弹出菜单n n当用户将指针移到触发网页对象（如切片或热点）当用户将指针移到触发网页对象（如切片或热点）上或单击这些对象时，浏览器中将显示弹出菜单。上或单击这些对象时，浏览器中将显示弹出菜单。您可以将您可以将 URL URL 链接附加到弹出菜单项
31、以便于导航。链接附加到弹出菜单项以便于导航。例如，可以使用弹出菜单来组织与导航栏中的某例如，可以使用弹出菜单来组织与导航栏中的某个按钮相关的若干个导航选项。您可以根据需要个按钮相关的若干个导航选项。您可以根据需要在弹出菜单中创建任意多级子菜单。在弹出菜单中创建任意多级子菜单。n n每个弹出菜单项都以每个弹出菜单项都以 HTML HTML 或图像单元格的形式或图像单元格的形式显示，并具有显示，并具有“ “弹起弹起” ”状态和状态和“ “滑过滑过” ”状态，并状态，并且在这两种状态中都包含文本。若要预览弹出菜且在这两种状态中都包含文本。若要预览弹出菜单，请按单，请按 F12 F12 键在浏览器中预览。键在浏览器中预览。Fireworks Fireworks 工作工作区中的预览不会显示弹出菜单。区中的预览不会显示弹出菜单。
