Fireworks教程.ppt

《Fireworks教程.ppt》由会员分享，可在线阅读，更多相关《Fireworks教程.ppt（79页珍藏版）》请在三一办公上搜索。

1、第5章 使用Fireworks,介绍Fireworks的一些常用操作方法，帮助大家更好的制作自己的网页,内容,Fireworks简介教程：处理照片教程：创建页面横幅其它切割文档制作导航制作动画GIF,Fireworks 工作环境,“属性”检查器,“工具”面板,各种面板,Fireworks简介,“工具”面板,“工具”面板被编排为六个类别：,选择,位图,矢量,Web,颜色,视图,Fireworks简介,推荐网上视频教程:,从某个工具组中选择一种工具,“工具”面板中工具右下角的小三角表示它是某个工具组的一部分。例如，“矩形”工具属于基本形状工具组，该工具组还包括“圆角矩形”、“椭圆”和“多边形”基本

2、工具，以及分隔线下面显示的所有“智能形状”工具。,Fireworks简介,关于位图和矢量图形,计算机以矢量或位图格式显示图形。Fireworks 中既包含矢量工具，又包含位图工具，并且能够打开或导入这两种格式的文件,Fireworks简介,关于位图和矢量图形 位图图形,位图图形由排列成网格的称为“像素”的点组成。计算机的屏幕就是一个大的像素网格。在叶子的位图版本中，图像是由网格中每个像素的位置和颜色值决定的。每个点被指定一种颜色。在以正确的分辨率查看时，这些点像马赛克中的贴砖那样拼合在一起形成图像。,Fireworks简介,关于位图和矢量图形 位图图形,编辑位图图形时，修改的是像素，而不是线条

3、和曲线。位图图形与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图形将使这些像素在网格中重新进行分布，这通常会使图像的边缘呈锯齿状。在一个分辨率比图像自身分辨率低的输出设备上显示位图图形也会降低图像品质。,Fireworks简介,关于位图和矢量图形矢量图形,矢量图形使用称为“矢量”的线条和曲线（包含颜色和位置信息）呈现图像。例如，一片叶子的图像可以使用一系列描述叶子轮廓的点来定义。叶子的颜色由它的轮廓（即笔触）的颜色和该轮廓所包围的区域（即填充）的颜色决定。,Fireworks简介,关于位图和矢量图形矢量图形,编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。矢量

4、图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。,Fireworks简介,教程：处理照片,本教程将介如如何使用 Macromedia Fireworks 8 完成一些优化照片的基本任务。学习如何对文件进行批量处理，以及创作并导出一组图像。任务回顾批量处理大型图像文件创作图像预览和导出图像查看最终的优化图像,参见Fireworks 8的入门教程,任务回顾,根据前面创建的模型页，Cafe Townsend 网站将包括基于 Flash 的照片幻灯片放映。任务：根据6 张有关餐厅菜单中菜肴的数码照片，准

5、备幻灯片放映的图像。要求：具有良好的品质其大小应该足够的小，以便于快速下载每个图像的大小必须是 700 像素 x 150 像素，以符合幻灯片放映的尺寸,教程：处理照片,批量处理大型图像文件,如果图像文件来源于数码相机，因为图像的大小和分辨率太大，无法直接将图像用作网页图形。还可能要更改构图，从而仅使用照片的某些部分。如果要对所有的图像文件进行同样的调整，可对这些图像文件进行批量处理，以减少打开和修改每个文件所耗费的时间。,教程：处理照片,批量处理大型图像文件,在 Cafe Townsend 项目中，要对从数码相机下载的 6 个 JPEG 文件进行批量处理。要对所有文件执行下列操作：由于这些图像

6、具有不同的尺寸，需要调整它们的大小，使它们具有同样的宽度。为文件名添加“dish_”前缀以更好地描述这些图像,教程：处理照片,批量处理大型图像文件,创建工作文件夹在 Fireworks 中，选择“文件”“批处理”。“批次”对话框出现。浏览到硬盘中的如下文件夹：local_sites/cafe_townsend/fireworks_assets/camera_files，该文件夹中包含从数码相机下载的 6 个 JPEG 图像。要快速选择批处理的所有文件，请单击“添加全部”，然后单击“继续”。,教程：处理照片,批量处理大型图像文件,“批处理”对话框出现。在此对话框中，可以指定要对一批文件执行的操作

