创建按钮元件
编辑按钮元件
创建按钮元件
按钮是一种特殊的元件，用作网页的导航元素。可以使用“属性”检查器轻松编辑按钮。由于您可以将按钮的实例从元件库拖到文档中，因此您可以更改单个按钮的图形外观，自动更新导航栏中所有按钮实例的外观。
可以编辑一个按钮实例的文本、URL 和目标，而不会影响该按钮的其它实例并且不会断开元件和实例之间的关系。
按钮实例是经过封装的。Fireworks 将移动与您拖入文档中的按钮相关联的所有组件和状态。
与其它元件一样，按钮有一个注册点，即帮助您在编辑按钮时将文本和不同按钮状态对齐的中心点。
选择要转换为按钮的对象。
选择“修改”>“元件”>“转换为元件”。
在“转换为元件”对话框中，输入按钮的名称。
在“类型”选项中，选择“按钮”。
（可选）若要为按钮启用 9 切片缩放，请选择“启用 9 切片缩放辅助线”。
（可选）若要将图形作为按钮保存到 Fireworks 的图形库中，请选中“保存到公用库”。
对按钮应用状态
按钮最多可具有四种不同的状态，表示按钮在响应鼠标事件时的外观。具有两种状态的按钮包含“弹起”和“按下”状态。具有三种或四种状态的按钮还包括“滑过”状态和“按下时滑过”状态。这些状态表示指针滑过按钮时按钮的外观，按钮会弹起（滑过）或按下（按下时滑过）。
您可以使用具有两种状态或三种状态的按钮创建导航栏。但是，只有包含所有四种状态的按钮才能利用 Fireworks 中内置的导航栏行为。
创建具有两种状态的简单按钮
若要进入元件编辑模式，请执行下列任一操作：
双击画布上的现有按钮。
选择“编辑”>“插入”>“新建按钮”。
执行下列操作之一，导入或创建“弹起”状态图形：
将要显示为按钮的“弹起”状态的图像拖放或导入相应的工作区中。
使用绘图工具创建一个图形，或者使用“文本”工具创建基于文本的按钮。
单击“属性”检查器中的“导入按钮”，并从“导入元件: 按钮”库中选择已准备好的可编辑按钮。使用此选项，每个按钮状态都会自动填充相应的图形和文本。
（可选）对 9 切片缩放辅助线进行设置，以便在调整按钮大小时不会使按钮形状扭曲。（请参阅对元件应用 9 切片辅助线。）
（可选）选择“文本”工具，然后创建按钮的文本。
若要创建“滑过”状态，请从弹出菜单中选择“滑过”并执行下列操作之一：
单击“复制弹起时的图形”将“弹起”状态按钮的副本粘贴到“滑过”窗口中，然后对其进行编辑。
拖放、导入或绘制图形。
（可选）若要使用动态滤镜创建每种状态的常用外观，请选择要添加动态滤镜的图形，然后在“属性”检查器中单击“滤镜”标记旁边的加号 (+) 图标。
选择“斜角和浮雕”>“内斜角”、“凹入浮雕”、“外斜角”或“凸起浮雕”。
为每个状态选择按钮预设滤镜。
按钮预设滤镜
描述
凸起
斜角看起来是从下方的对象向外凸起的。
高亮显示
按钮的颜色变亮。
凹入
斜角看起来是向下方的对象内部凹入的。
反转
斜角看起来是向下方的对象内部凹入的，并且颜色变亮。
创建具有三种或四种状态的按钮
尽管不强制使用具有四种状态的按钮，但是使用它们使您能够利用内置的导航栏行为。
在元件编辑模式下在画布中打开具有两种状态的按钮，从“属性”检查器的弹出菜单中选择“按下”，然后执行下列操作之一：
单击“复制滑过时的图形”将“滑过”状态按钮的一个副本粘贴到“按下”窗口中，然后对其进行编辑以更改它的外观。
拖放、导入或绘制图形。
若要添加“按下时滑过”状态，请确认“按下”状态按钮是打开的，然后重复步骤 1。
（可选）对按钮应用预设滤镜。
注： 当您为“按下”或“按下时滑过”状态插入或创建图形时，将自动选中用于在导航栏中包括该状态的选项。
将 Fireworks 变换图像转换为按钮
您可以将使用以前版本的 Fireworks 创建的变换图像转换为按钮，然后将它们保存在库中。有关变换图像的详细信息，请参阅交互切片。
删除覆盖变换图像的切片或热点。
从“状态”面板的“洋葱皮”菜单中选择“显示所有状态”。
选择要在按钮中包括的所有对象。使用“选择后方对象”工具选择隐藏的对象。
选择“修改”>“元件”>“转换为元件”。
在“名称”框中输入元件的名称，然后选择“按钮”元件类型。
若要将包含四个状态的动画转换为按钮，请选择所有四个对象，将每个对象置于其各自的按钮状态下。
插入和导入按钮元件
您可以从“公用库”面板中将按钮元件的实例插入到文档中。也可以将现有按钮元件导入新文档的“文档库”面板中。有关详细信息，请参阅导入和导出元件。
若要将按钮的实例插入到文档中，请打开“公用库”面板，然后将按钮元件拖到文档中。
若要放置按钮元件的更多实例，请执行下列操作之一：
选择一个实例，然后选择“编辑”>“克隆”直接将另一个实例放在所选实例的前面。此新实例即变为所选对象。
将另一个按钮实例从“文档库”面板拖到文档中。
按住 Alt（在 Windows 中）或 Option（在 Mac OS 中）并拖动画布上的一个实例以创建另一个按钮实例。
复制一个实例，然后粘贴更多实例。
若要将按钮元件导入新文档的“文档库”面板中，请执行下列操作之一：
从另一个 Fireworks 文档拖放（或剪切后粘贴）按钮实例。
从 Fireworks PNG 文件中导入按钮元件。
将按钮元件从其它 Fireworks 文档导出到 PNG 库文件中，然后将按钮元件从 PNG 库文件导入到该文档中。
从“文档库”面板的“选项”菜单中选择“导入元件”。这些库包含由 Adobe 准备的种类繁多的预制按钮元件。
编辑按钮元件
您可以编辑元件级按钮属性的多个实例，也可以编辑按钮属性的单个实例。
编辑元件级的按钮属性
双击该按钮以更改按钮的特性。单击画布顶部的页面图标，或者在按钮外部双击以返回画布。
可编辑的元件级按钮属性在导航栏中的按钮之间通常保持一致。参见以下示例：
图形外观，如笔触颜色和类型、填充颜色和类型、路径形状以及图像
应用于按钮元件中的各个对象的动态滤镜或不透明度
活动区域的大小和位置
核心按钮行为
优化和导出设置
URL 链接（也可用作实例级属性）
目标（也可用作实例级属性）
编辑实例级的按钮属性
在工作区中选择按钮实例，然后在“属性”检查器中设置属性。
在一个按钮系列中，可编辑的实例级属性通常随按钮的不同而不同。您可以更改实例的实例级属性，而不会影响关联元件或该元件的任何其它实例。参见以下示例：
实例的对象名称，它显示在“层”面板中，用于在导出时为按钮实例命名导出的切片
应用于整个实例的动态滤镜或不透明度
文本字符和文本格式
URL 链接（优先于以元件级属性形式存在的任何 URL）
替换图像描述
目标（优先于以元件级属性形式存在的任何目标框架）
使用“行为”面板为实例指定的其它行为
导航栏内实例的“属性”检查器中的“载入时显示按下状态”选项
注： 当您从“HTML 设置”对话框的“文档特定信息”部分选择“导出多个文件”选项并导出导航栏时，Fireworks 会将每个 HTML 页面与相应按钮的“按下”状态一起导出。请参阅设置 HTML 导出选项。
设置交互按钮属性
您可以控制按钮的以下交互元素：
活动区域
当用户在 Web 浏览器中将指针滑过活动区域或单击它时，活动区域将触发交互作用。按钮的活动区域是元件级属性，并且是按钮元件所独有的。从弹出菜单中选择“活动区域”，以编辑按钮切片或绘制热点对象。如果您绘制新切片，则新切片会替换以前的切片。
按钮元件或实例的 URL
URL 可以是元件级按钮属性，也可以是实例级按钮属性。它将按钮链接到另一个网页、网站或相同网页上的锚点。可以在“属性”检查器或“URL”面板中将 URL 附加到所选按钮实例上。
按钮目标
按钮目标是指在单击按钮实例时用来显示目标网页的窗口或框架。如果没有在“属性”检查器中输入目标，则网页将显示在调用它的链接所在的框架或窗口中。目标可以是元件级按钮属性，也可以是实例级按钮属性。您可以设置元件的目标，以使该元件的所有实例都具有相同的目标选项。
按钮元件或实例的替换文本
下载图像时，替换文本将出现在图像占位符上方或图像占位符附近；如果下载失败，则替换文本将替换图像。如果用户将浏览器设置为不显示图像，则替换文本也会替换图形。替换文本可以是元件级按钮属性，也可以是实例级按钮属性。
编辑交互按钮属性
注： 更改按钮元件的目标、URL 或替换文本不会更改该元件的现有按钮实例。
在元件编辑模式下打开按钮元件。
执行下列操作之一：
若要在按钮元件的活动区域中编辑某个切片或热点，请从属性检查器的弹出菜单中选择“活动区域”。使用指针工具移动或改变切片或切片辅助线的形状。或者，使用任一切片或热点工具来绘制新的活动区域。
若要设置按钮元件的 URL，请从弹出菜单中选择“活动区域”。然后在“属性”检查器中的“链接”框中输入 URL，从列表中选择一个页面，或从“URL”面板中选择一个 URL。
注： 在输入站点内的绝对 URL 时，可以将 URL 附加到元件，以便使每个实例的“属性”检查器的“链接”框中显示相同的 URL。
若要设置按钮元件的目标，请在工作区中打开该按钮。然后，在“目标”框中输入目标，或从“属性”检查器中的“目标”菜单中选择以下预设目标之一：
“无”或“_self”
将网页加载到链接所在的框架或窗口中
_blank
将网页加载到一个新的未命名的浏览器窗口中
_parent
将网页加载到该链接所在框架的父框架集或窗口中
_top
将网页加载到整个浏览器窗口中并删除所有框架
若要设置按钮元件或按钮实例的替换文本，请在工作区中选择相应的按钮实例。然后，在“属性”检查器中输入要应用的文本或描述。
,
