创建按钮和弹出菜单.ppt

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