将JavaScript添加到Fireworks

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

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

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

订婚规则

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

第541章
图1.行为检查器

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

第541章
图2.热点工具

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

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

第541章
图3.切片工具

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

第一次行为

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

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

第541章
图4.行为检查器

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

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

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

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

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

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

  • onMouseOut
  • onClick
  • 负载

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

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

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

第541章
图7. Web浏览器的状态栏现在显示为“ Got Junk?快来这里出售!”

图像交换

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

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

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

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

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

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

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

烟花新手4

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

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

高级图像交换

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

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

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

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

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

导出到网络

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

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值