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

网页设计110.1 Fireworks 8简介10.2 Fireworks 8工作环境10.3 Fireworks 8的简单操作10.4 将文本附加于路径10.5 创建按钮与菜单10.6 图像切片的使用10.7 网页图形图像的优化与发布10.8 实践技能训练第第1010章章 网页图像制作与优化网页图像制作与优化 210.1 Fireworks 810.1 Fireworks 8简介简介 Macromedia Fireworks 8是一款用来设计网页图形的多功能应用程序。可以用来创建和编辑位图和矢量图像、设计网页效果（如变换图像和弹出菜单）、修剪和优化图形以减小其文件大小以及通过使重复性任务自动进行来节省时间。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。10.1.1 Fireworks的优点 Fireworks的优点表现在效率高、操作便捷以及较好的网络速配性等多方面。10.1.2 Fireworks的适用对象 当然，不会有绝对的最优选择，因为Fireworks是应网页设计者的挑战而推出的一套解决方案。因此，Fireworks对传统传媒（如商业印刷品）来说，并不是创建和处理图形的最佳选择。Fireworks的环境是基于RGB颜色模式的，因此，理论上讲，也更适于屏幕导出，而不是打印输出。310.1 Fireworks 810.1 Fireworks 8简介简介 10.1.3 Fireworks 8的新特色 1专业设计控制 2无缝的跨软件工作流程 3性能显著提高 4用户界面的改进 5新的热效 6新的反锯齿选项 7完整的Unicod支持410.2 Fireworks 810.2 Fireworks 8工作环境工作环境10.2.1 Fireworks 8的界面 图10-1 Fireworks 8的操作界面510.2 Fireworks 810.2 Fireworks 8工作环境工作环境10.2.2 菜单栏（1）“文件”菜单（2）“编辑”菜单（3）“视图”菜单（4）“选择”菜单（5）“修改”菜单（6）“文本”菜单（7）“命令”菜单（8）“滤镜”菜单（9）“窗口”菜单（10）“帮助”菜单610.2 Fireworks 810.2 Fireworks 8工作环境工作环境10.2.3 工具栏（1）主要工具栏：（2）修改工具栏 710.2 Fireworks 810.2 Fireworks 8工作环境工作环境10.2.4 状态栏Fireworks 8中的状态栏显示了设置选项、按钮、大小与锁定键及数字锁定键等当前操作状态的相关信息，如图10-5所示。图10-5 状态栏810.2 Fireworks 810.2 Fireworks 8工作环境工作环境10.2.5 工具面板在默认状态下，工具面板放置在窗口的左侧，面板上分为几组不同种类的工具，分别为选择、位图、矢量、网页、颜色和视图，如图10-6所示。图10-6 工具面板中的几组工具910.2 Fireworks 810.2 Fireworks 8工作环境工作环境10.2.6 常用面板 在绘制和编辑图像时，最常用的面板包括形状面板属性面板、颜色面板、混色器面板、信息面板、查找面板、行为面板、优化面板、层面板、样式面板、URL面板库面板、帧面板、历史纪录面板及特殊字符面板等，这些面板通常被称为面板组。默认的情况下，Fireworks 8面板将面板成组停放在工作区的右侧。设计者可以进行取消停放面板组、将面板添加到组、重新排列面板组的顺序、折叠和关闭面板组、打开或关闭面板组等操作，这些操作都可以通过单击面板右上角的图标从下拉列表中选择，有关常用面板的具体介绍和应用将在以后的相关内容中讲解，这里不再详细介绍。1010.3 Fireworks 810.3 Fireworks 8的简单操作的简单操作10.3.1 操作Fireworks 8文档1新建文档2打开文档3保存和导出文档1110.3 Fireworks 810.3 Fireworks 8的简单操作的简单操作10.3.2 绘制简单的矢量图形1绘制小脚丫2可爱的心3汽车标志的绘制1210.3 Fireworks 810.3 Fireworks 8的简单操作的简单操作10.3.3 使用滤镜 对于某一对象应用特殊效果，可以在“属性”面板中的“滤镜”中完成，如图10-22所示。在该面板中，可以对一个对象使用多种效果，每一次增加的效果都会被列在其中的效果列表中。图10-22 使用“滤镜”1310.3 Fireworks 810.3 Fireworks 8的简单操作的简单操作 下面以两个实例介绍有关Fireworks 8中有关颜色、笔触、填充以及滤镜效果的设置等具体的应用方法。1绘制相片框 图10-26 图形效果1410.3 Fireworks 810.3 Fireworks 8的简单操作的简单操作2绘制夜晚景色 图10-33 夜空效果 1510.4 10.4 将文本附加于路径将文本附加于路径 将文本附加到路径后，该路径会暂时失去其笔触、填充以及效果属性。随后应用的任何笔触、填充和效果属性都将应用到文本，而不是路径。如果之后将文本从路径分离出来，该路径会重新获得笔触、填充以及效果属性。1将文本附加于路径图10-36 最后的显示效果 图10-37 将文本附加到经过编辑的路径上1610.4 10.4 将文本附加于路径将文本附加于路径2文本转换为路径 文本不仅可以附加到路径上，还可以将文本转换为路径。转换为路径后，文本就可以在任何情况下正常显示，另外，还可以利用所有的矢量编辑工具来编辑文本，就像编辑矢量对象一样编辑字母的形状。但是，这样做也会导致一个问题：路径对象再也不可能作为文本用文本工具进行编辑，另外，路径文本对象也不能再转换化文本对象，这个过程是不可逆的。图10-39 文本效果 1710.5 10.5 创建按钮与菜单创建按钮与菜单10.5.1 创建按钮 1创建按钮 2将一个文本或图像转换为按钮元件 3创建具有两种状态的简单按钮 4编辑导入的按钮 5使用斜角效果绘制按钮状态1810.5 10.5 创建按钮与菜单创建按钮与菜单10.5.2 创建菜单 1910.5 10.5 创建按钮与菜单创建按钮与菜单10.5.2 创建菜单 1创建弹出菜单 2创建弹出菜单的子菜单 3创建弹出菜单的弹出子菜单 4将菜单项移到较高级别的子菜单或主弹出菜单中 5设计弹出菜单的外观6设置菜单单元格的外观 7添加弹出菜单的样式 8设置高级弹出菜单属性 9定位弹出菜单和子菜单 10使用“弹出菜单编辑器”设置弹出菜单的位置 11使用“弹出菜单编辑器”设置弹出子菜单的位置 12通过拖动弹出菜单来为其设置位置2010.5 10.5 创建按钮与菜单创建按钮与菜单（2）执行选择“修改”“弹出菜单”“添加弹出菜单”命令,打开“弹出菜单编辑器”。（3）单击“内容”选项卡。（4）单击“添加菜单”按钮以添加一个空菜单项。单击“删除菜单”按钮删除单元格（菜单项）。（5）双击每个单元格并输入或选择适当的信息。（6）重复步骤（4）和（5），直到添加完所有的菜单项。（7）可以随意的删除菜单项，方法是高亮显示该项，单击“删除菜单”按钮，执行下列操作之一。1）单击“继续”按钮移到“外观”选项卡，或者选择另一个选项卡继续生成弹出菜单。2）建弹出菜单的子菜单项目。3）单击“完成”按钮关闭“弹出菜单编辑器”，完成弹出菜单的创建工作。2110.5 10.5 创建按钮与菜单创建按钮与菜单2创建弹出菜单的子菜单 在“弹出菜单编辑器”中，使用“内容”选项卡上的“缩进菜单”和“左缩进菜单”按钮可以创建子菜单，即当指针滑过或单击另一弹出按钮菜单时显示的弹出菜单。可以根据需要创建足够多级子菜单。3创建弹出菜单的弹出子菜单（1）在“弹出菜单编辑器”的“内容”选项卡上，高亮显示一个子菜单。（2）单击“缩进菜单”按钮将该项再次缩进，以使其从上方的相邻子菜单项缩进。2210.5 10.5 创建按钮与菜单创建按钮与菜单4将菜单项移到较高级别的子菜单或主弹出菜单中（1）在“弹出菜单编辑器”的“内容”选项卡上，高亮显示该项菜单。（2）单击“左缩进菜单”按钮。（3）执行下列操作之一完成弹出菜单的创建或继续生成它。1）单击“继续”按钮移到“外观”选项卡，或者选择另一个选项卡继续生成弹出菜单。2）单击“完成”按钮关闭“弹出菜单编辑器”。2310.5 10.5 创建按钮与菜单创建按钮与菜单5设计弹出菜单的外观 在创建了基本菜单和可选子菜单之后，即可在“弹出菜单编辑器”的“外观”选项卡上对文本进行格式设置，对“滑过状态”和“释放状态”应用图形样式，并选择垂直或水平方向，如图10-52所示。图10-52 设计菜单的外观2410.5 10.5 创建按钮与菜单创建按钮与菜单6设置菜单单元格的外观7添加弹出菜单的样式8设置高级弹出菜单属性“弹出菜单编辑器”的“高级”选项卡提供了用于控制以下各项的附加设置：单元格的大小、边距和间距，文字缩进、菜单消失延时，以及边框宽度、颜色、阴影和高亮显示。如图10-53所示。2510.5 10.5 创建按钮与菜单创建按钮与菜单9定位弹出菜单和子菜单“弹出菜单编辑器”的“位置”选项卡可以指定弹出菜单的位置。当“网页层”可见时，还可以通过在工作区中拖动顶级弹出菜单的轮廓来调整其位置，如图10-54所示。图10-54 定位菜单2610.5 10.5 创建按钮与菜单创建按钮与菜单10使用“弹出菜单编辑器”设置弹出菜单的位置（1）在“弹出菜单编辑器”中，使所需弹出菜单处于打开状态，单击“位置”选项卡。（2）单击“位置”按钮以相对于触发弹出菜单的切片来调整菜单的位置。11使用“弹出菜单编辑器”设置弹出子菜单的位置。（1）在“弹出菜单编辑器”中，使所需弹出的菜单处于打开状态，单击“位置”选项卡。（2）单击“子菜单位置”按钮以相对于触发该子菜单的弹出菜单项调整子菜单的位置。（3）若要相对于触发子菜单的父菜单项来安排每个子菜单的位置，请为子菜单位置选择“放在同一位置”选项。（4）单击“完成”按钮关闭“弹出菜单编辑器”。2710.5 10.5 创建按钮与菜单创建按钮与菜单12通过拖动弹出菜单来为其设置位置（1）单击工具面板中的“显示切片和热点”按钮。（2）选择作为弹出菜单触发器的网页对象。（3）将弹出菜单的轮廓拖到工作区的其他位置。本实例的最终结果如图10-55所示。图10-55 弹出菜单的结果图2810.6 10.6 图像切片的使用图像切片的使用10.6.1 创建切片对象 1创建切片对象 切片对象的延伸线是切片引导线，它确定导出时将文档拆分成的单独图像文件的边界。默认情况下，这些引导线为红色，如图10-56所示。图10-56 图像切片2910.6 10.6 图像切片的使用图像切片的使用 2创建HTML切片 HTML切片指定浏览器中出现普通HTML文本的切片图像区域。HTML切片不导出任何像素的图像数据，它导出出现在由切片定义的表格单元格的HTML文本。如果要快速更新出现在站点中的文本而无须创建新的图形，则HTML切片很有用。3010.6 10.6 图像切片的使用图像切片的使用3创建非矩形切片当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像效果附加到切片，而切片对象互相重叠或者形状不规则，则矩形切片可能会与变换图像交换出不是所要得到的背景图形。Firework解决此问题的办法是：允许使用“多边形切片”工具绘制任何多变性形状的切片，如图10-59所示。图10-59 非矩形切片3110.6 10.6 图像切片的使用图像切片的使用10.6.2 使用切片交互 在Firework中创建交互效果生成切片对象。Firework提供了两种使切片交互的方式。拖动变换图像的方法是切片交互最简单方法。只需要拖动切片的行为手柄并将其放在目标切片中，即可快速创建简单的交互效果。“行为”面板可以创建更复杂的交互。“行为”面板中包含各种交互行为，可以将它们附加到切片中。通过将多个行为附加到单个切片上，可以创建有趣的效果，还可以通过编辑现有行为来创建自定义交互效果。Firework 8中的行为与Dreamweaver 8行为兼容。在将Firework 8变换图像导出到Dreamweaver 8时，可以使用Dreamweaver 8的“行为”面板编辑Firework 8行为。3210.6 10.6 图像切片的使用图像切片的使用 1向切片添加简单的交互效果 拖动变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。具体来说，拖动变换图像方法可以确定指针经过一个切片时该切片所发生的变化。最终结果通常称为变换图像。变换图像是在网页浏览器中当指针经过其上方移动时，其外观发生更改的图形。当选定切片时，一个带有十字的圆圈出现在切片的中央。这称为行为手柄，如图10-60所示。图10-60 切片示意图3310.6 10.6 图像切片的使用图像切片的使用2创建简单的变换图像 简单变换图像使用同一网页对象下面的帧上的另一个图像来交换图像。简单交换图像只涉及一个切片或热点。可以从任何帧中选择交换图像，如图10-62所示。图10-62 选择交换图像3410.6 10.6 图像切片的使用图像切片的使用 3创建不相交变换图像 当指针在一个网页对象上方滚动时，不相交变换图像交换另一个网页对象下方的图像。当指针滑过或单击一个触发器图像时，作为响应，在网页的另一位置中出现一个图像。鼠标滑过的图像被视为触发器，发生更改的图像被视为目标。与仅使用一个切片的简单变换图像一样，首先必须对触发器、目标切片和交换图像所驻留的帧进行设置。然后，可以使用一条行为线将触发器链接到目标切片。3510.6 10.6 图像切片的使用图像切片的使用4将多个变换图像应用到切片 可以从单个切片中拖动多个行为手柄来创建多个交换图像交互。例如，可以从同一切片中触发一个变换图像和一个不相交变换图像，如图10-66所示。用来触发变换图像行为和不相交变换图像行为的切片。图10-66 创建不相交交换图像3610.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布 10.7.1 选择文件的优化格式 在Firework 8中，优化文件涉及以下操作。（1）最佳文件格式。每种文件格式都有不同的压缩颜色信息的方法，为某些类型的图像选择适当的格式可以大大减小文件的大小。（2）格式特定选项。每种图像文件格式都有一组惟一选项，可以用诸如色阶这样的选项来减小文件的大小。某些图像格式（如GIF和JPEG）还具有控制图像压缩的选项。（3）调整图形中的颜色（仅限于8位文件格式），可以通过将图像局限于一个称为调色板的特定颜色集来限定颜色，然后，修剪掉调色板中未使用的颜色，调色板中的颜色越少意味着图像中的颜色也越少，而这会使调色板图像文件类型的文件也越小。3710.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布10.7.2 优化GIF格式 1、所谓索引调色板：是指GIF图像中用来存储和引用颜色的一个索引。索引调色板是一个最多有2510种色彩的列表，仅定义图形中可以出现的颜色。在优化过程中，调整调色板会影响输出图像的色彩，如图10-68所示，在默认情况下，索引调色板可用。图10-67 优化面板图10-68 选择调色板 3810.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布 2设置失真 从理论上讲，GIF文件是无损的，但在实际上，有时若要让GIF文件压缩得比通常所占的存储空间还小，可以在优化面板中进行失真量的设置。这个值越高，压缩得就越多，但得到图像的质量也就越低，如图10-70所示图像的对比，左侧图形为不失真，右侧图形为50%失真。3设置抖动 在一些图像中，当两种或两种以上的颜色相近时，很难分辨出来，以为是一种颜色，抖动的功能就是利用调色板上有限的颜色模拟调色板上不存在的颜色。当输出带有复杂混合或渐变的图像或把照片图像输出成索引格式的GIF文件时，抖动近似的颜色会起到很好的作用。3910.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布 4设置交错 在网页浏览器上查看时，交错式图像随下载逐渐出现。它们首先以低分辨率显示，到下载结束时，过渡为完整分辨率，从优化面板的“选项”菜单中选择“交错”即可。5设置透明 可以为GIF格式设置透明区域，这样在网页浏览器中，透过这些区域可以看到网页的背景。在Fireworks 8中，“预览”选项卡上的灰白方格图案表示透明区域。4010.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布10.7.3 优化JPEG格式 JPEG格式经常被存储为24位颜色，JPEG格式的压缩方式特殊化了压缩渐变和过渡图像的过程，打开优化面板，如图10-72所示。1调整优化面板中的“品质”图10-70 JPEG格式优化面板 4110.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布 2JPEG格式的选择性压缩 3柔化边缘 调整优化面板中的“平滑”设置可以减小文件尺寸。平滑柔化坚硬的边缘，设置的数值越大对输出的JPEG图像柔化效果越强烈，同时产生越小尺寸的文件。4锐化色彩边缘和细节 从优化面板中的“选项”弹出菜单中选择“锐化JPEG边缘”，以保持两种颜色之间的细小边缘。当输出带有文本的JPEG图像时，使用这一选项以维持这些区域的锐化度。5渐进JPEG 从优化面板中的“选项”弹出菜单中选择“连续的JPEG”可以输出交错渐进的JPEG图像。它类似于交错的GIF文件，交错处理的图像先以低分辨率快速出现，然后随着下载过程的继续转换成原有的分辨率。4210.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布10.7.4 使用导出向导（1）选择“文件”“导出预览”命令，打开“导出预览”对话框，如图10-79所示。图10-79 “导出预览”对话框4310.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布（2）在该对话框中可看到图片输出效果的预览图，如果已经使用“优化”面板对图片进行了优化处理，可以看到，“导出预览”对话框中的所有设置与在“优化”对话框的设置完全一样，单击“导出”按钮将图片导出即可。（3）如果没有在“优化”面板中进行过优化处理，那么也可以直接在“导出预览”对话框中进行优化设置，其操作与在“优化”面板中进行优化设置相同。（4）在“导出预览”对话框的“文件”选项卡中，可以改变图片的大小或选择导出区域，只导出图片的一部份，如图10-80所示。4410.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布 图10-80 “导出预览”对话框中对“文件”选项卡设置的效果4510.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布（5）如果需要导出GIF动画，可以在“动画”选项卡中进行相关动画的设置，如图10-81所示。图10-81 在“动画”选项卡中进行相关动画的设置4610.7 10.7 网页图形图像的优化与发布网页图形图像的优化与发布（6）在完成设置后，单击“导出”按钮就可以将图片导出。优化输出是网络图像的特点，优秀的设计师可以在文件大小与设计效果之间找到平衡点。使用Fireworks 8进行图像的优化，直观而快捷，无疑是目前进行网站设计的最好选择。4710.8 10.8 实践技能训练实践技能训练 通过本实例的学习将熟练掌握如何运用Fireworks 8软件完成一个复杂页面的制作.本实例的最终结果如图10-82所示。图10-82 实例结果图48