网页设计与制作 第7章 利用Fireworks MX处理图像.ppt

1、通过本章学习，应该掌握以下内容： Fireworks MX基本操作 利用Fireworks MX进行图像优化 利用Fireworks MX切割图像 利用Fireworks MX导出图像 利用Fireworks MX制作菜单按钮,第7章 利用Fireworks MX处理图像,7.1 Fireworks MX简介,将Fireworks MX程序安装完毕后，单击Windows“开始”菜单按钮，在显示的菜单中选择“程序”选项，在程序选项中此时将会显示出Windows所安装的程序列表，接着选择“程序”列表中Macromedia下的Macromedia Fireworks MX选项，即可启动 Firewo

2、rks MX程序用户界面，如图所示。,7.1.1 Fireworks MX工作界面,Fireworks MX的用户界面,返 回,1. 标题栏 Fireworks MX中的标题栏主要用于显示软件名称和当前所编辑文件的名称。 2. 菜单栏 Fireworks MX的菜单栏中提供了10项下拉式菜单功能，使用这些菜单中的各个命令可以完成对于当前文件的编辑操作。 3. 工具箱 在Fireworks MX中，图像处理工具都放在工具箱中。工具箱通常固定在窗口的左边，也可以用鼠标拖动工具箱，改变它在窗口中的位置。,4. 工具栏 在Fireworks MX的主要工具栏中提供了一些工作中常用的基本工具。这些工具按

3、钮是一些常用菜单命令式操作选项的快捷方式. 5. 属性面板 属性面板用来显示所选对象或工具的属性，用户可以通过属性面板来调节这些属性。 6.状态栏 Fireworks MX的状态栏位于用户界面的最底部，是显示用户操作的信息的位置。,7.浮动面板 Fireworks MX中的浮动面板组位于用户界面的右侧，控制着对象的更大范围的特征，包括对矢量对象的描边、填充等。 浮动面板占去用户界面上很多空间，有时对操作带来不便。此时，可以按一下键盘上的“Tab”键，将显示的浮动面板一起隐藏，再一次按下键盘上的“Tab”键，还可以将浮动面板还原显示。,（1）“优化”面板 选择“窗口”|“优化”命令，即可打开优化

4、面板，该面板提供了可以根据需要对文件进行最佳化设置的选项，用户可以选择图像的品质、文件的格式、文件选择性品质、图像的色版以及品质等，并可通过Fireworks MX所提供的预览视窗观看其效果。通过使用该面板可以很轻松地获得体积又小，品质又高的图像文件。,（2）“颜色混色器”面板 颜色混色器是Fireworks MX中主要的定义颜色的工具，选择“窗口”|“颜色混色器”命令，即可打开颜色混色器面板 。 在颜色混色器中，定义颜色的方法有多种，单击混色器面板右上方按钮，即可打开其附属菜单，在其中有5种定义颜色的方法。可以从中选择一种定义方法后，将光标移到色谱图中在想要的颜色上单击即可获取该颜色。,（3

5、）“层”面板 层面板的作用主要是用来编辑和处理图层上的对象以及管理各图层之间的摆放方式的。用“窗口”菜单中的“层”命令可以打开该面板。,（4）“历史记录”面板 选择“窗口”|“历史记录”命令，即可打开历史记录面板，历史记录面板与帧面板在一个面板组。默认情况下，在历史记录面板中记录下了在当前文件中所做过的最近的20步操作。,（5）“样式”面板 样式面板中有多种可用于文字或图形的样式，可以帮助人们快速地实现某些效果，而不必一步一步地去制作。选择“窗口”|“样式”命令，即可打开样式面板。 有时需要将一些特殊的属性如笔画、填色、特效或文字属性等结合起来运用，并且要应用在多个对象上，此时，可以将这些属性

6、组合在一起作为一种新的样式保存下来。那么，在下次要运用这些属性组合时，只需直接应用该样式，即可完成以前需要经过好几步操作才能完成的工作。,7.1.2 Fireworks MX基本操作,（1）创建新文件 选择“文件”|“新建”命令，打开“新建文档”对话框。在其中设置好文档的各项参数后，即可新建一个PNG文档。 画布是位于所有图像元素最底端的对象，所有的图像元素都是放在画布上。透明画布指的是画布本身没有颜色，能透过它看到下面的内容。,1Fireworks MX文件操作,（2）文件的其他操作 文件的其他操作，如打开、保存文件等的方法与Dreamweaver MX基本相同，这里不再赘述。,2画面显示与

7、调整 与显示相关的功能主要位于“视图”菜单中 。 此外，当图像无法在当前窗口中完全显示时，单击工具箱中的手形（Hand）工具按钮，然后在绘图区单击并拖动，可移动图像。 3对象选择方法 “指针”工具：选中该工具后单击可选中任何对象。如果希望选择多个对象，可在选中第1个对象后，按下“Shift”键后单击选中其他对象，也可在绘图区单击并拖动，利用选择框选中多个对象。,“部分选择”工具：利用该工具可选中向量对象节点，从而调整路径形状。利用子选择工具可对向量对象进行细节修改。 “选择后方对象”工具：该工具用于选择下层对象。 “导出区域”工具：选中该工具后，在绘图区单击并拖动，可指定输出区域。如果要取消输

