网页图形处理工具.pptx

1 10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念10.2 10.2 图形的优化图形的优化10.3 10.3 图像的切片图像的切片 10.4 10.4 图像的导出图像的导出 10.5 10.5 制作动态按钮制作动态按钮 10.6 10.6 制作下拉菜单制作下拉菜单第10章 网页图形处理工具Fireworks 8 第1页/共24页210.1.1 10.1.1 创建新文档创建新文档 第一次启动第一次启动Fireworks 8Fireworks 8中文版时，会出现一个初始页面，中文版时，会出现一个初始页面，如图如图10-110-1所示。在这里，用户可以快速访问最近编辑过的文档所示。在这里，用户可以快速访问最近编辑过的文档或创建一个新文档，也可以访问帮助文件或网页。当用户选择或创建一个新文档，也可以访问帮助文件或网页。当用户选择新建新建FireworksFireworks文件后，就会弹出文件后，就会弹出“新建文档新建文档”对话框，如图对话框，如图10-10-2 2所示。所示。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 图10-1 第一次启动Fireworks 8时的初始页面 图10-2 “新建文档”对话框第2页/共24页310.1.2 Fireworks 810.1.2 Fireworks 8的工作界面的工作界面 新新建建文文档档完完成成后后进进入入Fireworks Fireworks 8 8的的工工作作界界面面，如如图图10-310-3所所示示。Fireworks Fireworks 8 8的的工工作作界界面面由由菜菜单单栏栏、工工具具栏栏、工工具具箱箱、工工作作区区、组合面板和属性面板组合面板和属性面板6 6个部分组成。个部分组成。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 图10-3 Fireworks 8的工作界面 第3页/共24页41 1工作区工作区工作区工作区 在在工工作作区区中中不不仅仅可可以以绘绘制制矢矢量量图图，也也可可以以直直接接处处理理位位图图。工工作作区区上上有有4 4个个选选项项卡卡，当当前前为为“原原始始”选选项项卡卡，也也就就是是工工作作区区，只只有有在在此此窗窗口口中中才才能能编编辑辑图图像像文文件件；而而在在“预预览览”选选项项卡卡中中可可以以模模拟拟浏浏览览器器预预览览制制作作好好的的图图像像；“2 2幅幅”和和“4 4幅幅”选选项项卡卡则则分别是在分别是在2 2个和个和4 4个窗口中显示图像的制作内容。个窗口中显示图像的制作内容。2 2工具箱工具箱工具箱工具箱 Fireworks Fireworks 8 8中中的的工工具具种种类类齐齐全全，使使用用这这些些工工具具，用用户户可可以以在在单个文件中创建和编辑矢量或位图图形。单个文件中创建和编辑矢量或位图图形。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 第4页/共24页5 3 3属性面板属性面板属性面板属性面板 当当选选择择对对象象或或选选取取工工具具的的时时候候，其其相相关关信信息息都都会会在在属属性性框框中中显显示示出出来来，同同时时也也可可以以通通过过修修改改属属性性面面板板中中的的数数据据或或内内容容来来调调整图像的相关属性，如图像的大小、位置及色彩等。整图像的相关属性，如图像的大小、位置及色彩等。4 4组合面板组合面板组合面板组合面板 Fireworks Fireworks 8 8的的组组合合面面板板共共有有1717个个，分分别别为为：优优化化、层层、帧帧、历历史史记记录录、自自动动形形状状、样样式式、库库、URLURL、混混色色器器、样样本本、信信息息、行行为为、查查找找、对对齐齐、自自动动形形状状属属性性、图图像像编编辑辑和和特特殊殊字字符符。每每个个面面板板既既可可独独立立排排列列，又又可可与与其其他他面面板板组组合合成成一一个个新新面面板板，但但各各面面板板的的功功能能依依然然相相互互独独立立。单单击击面面板板上上的的名名称称可可展展开开或或折折叠叠该面板。该面板。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 第5页/共24页6 10.1.3 10.1.3 打开和导入文件打开和导入文件1 1打开文件打开文件打开文件打开文件 打打开开文文件件用用于于重重新新加加载载一一幅幅新新的的图图像像。执执行行“文文件件”“打打开开”命命令令，或或者者单单击击工工具具栏栏上上的的“打打开开”按按钮钮，即即可可启启动动“打打开开”文件对话框，如图文件对话框，如图10-410-4所示。所示。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 图10-4 “打开”对话框第6页/共24页7 10.1.3 10.1.3 打开和导入文件打开和导入文件2 2导入文件导入文件导入文件导入文件 导导入入文文件件和和打打开开文文件件的的区区别别是是，前前者者是是将将图图像像文文件件插插入入到到目目前前正正在在编编辑辑的的文文档档中中，而而不不是是重重新新加加载载一一幅幅图图像像。执执行行“文文件件”“导入导入”命令，启动命令，启动“导入导入”对话框，如图对话框，如图10-510-5所示。所示。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 图10-5 “导入”对话框 第7页/共24页8 10.1.4 10.1.4 修改画布修改画布 FireworksFireworks中中的的画画布布也也就就相相当当于于图图像像的的背背景景。在在绘绘图图的的过过程程中中，为为了了使使画画布布的的大大小小、色色彩彩能能够够与与前前景景的的图图像像保保持持协协调调，用用户户经经常常要要修修改改画画布布的的相相关关属属性性。方方法法是是，单单击击画画布布，或或者者在在画画布布的的工工作作区区外外单单击击一一下下，从从而而显显示示相相应应的的画画布布属属性性面面板板，如如图图10-610-6所所示示。在在属属性性面面板板中中，单单击击画画布布颜颜色色选选择择框框，可可以以重重新新设设置置新新的的画布颜色，如图画布颜色，如图10-710-7所示。所示。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 图10-6 画布属性面板 图10-7 设置画布颜色第8页/共24页9 单单击击“画画布布大大小小”按按钮钮将将弹弹出出“画画布布大大小小”设设置置对对话话框框，如如图图10-810-8所所示示。在在“新新尺尺寸寸”区区内内可可以以输输入入新新的的宽宽度度、高高度度，并并在在“锚锚定定”栏栏中中设设置置画画布布的的固固定定点点，当当画画布布的的大大小小被被改改变变时时会会以以选中的固定点为基准来更改画布的大小。选中的固定点为基准来更改画布的大小。单单击击画画布布属属性性面面板板中中的的“图图像像大大小小”按按钮钮，将将弹弹出出“图图像像大大小小”对对话话框框，如如图图10-910-9所所示示。在在“像像素素尺尺寸寸”区区中中可可以以设设置置工工作作区区的的宽宽度度和和高高度度数数值值。若若选选中中“约约束束比比例例”项项，当当宽宽度度或或高高度度二二者之中某一数值被改变后，另一个数值也会等比例地随之改变。者之中某一数值被改变后，另一个数值也会等比例地随之改变。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 图10-8 设置画布大小 图10-9 设置图像大小 第9页/共24页10 10.1.5 10.1.5 矢量图和位图的概念矢量图和位图的概念1 1 1 1矢量图矢量图 矢矢量量图图使使用用称称为为“矢矢量量”的的线线条条和和曲曲线线（包包含含颜颜色色和和位位置置信信息息）来来呈呈现现图图形形。例例如如，一一片片叶叶子子的的图图像像可可以以使使用用一一系系列列描描述述叶叶子子轮轮廓廓的的点点来来定定义义。叶叶子子的的颜颜色色由由它它的的轮轮廓廓（即即笔笔触触）的的颜颜色色和和该轮廓所包围的区域（即填充）的颜色决定。该轮廓所包围的区域（即填充）的颜色决定。编编辑辑矢矢量量图图形形时时，用用户户修修改改的的是是描描述述其其形形状状的的线线条条和和曲曲线线的的属属性性。矢矢量量图图形形与与分分辨辨率率无无关关，这这意意味味着着用用户户除除了了可可以以在在分分辨辨率率不不同同的的输输出出设设备备上上显显示示它它以以外外，还还可可以以对对其其进进行行移移动动、调调整整大小、更改形状或更改颜色等操作，而不会改变其外观品质。大小、更改形状或更改颜色等操作，而不会改变其外观品质。FireworksFireworks工工具具箱箱中中提提供供了了许许多多绘绘制制和和编编辑辑矢矢量量对对象象的的矢矢量量工工具具，用用户户可可以以使使用用其其中中的的形形状状工工具具快快速速绘绘制制直直线线、圆圆、椭椭圆圆、正正方方形形、矩矩形形、星星形形，以以及及任任何何具具有有3 3360360个个边边的的正正多多边边形形；可以使用钢笔工具绘制自由形状的矢量路径。可以使用钢笔工具绘制自由形状的矢量路径。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 第10页/共24页11 10.1.5 10.1.5 矢量图和位图的概念矢量图和位图的概念2 2位图位图位图位图 位位图图图图形形由由排排列列成成网网格格的的称称为为“像像素素”的的点点组组成成。计计算算机机的的屏屏幕幕就就是是一一个个大大的的像像素素网网格格。在在叶叶子子的的位位图图版版本本中中，图图像像是是由由网网格格中中每每个个像像素素的的位位置置和和颜颜色色值值决决定定的的。每每个个点点被被指指定定一一种种颜颜色色。在在以以正正确确的的分分辨辨率率查查看看时时，这这些些点点像像马马赛赛克克瓷瓷砖砖那那样样拼拼合合在一起形成图形。在一起形成图形。编编辑辑位位图图图图形形时时，用用户户修修改改的的是是像像素素，而而不不是是线线条条和和曲曲线线。位位图图图图形形与与分分辨辨率率有有关关，这这意意味味着着描描述述图图形形的的数数据据被被固固定定到到一一个个特特定定大大小小的的网网格格中中。放放大大位位图图图图形形将将使使这这些些像像素素在在网网格格中中重重新新进进行行分分布布，这这通通常常会会使使图图形形的的边边缘缘呈呈锯锯齿齿状状。在在一一个个分分辨辨率率比图形本身低的输出设备上显示位图图形也会降低图形品质。比图形本身低的输出设备上显示位图图形也会降低图形品质。要要创创建建位位图图图图形形，用用户户可可以以使使用用位位图图工工具具，也也可可以以将将矢矢量量对对象转换成位图图形，或者打开或导入图形。象转换成位图图形，或者打开或导入图形。10.1 Fireworks 810.1 Fireworks 8的基本概念的基本概念 第11页/共24页12 网网页页图图形形设设计计的的最最终终目目标标是是创创建建能能够够尽尽可可能能快快下下载载的的精精美美图图片片。为为此此，必必须须在在最最大大限限度度地地保保持持图图形形品品质质的的同同时时，选选择择压压缩缩质质量量最最高高的的文文件件格格式式。这这种种平平衡衡就就是是优优化化，即即寻寻找找颜颜色色、压压缩缩和和品品质质的的最最佳佳组组合合。在在FireworksFireworksFireworksFireworks中中，使使用用优优化化面面板板可可以以轻轻松松地地对图形进行优化。对图形进行优化。在在FireworksFireworksFireworksFireworks中，优化图形涉及下列操作。中，优化图形涉及下列操作。选选择择最最佳佳文文件件格格式式。每每种种文文件件格格式式都都有有不不同同的的压压缩缩颜颜色色信信息的方法。为某些类型的图形选择适当格式可以减小文件大小。息的方法。为某些类型的图形选择适当格式可以减小文件大小。设设置置格格式式特特定定的的选选项项。每每种种图图形形文文件件格格式式都都有有一一组组惟惟一一的的选选项项，可可以以用用诸诸如如色色阶阶这这样样的的选选项项来来减减小小文文件件大大小小。某某些些图图形形格式（如格式（如GIFGIFGIFGIF和和JPEGJPEGJPEGJPEG）还具有控制图形压缩的选项。）还具有控制图形压缩的选项。调调整整图图形形中中的的颜颜色色（仅仅限限于于8 8 8 8位位文文件件格格式式）。可可以以通通过过将将图图形形局局限限于于一一个个称称为为调调色色板板的的特特定定颜颜色色集集来来限限制制颜颜色色，然然后后修修剪剪掉掉调调色色板板中中未未使使用用的的颜颜色色。调调色色板板中中的的颜颜色色越越少少意意味味着着图图形形中中的的颜色也越少，从而让使用该调色板的图形文件大小变小。颜色也越少，从而让使用该调色板的图形文件大小变小。10.2 10.2 图形的优化图形的优化 第12页/共24页13【例例例例10-110-1】通通过过对对一一幅幅风风景景图图片片进进行行不不同同设设置置的的优优化化，达达到到不不同同要要求求下下图图像像大大小小和和品品质质的的最最佳佳配配合合，实实现现网网页页中中图图片片的的优优化化处理。处理。10.2 10.2 图形的优化图形的优化 图10-22 几种不同的图像优化效果【例10-1】第13页/共24页14 切切片片是是Fireworks Fireworks 8 8中中用用于于创创建建交交互互的的基基本本构构造造块块。切切片片将将FireworksFireworks文文档档分分割割成成多多个个较较小小的的部部分分并并将将每每部部分分导导出出为为单单独独的的文文件件。导导出出时时，FireworksFireworks还还创创建建一一个个包包含含表表格格代代码码的的HTMLHTML文文件，以便在浏览器中重新装配图形。件，以便在浏览器中重新装配图形。切切片片是是网网页页对对象象，即即切切片片不不是是以以图图形形的的形形式式存存在在的的，而而是是最最终终以以HTMLHTML代代码码的的形形式式出出现现。可可以以通通过过层层面面板板中中的的“网网页页层层”列表查看、选择和重命名它们。列表查看、选择和重命名它们。将图像切片至少有以下将图像切片至少有以下3 3个优点。个优点。优优化化图图像像：网网页页图图形形设设计计的的挑挑战战之之一一是是在在确确保保图图形形快快速速下下载载的的同同时时保保证证质质量量。切切片片使使用用户户可可以以使使用用最最适适合合的的文文件件格格式式和和压压缩设置来优化每个独立的切片。缩设置来优化每个独立的切片。交互性：用户可以使用切片来创建响应鼠标事件的区域。交互性：用户可以使用切片来创建响应鼠标事件的区域。更更新新网网页页的的某某些些部部分分：切切片片使使用用户户可可以以轻轻松松地地更更新新网网页页中中经经常更改的部分。常更改的部分。10.3 10.3 图像的切片图像的切片 第14页/共24页1510.3.1 10.3.1 创建矩形切片创建矩形切片 矩形切片的创建步骤如下：矩形切片的创建步骤如下：执行执行“文件文件”“打开打开”命令，打开编辑的图像文件。命令，打开编辑的图像文件。可以用以下两种方法之一创建矩形切片。可以用以下两种方法之一创建矩形切片。在在工工具具箱箱中中单单击击选选择择工工具具按按钮钮 ，选选择择图图像像上上的的一一块块矩矩形形区区域，然后执行域，然后执行“编辑编辑”“插入插入”“切片切片”命令。命令。在在工工具具箱箱中中单单击击矩矩形形切切片片工工具具按按钮钮 ，在在图图像像周周围围拖拖曳曳鼠鼠标标，就可以创建切片。反复执行这个操作可以创建多个矩形切片。就可以创建切片。反复执行这个操作可以创建多个矩形切片。切切片片创创建建后后，切切片片的的周周围围显显示示红红色色的的导导线线，它它确确定定导导出出时时将将文文档档拆拆分分成成的的单单独独图图像像文文件件的的边边界界。切切片片区区域域将将会会被被覆覆盖盖上上一一层层半半透透明明的的绿绿色色，切切片片的的中中央央有有一一个个按按钮钮，单单击击它它可可以以弹弹出出一一个对切片进行各种行为操作的快捷菜单。个对切片进行各种行为操作的快捷菜单。10.3 10.3 图像的切片图像的切片 第15页/共24页1610.3.2 10.3.2 创建多边形切片创建多边形切片 创建多边形切片的操作步骤如下。创建多边形切片的操作步骤如下。在工具箱上单击多边形切片按钮在工具箱上单击多边形切片按钮 。在在图图像像上上依依次次点点选选多多边边形形的的各各个个顶顶点点，即即可可绘绘制制出出一一个个多多边边形不规则形状的切片，如图形不规则形状的切片，如图10-2710-27所示。所示。10.3 10.3 图像的切片图像的切片 图10-27 使用多边形切片工具绘制切片第16页/共24页17 10.4.1 10.4.1 导出一个图像导出一个图像 导出一个图像的操作步骤如下。导出一个图像的操作步骤如下。执行执行“文件文件”“导出导出”命令，打开命令，打开“导出导出”对话框。对话框。在在“保保存存类类型型”下下拉拉列列表表中中，可可以以选选择择多多种种导导出出格格式式。如如果果只只需需要要导导出出图图像像本本身身，选选择择其其中中的的“仅仅图图像像”项项，即即可可导导出出优优化后的图像，如图化后的图像，如图10-2810-28所示。所示。如如果果选选择择“HTMLHTML和和图图像像”项项，则则不不仅仅可可以以导导出出图图像像，还还可可以导出以导出HTMLHTML文件。文件。10.4 10.4 图像的导出图像的导出图像的导出图像的导出 图10-28 选择导出类型为“仅图像”第17页/共24页18 10.4.2 10.4.2 导出一个区域的图像导出一个区域的图像 FireworksFireworks允允许许用用户户根根据据需需要要选选择择图图像像的的某某个个区区域域导导出出为为一一个独立的图像文件。导出一个区域图像的操作步骤如下。个独立的图像文件。导出一个区域图像的操作步骤如下。选选择择工工具具箱箱中中的的导导出出区区域域按按钮钮 ，在在图图像像上上绘绘制制导导出出的的区区域域，如图如图10-2910-29所示。所示。双双击击导导出出区区域域，弹弹出出“导导出出预预览览”对对话话框框，如如图图10-3010-30所所示示。在对话框中可以进一步调整图像导出的设置。在对话框中可以进一步调整图像导出的设置。设置导出各种参数后，单击设置导出各种参数后，单击“导出导出”按钮就可以导出图像按钮就可以导出图像了了。10.4 10.4 图像的导出图像的导出图像的导出图像的导出图10-29 导出区域 图10-30 “导出预览”对话框第18页/共24页19 10.4.3 10.4.3 导出切片导出切片 前前面面已已经经学学习习了了切切片片的的使使用用方方法法，切切片片可可以以将将FireworksFireworks文文档档分分割割成成多多个个较较小小的的部部分分，并并将将每每部部分分都都导导出出为为单单独独的的文文件件。导导出切片的操作步骤如下。出切片的操作步骤如下。执行执行“文件文件”“导出导出”命令，打开命令，打开“导出导出”对话框。对话框。在在“保保存存类类型型”下下拉拉列列表表中中，选选择择“HTMLHTML和和图图像像”格格式式，在在HTMLHTML下下拉拉列列表表中中选选择择“导导出出HTMLHTML文文件件”，在在“切切片片”下下拉拉列列表表中中选选择择“导导出出切切片片”，如如果果需需要要将将导导出出的的切切片片放放入入某某个个图图像像文文件件夹夹中中便便于于管管理理，可可以以选选中中“将将图图像像放放入入子子文文件件夹夹”复复选框，最后单击选框，最后单击“保存保存”按钮即可。按钮即可。10.4 10.4 图像的导出图像的导出图像的导出图像的导出第19页/共24页20 10.5.1 10.5.1 按钮的基本概念按钮的基本概念 按按钮钮是是一一种种特特殊殊类类型型的的元元件件，可可以以将将它它的的实实例例从从元元件件库库拖拖到到文文档档中中。用用户户在在更更改改了了单单个个按按钮钮的的图图形形外外观观后后，自自动动更更新新导导航航栏栏中中所所有有按按钮钮实实例例的的外外观观。按按钮钮是是网网页页的的导导航航元元素素，最最多多有有4 4种种不不同同的的状状态态，每每种种状状态态表表示示该该按按钮钮在在响响应应鼠鼠标标事事件件时时的的一一种种外外观。观。释放状态：按钮的默认外观或静止时的外观。释放状态：按钮的默认外观或静止时的外观。滑滑过过状状态态：当当指指针针滑滑过过按按钮钮时时的的外外观观。此此状状态态提提醒醒用用户户单单击击鼠标会引发一个动作。鼠标会引发一个动作。按按下下状状态态：表表示示单单击击按按钮钮后后的的外外观观。通通常常使使用用按按钮钮的的下下凹凹图图像表示按钮已按下。像表示按钮已按下。按下时滑过状态：指针滑过处于按下状态的按钮时的外观。按下时滑过状态：指针滑过处于按下状态的按钮时的外观。10.5 10.5 制作动态按钮制作动态按钮第20页/共24页21 10.5.2 10.5.2 动态按钮的制作动态按钮的制作【例例例例10-210-2】制制作作一一个个动动态态按按钮钮。当当鼠鼠标标指指针针经经过过按按钮钮时时，文文本本的的颜颜色色发发生生改改变变；当当鼠鼠标标指指针针移移到到按按钮钮上上时时，会会出出现现说说明明文文字字；单击按钮，会打开相应的网页，效果如图单击按钮，会打开相应的网页，效果如图10-3410-34所示。所示。10.5 10.5 制作动态按钮制作动态按钮图10-34 动态按钮实例效果【例10-2】第21页/共24页22 【例例例例10-310-3】使用使用FireworksFireworks制作一个下拉菜单，当鼠标指针移到制作一个下拉菜单，当鼠标指针移到“电影世界电影世界”文字上的时候，会出现一个包含下级子菜单的下文字上的时候，会出现一个包含下级子菜单的下拉菜单，单击其中的某个菜单项时，会打开相应的网页，如图拉菜单，单击其中的某个菜单项时，会打开相应的网页，如图10-4810-48所示。所示。10.6 10.6 制作下拉菜单制作下拉菜单制作下拉菜单制作下拉菜单【例10-3】图10-48 下拉菜单效果第22页/共24页231简答矢量图和位图之间的区别。2使用Fireworks分别对JPEG图像和GIF图像进行优化并导出整个图像。3打开一幅图像，练习矩形切片和多边形切片的制作并导出切片。4制作一个动态按钮，实现如下功能：当鼠标指针经过按钮时，文本的颜色发生改变；当鼠标指针移到按钮上时，会出现说明文字；单击按钮，会打开相应的网页。5为上题中的按钮制作一个下拉菜单，并且包括下级菜单，最后导出菜单。习题习题习题习题1010 第23页/共24页24感谢您的观看！第24页/共24页