7、。在本例中，要对文件进行缩放和重命名操作。在“批次选项”下，选择“缩放”，然后单击“添加”将该操作包括在批处理过程中。,教程：处理照片,批量处理大型图像文件,在对话框底部的“缩放”框中，从列表中选择“缩放到大小”，然后设置大小尺寸，如下所示：在宽度框中键入 750 在高度框中，从列表中选择“变量”。,教程：处理照片,批量处理大型图像文件,在“批次选项”下，选择“重命名”，然后单击“添加”将该操作包括在批处理过程中。在对话框底部的“重命名”框中，选择“添加前缀”选项，然后在文本框中输入 dish_。单击“继续”进入下一屏幕。请确保已选择“与原始文件位置相同”，然后单击“批次”开始执行批处理过程。

8、Fireworks 会缩放所有的图像，并在每个文件名中添加 dish_ 前缀。当系统提示时，请单击“确定”结束该过程。,教程：处理照片,批量处理大型图像文件,当查看 camera_files 文件夹中的文件时，可以看到 Fireworks 已将原始图像文件放入名为 Original Files 的文件夹中，而且缩放操作已显著地减小了文件的大小。,教程：处理照片,创作图像,下一步是创作在幻灯片放映中显示的图像。为符合幻灯片放映的大小尺寸，每个图像必须是 700 像素 x 150 像素。但是，由于批处理的每个图像都超过了幻灯片放映的尺寸，因此必须从每个较大的图像中选择或创作能够引人注意的 700

9、x 150 图像。,教程：处理照片,创作图像,一种方法是打开、裁切并导出每个图像，但效率较低在此采取一种更有效的方法：利用帧创建一个容纳所有 6 个图像的单个图像文件，同时还可以创作和导出图像。1.在 Fireworks 中，选择“文件”“新建”。2.在“新建文档”对话框中，输入宽度值 700，高度值 150。确保这两个值的测量单位均为像素,教程：处理照片,创作图像,3.将画布颜色设置为“白色”，然后单击“确定”以创建图像源文件。4.如果文档窗口未最大化，也就是说它没有填满屏幕的中心区域，则请单击文档窗口顶部的“最大化”按钮，以将其最大化。这样，就有足够的空间来工作了。5.选择“文件”“保存”

10、。6.浏览到硬盘中的如下文件夹：local_sites/cafe_townsend/fireworks_assets/7.将该文件命名为 ImageSource.png，然后单击“保存”。,教程：处理照片,创作图像创建和命名帧,帧是 Fireworks 的一项功能，通常用于创建动画和变换图像。在本例中，将使用帧容纳各个照片，然后将它们一次导出到单独的文件中。1 确保在 Fireworks 中打开了ImageSource.png 文件。2 选择“窗口”“帧”，以打开“帧”面板。3 单击面板右上角的上下文菜单，然后选择“添加帧”。,教程：处理照片,创作图像创建和命名帧,4 在“添加帧”对话框中，输

11、入 5 作为新增的帧数，确保选定了“当前帧之后”选项，然后单击“确定”。Fireworks 将在现有帧之后添加 5 个新帧，使帧的总数达到 6 个。默认情况下，Fireworks 将这些新帧命名为“第 2 帧”、“第 3 帧”，依此类推。需要重命名帧，以便反映将在本教程的后面导出的图像的文件名。,教程：处理照片,创作图像创建和命名帧,5 在“帧”面板中，双击“第 1 帧”。6 在出现的文本框中键入图像 0，然后按 Enter 键以接受新名称。注意：负责创建幻灯片放映的 Flash 开发人员出于编码的原因已要求您从 0 开始进行编号。继续将其余帧命名为图像 1、图像 2，依此类推。在本教程的后面

12、导出图像时，Fireworks 会用帧名称自动命名导出的文件。,教程：处理照片,创作图像在每个帧中置入和创作图像,1 在“帧”面板中，选择第一帧。2 选择“文件”“导入”并浏览到硬盘上相应文件夹3 选择 dish_1013.jpg，然后单击“打开”。4 如下图所示，将插入指针紧挨着画布外侧与画布的左上角对齐，然后单击以插入图像。,教程：处理照片,创作图像在每个帧中置入和创作图像,图像上的蓝色轮廓表示图像比画布大。5 无需裁切图像，而是可以移动图像，直到所需的图像部分显示在画布创建的“窗口”中。当在本教程的后面导出该图像时，图像会被裁切，这样它的高度和宽度将与画布大小（700 x 150 像素）

