计算机教程-第20章按钮和导航条.pdfVIP

下载 第20章 按钮和导航条 通过学习图像映像和切片技术，我们已经了解到，在 F i r e w o r k s 中不仅可以编辑图像，而 且还可以同时在图像上绑定 H T M L代码。然而无论切片也好、图像映像也好，它们在网页中 的表现都是静态的，换句话说，它们都作为一幅标准的图像显示在网页中，尽管单击相应的 热区和切片可能会跳转到其他地方，但是图片本身没有什么变化。 然而实际在I n t e r n e t 中，我们可以看到大量的具有交互特性的图像。其中最常见的就是按 钮，我们经常可以看到这样的情形：当将鼠标移动到一个按钮上方时，按钮图片显示为一种 状态；而将鼠标移离按钮上方时，按钮又显示成另一种状态。如果您了解 H T M L ，您一定知 道利用J a v a S c r i p t可以实现这些特性，然而，如果希望手工编写这些代码，同时将多种状态的 图片同代码相关联，工作量是很大的。 我们说过，在F i r e w o r k s 中不仅可以生成图像，而且可以绑定 H T M L 代码。连代码都可以 生成，那么还有什么同图像相关的操作不能由 F i r e w o r k s实现呢？实际上，在阅读了本章和第 2 1章之后，您就会发现，利用 F i r e w o r k s可以非常方便地构建多种复杂的按钮行为，以体现用 户同按钮的交互性。通过将这些操作同普通的图像操作结合起来，您就可以实现千变万化的 动态效果。 这一章，我们主要介绍如何在 F i r e w o r k s 中实现按钮和导航条等We b常见元素。 20.1 概述 按钮是网页中常见的元素。我们首先需要了解按钮的一些基本特征。 20.1.1 按钮的基本特征 单击按钮可以实现某种行为，或是进行某种操作。例如，单击一个按钮可以进入到一个 网站中，或是跳转到另一个页面上。利用按钮在页面中实现导航，是按钮最常见的用途。 最简单的按钮就是一幅图片（当然，为了美观，可能会将图片做成矩形的形状，然后使 用诸如内部斜面边等特效来形成立体效果，再在上面显示文字）。但是单击这种图片按钮时， 按钮图片本身并不发生任何变化，用户无法了解按钮是否被按下，或是确定单击操作是否生 效。特别重要的是，用户不知道这幅图片到底是不是按钮，是不是带有链接，因为将鼠标移 动到按钮上时，除了鼠标指针可能变成手的形状之外，没有其他任何特征。 为了解决这种问题，网页中经常使用多个图片来表示按钮的不同状态。例如，可以使用 一幅图片来表示按钮正常时的弹起状态，用另一幅图片表示鼠标移入按钮区域的状态，用第 三幅图片来表明按钮按下时的状态。通过使用 J a v a S c r i p t代码来实现按钮图片的这种动态交替， 就可以形成非常丰富的动感效果。图 2 0 - 1 显示了这种情形。 通常，我们将按钮的这种根据鼠标和动作变化而改变状态的特性称作“轮替”（R o l l o v e r ）， 可以说，轮替是按钮最重要的特征。在本章中所讨论的按钮都是具有轮替特性的按钮。为了 便于同原始的单图片风格的按钮在概念上相区别，我们还是将那种简单的单图片按钮称作 第2 0章 按钮和导航条 3 8 1 下载 “图片”，最多是“关联了行为或链接的图片”，而只将具有轮替效果的按钮称作真正的“按 钮”。 图20-1 按钮的多种状态 20.1.2 Fireworks对按钮的支持 在F i r e w o r k s 中，即便您对J a v a S c r i p t一无所知，您也能够轻松创建出多种轮替按钮。它提 供了称作“按钮编辑器”的工具，可以引导您轻松地完成对按钮的创建。在按钮编辑器中， 您可以像对待单独的对象那样绘制按钮的不同状态，而将这些不同状态的图片组合起来形成 轮替按钮的所有操作会全部由 F i r e w o r k s在后台完成。而一旦您根据需要修改了按钮中的文字 或形状，F i r e w o r k s会在您的允许下自动改变其他的状态图片，使不同状态下的按钮保持风格 一致。当然，尽管您可以在 F i r e w o r k s 的帮助下维持按钮中各个状态图片的风格一致，但是您 也可以设计使按钮的