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