网页设计与制作（第二版）第6章 Fireworks基本应用.ppt

第6章 Fireworks基本应用 本章内容提要： 1.元件的创建与使用 2.按钮与导航条的制作 3.切片与弹出菜单 4.制作基本帧动画 5.制作补间动画 本章目标任务： 1.掌握fireworks中元件的使用； 2.熟悉按钮、导航条、切片的制作方法； 3.熟悉fireworks的动画制作方法； 元件的创建与使用 Fireworks 提供三种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的独特特性。实例是 Fireworks 元件的表示形式。当对元件对象（原始对象）进行编辑时，实例（副本）会自动更改以反映对元件所做的修改。元件对于创建按钮以及通过多个帧中的对象制作动画很有帮助 。 创建元件 可以从任何对象、文本块或组中创建元件，然后在“库”面板中对其进行组织。若要在文档中放置实例，只需将其从“库”面板拖到画布上 。 导入和导出元件 在当前文档中创建的动画、图形和按钮元件都储存在“库”面板中。该面板还储存您导入到当前文档中的元件。虽然“库”面板是特定于当前文档的，但是通过导入和导出、剪切和粘贴或拖放操作，可以在多个 Fireworks 文档中使用一个库中的元件。可以从其它库导入元件。反之，如果创建了希望重新使用或共享的元件，则可以导出您自己的元件库。导出元件库时，它是作为 PNG 文件导出的。 制作按钮 按钮是网页的导航元素。Fireworks中，按钮是在按钮编辑器中创建的。既可从头创建新按钮，也可以将现有对象转换为按钮。按钮是一种特殊类型的元件，可以将它从“库”面板中拖到文档中。 通常，按钮有四种不同的状态。每种状态表示该按钮在响应各种鼠标事件时的外观： “弹起”状态是按钮的默认外观或静止时的外观。 “滑过”状态是当指针滑过按钮时该按钮的外观。此状态提醒用户单击鼠标时很可能会引发一个动作。 “按下”状态表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。 “按下时滑过”状态是在用户将指针滑过处于“按下”状态的按钮时按钮的外观。 【实例6.1】创建一个有两种状态的简单按钮 （1）执行“编辑”→“插入”→“新建按钮”菜单命令，打开按钮编辑器，编辑器有5个选项卡，其中前4种对应4中不同的按钮状态。第5个选型卡用来设置“有效区域”,即按钮对鼠标的反应区域。 （2）选择工具面板上的“圆角矩形”工具，在“释放”选项卡的编辑区域，画一个圆角矩形，填充一个从深蓝到浅蓝的渐变颜色，并在属性面板上给图形添加滤镜效果“阴影和光晕”→“内侧发光”，内发光的颜色为“深蓝色”。 （3）插入文字“首页”，字体为“黑体”，效果如图3所示。 【实例6.1】创建一个有两种状态的简单按钮 （4）选择“滑过”选项卡，点击窗口中的【复制弹起时的图形】按钮，将“释放”状态的图像复制到“滑过”选项卡中。 （5）用“部分选定”工具选中圆角矩形，修改渐变色为浅蓝到更浅的蓝，并将内侧发光的颜色改为较之前浅一些的蓝色，效果如图所示。 【实例6.1】创建一个有两种状态的简单按钮 （6）忽略“按下”和“按下时滑过”状态，单击“有效区域”选项卡，按钮编辑器会自动创建一个按钮大小的矩形切片，选择该切片，在属性面板中可以设置切片的链接等属性。 （7）单击【完成】按钮，关闭按钮编辑器。可以在预览窗口中观察制作好的按钮。 Fireworks还提供了如图所示的按钮导入库，单击按钮编辑器中的【导入按钮】，然后从“按钮导入”库中选择一个现成的可编辑按钮。如果选择了该选项，就不必为创建其余的按钮状态而费心了。每个按钮状态中都会自动填充适当的图形和文本。 【例6.2】创建基本导航栏 1.创建如例6.1中的按钮元件。 2.从“库”面板中，按住键盘上的Alt 键，同时将该元件的一个实例拖到工作区中。使用键盘上的上下左右方向键微调按钮实例的位置，使按钮实例互相对齐。 3.重复步骤2，添加其它按钮实例。 4.选择每个按钮实例，然后使用“属性”面板修改该按钮实例的文本、URL等属性。 效果如图所示。 切片 在网页上的图片较大的时候，浏览器下载整个图片的话需要花较长的时间，切片的使用使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，能够节省很多时间。 切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。切片导出时，Fireworks 还创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形。所以，切片是网页对象，它们不是以图像的形式存在，而是最终以 HTML 代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。 【实例6.3】网页切片 （1）打开图片文件“6qiepian.png”，这是一幅网页效果图，如图所示。 【实例6.3】网页切片 （2）将图片文档窗口右下角的比例调整为200%，放大图片。选择