第10章网页图像制作与优化

网页设计110.1Fireworks8简介10.2Fireworks8工作环境10.3Fireworks8的简洁操作10.4将文本附加于路径10.5创建按钮与菜单10.6图像切片的运用10.7网页图形图像的优化与发布10.8实践技能训练第10章网页图像制作与优化

210.1Fireworks8简介

MacromediaFireworks8是一款用来设计网页图形的多功能应用程序。可以用来创建和编辑位图和矢量图像、设计网页效果（如变换图像和弹出菜单）、修剪和优化图形以减小其文件大小以及通过使重复性任务自动进行来节约时间。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。10.1.1Fireworks的优点Fireworks的优点表现在效率高、操作便捷以及较好的网络速配性等多方面。10.1.2Fireworks的适用对象当然，不会有确定的最优选择，因为Fireworks是应网页设计者的挑战而推出的一套解决方案。因此，Fireworks对传统传媒（如商业印刷品）来说，并不是创建和处理图形的最佳选择。Fireworks的环境是基于RGB颜色模式的，因此，理论上讲，也更适于屏幕导出，而不是打印输出。310.1Fireworks8简介

10.1.3Fireworks8的新特色1．专业设计限制2．无缝的跨软件工作流程3．性能显著提高4．用户界面的改进5．新的热效6．新的反锯齿选项7．完整的Unicod支持410.2Fireworks8工作环境10.2.1Fireworks8的界面图10-1Fireworks8的操作界面510.2Fireworks8工作环境10.2.2菜单栏（1）“文件”菜单（2）“编辑”菜单（3）“视图”菜单（4）“选择”菜单（5）“修改”菜单（6）“文本”菜单（7）“吩咐”菜单（8）“滤镜”菜单（9）“窗口”菜单（10）“帮助”菜单610.2Fireworks8工作环境10.2.3工具栏（1）主要工具栏：

（2）修改工具栏

710.2Fireworks8工作环境10.2.4状态栏Fireworks8中的状态栏显示了设置选项、按钮、大小与锁定键及数字锁定键等当前操作状态的相关信息，如图10-5所示。

图10-5状态栏810.2Fireworks8工作环境10.2.5工具面板在默认状态下，工具面板放置在窗口的左侧，面板上分为几组不同种类的工具，分别为选择、位图、矢量、网页、颜色和视图，如图10-6所示。图10-6工具面板中的几组工具910.2Fireworks8工作环境10.2.6常用面板在绘制和编辑图像时，最常用的面板包括形态面板属性面板、颜色面板、混色器面板、信息面板、查找面板、行为面板、优化面板、层面板、样式面板、URL面板库面板、帧面板、历史纪录面板及特殊字符面板等，这些面板通常被称为面板组。默认的状况下，Fireworks8面板将面板成组停放在工作区的右侧。设计者可以进行取消停放面板组、将面板添加到组、重新排列面板组的依次、折叠和关闭面板组、打开或关闭面板组等操作，这些操作都可以通过单击面板右上角的图标从下拉列表中选择，有关常用面板的具体介绍和应用将在以后的相关内容中讲解，这里不再具体介绍。1010.3Fireworks8的简洁操作10.3.1操作Fireworks8文档1．新建文档2．打开文档3．保存和导出文档1110.3Fireworks8的简洁操作10.3.2绘制简洁的矢量图形1．绘制小脚丫2．可爱的心3．汽车标记的绘制1210.3Fireworks8的简洁操作10.3.3运用滤镜对于某一对象应用特殊效果，可以在“属性”面板中的“滤镜”中完成，如图10-22所示。在该面板中，可以对一个对象运用多种效果，每一次增加的效果都会被列在其中的效果列表中。图10-22运用“滤镜”1310.3Fireworks8的简洁操作下面以两个实例介绍有关Fireworks8中有关颜色、笔触、填充以及滤镜效果的设置等具体的应用方法。1．绘制相片框

图10-26图形效果1410.3Fireworks8的简洁操作2．绘制夜晚景色图10-33夜空效果

