1、第4章 图像处理的基本操作,本 章 教 学 目 的,了解Fireworks的工作环境 掌握Fireworks 中页面图像的制作掌握Fireworks 中页面图像的优化,目 录,第一讲 Fireworks概述 第二讲 Fireworks的基本操作,第一讲 Fireworks概述,教学内容4.1.1 Fireworks的启动与关闭 4.1.2 Fireworks 8的工作界面 教学重点和难点了解Fireworks的启动与关闭，掌握 Fireworks 8的工作界面,4.1.1 Fireworks的启动与关闭,1.启动Fireworks的方法（1）使用【开始】菜单启动：选择【开始】【程序】【Macr
2、omedia】 【Macromedia Fireworks 8】命令。（2）使用快速启动工具栏启动：在快速启动工具栏中，单击Macromedia Fireworks 8按钮。（3）使用快捷方式图标启动：在桌面上，双击“Macromedia Fireworks 8”图标。,4.1.1 Fireworks的启动与关闭,2.退出Fireworks 8的方法 （1）单击标题栏右端的“关闭”按钮 。（2）右击标题栏左端的Macromedia Fireworks 8图标，在弹出的快捷菜单中选择“关闭”命令。（3）双击标题栏左端的Macromedia Fireworks 8图标。（4）在菜单栏上，选择【文件
3、】【退出】菜单命令。 按Alt+F4 组合键也可退出Fireworks 8。 在退出Fireworks 8时，如果文件没有保存，会出现下面的提示对话框。,4.1.2 Fireworks 8的工作界面,4.1.2 Fireworks 8的工作界面,1. 标题栏 和其他程序相同，界面最上部即是蓝色的标题栏，其中显示了应用程序的名称、最小化和还原之间的切换按钮以及“关闭”按钮。2. 菜单栏 菜单栏包含“文件”、“编辑”、“视图”、“选择、”“修改”、“文本、”“命令”、“滤镜、”“窗口”、“帮助”10个菜单项，几乎所有的功能都可以通过这些菜单来实现。3. 工具面板 默认状态下，工具面板位于工作界面左
4、侧，其中的工具被编排为6个类型：选择、位图、矢量、Web、颜色和视图。,4.1.2 Fireworks 8的工作界面,Fireworks 8 工作面板,4.1.2 Fireworks 8的工作界面,4.“属性”面板 当选择对象或选取工具的时候，其相关信息就会在“属性”面板中显示出来。同时也可以通过修改“属性”面板中的数据或内容来调整图像的相关属性。例如图像的大小、位置及色彩等等。5. 其他面板组 面板组是Fireworks中常用的资源面板，也是浮动的控件，能够帮助用户编辑所选对象的各个方面或文档的元素。Fireworks的组合面板共有14个，分别为“信息”、“层”、“混色器”、“颜色样本”、“
5、样式”、“URL”、“库”、“形状”、“帧”、“历史记录”、“行为”、“查找”、“优化”和“对齐”面板”。每个面板即可相互独立进行排列又可与其它面板组合成一个新面板。但各面板的功能依然相互独立。点击面板上的名称可展开或折叠该面板。6. 状态栏 状态栏显示已创建文档的其他相关信息。,4.1.2 Fireworks 8的工作界面,7. 文档编辑区 在文档编辑区上不仅可以绘制矢量图形，也可以直接处理位图图像。,（1）原始：当前是“原始”选项窗，也就是工作区，只有在此窗口中才能编辑图像文件。（2）预览：在“预览”选项窗中，可以模拟浏览器预览制作好的图像。（3）2幅、4幅：2幅默认是左右分割窗口，左边显
6、示的是原始图像，右边显示的是经过特定格式优化处理后图像文件的预览。4幅是以十字形分割窗口，可以显示更多种预览，原始图像位于右上角的位置。,本讲小结,4.1.1 Fireworks的启动与关闭 4.1.2 Fireworks 8的工作界面,上机作业,【实战训练一】第1步骤：设置文档或导入图像 【实战训练二】第1步骤：设置文档或导入图像 【拓展实战一】第1步骤：设置文档或导入图像 【拓展实战二】第1步骤：设置文档或导入图像,第二讲 Fireworks的基本操作,教学内容 4.2.1 制作页面图像 4.2.2 图像的优化与导出 教学重点和难点 掌握页面图像制作的方面，掌握图像的优化与导出。,4.2.
7、1 制作页面图像,1创建文档 要创建新图像，可以使用“开始页”创建文档，也可以通过选择【文件】【新建】菜单命令，打开如下图所示的“新建文档”对话框。,设置好参数后，单击“确定”按钮，即可创建一个默认名称为“未命名-1.png”的空白普通图像文档。,4.2.1 制作页面图像,2导入图像 选择【文件】【导入】菜单命令，弹出“导入”对话框。利用该对话框，可以导入PNG、BMP、WMF、TIFF、JPEG和GIF等格式的图像文件，以及HTML、ASCII文本、RTF文本等格式的文件。,【任务4-1-1】 导入图像,【操作要求】 在D:rootunit4文件夹中新建文件夹，名称为X4-01，启动Fire
8、works 8，导入D:素材第四章Y4-01Y4-01.png。【操作步骤】（1）在D:rootunit4文件夹中新建文件夹，名称为X4-01。（2）启动Fireworks 8程序，程序会启动“开始页”，单击“新建Fireworks 文件”按钮，弹出“新建文档”对话框，设置好参数后即可创建一个Fireworks文档。（3）选择“文件”“导入”命令，通过弹出的“导入”对话框导入D:素材第4章Y4-01Y4-01.png。,4.2.1 制作页面图像,3. 创建文本效果 文本在Web图形中占据特殊的地位，常常起到画龙点睛的作用。基于图形的文本通常用于创建徽标、特殊标题以及其他的装饰性内容，另外图形化
9、文本也常常用作导航信息。,【任务4-1-2】 绘制页面图像,【操作要求】 参照样图完成页面图像框架。在样图文档的（18，248）处输入文本“http:/www.Fireworks MX.com”，样式为“Style23”，字号为35，文本宽度为320，高度为30。,【任务4-1-2】 绘制页面图像,【操作步骤】 （1）打开“未命名-1.png”文档，单击工具栏中的文本工具，然后在画布上单击并输入文本，如下图所示。,【任务4-1-2】 绘制页面图像,【操作步骤】 （2）选中文本，在“属性”面板中设置文本的x为18，y为248，宽度的值为320，高度的值为30，字号为35，设置后的“属性”面板如下
10、图所示。,【任务4-1-2】 绘制页面图像,【操作步骤】 （3）选择“窗口”“样式”命令，打开“样式”面板，选择样式23，如下图所示。,4.2.1 制作页面图像,4. 按钮与特效的使用 在Fireworks中，按钮就是一个包含了按钮所有可能外观的翻转图片，分别代表了各种使用状态。每一个按钮都有最多4种外观或状态，每个状态又对应了一种鼠标动作。（1）释放状态：一般状态，是按钮的默认外观，指当指针不在该按钮位置时显示的状态。（2）滑过状态：在Web浏览器中光标经过此按钮时的显示外观。（3）按下状态：单击按钮时所显示的状态。（4）按下时滑过状态：当光标经过处于“按下”状态时按钮的显示外观。 大部分按
11、钮都至少有两种状态，既释放与滑过状态。由于“滑过状态”通常用于提示用户单击此按钮时将执行的动作，因此该状态使用最为频繁。,【任务4-1-3】 制作按钮,【操作要求】 在“未命名-1.png”文档的左列插入宽度为112像素、高度为28像素的按钮。按钮类型为4-state Button中的一种，设置文本字体为隶书、粗体，大小为25。放置位置从上到下依次为（3，20）、（3，70）和（3，120）。,【任务4-1-3】 制作按钮,【操作步骤】（1）选择“窗口”“库”命令，打开“库”面板，单击 按钮，新建一个名称为“专栏”的按钮元件，如下图所示。,【任务4-1-3】 制作按钮,【操作步骤】（2）在打开
12、的按钮编辑器里，可以创建和编辑 JavaScript 按钮元件。按钮编辑器顶部的选项卡对应于4种按钮状态和活动区域。按钮编辑器中有关每个选项的提示有助于用户决定如何设计所有这4种按钮状态。 通过按钮编辑器的“导入按钮”按钮选择4-state Button中的一种，然后设置按钮文本“专栏”字体为隶书、粗体，大小为25，如下图所示。,【任务4-1-3】 制作按钮,【操作步骤】（3）用同样的方法制作“教程”和“论坛”按钮，修改3个按钮的宽度为112像素、高度为28像素，然后把3个按钮依次放置在(3,20)、(3,70)、(3,120)位置，制作好的页面图像如下图所示。,4.2.1 制作页面图像,5.
13、 设定交互图像或文本 图像变换技术在网页中经常被用到，即当鼠标移动到某图像或按钮上时，会触发另一个图形的显示。在Fireworks中，图像变换的制作原理就是使“帧”面板中某帧中的图形对象与来自任何帧的图像进行交换，从而达到在网页浏览时产生图形变换的效果。,【任务4-1-4】设置交互图像,【操作要求】 创建鼠标移动到3个按钮（技巧、教程和论坛）上交互图像的效果，交互图像宽度为150像素，高度为150像素，在（350，130）的区域中显示。3个按钮的交互图像从上到下依次与“素材第四章Y4-01Y4-01A.gifY4-01C.gif”图像对应，初始状态显示Y4-01A.gif图像。,【任务4-1-
14、4】设置交互图像,【操作步骤】 （1）选择“文件”“导入”命令，导入D:素材第4章Y4-01Y4-01A.gif图片，放置在(350,130)位置，宽度为150像素，高度为150像素，如下图所示。,【任务4-1-4】设置交互图像,【操作步骤】 （2）选中导入的Y4-01A.gif图片并右击，从弹出的快捷菜单中选择“插入切片”命令，如下图所示。,【任务4-1-4】设置交互图像,【操作步骤】 （3）选择“窗口”“帧”命令，打开“帧”面板，在其中新增加一帧，并在此帧上引入交互图像Y4-01B.gif，如下图所示。,【任务4-1-4】设置交互图像,【操作步骤】 （4）同样的操作方法，在“帧”面板中新增
15、加一帧，导入交互图像Y4-01C.gif。 （5）单击“帧1”，回到初始界面，设置交互。选中“专栏”按钮并单击，在下拉菜单中选择“添加交换图像行为”命令，如图4-19所示。在弹出的“交换图像”对话框中，选择待交换图像所在的切片，然后在“交换图像显示自”区域中选择“帧1”，如下图所示。,【任务4-1-4】设置交互图像,【操作步骤】 （6）选中“教程”按钮并单击，在下拉菜单中选择“添加交换图像行为”命令，在弹出的“交换图像”对话框中选择待交换图像所在的切片，然后在“交换图像显示自”区域中选择“帧2”；选中“论坛”按钮并单击，在下拉菜单中选择“添加交换图像行为”命令，在弹出的“交换图像”对话框中选择
16、待交换图像所在的切片，在“交换图像显示自”区域中选择“帧3”。如下图所示。,4.2.2 图像的优化与导出,Web图像设计的最终目标是希望获得尽可能高的清晰度与尽可能小的尺寸，从而使图像的下载速度达到最快。为此，必须对图像进行相应的优化，图像只有被“优化”后才能进行“导出”操作。 1.优化图像 在Fireworks中，通常使用“优化”面板进行优化，然后执行“导出”命令将图像导出。,【任务4-2-1】优化图像,【操作要求】 设置为选择“JPEG较小文件”选项，品质为60，平滑为2。,【操作步骤】（1）选择“窗口”“优化”命令，打开“优化”面板，如下图所示。,【任务4-2-1】优化图像,【操作步骤】
17、 （2）在“设置”下拉列表框中选择“JPEG较小文件”选项，设置品质为60，平滑为2，如下图所示。,4.2.2 图像的优化与导出,2. 建立切片 切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks 还创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形。 将图像切片至少有三个主要优点： （1）“优化”：网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使你可以使用最适合的文件格式和压缩设置来优化每个独立切片。 （2）“交互性”：你可以使用切片来创建响应鼠标事件的区域。 （3）“更新网页的某些部分”：切片使你可以轻
18、松地更新网页中经常更改的部分。,4.2.2 图像的优化与导出,可以使用以下方法来创建切片对象：使用“切片”工具绘制切片对象，或者基于所选对象插入切片。 从切片对象延伸的线是切片辅助线，它确定导出时将文档拆分成的单独图像文件的边界。默认情况下，这些辅助线为红色。（1）若要基于所选对象插入切片：选中对象，然后选择“编辑”“插入”“矩形切片”或“多边形切片”，它的区域包括所选对象最外面的边缘。如果选择了多个对象，请选择应用切片的方式：“单一”可创建覆盖全部所选对象的单个切片对象。“多重”可为每个所选对象创建一个切片对象。（2）若要绘制矩形切片对象：选择“切片”工具 。拖动以绘制切片对象。切片对象出现
19、在“网页层”上，而切片辅助线出现在文档中。,【任务4-2-2】 建立切片,【操作要求】 参照样图完成对图像的切片操作。,【任务4-2-2】 建立切片,【操作步骤】 （1）打开“未命名-1.png”文档，3个按钮与交换图像已经建立切片。 （2）选中文字http:/www.Fireworks MX.com并右击，在弹出的快捷菜单中选择“插入切片”命令。 （3）选择圆球并右击选择“插入切片”命令。 （4）在工具栏中选择切片工具，然后选定小球与下方线条所处的范围，即可创建一个切片。同样的方法，设置另两个小球与线条的切片。 至此，整个文档的切片就建立好了。,4.2.2 图像的优化与导出,3. 导出为HT
20、ML文档 如果对优化和导出网页图形不太熟悉，可以使用“导出向导”。使用“导出向导”可以轻松导出图形，而无需了解优化和导出的细节。“导出向导”带领您逐步完成优化和导出过程。回答关于文件目的地和预期用途的问题，然后“导出向导”将就文件类型和优化设置提出建议。如果更愿意优化到目标文件大小，则“导出向导”将优化导出的文件，使其适合您设置的大小限制。 从 Fireworks 导出的过程分为两步。首先，必须通过优化来准备要导出的图形或文档。在优化了图形或文档后，您可以将其导出。可以用多种方法导出 Fireworks 图形。可以将文档导出为 GIF、JPEG 或其它图形文件格式的单个图像。或者可以将整个文档
21、导出为 HTML 文件及其相关的图像文件。或者可以选择只导出所选切片。还可以只导出文档的指定区域。另外，也可以将Fireworks 帧和层导出为单独的图像文件。,【任务4-2-3】导出为HTML文档,【操作要求】 将“未命名-1.png”文档导出到D:rootunitX4-01文件夹，命名为X4-01.Htm。,【任务4-2-3】导出为HTML文档,【操作步骤】 （1）打开“未命名-1.png”文档，选择“文件”“导出”命令，打开“导出”对话框， 如下图所示。,【任务4-2-3】导出为HTML文档,【操作步骤】 （2）在“导出”对话框中，选择X4-01文件夹，将导出文件名设置为X4-01.htm，导出类型设置为“HTML和图像”，HTML代码的导出方法设置为“导出HTML文件”，切片的导出设置为“导出切片”，如下图所示。,本讲小结,4.2.1 制作页面图像 4.2.2 图像的优化与导出,上机作业,【实战训练一】制作和优化页面图像1 【实战训练二】制作和优化页面图像2 【拓展实战一】制作和优化页面图像1 【拓展实战二】制作和优化页面图像2,