8、出区域，只需在选中区域外单击即可。要输出所选区域，只要在选区内部双击即可。 位图对象选择工具：选中各位图选择工具，然后在绘图区单击可自动进入图像编辑模式，此时，利用上述工具可选中像素区域。,图像优化的目的就是根据需要选择一种解决质量和文件大小的方案，并将其应用到导出的图像文件上。 图像优化是在优化面板上进行的，根据导出格式的不同，优化面板上显示的参数项也不同。 Fireworks MX预置了很多优化设置，用户可以直接使用这些预置的优化格式。,7.2 图像优化,7.2.1 优化JPEG格式的图像,在Fireworks MX中优化JPEG格式的图像的方法为： （1）选择Fireworks MX的“

9、文件”|“打开”命令，打开需要进行优化的图像。 （2）打开优化面板，在优化面板上的格式栏选择“JPEG”。 （3）打开优化面板“设置”栏的下拉列表，选择预置的优化模式。 对图像进行设置。 （4）预览优化后的图片。 （5）保存或导出优化后的图片。,7.2.2 优化GIF格式的图像,优化GIF格式图像的方法与优化JPEG格式图像的步骤基本相同。在优化面板上选择“GIF”或“GIF动画”格式。 设置完以上参数后，单击优化面板右上角的按钮，选择面板菜单命令“交错”，可为图像添加交错下载效果。 演示GIF图像优化,7.2.3 优化PNG格式的图像,PNG格式分为PNG8、PNG24、PNG32，分别表示

10、8位、24位、32位真彩色。选择PNG8时需要设置压缩参数，设置方法与GIF格式的设置方法相同；选择PNG24和PNG32时，由于包含了图像的所有颜色，因此不需要进行压缩设置。,7.3 切割图像,利用Fireworks MX可以将一个大图像切割成几个小图像，这样会大大加快图像的下载速度，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用HTML代码来代替。另外，切割图像还可以用于链接设置。,创建矩形切片的操作步骤如下： （1）选择“文件”|“打开”命令，打开图像文件。 （2）执行以下操作之一可以创建矩形切片. 在工具箱上单击切割工具按钮，在图像上拖曳鼠标，就可以绘制出切片来。 首先在工

11、具箱上单击选择工具按钮，选择图像上的一块矩形区域，然后在菜单栏中选择“编辑”|“插入”|“切片”命令即可。 反复执行以上操作，可以绘制出多个切片来。,7.3.1 创建矩形切片,创建多边形切片的步骤如下： （1）单击工具箱上的多边形切片工具按钮。 （2）在图像上依次单击多边形的各个顶点，即可绘制出一个多边形切片来。 图片切割完毕即可将切片导出。以便在其他网页制作软件中使用。,7.3.2 创建多边形切片,7.4 导出图像,编辑好一个PNG文档后，还要将其导出，才能真正应用到网页中。Fireworks MX可以导出图像文件以及与之匹配的HTML代码，供网页编辑使用。,7.4.1 导出一个图像,导出一

12、个图像的操作步骤如下： （1）选择菜单栏的“文件”|“导出”命令，打开“导出”对话框，如图所示。 （2）输入导出文件的名称，并选择存放路径。 （3）在“保存类型”下拉列表中选择导出方式“仅图像”。如果选择“HTML和图像”，不仅可以导出图像，还可以导出HTML代码。 （4）在“切片”下拉列表中选择“无”。 （5）单击“确定”按钮即可导出图像。,返 回,Fireworks MX不但可以导出整个图像，还可以将图像上的某个区域进行导出，这样用户就可以根据自己的需要截取图像中的一部分作为一个独立的图像文件。 将图像上的部分区域导出的步骤如下： （1）选择工具箱上切片工具组中的导出区域工具，在图像上画出

13、需要导出的区域范围。 （2）双击导出区域，弹出“导出预览”对话框。在导出预览窗口内可以调整图像导出设置。 （3）单击“导出”按钮，即可导出图像区域。,7.4.2 导出一个图像区域,一个大的图像切割成多个切片，这些切片可以作为一个个独立的图像文件导出。 演示导出切片,7.4.3 导出切片,7.5 Fireworks MX的基本应用,使用蒙板技术可以遮挡一些不想显示的对象，从而创建部分被遮挡的图像效果。Fireworks MX的蒙板分为两种：位图蒙板和矢量图蒙板。,7.5.1 制作蒙板,1制作位图蒙板,2制作矢量蒙板,演示制作简单按钮 的过程,1制作简单按钮,7.5.2 制作按钮,演示制作简单按钮

14、 的过程,2制作JavaScript按钮,演示制作简单按钮 的过程,下拉菜单是常见的网页交互方式，利用Fireworks MX可以很轻松的制作下拉菜单。,7.5.3 制作下拉菜单,Fireworks MX具有十分强大的动画功能，用户可以在当前窗口中对动画效果进行设计。使用Fireworks MX可以很轻松地创建简单的基于路径的动画，动画的对象可以是图像也可以是文字。,7.5.4 制作动画,利用单帧自动生成动画，就是只制作动画的第一帧，利用Fireworks MX自动生成动画。 演示制作简单按钮 的过程,1利用单帧自动生成动画,演示制作简单按钮 的过程,2利用逐帧动画,7.6 Dreamweaver MX与Fireworks MX联合作业,7.6.1 在Dreamweaver MX中插入Fireworks MX文件,1. 插入Fireworks MX图像,2. 插入Fireworks HTML文件,7.6.2 利用Fireworks MX编辑和优化Dreamweaver MX中的图像,如果计算机上同时安装了Dreamweaver MX和Fireworks MX，则Dreamweaver MX会自动将Fireworks MX设置