13、匹配。,教程：处理照片,创作图像在每个帧中置入和创作图像,6 在所选图像以外的任何位置单击以取消选择它。7 对其余的 5 个图像重复步骤 1 到步骤 6，在导入每个图像之前，确保选择新的空白帧。8 保存所做的工作。,教程：处理照片,预览和导出图像,图像源文件现在包含 6 个帧，每帧有一个图像。通过将图像放置在帧中，可以按照所需的文件设置将它们一次全部导出，如下所述。选择“文件”“图像预览”。在“图像预览”对话框中，执行下列操作：在“格式”弹出菜单中，选择“JPEG”。JPEG 格式最适合于数字或扫描的照片、使用纹理的图像、具有渐变颜色过渡的图像和任何需要 256 种以上颜色的图像。在“品质”文

14、本框中，键入 75，或使用“品质”滑块。选择“锐化颜色边缘”选项。单击“导出”,教程：处理照片,预览和导出图像,在出现的“导出”对话框中，浏览到硬盘上的如下文件夹：local_sites/cafe_townsend/images/选择“导出”弹出菜单中的“帧到文件”。确保未选择“修剪图像”。单击“导出”。Fireworks 会将每帧以单独的图像文件形式导出到 images 文件夹中，并且使用帧的名称作为图像文件的名称。,教程：处理照片,查看最终的优化图像,在导出图像之后，您可以在 Fireworks 中打开它们以查看外观。所有的图像都被裁切，以显示在您将图像放置到画布上时创建的构图。所有图像都

15、统一为 700 像素宽、150 像素高，分辨率都是每英寸 72 像素。,教程：处理照片,查看最终的优化图像,教程：处理照片,最终图像具有所需的统一尺寸，并且文件大小要小得多，这对于公共网站是至关重要的。,教程：创建页面横幅,本教程将指导使用 Macromedia Fireworks 8 完成设计页面横幅的任务。学习导入图像资源，使用层、形状、蒙版和文本，以及优化和导出完成的横幅图形。,教程：创建页面横幅,任务回顾添加背景并放置徽标通过层组织对象为徽标创建对比背景为横幅创建轮廓线创建倾斜边缘效果为横幅添加标语导出优化的图像文件,任务回顾,在 Cafe Townsend 项目的规划阶段，我们已经讨

16、论过几种可能的横幅图形设计方案。下面是 Cafe Townsend 代表批准的设计草图：任务：根据设计草图及所提供的一组资源为该网站创建最终的横幅文件。,教程：创建页面横幅,添加背景并放置徽标,在 Fireworks 中，选择“文件”“新建”。在“新建文档”对话框中，执行下列操作：输入 700 作为宽度，输入 92 作为高度。确保这两个值的测量单位均为像素。将画布颜色设置为“自定义”，然后从自定义颜色菜单中选择黑色。单击“确定”创建文档。选择“文件”“保存”，保存到local_sites/cafe_townsend/images/将该文件命名为 banner_graphic.png。,教程：创

17、建页面横幅,添加背景并放置徽标导入背景图像,在 Fireworks 中打开 banner_graphic.png 文件，选择“文件”“导入”，然后选择fireworks_assets文件夹下的cafePhoto.jpg，并单击“打开”。如下图所示，将插入指针与画布的左上角对齐，然后单击以插入图像。,教程：创建页面横幅,图像上的蓝色轮廓表示图像比画布大。要使图像达到所需的大小和位置，可以缩放照片并调整其位置。,添加背景并放置徽标导入背景图像,当图像仍处于选定状态时，在“工具”面板中选择“缩放”工具（或按 Q）。通过使用文档窗口右下角的缩放比率弹出菜单来缩小显示比例以查看整张照片。,教程：创建页面

18、横幅,添加背景并放置徽标导入背景图像,使用“缩放”工具，通过单击照片右下角的选择点并向左上角拖动鼠标，可将照片大小缩小约 25%。使用“缩放”工具移动角选择点可按比例缩放照片。,教程：创建页面横幅,添加背景并放置徽标导入背景图像,教程：创建页面横幅,单击照片并拖动，使画布显示出希望在横幅中出现的照片部分。移动照片以创作有趣的图像作为横幅图形的背景。对图像感觉满意后，保存所做的工作。,添加背景并放置徽标导入徽标,下面，将导入 Cafe Townsend 的徽标，它是基于矢量的图形。该文件在 Fireworks 中创建，并以 Adobe Illustrator 格式（AI 文件）保存，该格式是图形

