《网页制作教程(8.0版)》第12章

第12章文本和位图的应用创建和编辑切片创建和应用元件制作网页动画优化并导出图像和动画12.1创建和编辑切片12.1.1创建切片切片可将Fireworks文档分割成多个较小的部分，并将每部分导出为单独的文件。12.1.2编辑切片如果对绘制的切片不满意，可以使用“指针”工具或“部分选定”工具进行编辑，另外，也可显示或隐藏切片。1．显示或隐藏切片2．改变切片尺寸、颜色等范例1用“切片”工具分割“饰品”网页效果图本例通过使用“切片”工具切割现有的网页效果图，来学习其在实际网页制作中的应用（具体操作见视频12-1）。12.2创建和应用元件12.2.1创建元件选择“编辑”>“插入”>“新建元件”菜单，可打开“元件属性”对话框。在“名称”文本框中可输入元件名，在“类型”区域可选择元件的类型。12.2.2应用元件用鼠标将元件从“库”面板中拖放到文档编辑界面，就可以在作品中应用该元件，此时的元件称为实例，一个元件可以对应多个实例。当选中实例时，其左下角将显示一个图标。范例2制作网页导航条本例中的导航条是由多个按钮元件组成的，安排本例的主要目的是让读者练习一下元件的创建和应用（具体操作见视频12-2）。

12.3制作网页动画12.3.1Fireworks中动画制作要点

使用Fireworks制作动画的要点如下：使用Fireworks制作动画的原理是：在不同的帧设置不同的层（注意，不是对象子层）内容。如果希望某些层内容出现在所有帧中，应将其设置为共享层。12.3.2利用现有素材创建简单动画启动Fireworks后，选择“文件”>“打开”菜单，在打开的“打开”对话框中，选择本书“素材与实例\Fireworks\chapter12”文件夹中的“1.jpg”、“2.jpg”和“3.jpg”，然后选中对话框下方的“以动画打开”复选框，最后单击“打开”按钮。

12.3.3使用分散到帧在“帧”面板下方，“新建/重制帧”按钮的左侧有一个“分散到帧”按钮。利用该按钮，可将同一个帧中的多个对象分散到不同的帧中。这样，我们可以在一个帧里先绘制好物体运动过程中的多个对象，并按照其运动轨迹排列好，然后将这些对象分散到不同的帧，这样就完成了动画的制作（具体操作见视频12.3.3）。

12.3.4补间动画补间动画又称为过渡动画，制作补间动画时，系统实际上是根据元件的两个形态自动生成中间形态，并将这些中间形态分别放在不同的帧中。因此，制作补间动画时，图形元件不能位于共享层。本节采用补间的方法，制作太阳升起落下的效果。

将太阳转换为“图形”元件，并创建实例选择“修改”>“元件”>“补间实例”菜单，在打开的对话框中设置各项参数后单击“确定”按钮12.3.5制作动画元件使用动画元件可以方便快捷地实现类似于运动、淡入淡出、旋转或缩放等效果。选中要转换为动画元件的对象选择“修改”>“动画”>“选择动画”菜单，打开“动画”对话框设置各项后，单击“确定”按钮，系统会提示是否添加新帧，单击“确定”按钮创建动画元件范例3制作网店标志本例通过制作一个网店标志，来总结一下前面学习的动画制作方法（具体操作见视频12-3）。12.4优化并导出图像和动画12.4.1使用“导出向导”如果对优化和导出网页图像不是很熟悉，可以使用“导出向导”。在制作好网页图像后，选择“文件”>“导出向导”菜单，可打开“导出向导”对话框，依次回答出现的问题，并在每个面板中单击“继续”，最后将打开“图像预览”对话框范例4优化并导出网店标志本节以范例3中制作的网店标志为例，来学习优化并导出动画文件的方法（具体操作见视频12-4）。12.4.2使用“优化”面板将“优化”面板和文档窗口上方的“预览”按钮结合使用，可以很方便地为文档设置优化参数。选择“窗口”>“优化”菜单，可打开“优化”面板。范例5优