第34章 创建和编辑按钮、导航条、.pptxVIP

第34章创建和编辑按钮、导航条、动画本章目标学会制作按钮。学会制作导航条。学会制作动画。34.1 创建和编辑按钮按钮是网页中最常见的元素，利用按钮可以实现页面内以及网页与网页之间的切换，即导航。利用Fireworks 8创建按钮非常容易，不用编写JavaScript代码，就可以方便地创建多种具有交互行为的动感的精美按钮。34.1.1 创建按钮和按钮编辑器在制作网页时，如果有一些漂亮的Fireworks动态按钮将会使网页增色不少。Fireworks 8的按钮编辑器将引导用户完成按钮的创建，获得一个便于使用的精美按钮元件。34.1.1.1 创建按钮下面通过一个简单的例子来介绍一个按钮的制作过程。（1）绘制一个黄色矩形图形，单击“修改/元件/转换为元件”选单命令，弹出“元件属性”对话框，在该对话框的“名称”文本框中输入按钮的名称，并在“类型”选项组中单击“按钮”单选项，再单击“确定”按钮，关闭该对话框。（2）可以看到矩形变为浅绿色，并且在左下角出现一个小箭头标志。（3）双击该按钮，或者单击“修改/元件/编辑元件”选单命令，弹出“按钮编辑器”。（4）在“释放”选项卡中，为按钮添加文本标注。使用工具箱中的“文本”工具，在按钮中输入文字“新浪”。（5）选择输入的文字，在”属性”面板中编辑文字，滤镜设置为“斜角和浮雕/凸起浮雕”。（6）选择画布中的按钮，使用“属性”面板编辑按钮，滤镜设置为“斜角和浮雕/外斜角”。（7）设置完成后，单击“修改/组合”将其文字和按钮组成一体。（8）单击按钮编辑器中的“完成”按钮，按钮制作完成。注意：除了图像，还可以在按钮中加入文字。单击“有效区域”选项卡，我们看到一个切片对角，这个切片定义了此按钮的活动范围，可以使用“属性面板”来定义URL和其他链接属性。在创建“按下”状态和“按下时滑过”状态图形时，会自动选择“包括导航栏按下状态”和“包括导航栏按下后滑过状态”选项。此按钮状态适用于导航栏中的按钮。34.1.1.2 按钮编辑器双击元件按钮实例，或者单击“修改/元件/编辑元件”选单命令，弹出“按钮编辑器”，在按钮编辑器中可以创建按钮在不同状态时的图像。在按钮编辑器中有5个选项卡，各选项卡的作用介绍如下：“释放”：按钮弹起状态时的常规状态。“滑过”：指鼠标在按钮上方时的状态。“按下”：按钮被按下时的状态。“按下时滑过”：指按钮被按下这一过程的状态。“有效区域”：指在按钮上鼠标移入或单击有效果的区域。根据需要创建的按钮可以有至少两个以上的状态，完成按钮的各个状态后，单击“完成”按钮，即可关闭按钮编辑器，同时在文档窗口中出现新建的按钮，Fireworks自动将按钮制作成一个切片。34.1.2 编辑按钮、创建按钮的链接打开要编辑的按钮，可执行如下操作之一：方法一：打开要编辑的按钮，在画布中双击按钮，便打开了按钮编辑器,可以进行编辑。方法二：单击“库”面板中的按钮名称，再单击“库”面板选单中的“编辑元件”命令。方法三：单击画布中的按钮，利用其“属性”面板也可以编辑按钮。34.1.2.2 创建按钮的链接给按钮添加URL链接地址与给热点添加URL链接地址相同。在按钮的“属性”面板内“链接”文本列表框中输入一个URL地址，也可以输入文件名（可以是HTML文件或图像文件等）或选择一个HTML文件。可以在“替代”文本框中输入替代文字，在“目标”列表框中选择网页显示的目标位置等。在完成按钮编辑时即可关闭按钮编辑器，并在Fireworks“原始”窗口中看到所编辑的按钮，单击“浏览”按钮，可显示所编辑按钮的导出状态。如果不满意还可以继续编辑，直至达到要求为止。34.2 创建导航栏导航栏是指网页中可以链接到不同网页的一组按钮。它通常在整个站点保持一致，从而可以提供一种固定的导航方法，而不管用户处在站点中的什么网页位置上。通常，一个站点中所有网页的导航栏外观是一样的。在Fireworks中创建导航栏，操作步骤如下：（1）选择创建的按钮，或者从“库”面板中把按钮拖放到画布上。（2）按住Alt键拖动该按钮，或者选择“编辑/克隆”命令，复制出一组按钮。（3）移动上一步复制出的按钮到合适的位置。（4）分别选定按钮，修改按钮的文本、链接等对象。34.3 制 作 动 画可以形象地将动画看成是由多帧图像组合在一起而形成的，动画中的每一帧都有不同的图像，在短时间内依次显示不同帧中的图像，就可以产生动画效果。34.3.1 创建动画元件34.3.1.1 元件和“库”面板Fireworks 8提供了3种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的特性。实例是Fireworks元件的表现形式。当对元件对象（原始对象）进行编辑时，实例（副本）会自动更改以反映对元件所做的修改。每当想重新使用图形元素时，元件很有用。可将实例放在