19、设计中常用的格式。1 在 Fireworks 中打开 banner_graphic.png 文件,教程：创建页面横幅,添加背景并放置徽标导入徽标,2 选择“文件”“导入”，导入 fireworks_assets/文件夹下的 cafeLogo.ai，并单击打开3 出现“矢量文件选项”对话框，可以在其中调整如何导入矢量文件。4 单击“确定”以接受默认选项。,教程：创建页面横幅,“矢量文件选项”对话框,添加背景并放置徽标导入徽标,将插入指针放在横幅左上角内，然后单击以插入图形。此时无法清楚地看到徽标，这是因为徽标是黑色的，在深色的背景图像中呈现为透明效果。稍后，将使其高亮显示以便更加突出。保存所做的

20、工作。,教程：创建页面横幅,通过层组织对象,层把一个 Fireworks 文档分成不连续的平面。一个文档可以包含许多层，而每一层又可以包含许多对象。在 Fireworks 中，“层”面板会列出文当中所包含的层以及每一层所包含的对象。“层”面板中的对象和层显示这些元素在合成图中的堆叠顺序。面板中较高的层或对象会覆盖它下面的层和对象。通过重新安排层的堆叠顺序或对象在层内的堆叠顺序，可以创建用一些对象掩盖或遮蔽其它对象的效果。,教程：创建页面横幅,通过层组织对象,将两个图形导入文档后，需要将它们安排到层中以便更方便地组织横幅的构图并控制横幅的元素。具体来说，需要将这些元素放置到三个层中：第一层放背景

21、第二层放其它图形第三层放徽标为了更好地识别每个层上的元素，还需要为每个层指定名称，这样可以清楚地指明层中包含哪些元素。,教程：创建页面横幅,通过层组织对象,确保 banner_graphic.png 文件在 Fireworks 中处于打开状态。如果“层”面板尚未打开，请选择“窗口”“层”。到目前为止，横幅图形只包含一层，名为“层 1”。在面板底部，单击“新建/重制层”按钮两次以创建另外两个层。,教程：创建页面横幅,通过层组织对象,要对层进行重命名，请双击每一层，然后在出现的“层名称”文本框中输入以下名称：将层 3 命名为徽标 将层 2 命名为图形 将层 1 命名为背景,教程：创建页面横幅,提示

22、：建议最好给层命名，因为这样便于以后识别层。如果文档变大并且包含许多层和对象，而这些层和对象又没有唯一的名称，管理起来会很困难。,通过层组织对象,单击“图形”层并将其拖到“徽标”层的下面，以改变层的堆叠顺序。一条深色的线条指示当释放鼠标按钮时对象将被放到的位置。要将元素放置到层上，当层的底部出现一条深色的线条时释放鼠标按钮。将徽标图像（名为“组合:3 个对象”）从“背景”层拖动到“徽标”层。“层”面板应如下图所示：,教程：创建页面横幅,为徽标创建对比背景,无法清楚地看到 Cafe Townsend 徽标，这是因为徽标是黑色的，在深色背景中呈现为透明效果。现在需要在徽标背后放置颜色较浅的矩形以使

23、徽标更加突出。,教程：创建页面横幅,为徽标创建对比背景,在“层”面板中选择“徽标”层。在“工具”面板中选择“矩形”工具。在“属性”检查器中，设置下列工具属性：单击“填充类别”框并选择“渐变”“线性”。单击颜料桶图标旁边的“填充颜色”框，然后单击出现的对话框中的按钮（在“预设”标签的上面）。,教程：创建页面横幅,为徽标创建对比背景,在出现的弹出窗口中，可以选择第一个渐变颜色。在窗口顶部的文本框中键入 F7EFE3，然后按 Enter 键。渐变的开始颜色会发生变化，以反映所选的颜色。单击第二个渐变颜色按钮（在对话框的右侧），然后用滴管指针单击白色样本。渐变的终止颜色会发生变化，以反映所选的颜色。,

24、教程：创建页面横幅,为徽标创建对比背景,单击对话框右上角第二个渐变颜色的“不透明度”按钮，出现“不透明度”弹出窗口使用滑块将第二个渐变颜色的不透明度设置为 50%。按 Enter 键接受设置，然后在横幅中 Cafe Townsend 徽标的上面画一个矩形。释放鼠标按钮后，徽标的上面就会出现一个半透明的矩形。,教程：创建页面横幅,为徽标创建对比背景,提示：增加文档的缩放比率，对你的作品进行微调选择“指针”工具（或按快捷键 V），然后拖动矩形的蓝色角点调整矩形的位置和大小，使其位于徽标内部并略小于徽标。矩形会遮挡其下的徽标。你需要改变这两个对象的堆叠顺序，使矩形位于徽标的下面。在“层”面板的“徽标