1510.4将文本附加于路径将文本附加到路径后，该路径会短暂失去其笔触、填充以及效果属性。随后应用的任何笔触、填充和效果属性都将应用到文本，而不是路径。假如之后将文本从路径分别出来，该路径会重新获得笔触、填充以及效果属性。1．将文本附加于路径图10-36最终的显示效果图10-37将文本附加到经过编辑的路径上1610.4将文本附加于路径2．文本转换为路径文本不仅可以附加到路径上，还可以将文本转换为路径。转换为路径后，文本就可以在任何状况下正常显示，另外，还可以利用全部的矢量编辑工具来编辑文本，就像编辑矢量对象一样编辑字母的形态。但是，这样做也会导致一个问题：路径对象再也不行能作为文本用文本工具进行编辑，另外，路径文本对象也不能再转换化文本对象，这个过程是不行逆的。

图10-39文本效果1710.5创建按钮与菜单10.5.1创建按钮1．创建按钮2．将一个文本或图像转换为按钮元件3．创建具有两种状态的简洁按钮4．编辑导入的按钮5．运用斜角效果绘制按钮状态1810.5创建按钮与菜单10.5.2创建菜单

1910.5创建按钮与菜单10.5.2创建菜单1．创建弹出菜单2．创建弹出菜单的子菜单3．创建弹出菜单的弹出子菜单4．将菜单项移到较高级别的子菜单或主弹出菜单中5．设计弹出菜单的外观6．设置菜单单元格的外观7．添加弹出菜单的样式8．设置高级弹出菜单属性9．定位弹出菜单和子菜单10．运用“弹出菜单编辑器”设置弹出菜单的位置11．运用“弹出菜单编辑器”设置弹出子菜单的位置12．通过拖动弹出菜单来为其设置位置2010.5创建按钮与菜单（2）执行选择“修改”→“弹出菜单”→“添加弹出菜单”吩咐,打开“弹出菜单编辑器”。（3）单击“内容”选项卡。（4）单击“添加菜单”按钮以添加一个空菜单项。单击“删除菜单”按钮删除单元格（菜单项）。（5）双击每个单元格并输入或选择适当的信息。（6）重复步骤（4）和（5），直到添加完全部的菜单项。（7）可以随意的删除菜单项，方法是高亮显示该项，单击“删除菜单”按钮，执行下列操作之一。1）单击“接着”按钮移到“外观”选项卡，或者选择另一个选项卡接着生成弹出菜单。2）建弹出菜单的子菜单项目。3）单击“完成”按钮关闭“弹出菜单编辑器”，完成弹出菜单的创建工作。2110.5创建按钮与菜单2．创建弹出菜单的子菜单在“弹出菜单编辑器”中，运用“内容”选项卡上的“缩进菜单”和“左缩进菜单”按钮可以创建子菜单，即当指针滑过或单击另一弹出按钮菜单时显示的弹出菜单。可以依据须要创建足够多级子菜单。3．创建弹出菜单的弹出子菜单（1）在“弹出菜单编辑器”的“内容”选项卡上，高亮显示一个子菜单。（2）单击“缩进菜单”按钮将该项再次缩进，以使其从上方的相邻子菜单项缩进。2210.5创建按钮与菜单4．将菜单项移到较高级别的子菜单或主弹出菜单中（1）在“弹出菜单编辑器”的“内容”选项卡上，高亮显示该项菜单。（2）单击“左缩进菜单”按钮。（3）执行下列操作之一完成弹出菜单的创建或接着生成它。1）单击“接着＞”按钮移到“外观”选项卡，或者选择另一个选项卡接着生成弹出菜单。2）单击“完成”按钮关闭“弹出菜单编辑器”。2310.5创建按钮与菜单5．设计弹出菜单的外观在创建了基本菜单和可选子菜单之后，即可在“弹出菜单编辑器”的“外观”选项卡上对文本进行格式设置，对“滑过状态”和“释放状态”应用图形样式，并选择垂直或水平方向，如图10-52所示。图10-52设计菜单的外观2410.5创建按钮与菜单6．设置菜单单元格的外观7．添加弹出菜单的样式8．设置高级弹出菜单属性“弹出菜单编辑器”的“高级”选项卡供应了用于限制以下各项的附加设置：单元格的大小、边距和间距，文字缩进、菜单消逝延时，以及边框宽度、颜色、阴影和高亮显示。如图10-53所示。2510.5创建按钮与菜单9．定位弹出菜单和子菜单“弹出菜单编辑器”的“位置”选项卡可以指定弹出菜单的位置。当“网页层”可见时，还可以通过在工作区中拖动顶级弹出菜单的轮廓来调整其位置，如图10-54所示。

