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

第 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%，放大图片。选择工具面板上的 “切片 ”工具。如图所示，绘制几个主要的切片，注意，要仔细切割，尽量对齐切片引导线。【 实例 6.3】 网页切片（ 3）中中间两侧的切片是要用作输入文字的，不需要导出图片，所以在属性面板上将这两个切片的类型改为： HTML。（ 4）在最上面的横幅切片上右击，弹出菜单如图所示。执行 “添加状态栏信息 ”菜单命令，在弹出的对话框中输入状态栏信息： “大家好！欢迎光临 ”。【 实例 6.3】 网页切片（ 5）执行 “文件 ”“ 导出 ”菜单命令，如图所示，设置 “导出 ”对话框，导出 HTML和图像，包括无切片区域。【 实例 6.3】 网页切片（ 6）在导出文件夹中，自动生成了如图所示 HTML文件和 JPG图片。【 实例 6.3】 网页切片（ 7）在 Dreamweaver中打开 6qiepian.html文件，就可以进一步编辑网页了。效果如图所示。（ 8）浏览网页时，当鼠标放在网页最上面的图片上，状态栏就会出现 “大家好！欢迎光临 ”的信息了。 【 例 6.4】 制作弹出菜单（ 1）打开实例 6.2制作的导航条，选择其中的 “作品 ”按钮切片。（ 2）执行 “窗口 ”“ 行为 ”菜单命令，打开行为面板。在行为面板上单击 【 添加行为 】 按钮，选择 “设置弹出菜单 ”命令。打开弹出菜单编辑器。（ 3）如图所示，设置弹出菜单项的 “文本 ”和 “链接 ”等。（ 4）选择 “外观 ”选项卡， “单元格 ”：选择 “图像 ”。如图所示，进行设置。设置结束后，点击 【 完成】 按钮退出弹出菜单编辑器。【 例 6.4】 制作弹出菜单【 例 6.4】 制作弹出菜单（ 5）此时，如图所示，该切片的行为面板上多了一个行为 “显示弹出菜单 ”。【 例 6.4】 制作弹出菜单（ 6）按 F12键，可以预览网页效果，当鼠标停在作品按钮上时，弹出菜单出现。效果如图所示。动画制作动画图形可以为网站增加一种活泼生动、复杂多变的外观。在 Fireworks中，您可以创建包含活动的横幅广告、徽标和卡通形象的动画图形。 制作基本帧动画在 Fireworks 中制作动画的一种方法是通过创建元件并不停地改变它们的属性来产生运动的错觉。一个元件就像是一个演员，其动作是由您设计的。每个元件的动作都储存在一个帧中。当按顺序播放所有帧时，就成了动画。一个元件的动画被分解成多个帧，帧中包含组成每一步动画的图像和对象。一个动画中可以有一个以上的元件，每个元件可以有不同的动作。不同的元件可以包含不同数目的帧。当所有元件的所有动作都完成时，动画就结束了。【 例 6.5】 打开时生成动画（ 1）执行 “文件 ”“ 打开 ”菜单命令，在弹出的 “打开文件 ”对话框中，进入 “我的文档 ”中的图片文件夹，按住键盘上的 CTRL键，同时用鼠标点选要加入动画的 4张图片。如图所示，勾选对话框下部的 “以动画打开 ”复选框，再点击 【 打开 】 按钮。【 例 6.5】 打开时生成动画（ 2）执行 “窗口 ”“ 帧 ”菜单命令，打开帧面板，如图所示。【 例 6.5】 打开时生成动画（ 3）双击 “帧 1”后面的数字 7，打开如图所示的帧延时对话框，改为 100/100秒。双击 “帧 1”，则可以重命名帧。【 例 6.5】 打开时生成动画（ 4）同样的方法修改帧 2、帧 3、帧 4的帧延时。（ 5）执行 “文件 ”“ 另存为 ”菜单命令，输入文件名，将 “另存为类型 ”设置为 GIF动画（ *.gif），单击 【 保存 】 按钮。（ 6）在文件夹中打开刚才制作的 GIF文件，即可以看到 1秒切换一张图片的动画效果了。若要隐藏帧，双击帧延时列，在 “帧延时 ”对话框中，取消选择 “导出时包括 ”。显示一个红色的 X 代替帧延时时间。反之，为显示帧。若要添加新的帧，单击 “帧 ”面板底部的 “新建 /复制帧”按钮。若要按顺序向特定的位置添加帧：【 例 6.5】 打开时生成动画如图所示，从 “帧 ”面板的 “选项 ”菜单中选择 “添加帧 ”。输入要添加的帧的数目。 选择要插入帧的位置： 在当前帧之前、之后或是在开头或结尾。然后单击 “确定 ”。若要创建帧的副本：将一个现有帧拖到 “帧 ”面板底部的 “新建 /复制帧 ”按钮上。 若要删除所选帧，单击 “帧 ”面板中的 “删除帧 ”按钮。【 实例 6.6】 使用动画元件制作动画动画元件在 F