《网页制作精品教程(8.0版)》第12章.ppt

第第1212章章 文本和位图的应用文本和位图的应用 创建和编辑切片创建和编辑切片 创建和应用元件创建和应用元件 制作网页动画制作网页动画 优化并导出图像和动画优化并导出图像和动画 12.1 12.1 创建和编辑切片创建和编辑切片 12.1.1 12.1.1 创建切片创建切片 切片可将Fireworks文档分割成多个较小的部分，并将每部分导出为单独的文件。12.1.2 12.1.2 编辑切片编辑切片 如果对绘制的切片不满意，可以使用如果对绘制的切片不满意，可以使用“指针指针”工具或工具或“部分选定部分选定”工具进行编辑，另外，也工具进行编辑，另外，也可显示或隐藏切片。可显示或隐藏切片。1显示或隐藏切片2改变切片尺寸、颜色等 范例范例1 1 用用“切片切片”工具分割工具分割“饰品饰品”网页效果图网页效果图 本例通过使用本例通过使用“切片切片”工具切割现有的网页效工具切割现有的网页效果图，来学习其在实际网页制作中的应用（具果图，来学习其在实际网页制作中的应用（具体操作见视频体操作见视频12-112-1）。）。12.2 12.2 创建和应用元件创建和应用元件 12.2.1 12.2.1 创建元件创建元件 选择“编辑”“插入”“新建元件”菜单，可打开“元件属性”对话框。在“名称”文本框中可输入元件名，在“类型”区域可选择元件的类型。12.2.2 12.2.2 应用元件应用元件 用鼠标将元件从用鼠标将元件从“库库”面板中拖放到文档编辑面板中拖放到文档编辑界面，就可以在作品中应用该元件，此时的元界面，就可以在作品中应用该元件，此时的元件称为实例，一个元件可以对应多个实例。件称为实例，一个元件可以对应多个实例。当选中实例时，其左下角将显示一个当选中实例时，其左下角将显示一个 图标。图标。范例范例2 2 制作网页导航条制作网页导航条 本例中的导航条是由多个按钮元件组成的，安本例中的导航条是由多个按钮元件组成的，安排本例的主要目的是让读者练习一下元件的创排本例的主要目的是让读者练习一下元件的创建和应用（具体操作见视频建和应用（具体操作见视频12-212-2）。）。12.3 12.3 制作网页动画制作网页动画 12.3.1 Fireworks12.3.1 Fireworks中动画制作要点中动画制作要点 使用Fireworks制作动画的要点如下：使用Fireworks制作动画的原理是：在不同的帧设置不同的层（注意，不是对象子层）内容。如果希望某些层内容出现在所有帧中，应将其设置为共享层。12.3.2 12.3.2 利用现有素材创建简单动画利用现有素材创建简单动画 启动启动FireworksFireworks后，选择后，选择“文件文件”“打开打开”菜菜单，在打开的单，在打开的“打开打开”对话框中，选择本书对话框中，选择本书“素材与实例素材与实例Fireworkschapter12”Fireworkschapter12”文件夹中文件夹中的的“1.jpg”1.jpg”、“2.jpg”2.jpg”和和“3.jpg”3.jpg”，然后选，然后选中对话框下方的中对话框下方的“以动画打开以动画打开”复选框，最后复选框，最后单击单击“打开打开”按钮。按钮。12.3.3 12.3.3 使用分散到帧使用分散到帧 在在“帧帧”面板下方，面板下方，“新建新建/重制帧重制帧”按钮按钮 的左侧有一个的左侧有一个“分散到帧分散到帧”按钮按钮 。利用该。利用该按钮，可将同一个帧中的多个对象分散到不按钮，可将同一个帧中的多个对象分散到不同的帧中。这样，我们可以在一个帧里先绘同的帧中。这样，我们可以在一个帧里先绘制好物体运动过程中的多个对象，并按照其制好物体运动过程中的多个对象，并按照其运动轨迹排列好，然后将这些对象分散到不运动轨迹排列好，然后将这些对象分散到不同的帧，这样就完成了动画的制作（具体操同的帧，这样就完成了动画的制作（具体操作见视频作见视频12.3.312.3.3）。）。12.3.4 12.3.4 补间动画补间动画 补间动画又称为过渡动画，制作补间动画时，补间动画又称为过渡动画，制作补间动画时，系统实际上是根据元件的两个形态自动生成中系统实际上是根据元件的两个形态自动生成中间形态，并将这些中间形态分别放在不同的帧间形态，并将这些中间形态分别放在不同的帧中。因此，制作补间动画时，图形元件不能位中。因此，制作补间动画时，图形元件不能位于共享层。本节采用补间的方法，制作太阳升于共享层。本节采用补间的方法，制作太阳升起落下的效果。起落下的效果。将太阳转换将太阳转换为为“图形图形”元件，并创元件，并创建实例建实例选择选择“修改修改”“元件元件”“补间实补间实例例”菜单，在打开菜单，在打开的对话框中设置各的对话框中设置各项参数后单击项参数后单击“确确定定”按钮按钮12.3.5 12.3.5 制作动画元件制作动画元件 使用动画元件可以方便快捷地实现类似于运使用动画元件可以方便快捷地实现类似于运动、淡入淡出、旋转或缩放等效果。动、淡入淡出、旋转或缩放等效果。选中要转换选中要转换为动画元件为动画元件的对象的对象选择选择“修改修改”“动画动画”“选择动选择动画画”菜单，打开菜单，打开“动画动画”对话框对话框设置各项后，单击设置各项后，单击“确定确定”按钮，系统会按钮，系统会提示是否添加新帧，提示是否添加新帧，单击单击“确定确定”按钮创按钮创建动画元件建动画元件 范例范例3 3 制作网店标志制作网店标志 本例通过制作一个网店标志，来总结一下前面本例通过制作一个网店标志，来总结一下前面学习的动画制作方法（具体操作见视频学习的动画制作方法（具体操作见视频12-312-3）。）。12.4 12.4 优化并导出图像和动画优化并导出图像和动画 12.4.1 12.4.1 使用使用“导出向导导出向导”如果对优化和导出网页图像不是很熟悉，可以使用“导出向导”。在制作好网页图像后，在制作好网页图像后，选择选择“文件文件”“导出导出向导向导”菜单，可打开菜单，可打开“导出向导导出向导”对话框，对话框，依次回答出现的问题，依次回答出现的问题，并在每个面板中单击并在每个面板中单击“继续继续”，最后将打开，最后将打开“图像预览图像预览”对话框对话框范例范例4 4 优化并导出网店标志优化并导出网店标志 本节以范例本节以范例3 3中制作的网店标志为例，来学习中制作的网店标志为例，来学习优化并导出动画文件的方法（具体操作见视优化并导出动画文件的方法（具体操作见视频频12-412-4）。）。12.4.2 12.4.2 使用使用“优化优化”面板面板 将将“优化优化”面板和文档窗口上方的面板和文档窗口上方的“预览预览”按按钮结合使用，可以很方便地为文档设置优化参钮结合使用，可以很方便地为文档设置优化参数。选择数。选择“窗口窗口”“优化优化”菜单，可打开菜单，可打开“优优化化”面板。面板。范例范例5 5 优化并导出带切片的网页效果图优化并导出带切片的网页效果图 对于带切片的图像，可以单独设置每个切片的对于带切片的图像，可以单独设置每个切片的格式，下面就以范例格式，下面就以范例1 1中切割好的中切割好的“饰品饰品”网页网页为例，来学习如何导出含切片的网页效果图为例，来学习如何导出含切片的网页效果图（具体操作见视频（具体操作见视频12-512-5）。）。