图10-54定位菜单2610.5创建按钮与菜单10．运用“弹出菜单编辑器”设置弹出菜单的位置（1）在“弹出菜单编辑器”中，使所需弹出菜单处于打开状态，单击“位置”选项卡。（2）单击“位置”按钮以相对于触发弹出菜单的切片来调整菜单的位置。11．运用“弹出菜单编辑器”设置弹出子菜单的位置。（1）在“弹出菜单编辑器”中，使所需弹出的菜单处于打开状态，单击“位置”选项卡。（2）单击“子菜单位置”按钮以相对于触发该子菜单的弹出菜单项调整子菜单的位置。（3）若要相对于触发子菜单的父菜单项来支配每个子菜单的位置，请为子菜单位置选择“放在同一位置”选项。（4）单击“完成”按钮关闭“弹出菜单编辑器”。2710.5创建按钮与菜单12．通过拖动弹出菜单来为其设置位置（1）单击工具面板中的“显示切片和热点”按钮。（2）选择作为弹出菜单触发器的网页对象。（3）将弹出菜单的轮廓拖到工作区的其他位置。本实例的最终结果如图10-55所示。图10-55弹出菜单的结果图2810.6图像切片的运用10.6.1创建切片对象1．创建切片对象切片对象的延长线是切片引导线，它确定导出时将文档拆分成的单独图像文件的边界。默认状况下，这些引导线为红色，如图10-56所示。

图10-56图像切片2910.6图像切片的运用2．创建HTML切片HTML切片指定阅读器中出现一般HTML文本的切片图像区域。HTML切片不导出任何像素的图像数据，它导出出现在由切片定义的表格单元格的HTML文本。假如要快速更新出现在站点中的文本而无须创建新的图形，则HTML切片很有用。3010.6图像切片的运用3．创建非矩形切片当试图将交互性附加到非矩形图像时，矩形切片可能无法满足须要。例如，假如准备将变换图像效果附加到切片，而切片对象相互重叠或者形态不规则，则矩形切片可能会与变换图像交换出不是所要得到的背景图形。Firework解决此问题的方法是：允许运用“多边形切片”工具绘制任何多变性形态的切片，如图10-59所示。图10-59非矩形切片3110.6图像切片的运用10.6.2运用切片交互在Firework中创建交互效果生成切片对象。Firework供应了两种使切片交互的方式。拖动变换图像的方法是切片交互最简洁方法。只须要拖动切片的行为手柄并将其放在目标切片中，即可快速创建简洁的交互效果。“行为”面板可以创建更困难的交互。“行为”面板中包含各种交互行为，可以将它们附加到切片中。通过将多个行为附加到单个切片上，可以创建好玩的效果，还可以通过编辑现有行为来创建自定义交互效果。Firework8中的行为与Dreamweaver8行为兼容。在将Firework8变换图像导出到Dreamweaver8时，可以运用Dreamweaver8的“行为”面板编辑Firework8行为。3210.6图像切片的运用1．向切片添加简洁的交互效果拖动变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。具体来说，拖动变换图像方法可以确定指针经过一个切片时该切片所发生的变更。最终结果通常称为变换图像。变换图像是在网页阅读器中当指针经过其上方移动时，其外观发生更改的图形。当选定切片时，一个带有十字的圆圈出现在切片的中心。这称为行为手柄，如图10-60所示。图10-60切片示意图3310.6图像切片的运用2．创建简洁的变换图像简洁变换图像运用同一网页对象下面的帧上的另一个图像来交换图像。简洁交换图像只涉及一个切片或热点。可以从任何帧中选择交换图像，如图10-62所示。

