《网页设计与制作PPT（第二版）第6章 Fireworks基本应用.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作PPT（第二版）第6章 Fireworks基本应用.ppt（51页珍藏版）》请在三一办公上搜索。
1、第6章 Fireworks基本应用,本章内容提要：,1.元件的创建与使用2.按钮与导航条的制作3.切片与弹出菜单4.制作基本帧动画5.制作补间动画,本章目标任务：,1.掌握fireworks中元件的使用；2.熟悉按钮、导航条、切片的制作方法；3.熟悉fireworks的动画制作方法；,元件的创建与使用,Fireworks 提供三种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的独特特性。实例是 Fireworks 元件的表示形式。当对元件对象（原始对象）进行编辑时，实例（副本）会自动更改以反映对元件所做的修改。元件对于创建按钮以及通过多个帧中的对象制作动画很有帮助。,创建元
2、件,可以从任何对象、文本块或组中创建元件，然后在“库”面板中对其进行组织。若要在文档中放置实例，只需将其从“库”面板拖到画布上。,导入和导出元件,在当前文档中创建的动画、图形和按钮元件都储存在“库”面板中。该面板还储存您导入到当前文档中的元件。虽然“库”面板是特定于当前文档的，但是通过导入和导出、剪切和粘贴或拖放操作，可以在多个 Fireworks 文档中使用一个库中的元件。可以从其它库导入元件。反之，如果创建了希望重新使用或共享的元件，则可以导出您自己的元件库。导出元件库时，它是作为 PNG 文件导出的。,制作按钮,按钮是网页的导航元素。Fireworks中，按钮是在按钮编辑器中创建的。既可
3、从头创建新按钮，也可以将现有对象转换为按钮。按钮是一种特殊类型的元件，可以将它从“库”面板中拖到文档中。通常，按钮有四种不同的状态。每种状态表示该按钮在响应各种鼠标事件时的外观：“弹起”状态是按钮的默认外观或静止时的外观。“滑过”状态是当指针滑过按钮时该按钮的外观。此状态提醒用户单击鼠标时很可能会引发一个动作。“按下”状态表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。“按下时滑过”状态是在用户将指针滑过处于“按下”状态的按钮时按钮的外观。,【实例6.1】创建一个有两种状态的简单按钮,（1）执行“编辑”“插入”“新建按钮”菜单命令，打开按钮编辑器，编辑器有5个选项卡，其中前4种对应4中
4、不同的按钮状态。第5个选型卡用来设置“有效区域”,即按钮对鼠标的反应区域。（2）选择工具面板上的“圆角矩形”工具，在“释放”选项卡的编辑区域，画一个圆角矩形，填充一个从深蓝到浅蓝的渐变颜色，并在属性面板上给图形添加滤镜效果“阴影和光晕”“内侧发光”，内发光的颜色为“深蓝色”。（3）插入文字“首页”，字体为“黑体”，效果如图3所示。,【实例6.1】创建一个有两种状态的简单按钮,（4）选择“滑过”选项卡，点击窗口中的【复制弹起时的图形】按钮，将“释放”状态的图像复制到“滑过”选项卡中。（5）用“部分选定”工具选中圆角矩形，修改渐变色为浅蓝到更浅的蓝，并将内侧发光的颜色改为较之前浅一些的蓝色，效果如
5、图所示。,【实例6.1】创建一个有两种状态的简单按钮,（6）忽略“按下”和“按下时滑过”状态，单击“有效区域”选项卡，按钮编辑器会自动创建一个按钮大小的矩形切片，选择该切片，在属性面板中可以设置切片的链接等属性。（7）单击【完成】按钮，关闭按钮编辑器。可以在预览窗口中观察制作好的按钮。Fireworks还提供了如图所示的按钮导入库，单击按钮编辑器中的【导入按钮】，然后从“按钮导入”库中选择一个现成的可编辑按钮。如果选择了该选项，就不必为创建其余的按钮状态而费心了。每个按钮状态中都会自动填充适当的图形和文本。,【例6.2】创建基本导航栏,1.创建如例6.1中的按钮元件。2.从“库”面板中，按住键
6、盘上的Alt 键，同时将该元件的一个实例拖到工作区中。使用键盘上的上下左右方向键微调按钮实例的位置，使按钮实例互相对齐。3.重复步骤2，添加其它按钮实例。4.选择每个按钮实例，然后使用“属性”面板修改该按钮实例的文本、URL等属性。效果如图所示。,切片,在网页上的图片较大的时候，浏览器下载整个图片的话需要花较长的时间，切片的使用使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，能够节省很多时间。切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。切片导出时，Fireworks 还创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形
7、。所以，切片是网页对象，它们不是以图像的形式存在，而是最终以 HTML 代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。,【实例6.3】网页切片,（1）打开图片文件“6qiepian.png”，这是一幅网页效果图，如图所示。,【实例6.3】网页切片,（2）将图片文档窗口右下角的比例调整为200%，放大图片。选择工具面板上的“切片”工具。如图所示，绘制几个主要的切片，注意，要仔细切割，尽量对齐切片引导线。,【实例6.3】网页切片,（3）中中间两侧的切片是要用作输入文字的，不需要导出图片，所以在属性面板上将这两个切片的类型改为：HTML。（4）在最上面的横幅切片上右击，弹出
8、菜单如图所示。执行“添加状态栏信息”菜单命令，在弹出的对话框中输入状态栏信息：“大家好！欢迎光临”。,【实例6.3】网页切片,（5）执行“文件”“导出”菜单命令，如图所示，设置“导出”对话框，导出HTML和图像，包括无切片区域。,【实例6.3】网页切片,（6）在导出文件夹中，自动生成了如图所示HTML文件和JPG图片。,【实例6.3】网页切片,（7）在Dreamweaver中打开6qiepian.html文件，就可以进一步编辑网页了。效果如图所示。（8）浏览网页时，当鼠标放在网页最上面的图片上，状态栏就会出现“大家好！欢迎光临”的信息了。,【例6.4】制作弹出菜单,（1）打开实例6.2制作的导
9、航条，选择其中的“作品”按钮切片。（2）执行“窗口”“行为”菜单命令，打开行为面板。在行为面板上单击【添加行为】按钮，选择“设置弹出菜单”命令。打开弹出菜单编辑器。（3）如图所示，设置弹出菜单项的“文本”和“链接”等。,（4）选择“外观”选项卡，“单元格”：选择“图像”。如图所示，进行设置。设置结束后，点击【完成】按钮退出弹出菜单编辑器。,【例6.4】制作弹出菜单,【例6.4】制作弹出菜单,（5）此时，如图所示，该切片的行为面板上多了一个行为“显示弹出菜单”。,【例6.4】制作弹出菜单,（6）按F12键，可以预览网页效果，当鼠标停在作品按钮上时，弹出菜单出现。效果如图所示。,动画制作,动画图形
10、可以为网站增加一种活泼生动、复杂多变的外观。在Fireworks中，您可以创建包含活动的横幅广告、徽标和卡通形象的动画图形。,制作基本帧动画,在 Fireworks 中制作动画的一种方法是通过创建元件并不停地改变它们的属性来产生运动的错觉。一个元件就像是一个演员，其动作是由您设计的。每个元件的动作都储存在一个帧中。当按顺序播放所有帧时，就成了动画。一个元件的动画被分解成多个帧，帧中包含组成每一步动画的图像和对象。一个动画中可以有一个以上的元件，每个元件可以有不同的动作。不同的元件可以包含不同数目的帧。当所有元件的所有动作都完成时，动画就结束了。,【例6.5】打开时生成动画,（1）执行“文件”“
11、打开”菜单命令，在弹出的“打开文件”对话框中，进入“我的文档”中的图片文件夹，按住键盘上的CTRL键，同时用鼠标点选要加入动画的4张图片。如图所示，勾选对话框下部的“以动画打开”复选框，再点击【打开】按钮。,【例6.5】打开时生成动画,（2）执行“窗口”“帧”菜单命令，打开帧面板，如图所示。,【例6.5】打开时生成动画,（3）双击“帧1”后面的数字7，打开如图所示的帧延时对话框，改为100/100秒。双击“帧1”，则可以重命名帧。,【例6.5】打开时生成动画,（4）同样的方法修改帧2、帧3、帧4的帧延时。（5）执行“文件”“另存为”菜单命令，输入文件名，将“另存为类型”设置为GIF动画（*.g
12、if），单击【保存】按钮。（6）在文件夹中打开刚才制作的GIF文件，即可以看到1秒切换一张图片的动画效果了。若要隐藏帧，双击帧延时列，在“帧延时”对话框中，取消选择“导出时包括”。显示一个红色的 X 代替帧延时时间。反之，为显示帧。若要添加新的帧，单击“帧”面板底部的“新建/复制帧”按钮。若要按顺序向特定的位置添加帧：,【例6.5】打开时生成动画,如图所示，从“帧”面板的“选项”菜单中选择“添加帧”。输入要添加的帧的数目。选择要插入帧的位置：在当前帧之前、之后或是在开头或结尾。然后单击“确定”。若要创建帧的副本：将一个现有帧拖到“帧”面板底部的“新建/复制帧”按钮上。若要删除所选帧，单击“帧”
13、面板中的“删除帧”按钮。,【实例6.6】使用动画元件制作动画,动画元件在 Fireworks 文件中表演的动作看起来就像演员在电影中表演。动画元件可以是您创建或导入的任何对象，并且一个文件中可以有许多元件。每个元件都有它自己的属性并可独立运动。使用动画元件制作动画步骤如下：（1）执行“文件”“新建”菜单命令，新建一个300*300的文档。（2）2.执行“编辑”“插入”“新建元件”菜单命令。在弹出的“元件属性”对话框中，输入名称：“心”，类型为图形。,【实例6.6】使用动画元件制作动画,（3）在编辑元件“心”的画板上，用椭圆工具画一个圆形，按CTRL+C键复制，再按CTRL+V键粘贴一个一样的圆
14、重叠在一起，使用指针工具将第二个圆移到一边。如图所示。,【实例6.6】使用动画元件制作动画,（4）按键盘上的SHIFT键，选中两个圆。执行“修改”“对齐”“顶对齐”菜单命令，使两个圆顶对齐。（5）选中两个圆，执行“修改”“组合路径”“联合”菜单命令，将两个圆的路径联合在一起。（6）如左下图所示调整路径最下面一个点的位置。（7）如右下图所示，删除路径两侧的两个节点,【实例6.6】使用动画元件制作动画,（8）最后生成的心形，如图所示。（9）设置填充色：红色，渐变效果：放射状，颜色：白色到红色，效果如图所示。,【实例6.6】使用动画元件制作动画,（10）如图所示，调整渐变手柄。（11）单击【完成】按
15、钮，图形元件就做好了。,【实例6.6】使用动画元件制作动画,（12）执行“修改”“动画”“选择动画”菜单命令，弹出“动画”对话框，如图所示进行设置后，单击【确定】按钮。,【实例6.6】使用动画元件制作动画,（13）Fireworks自动添加5个帧，如图所示设置帧面板。（14）单击预览，选择预览面板的下部的播放条按钮，即可观看心跳的动画效果了。,制作补间动画,补间是一个传统的动画术语，它描述了这样的过程：主要的动画制作者只绘制关键帧（包含重大变化的帧），而助手则绘制关键帧之间的帧。在 Fireworks 中，补间混合了同一元件的两个或更多的实例，使用插值属性创建中间的实例。补间是一个手动过程，对
16、于在画布上做更复杂的移动的对象以及动态滤镜在动画的每一帧都改变的对象很有用。,【实例6.7】制作补间动画,（1）执行“文件”“新建”菜单命令，新建一个500*400的文档，画布为黑色。（2）执行“编辑”“插入”“新建元件”菜单命令。在弹出的“元件属性”对话框中，输入名称：“星星”，类型为图形。（3）在编辑元件“星星”的画板上，用星形工具画一个星形，在属性面板上设置填充为黄色，添加滤镜：“阴影和光晕”“发光”，光的颜色设置成淡黄色。效果如图所示。,【实例6.7】制作补间动画,（4）单击【完成】结束元件编辑。（5）如图所示，将库面板上的星星元件拖动到画布上，放置两颗星星的实例，并缩小左上角那颗。,
17、【实例6.7】制作补间动画,（6）按住Shift键，同时选中两颗星星实例。执行“修改”“元件”“补间实例”菜单命令，如图所示设置“补间实例”对话框：步骤20帧；分散到帧。（7）单击预览，选择预览面板的下部的播放按钮，即可观看星星变大并运动的动画效果。,实训指导6,【实训项目】制作一个如图所示效果的导航网页。,实训指导6,操作步骤如下：Step1:启动Fireworks，新建一个大小为360*400像素的画布，设置画布颜色为#EFEFEF。Step2:在工具面板中选择矩形工具，绘制一个300*360的矩形，在属性面板中设置这个矩形的填充色为#A9B1BE，描边设置为1像素的柔化，颜色为#6773
18、87。Step3:利用矩形工具绘制一个宽 300，高 40 的矩形，在属性面板中设置描边为无，填充类别改为“渐变”“线性”，修改线性填充的颜色，第一个颜色样本的颜色为#E6FFFF，然后单击渐变色阶下面的区域，新增一个新的颜色样本，颜色为#A4BECF，最后一个颜色样本为#FFFFFF，具体设置如图所示：,实训指导6,Step4:回到画布上，如图所示调整一下渐变方向。,Step5:执行“编辑”“克隆”菜单命令，克隆一个一样的矩形，将它移到下方，如图所示调整位置,实训指导6,Step6:选中下边的矩形，在属性面板中，添加动态滤镜：选择“阴影和光晕”“投影”，为矩形添加一个阴影效果，具体参数如图所
19、示。,实训指导6,Step7:使用直线工具画出两条长为300的线段，颜色为#677387，描边种类为1 像素柔化，分别放在上方矩形的下边及下方矩形的上边。Step8:如图所示，加入标题列的文字，字体为“Arial”，黑色，大小为 16，不消除锯齿。加入内容区的文字，字体为字体为“Arial”，黑色，大小为 8，不消除锯齿。按Shift键选中4段文字，执行“修改”“对齐”“左对齐”菜单命令和“均分高度”,实训指导6,Step9:可以执行“窗口”“帧”菜单命令打开帧面板。在帧面板中，单击【新建/重制帧】按钮，新增一帧。返回到第一帧，按“Ctrl”+“A”全选画布上的所有对象，按“Ctrl”+“C”
20、复制，然后到第二帧，按“Ctrl”+“V”粘贴，然后选中第二帧上的 HOME、FIREWORKS、DREAMWEAVER等文字，将它们都往右及往下移动2个像素。这是制造当鼠标移到文字上时，产生偏移的效果。Step10:回到第一帧，选择工具面板上的切片工具，如图所示将文字链结的区切割出来。,实训指导6,Step11:然后切换到指针工具，右击 HOME 的切片，在弹出的快捷菜单中选择“添加图像交换行为”，如图所示在弹出的交换图像对话框中，选择相对应的切片，单击确定。,实训指导6,用同样的方法，分别制作FIREWORKS、DREAMWEAVER等切片交换图像的行为。Step12:执行“文件”“导出”
21、菜单命令，将网页和图片导出，最后浏览效果如图所示，鼠标移到导航文字上，文字会发生偏移。,综合练习6,1、选择题（1）Fireworks主要通过什么的播放形成动画？A.帧 B.层 C.库 D.面板（2）在Fireworks中，要调整切片对象形状的说法，正确的是：A.对于矩形切片对象来说，用鼠标拖动切片对象上的控点，即可调整切片对象的形状。B.对于多边形切片对象来说，拖动切片对象上的控点，可以任意改变切片对象的形状和大小。C.切片对象形状已不能再进行后期调整D.切片对象大小已不能再进行后期调整2、填空题1.要创建一个具有轮替效果的按钮，其轮替效果的设置是在 面板中进行的。,综合练习6,3、操作题（
22、1）制作轮转动画，方法提示：使用Fireworks处理4张图像，分别打开每一张图像；将图像的宽、高设置为一致大小，例如12090后导出；选择文件打开命令在将“以动画打开”选项勾上按住Ctrl键选中多幅图片后点击“打开”按钮；根据需要修改帧延迟设置保存类型为“GIF动画”后输出。（2）利用“图形元件”自己设计并制作动画“运动的物体”，方法提示：自己设置并制作图形，并转换为图形元件将图形元件复制两个，一个移出，一个与原图形同一位置；选中三个元件后，选择修改元件补间实例添入帧数量，同时勾选分散到帧；根据需要修改帧延迟；设置保存类型为“GIF动画”后输出。,综合练习6,（3）利用“动画元件”制造过渡动
23、画，方法：新建一个文件宽300，高60；导入一张图片做为背景图案；将该层设置为共享层；新建一层，输入文字；将文字转换为“动画元件”；在动画属性对话框中自己设置帧数、位移、方向,放缩,透明变化等；根据需要修改帧延迟；设置保存类型为“GIF动画”后导出。（4）利用“动画元件”制造旋转动画，方法：新建一个文件宽300，高300；输入文字，画一圆形，选中后选择文本附加到路径将该图形转换为动画元件；在动画属性对话框中设置帧数20；旋转360度设置保存类型为“GIF动画”后导出。（5）在fireworks中设计网页图片与布局或者打开一个网页模板，使用切片工具对网页中的图片创建切片；对切片大小与位置进行调整。,
