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

《网页设计与制作ppt（第二版）第6章 fireworks基本应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章Fireworks基本应用本章内容提要：1.元件的创建与使用2.按钮与导航条的制作3.切片与弹出菜单4.制作基本帧动画5.制作补间动画本章目标任务：1.掌握fireworks中元件的使用；2.熟悉按钮、导航条、切片的制作方法；3.熟悉fireworks的动画制作方法；元件的创建与使用Fireworks提供三种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的独特特性。实例是Fireworks元件的表示形式。当对元件对象（原始对象）进行编辑时，实例（副本）会自动更改以反映对元件所做的修改。元件对于创建按钮以及通过多

2、个帧中的对象制作动画很有帮助。创建元件可以从任何对象、文本块或组中创建元件，然后在“库”面板中对其进行组织。若要在文档中放置实例，只需将其从“库”面板拖到画布上。导入和导出元件在当前文档中创建的动画、图形和按钮元件都储存在“库”面板中。该面板还储存您导入到当前文档中的元件。虽然“库”面板是特定于当前文档的，但是通过导入和导出、剪切和粘贴或拖放操作，可以在多个Fireworks文档中使用一个库中的元件。可以从其它库导入元件。反之，如果创建了希望重新使用或共享的元件，则可以导出您自己的元件库。导出元件库时，它是作为PNG文件导出的。制作按钮

3、按钮是网页的导航元素。Fireworks中，按钮是在按钮编辑器中创建的。既可从头创建新按钮，也可以将现有对象转换为按钮。按钮是一种特殊类型的元件，可以将它从“库”面板中拖到文档中。通常，按钮有四种不同的状态。每种状态表示该按钮在响应各种鼠标事件时的外观：“弹起”状态是按钮的默认外观或静止时的外观。“滑过”状态是当指针滑过按钮时该按钮的外观。此状态提醒用户单击鼠标时很可能会引发一个动作。“按下”状态表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。“按下时滑过”状态是在用户将指针滑过处于“按下”状态的按钮时按钮的外观。【实例6.1】

4、创建一个有两种状态的简单按钮（1）执行“编辑”→“插入”→“新建按钮”菜单命令，打开按钮编辑器，编辑器有5个选项卡，其中前4种对应4中不同的按钮状态。第5个选型卡用来设置“有效区域”,即按钮对鼠标的反应区域。（2）选择工具面板上的“圆角矩形”工具，在“释放”选项卡的编辑区域，画一个圆角矩形，填充一个从深蓝到浅蓝的渐变颜色，并在属性面板上给图形添加滤镜效果“阴影和光晕”→“内侧发光”，内发光的颜色为“深蓝色”。（3）插入文字“首页”，字体为“黑体”，效果如图3所示。【实例6.1】创建一个有两种状态的简单按钮（4）选择“滑过”选项卡，点击窗

5、口中的【复制弹起时的图形】按钮，将“释放”状态的图像复制到“滑过”选项卡中。（5）用“部分选定”工具选中圆角矩形，修改渐变色为浅蓝到更浅的蓝，并将内侧发光的颜色改为较之前浅一些的蓝色，效果如图所示。【实例6.1】创建一个有两种状态的简单按钮（6）忽略“按下”和“按下时滑过”状态，单击“有效区域”选项卡，按钮编辑器会自动创建一个按钮大小的矩形切片，选择该切片，在属性面板中可以设置切片的链接等属性。（7）单击【完成】按钮，关闭按钮编辑器。可以在预览窗口中观察制作好的按钮。Fireworks还提供了如图所示的按钮导入库，单击按钮编辑器中的【导

6、入按钮】，然后从“按钮导入”库中选择一个现成的可编辑按钮。如果选择了该选项，就不必为创建其余的按钮状态而费心了。每个按钮状态中都会自动填充适当的图形和文本。【例6.2】创建基本导航栏1.创建如例6.1中的按钮元件。2.从“库”面板中，按住键盘上的Alt键，同时将该元件的一个实例拖到工作区中。使用键盘上的上下左右方向键微调按钮实例的位置，使按钮实例互相对齐。3.重复步骤2，添加其它按钮实例。4.选择每个按钮实例，然后使用“属性”面板修改该按钮实例的文本、URL等属性。效果如图所示。切片在网页上的图片较大的时候，浏览器下载整个图片的话需要花

7、较长的时间，切片的使用使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，能够节省很多时间。切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件。切片导出时，Fireworks还创建一个包含表格代码的HTML文件，以便在浏览器中重新组合图形。所以，切片是网页对象，它们不是以图像的形式存在，而是最终以HTML代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。【实例6.3】网页切片（1）打开图片文件“6qiepian.png”，这是一幅网页效果图，如图所示。【实例6.3】网页切

8、片（2）将图片文档窗口右下角的比例调整为200%，放大图片。选择工具面板上的“切片”工具。如图所示，绘制几个主要的切片，注意，要仔细切割，尽量对齐切片引导线。【实例6.3】网页切片（3）中中间两侧的切片是要