图10-62选择交换图像3410.6图像切片的运用3．创建不相交变换图像当指针在一个网页对象上方滚动时，不相交变换图像交换另一个网页对象下方的图像。当指针滑过或单击一个触发器图像时，作为响应，在网页的另一位置中出现一个图像。鼠标滑过的图像被视为触发器，发生更改的图像被视为目标。与仅运用一个切片的简洁变换图像一样，首先必需对触发器、目标切片和交换图像所驻留的帧进行设置。然后，可以运用一条行为线将触发器链接到目标切片。3510.6图像切片的运用4．将多个变换图像应用到切片可以从单个切片中拖动多个行为手柄来创建多个交换图像交互。例如，可以从同一切片中触发一个变换图像和一个不相交变换图像，如图10-66所示。用来触发变换图像行为和不相交变换图像行为的切片。图10-66创建不相交交换图像3610.7网页图形图像的优化与发布10.7.1选择文件的优化格式在Firework8中，优化文件涉及以下操作。（1）最佳文件格式。每种文件格式都有不同的压缩颜色信息的方法，为某些类型的图像选择适当的格式可以大大减小文件的大小。（2）格式特定选项。每种图像文件格式都有一组惟一选项，可以用诸如色阶这样的选项来减小文件的大小。某些图像格式（如GIF和JPEG）还具有限制图像压缩的选项。（3）调整图形中的颜色（仅限于8位文件格式），可以通过将图像局限于一个称为调色板的特定颜色集来限定颜色，然后，修剪掉调色板中未运用的颜色，调色板中的颜色越少意味着图像中的颜色也越少，而这会使调色板图像文件类型的文件也越小。3710.7网页图形图像的优化与发布10.7.2优化GIF格式1、所谓索引调色板：是指GIF图像中用来存储和引用颜色的一个索引。索引调色板是一个最多有2510种色调的列表，仅定义图形中可以出现的颜色。在优化过程中，调整调色板会影响输出图像的色调，如图10-68所示，在默认状况下，索引调色板可用。图10-67优化面板 图10-68选择调色板3810.7网页图形图像的优化与发布2．设置失真从理论上讲，GIF文件是无损的，但在事实上，有时若要让GIF文件压缩得比通常所占的存储空间还小，可以在优化面板中进行失真量的设置。这个值越高，压缩得就越多，但得到图像的质量也就越低，如图10-70所示图像的对比，左侧图形为不失真，右侧图形为50%失真。3．设置抖动在一些图像中，当两种或两种以上的颜色相近时，很难辨别出来，以为是一种颜色，抖动的功能就是利用调色板上有限的颜色模拟调色板上不存在的颜色。当输出带有困难混合或渐变的图像或把照片图像输出成索引格式的GIF文件时，抖动近似的颜色会起到很好的作用。3910.7网页图形图像的优化与发布4．设置交织在网页阅读器上查看时，交织式图像随下载渐渐出现。它们首先以低辨别率显示，到下载结束时，过渡为完整辨别率，从优化面板的“选项”菜单中选择“交织”即可。5．设置透亮可以为GIF格式设置透亮区域，这样在网页阅读器中，透过这些区域可以看到网页的背景。在Fireworks8中，“预览”选项卡上的灰白方格图案表示透亮区域。4010.7网页图形图像的优化与发布10.7.3优化JPEG格式JPEG格式常常被存储为24位颜色，JPEG格式的压缩方式特殊化了压缩渐变和过渡图像的过程，打开优化面板，如图10-72所示。1．调整优化面板中的“品质”图10-70JPEG格式优化面板4110.7网页图形图像的优化与发布2．JPEG格式的选择性压缩3．柔化边缘调整优化面板中的“平滑”设置可以减小文件尺寸。平滑柔化坚硬的边缘，设置的数值越大对输出的JPEG图像柔化效果越猛烈，同时产生越小尺寸的文件。4．锐化色调边缘和细微环节从优化面板中的“选项”弹出菜单中选择“锐化JPEG边缘”，以保持两种颜色之间的细小边缘。当输出带有文本的JPEG图像时，运用这一选项以维持这些区域的锐化度。5．渐进JPEG从优化面板中的“选项”弹出菜单中选择“连续的JPEG”可以输出交织渐进