将JavaScript添加到Fireworks

“你能再给它一点……我不知道……皮扎兹吗？” 听说过吗？ 客户多久走进一次，看到一个网站的组成，尽管他们喜欢他们所看到的，但他们仍然觉得需要更多？ 您多久听到一次“您可以使其互动吗？”的问题。

当然，根据其性质，网站是交互式的。 但是，客户所寻找的金块表明，他们的网站-因此，他们的俗语-利用了最新技术。 诀窍是为您的客户提供一些小技巧，并保证无论使用哪种Web浏览器，您的窍门都将奏效。

Macromedia Fireworks配备了完整的工具库，这些工具可进行丰富的交互，并使您将客户带到设计之外 。 首先，您只需要学习一些参与规则，然后就可以与杀手级设计和完全互动的网站进行战斗。

订婚规则

用于向网站添加交互性的最常见方法是采用JavaScript。 JavaScript是主要Web浏览器支持的一种编程语言，它允许发生事件（例如图像交换，状态栏消息或弹出菜单）。 而且Fireworks可让您避免学习Javascript。 Fireworks在Behaviors Inspector中包含一组有用的JavaScript命令，如图1所示。Behaviors是可以容易地修改的JavaScript代码的预编程段。 如果您使用过Dreamweaver，您将认识到Behavior Inspector –它在两个程序中的工作方式和行为方式均相同。 实际上，除弹出菜单行为外，可以在Dreamweaver中修改Fireworks中添加的任何行为。

图1.行为检查器

行为检查器可将正确的JavaScript快速添加到图像。 而且只有一个规则适用：行为只能添加到图像上的热点或切片。 可以使用“热点”工具或“切片”工具来创建热点或切片，如图2所示。选择该工具并在Fireworks中创建的图像上进行绘制。 图2中的文本是使用Hotspot工具跟踪的。

图2.热点工具

热点工具用于在图形周围绘制区域，以便可以将行为应用于该新区域。

使用“切片”工具可以剪切图形的一部分。 导出图形时，它将被导出为包含图像集合的网页。 如果选择该网页并在Web浏览器中打开它，它将显示为完整图像。 实际上，该页面是一个HTML表格，其中几张图像排列在一起。 切片工具如图3所示。

图3.切片工具

Slice工具提供了更多的JavaScript交互选择，并且比Hotspot工具具有优势，因为它允许交换图像。 稍后将详细介绍此技巧。

第一次行为

第一个行为是一条简单的状态栏消息。 在活动模式下，当用户将光标移到图形的某个部分上时，状态栏行为将在Web浏览器的状态栏中显示一条消息。

以假设的GarageSale.com网站为例。 该网站的标题是GarageSale.com，我们将状态栏行为附加到该网站的徽标上。 如果右键单击Garagesale.com徽标，则会为您提供一组快速的菜单选项。 单击“插入热点”。 标题周围出现蓝色轮廓，指示热点已与图形关联。 接下来，打开“行为检查器”，如图4所示。

图4.行为检查器

行为检查器有五个主要行为。 在这里，选择“设置状态栏的文本”。

从“行为”检查器中，选择“ +”符号，然后选择“设置状态栏的文本”。 弹出窗口将要求您添加一个单行短语–让我们输入“ Got Junk？快来在这里出售！”，如图5所示。

图5.状态栏行为的设置文本是常用的JavaScript。

选择“确定”关闭窗口。 行为检查器现在会列出“状态栏的设置文本”。 仅当选择围绕标题的热点时，该操作才会显示在“行为”检查器上。 这使您可以将“行为”分组在一起。 行为检查器分为两个部分：事件和操作，如图6所示。

图6.事件和动作使您可以自定义“罐装”脚本之外的效果。

该行动定义了将会发生的事情。 在这种情况下，操作是“设置状态栏的文本”。 事件是导致动作发生的原因。 大多数“行为”的默认设置是“ onMouseOver”，即，当光标移到图形的适当部分上时，将激活该动作。 其他活动包括：

• onMouseOut
• onClick
• 负载

事件“ onMouseOut”将导致动作在光标离开图像时发生。 例如，当鼠标移入和移出按钮图形的空间时，过渡按钮的外观将发生变化。 “ onClick”仅在用户单击图形时触发操作。 最后，在用户的浏览器加载网页时，将执行“ onLoad”事件。

所有这些操作都使用JavaScript在网页中产生效果。 您可以放心，这些脚本将在Netscape的Navigator 3和Microsoft的Internet Explorer 3及更高版本中运行（状态栏行为的设置文本将在Netscape 2.02+中运行）。

