第13课创建按钮和弹出菜单.pptVIP

精通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 包括几种导航栏行为，使得各个按钮之间似乎是相互关联的。例如，您可以创建类似于老式车载收音机按钮的导航栏按钮： 当用户单击某个按钮时，该按钮将保持按下状态，直至单击另一个按钮为止。 使用斜角滤镜绘制按钮状态 在创建每个按钮状态的图形时，可以应用预设的动态滤镜来创建每种状态的常用外观。