25、”层中，拖动矩形对象将其放到徽标对象（名为“组:3 个对象”）的下面。此时徽标会显示正常的效果，矩形使徽标变得更加突出而不是遮挡它。,教程：创建页面横幅,为横幅创建轮廓线,为横幅创建黑色的轮廓线。为创建此效果，使用圆角矩形作为矢量蒙版。矢量蒙版可以将其下的对象裁切或剪贴为其路径的形状，从而产生切饼模刀的效果。,教程：创建页面横幅,为横幅创建轮廓线,在“层”面板中选择“背景”层。在“工具”面板的“矢量”部分中选择“圆角矩形”工具。在“属性”检查器中，设置下列工具属性：在“填充类别”弹出菜单中选择“无”。单击铅笔图标旁边的“颜色”框，将笔触颜色设置为浅灰色，如#666666。将笔尖大小设置为 1

26、并将笔触种类设置为 1 像素柔化。,教程：创建页面横幅,为横幅创建轮廓线,在画布上画一个圆角矩形，并将其放在横幅的内部。圆角矩形之外的区域将会是黑色，成为横幅的轮廓。使用蓝色选择点调整圆角矩形的大小。使用黄色菱形控制点调整圆角的圆度。当圆角矩形仍处于选定状态时，选择“编辑”“剪切”。,教程：创建页面横幅,为横幅创建轮廓线,在“层”面板中，选择“背景”层上的背景照片（名为“位图”的对象）。需要对此对象应用蒙版。选择“编辑”“粘贴为蒙版”将蒙版应用到照片上。在画布上可以看到圆角矩形所覆盖的区域。此外的区域被遮住。在“层”面板中，蒙版缩略图出现在背景照片的旁边。蒙版缩略图周围高亮显示的绿色表明它已经

27、被选定。保存所做工作,教程：创建页面横幅,创建倾斜边缘效果,需要在横幅中创建倾斜边缘效果，如横幅草图所示。为产生此效果，在此创建一个形状并将其用作蒙版。,教程：创建页面横幅,创建倾斜边缘效果,在“层”面板中选择“图形”层。在“工具”面板中选择“钢笔”工具。在“属性”检查器中，设置“钢笔”工具的下列属性：单击铅笔图标旁边的“笔触颜色”框，然后单击“透明”按钮。在“填充类别”弹出菜单中选择“实心”。单击颜料桶图标旁边的“填充颜色”框，然后用滴管指针选择黑色样本。,教程：创建页面横幅,创建倾斜边缘效果,在文档窗口中画布之外，单击四下画一个矩形，然后单击第一个点使图形闭合。该矩形应比横幅图形稍高，大概

28、是其长度的三分之一。选择“指针”工具（或按快捷键 V），然后移动图形使其覆盖横幅的左侧。,教程：创建页面横幅,注意：因为该图形在“图形”层，所以它只会遮挡背景图像，而不会遮挡徽标。从“层”面板上显示的堆叠顺序可以看出，“徽标”层位于“图形”层之上，而“背景”层则位于“图形”层之下。,创建倾斜边缘效果,选择“部分选定”工具（或按快捷键 A）并单击该形状的锚点以调整它的形状，使其右侧倾斜，如下图所示。保存所做的工作,教程：创建页面横幅,为横幅添加标语,下一步，需要将公司标语“Nouveau World Cuisine”添加到横幅中。在“层”面板中选择“图形”层。在“工具”面板中选择“文本”工具。在

29、“属性”检查器中，设置下列工具属性：从“字体”弹出菜单中选择“Arial”。输入 14 作为字号。单击“粗体”按钮。单击“颜色”框，键入 F7EFE3 作为文本颜色，然后按 Enter 键。单击“左对齐”按钮。,教程：创建页面横幅,为横幅添加标语,单击徽标图形下面的部分，然后键入 Nouveau World Cuisine。在文本块的外部单击一下以应用文本输入。Fireworks 会在“图形”层中创建新的文本对象，其默认名称与键入的文本相同。此功能使用户快速识别在合成图形中使用的文本对象。,教程：创建页面横幅,导出优化的图像文件,现在，横幅图形已经完成，可以将图像优化并导出为 JPEG 文件。