下一步是在Web浏览器中预览您的工作-打开浏览器并加载页面。 图7显示了将光标移到页面标题上方时浏览器的状态栏将如何变化。

图7. Web浏览器的状态栏现在显示为“ Got Junk？快来这里出售！”

图像交换

第二个最常用的行为是“图像交换”-数百万个网站具有按钮，其外观会随着光标在其上移动而改变。

产生此效果的行为称为“简单过渡”。 为了使此行为正常工作，附加了简单过渡的图像必须是“切片图像”，并且图形必须至少两帧长。

GarageSale.com网站使用按钮进行导航。 当用户在导航栏上移动时，每个按钮都会被修改为带有阴影。 要创建此效果，您将需要两个框架，因此在“框架”检查器中添加第二个框架。 选择第二帧，您的画布将变为空白。 要使整个电影的背景色保持一致，请将背景对象放置在自己的图层中。 将新图层重命名为“背景”，然后选择选项“跨框架共享”。 这尤其重要，因为GarageSale.com网站的按钮具有透明背景。 如果背景并非在所有帧中都一致，则翻转图像将具有白色背景，这将消除翻转效果的错觉。

现在，所有站点上的背景都一致，请选择包含按钮的图层-这还将选择每个按钮的文本。 选择编辑，然后选择复制，将图像放入内存。 接下来，选择第2帧。单击“编辑”，然后单击“粘贴”，将带有文本的按钮插入与第1帧中的对象完全相同的位置。但是现在这些是不同的对象。 选择第一个按钮并为其添加阴影实时效果，然后对其余按钮重复该过程。

图形更改已完成。 现在必须添加效果。 要创建“简单过渡”效果，必须将切片添加到每个按钮。 选择第2帧中的按钮，并使用右键单击菜单选项“插入切片”插入一个切片。 然后，选择第一个按钮，并在Behaviors Inspector打开的情况下，插入一个“ Simple Rollover”，如图8所示。请注意，如果在第1帧上创建切片，它们的大小将不足以覆盖阴影。 。 您应该选择第2帧上的按钮，然后选择“插入切片”。

图8.当插入简单过渡时，Behaviors Inspector将Frame 1图像替换为Frame 2图像。

按F12在Web浏览器中预览文件。 该效果通过将第1帧中的图像替换为第2帧中的相应图像而起作用。第二个Behavior替换了onMouseOut上的原始图像。

烟花新手4

Fireworks 4用户会发现，将“行为”插入“切片”或“热点”的一种简单方法是在图形中心选择目标。 图9演示了提供对行为的直接访问的目标。

图9. Fireworks 4使得无需打开Behaviors Inspector即可轻松访问Behaviors。

高级图像交换

“简单转换行为”的高级版本是“交换映像行为”。 从本质上讲，“交换图像行为”实现的结果与“简单滚动”相同，即，当光标选中一个图像时，该图像将被另一个图像替换。 交换图像的优势在于它允许您一次交换多个图像。 例如，用于GrarageSale.com导航的按钮上已应用了简单过渡。 此外，当光标悬停在每个按钮上时，站点中心的文本也会更改。 交换图像行为使这种情况成为可能。

选择一个按钮，然后应用“交换图像行为”。 交换图像行为，如图10所示，具有许多增强功能。

图10.交换图像使设计人员可以很好地控制要更改的图像。

交换图像窗口（显示在窗口的上半部分）显示在画布上图像的名称和位置。 可以在对象检查器中更改左栏中的名称。 或者，您可以从画布的右视图中选择要更改的图像。

图形的所有“切片”区域均显示在右侧框架中。 选择画布中央的文本。 现在，我们必须用另一个图像替换此切片中的图像。 为此，只需选择一个帧号。 效果与简单翻转相同，不同之处在于您可以选择任何框架来替换当前框架。 例如，每个按钮可以具有与之关联的相同行为，并且画布中心的文本可以更改为具有不同文本的不同帧号。

导出到网络

为了使所有这些正常工作，您需要以Web格式导出文件。 当您选择“文件”，“导出”时，Fireworks会将文件格式调整为HTML。 图11演示了它是如何工作的。

图11.保存类型为HTML和图像。

必须将文件类型选择为HTML，并将“切片”设置为“导出切片”的“图像”。 导出的文件将由许多图形文件和一个网页组成，现在可以将其发送到您的网站。 您可以在Dreamweaver中修改您在Fireworks中添加的“行为”。

使用Fireworks，您现在可以交付网页，让客户说“哇！那是PIZAZZ ！”。

From: https://www.sitepoint.com/add-javascript-fireworks/