第10章网页图形处理工具Fireworks8.ppt

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