30、网页图形设计的最终目标是创建能够尽可能快地下载的精美图像。为此，必须减小图像文件的大小，同时尽可能保留其品质。这种平衡就是优化，即寻找颜色、压缩和品质的最佳组合。,教程：创建页面横幅,导出优化的图像文件优化并预览图像,任何文档在从 Fireworks 中导出之前都应该先进行优化。优化可以确保以可能的最佳压缩和品质平衡导出图形。如果“优化”面板没有打开，请选择“窗口”“优化”将其打开。,教程：创建页面横幅,导出优化的图像文件优化并预览图像,在“设置”弹出面板中选择“JPEG-较高品质”。面板中的选项随即改变以反映新设置。在本教程中使用默认设置。,教程：创建页面横幅,导出优化的图像文件优化并预览图

31、像,单击文档窗口顶部附近的“预览”按钮。Fireworks 会显示文档在使用当前设置导出时的外观。在窗口左下方，Fireworks 会显示导出文件的大小，以及在 Web 上查看文件时显示图形所需的估计时间。,教程：创建页面横幅,注意：在预览图像时，可以尝试“优化”面板中不同的品质设置，以查看它们在图像上的效果。,导出优化的图像文件导出图像,教程：创建页面横幅,在选择了优化设置后，将图像导出为 JPEG 文件。选择“文件”“导出”。列出的文件名有一个.jpg 扩展名。Fireworks 选择这种文件格式是因为用户在“优化”面板中选择了这种格式。浏览到硬盘中的如下文件夹：local_sites/c

32、afe_townsend/images/确保“保存类型”弹出菜单的内容为“仅图像”，然后单击“保存”。JPEG 文件即可导出到该 images 文件夹。,导出优化的图像文件导出图像,教程：创建页面横幅,记住 PNG 文件是源文件（即工作文件）。虽然以 JPEG 格式导出了文档，但还必须保存 PNG 文件，以使所做的更改也在源文件中反映出来。选择“文件”“保存”，以保存对 PNG 文件所做的更改。,结束,至此横幅图形已完成 在本教程中，完成了在 Fireworks 中创建横幅图形所需的工作。学习了如何创建新文档和导入图像。此外，还学习了处理层、图形、蒙版和文本。最后，优化并导出了完整图像。,教程

33、：创建页面横幅,切割文档,图形设计者使用一种名为切片的过程将图像剪切成较小的切片较小的图像从 Web 上下载时速度更快，因此用户可以看到页面逐渐加载，而不是等待下载一个大图像。“编辑”“插入”“矩形切片”,切割文档,“编辑”“插入”“矩形切片”一个矩形切片随即插入到图形的上方。默认情况下，切片具有绿色层叠。,单击切片外的任意位置以取消选择它。红色切片辅助线用于定义切片，它跨越文档的宽度和高度。在您创建切片后，Fireworks 会自动为您切割文档的其余部分。注意：如果未看到红色切片辅助线，请选择“视图”“切片辅助线”。,创建导航栏按钮,按钮是链接到其它网页的网页对象。它们的外观通常随着用户的鼠

34、标移动或其它动作（如单击）而变化，作为指示交互性的可视化提示。导航栏是出现在一个网站的一个或多个网页上的一系列按钮。通常，一个导航栏内的所有按钮除了它们的文本外，看起来都是一样的。,创建按钮元件,首先创建按钮的初始图形和文本。将此图形转换为按钮元件。选择“修改”“元件”“转换为元件”。“元件属性”对话框出现。在“名称”文本框中键入元件名称，选择“按钮”作为元件类型，然后单击“确定”。,创建按钮元件,在按钮图形的上方出现一个切片，同时在该切片的左侧出现一个快捷键图标。这表示工作区中的选区是你刚才创建的元件的一个实例。元件类似于图形的主副本。当更改一个元件时，文档中该元件的所有实例都将自动更改。元件保存在库中。打开“库”面板，元件列在“库”面板中。,创建按钮状态,下一步，为按钮元件创建各种状态。按钮状态是在 Web 浏览器中指针滑过或单击按钮时按钮的不同显示方式。,创建动画GIF,利用帧导出动画GIF,第6周作业,(1)自己从网上找一个图片，模仿教程创建页面横幅。(2)制作导航栏，式样自行设计。布局如图所示，文字、颜色自定，最后提交制作完成的PNG文件。,小组作业1：网站开发立项,小组讨论：定位网站的主题和名称打算包括哪些栏目及栏目内容,