教学材料《网页》-第四章

模块4Fireworks图形图像处理4.1Fireworks的特性和基本功能4.2FireworksCS3工作界面及基本操作4.3创建矢量图形4.4处理位图图像4.5输入与编辑文本4.1Fireworks的特性和基本功能Fireworks是用来设计和制作专业化网页图形的终极解决方案。它是第一个可以帮助网页图形设计人员和开发人员解决所面临的特殊问题的制作环境，是一个优秀的创建高质量的JPEG和GIF图像的工具软件。4.1.1Fireworks的特性(1)简单易用。(2)功能强大。(3)与Dreamweaver和Flash高度交互。(4)开放的工作流程。返回下一页上一页4.1Fireworks的特性和基本功能4.1.2Fireworks的功能(1)数据驱动图形向导。(2)创建按钮。(3)创建导航栏。(4)创建弹出式菜单。(5)增强型的面板。(6)极大增强的导入和导出功能。(7)JPEG图像局部压缩技术。(8)批处理功能。(9)兼容Photoshop文本。(10)切片表布局控件。返回下一页上一页4.1Fireworks的特性和基本功能作为一款优秀的Web图形设计软件，FireworksCS3提供了许多优秀的功能，其中最主要的有以下6种。1)位图图像编辑FireworksCS3提供了编辑和操作位图图像的环境，并提供了所有常用的专业位图工具与效果(如魔术棒、线条、渐变、锐化工具等)。在Fireworks中，每个图像都是一个独立的对象，从而确保了其完全可编辑性。2)矢量图形编辑FireworksCS3提供了编辑和操作矢量图形的环境，并提供了路径和多个工具来辅助绘制矢量图形。因为矢量图形不受分辨率的影响，所以当用户在应用程序之间复制与粘贴矢量图形或输入Freehand与Illustrator文件时，图层将被保留，并且可以在Fireworks中对矢量图形进行编辑。返回下一页上一页4.1Fireworks的特性和基本功能3)文本处理FireworksCS3通过提供包括颜色设置在内的所有文本属性，可以直接创建和编辑文本。字体预览允许用户在选择字体前观察字体，“丢失字体”对话框允许用户选择替换字体，新的反锯齿控制可以较好地处理小字体。4)移至下页利用FireworksCS3中提供的切片工具，用户可以直接根据选定对象创建切片，或者利用切片工具绘制矩形或多边形切片。经切片后的图像，可以配合“行为”面板设置翻转图像等动作。由于将大图像切成几小块，从而有效避免了因网速慢而显示不出图像的后果。返回下一页上一页4.1Fireworks的特性和基本功能5)制作动画FireworksCS3允许用户直接在屏幕上创建和编辑简单动画，这些动画通过多帧移动、缩放、旋转或淡入(出)对象来实现。6)图像优化在FireworksCS3中，用户可以利用“优化”控制面板设置图像的优化参数。通过快速比较JPG与GIF图形，可以以最少步骤创建最小尺寸与高质量图形。返回下一页上一页4.2FireworksCS3工作界面及基本操作4.2.1FireworksCS3工作界面FireworksCS3的工作界面如图4-1所示。下面介绍该界面的主要组成部分。1.标题栏与其他Windows应用程序类似，程序窗口最上方的蓝色条为标题栏，在标题栏的左侧显示了应用程序的名称和当前打开的文档的名称，标题栏右侧为三个窗口控制按钮。2.菜单栏在菜单栏上集成了FireworksCS3所有的命令，几乎所有的工作都可以通过菜单栏中的菜单命令来完成。为了便于使用，FireworksCS3将所有的命令根据其功能划分为“文件”、“编辑”、“视图”、“选择”、“修改”、“文本”、“命令”、“滤镜”、“窗口”和“帮助”10个菜单。返回下一页上一页4.2FireworksCS3工作界面及基本操作(1)“文件”:执行新建、打开、保存和关闭文档等操作，同时还可以导入、导出文档，执行打印等操作。(2)“编辑”:执行剪切、复制、粘贴、插入按钮和插入库对象等操作。(3)“视图”:缩放工作区的显示，设置缩放比率，设置辅助绘图工具(如标尺、栅格、辅助线等)显示。(4)“选择”:提供多种选择对象的方式，还可以修改选区大小、执行羽化等操作。(5)“修改”:可以修改画布大小和方向，修改动画、元件和弹出菜单，以及执行对选中对象的对齐、变形和排列等操作。(6)“文本”:修改文字字体、大小、风格和对齐方式，设定文本与路径的关系，检查拼写等操作。返回下一页上一页4.2FireworksCS3工作界面及基本操作(7)“命令”:对已保存命令、脚本等进行管理，设置窗口布局、文档等对象属性和显示状态。(8)“滤镜”:利用外挂滤镜对颜色、模糊化和锐度等进行特效处理。(9)“窗口”:控制各种浮动面板的打开与关闭。(10)“帮助”:打开FireworksCS3的帮助文档及在线链接技术网站。3.工具栏菜单栏下方是工具栏，FireworksCS3中有两种工具栏:“主要”工具栏和“修改”工具栏，前者用来进行创建、打开、保存文档及撤销、重做等操作，后者用来对工作区中的对象进行修改。返回下一页上一页4.2FireworksCS3工作界面及基本操作4.工具箱在FireworksCS3中，几乎所有的绘图操作都是通过工具箱进行的，其中包括“选择”、“位图”、“矢量;“Web”,“颜色”和“视图”6种类别的工具，如图4-2所示。其中每个大类又包含若干工具，每个带下三角按钮的工具都表示该工具还有功能相似但作用不同的工具可以选择，用鼠标左键按住这个下三角按钮一段时间，就会显示出其他被隐藏的工具。5.“属性”面板“属性”面板通常位于程序窗口的下方，多与工具箱一起使用。未选取任何工具时，“属性”面板显示的是文档属性，如图4-3所示;选取工具箱中的某个工具时，可以在“属性”面板上调整其属性,如图4-4所示为选取“橡皮擦”工具时的“属性”面板。返回下一页上一页4.2FireworksCS3工作界面及基本操作6.面板区Fireworks的一大特点是能够使用各种各样的面板来完成功能设定，用户可以随时关闭或打开面板，默认情况下，Fireworks打开了“优化”、“层”、“颜色”、“资源”和“帧和历史记录”等面板，这些面板的展开、折叠等基本操作与“属性”面板相同。7.工作区工作区是用户进行绘图及图形编辑的区域，与其他大多数软件不同的是，FireworksCS3的工作区可以有多种不同的视图模式，包括“原始”、“预览”、"2幅”和“4幅”4种视图模式。其中，“原始”视图模式用于图形编辑，而其他几个视图模式则用于观察图像优化输出时的效果.返回下一页上一页4.2FireworksCS3工作界面及基本操作单击工作区上方的“原始”按钮，可以显示当前编辑的FireworksCS3文档的内容。单击工作区上方的“预览”、“2幅”和“4幅”按钮，可以以预览的方式显示图像的优化结果。在“预览”视图模式下显示的是该图像在浏览器中显示的外观;在“2幅”和“4幅”视图模式下，用户可以对进行了优化的图像的优化结果进行比较。FireworksCS3是一个多文档编辑程序，它可以同时打开多个图像进行编辑，且每个图像都分别处于一个独立的图像窗口中，同时，工作区上方会显示每个文档的标签。返回下一页上一页4.2FireworksCS3工作界面及基本操作4.2.2文档的基本操作1.文档的打开和保存1)打开文档选择“文件”∣“打开”菜单命令。弹出“打开”对话框，如图4-5所示。在查找范围栏中选择文档地址，鼠标单击选择文档，如果希望打开的文件以“未命名”形式显示，可选择“打开为“未命名”’复选框。若要以“动画方式”形式显示，可选择“以动画打开”复选框，单击“确定”按钮，打开文档。返回下一页上一页4.2FireworksCS3工作界面及基本操作2)导入文档在编辑文档时，可以导入其他格式的文档，选择“文件”∣“导入”命令，弹出“导入”对话框，利用该对话框，可以导入.BMP,.WMF,.TIFF,.JPEG和.GIF等格式的图像文件，以及.HTML.、ASCII文本、.RTF文本等格式的文件。3)保存文档如果需要将编辑的文档以其他名字保存，可选择“文件”∣“保存”命令，弹出“另存为”对话框，利用该对话框，可以将编辑好的图像保存为.PNG格式文件。2.改变文档属性1)改变画布尺寸返回下一页上一页4.2FireworksCS3工作界面及基本操作选择“修改”∣“画布”∣“画布大小”命令或单击属性面板中的“画布大小”按钮，弹出“画布大小”对话框，如图4-6所示。在该对话框的新尺寸文本框中，输入画布的宽度和高度，单击“确定”按钮，即可改变画布的大小。2)改变图像尺寸选择“修改”∣“画布”∣“图像大小”命令，弹出“图像大小”对话框，如图4-7所示。在该对话框的“像素尺寸”文本框中，输入修改后图像的像素值，单击“确定”按钮即可改变图像的大小。返回下一页上一页4.2FireworksCS3工作界面及基本操作3)改变画布背景色选择“修改”∣“画布”∣“画布颜色”菜单命令，弹出“画布颜色”对话框，利用该对话框可以使画布颜色变成透明色等。在该对话框内，选择“透明”单选按钮，可使画布颜色变成透明色，在文档窗口中会显示灰白相间的图案，但不会影响文档的存储。在设置好画布的背景色以后，单击“确定”按钮即可改变画布背景色。4)剪裁画布选择“修改”∣“画布”∣“修剪画布”菜单命令或者单击工具箱中的“‘裁剪’工具”按钮，然后在画布上拖出一个矩形框，围住所需要的图像，按Enter键，即可完成剪裁画布操作。返回下一页上一页4.2FireworksCS3工作界面及基本操作5)改变画布显示比率方法一:选择“视图”∣“放大(缩小)”命令，可使画布放大或缩小显示，而画布实际大小不变。方法二:选择“视图”∣“缩放比率”命令，选择其子菜单中的系统缩放比率，即可改变画布显示大小。方法三:选择“视图”∣“符合全部”命令，可使画布与文档窗口大小一致。6)优化文档在导出文档前要对文档进行优化处理。选择“窗口∣优化”菜单命令，打开优化面板，设置文档格式、图像品质和平滑度等参数，进行图像的优化。返回下一页上一页4.2FireworksCS3工作界面及基本操作7)导出部分区域中的图像单击工具箱“选择”栏内的“导出区域”工具按钮

，用鼠标在图像上拖动出一个矩形区域，此区域为导出区域。用鼠标拖动调整矩形区域四周的黑色矩形控制点，可以调整矩形区域的大小，也就调整了所选图像的大小，再按Enter键，弹出图像预览对话框，如图4-8所示。该对话框的右侧会显示选择区域内的图像。此时可以对这部分图像进行优化处理，然后单击导出预览对话框中的“导出”按钮，即可导出选中区域中的图像。返回下一页上一页4.3创建矢量图形4.3.1矢量工具介绍工具箱的第三栏为“矢量”工具栏，与“位图”工具栏不同的是，使用矢量工具创建的是矢量图形。该工具栏中主要工具包括以下几项。:“直线”工具，使用该工具在工作区中按住鼠标左键并拖动，可以创建直线对象。:“钢笔”工具，使用该工具可以创建路径。路径上的每个节点均可以调节，从而创建圆滑的曲线。在该工具上按住鼠标左键并停留片刻，可打开如图4-9所示的“钢笔”工具组，利用此工具组可以切换到“矢量路径”工具和“重绘路径”工具。返回下一页上一页4.3创建矢量图形

矩形”工具，使用该工具可以创建矩形对象，此外，在该工具上按住鼠标左键并停留片刻，可以打开如图4-10所示的工具组，除了可以切换到“椭圆”和“多边形”工具之外,还可以切换到智能矢量工具，即下面的“L形”、“圆角矩形”等工具。:“文本”工具，使用该工具可以在工作区添加文字对象。：“自由变形”工具，使用该工具可以对选中的路径对象的节点进行调整，从而改变对象的形状。在该按钮上按住鼠标左键并停留片刻，可以打开如图4-11所示的“自由变形”工具组菜单。“刀子”工具，使用该工具可以将矢量对象从鼠标拖拽过的地方一分为二。返回下一页上一页4.3创建矢量图形4.3.2绘制矢量图形1.绘制直线使用直线工具来绘制直线路径。首先单击“直线”工具按钮

，然后在画布上按住鼠标左键拖动，到合适的位置后释放鼠标，这样便绘制出一条连接两点的直线，如图4-12所示。接下来可以在工具箱的“颜色”部分选择绘图的颜色，如图4-13所示。颜色主要分为两个内容:描边色和填充色，如图4-13所示，此直线描边色为绿色，填充色为无色。:使用默认笔触和填充色，即笔触使用白色。:没有描边或填充色，都使用透明色。:快速交换笔触和填充色。返回下一页上一页4.3创建矢量图形2.绘制基本几何图形Fireworks中提供了一组矢量工具，即矩形、椭圆和多边形工具，可以用它们来绘制基本几何图形。1)矩形单击工具箱中基本绘图部分的“矩形”工具按钮，在文档的空白处，按住鼠标左键，拖动鼠标，绘制出一个矩形，释放鼠标，一个矩形便产生了。按照此方法可以绘制多个矩形，如图4-14所示。提示:绘制正方形的方法是在选择“矩形”工具后拖动鼠标的同时，按住Shift键;从指定中心点绘制矩形的方法是按住Alt键的同时拖动鼠标;从指定中心点画正方形的方法是按住Shift+Alt键的同时拖动鼠标。返回下一页上一页4.3创建矢量图形2)椭圆形单击工具箱中基本绘图部分的“椭圆”工具按钮，在文档的空白处，按住鼠标左键，拖动鼠标，绘制出一个矩形，释放鼠标，一个椭圆便产生了。按照此方法可以绘制多个椭圆，如图4-15所示.3)多边形单击工具箱中基本绘图部分的“多边形”工具按钮，在文档的空白处，按住鼠标左键，拖动鼠标，绘制出一个多边形，释放鼠标，一个多边形便产生了。按照此方法可以绘制多个多边形，如图4-16所示。使用多边形工具即可以绘制多边形，也可以绘制星形，选择多边形工具后，首先在属性面板中进行相应的形状设置，便可绘制出不同的图形，如图4-17所示。返回下一页上一页4.3创建矢量图形4.3.3绘制有动形状图形除基本的图形绘制工具外，FireworksCS3还提供了绘制自动形状的工具，这些工具与基本图形绘制工具一样，也位于“工具”面板中，如图4-18所示。自动形状是智能矢量对象组，这些对象组遵循特殊的规则以简化常用可视化元素的创建和编辑。与基本绘图工具不同的是，选定的自动形状除了具有对象组控制手柄外，还具有菱形的控制点。每个控制点都与形状的某个特定可视化属性关联，拖动某个控制点只会改变与其关联的可视化属性。大多数自动形状控制点都带有工具提示(将指针移到一个控制点上可以看到)，以描述如何影响自动形状。图4-19所示为绘制的L形自动形状图形，其绘制方法类似于某个图形的绘制。返回下一页上一页4.3创建矢量图形对所有自动形状及控制点的说明如下:“L形绘制直角边形状的对象组。使用控制点可以编辑水平和垂直部分的长度、宽度以及边角的曲率。·凹角矩形绘制带有倒角的矩形形状(边角在矩形内部成圆形)的对象组。可以同时编辑所有边角的倒角半径，或者更改个别边角的倒角半径。·圆环图形绘制实心圆环形状的对象组。使用控制点可以调整内环的周长或将圆环形状拆分为几个部分。·圆角矩形绘制带有圆角的矩形形状的对象组。使用控制点可以同时编辑所有边角的圆度，或者更改个别边角的圆度。·圆饼形统计图表绘制饼图形状的对象组。使用控制点可以将饼图形状拆分为几个部分。返回下一页上一页4.3创建矢量图形·斜角矩形绘制带有切角的矩形形状的对象组。使用控制点可以同时编辑所有边角的斜切量，或者更改个别边角的斜切量。·星形绘制星形形状(顶点数在3一25之间)的对象组。使用控制点可以添加或删除顶点，并可以调整各顶点的内角和外角。·智能多边形绘制具有3一25条边的正多边形形状的对象组。使用控制点可以调整大小和旋转、添加或删除线段、增加或减少边数，或者向图形中添加内侧多边形。·箭形绘制任意比例的普通箭头形状的对象组。使用控制点可以调整箭头的锥度、尾部的长度和宽度，以及箭尖的长度。·螺旋形绘制开口式螺旋形形状的对象组。使用控制点可以编辑螺旋的圈数，并可以决定螺旋形是开口的还是闭合的。返回下一页上一页4.3创建矢量图形·连接线段绘制的对象组显示为3段的连接线形，如那些用来连接流程图或组织图元素的线条。使用控制点可以编辑连接线形的第1段和第3段的端点，以及编辑用于连接第1段和第3段的第2段的位置。4.3.4编辑矢量图形要编辑矢量图形，首先必须选取要编辑的图形对象。1.选择工具FireworksCS3提供了3种选择工具，它们位于工具箱的上方。1)“指针”工具

。可以通过单击某一路径上的一点或一部分来选定整个路径，是较为常用的选取工具。返回下一页上一页4.3创建矢量图形单击对象或者在全部或部分对象周围拖动选区时，“指针”工具会选择这些对象。将指针对象移到对象的路径或定界框上，然后单击。如果要一次选择多个对象，可以使用拖动鼠标的方法，在选择“指针”工具的状态下，在要选择的多个对象外围按住鼠标左键，拖动鼠标直至画出的范围足以包含各对象的主要部分或者全部。释放鼠标，即可完成操作。2)“选择后方对象”工具在有些情况下，多个对象大致处于同一位置，如果前面的对象较大，遮挡住了后面的对象，这就可以使用“选择后方对象”工具来选取。选择“选择后方对象”工具后在层叠的对象上反复单击，以层叠顺序自上而下通过对象，直到选择所需的对象。返回下一页上一页4.3创建矢量图形3)“部分选定”工具可以选定独立的节点或某一路径上的线段，并且显示出路径上的所有方向线以利于调整。如果多个对象组合在一起，则“指针”工具只能选择组合前的单个对象。但使用“部分选定”工具，则可以选择、移动或修改矢量路径上的点或者属于组的对象。2.编辑所选对象FireworksCS3中可以对位图和矢量图进行多种编辑操作，如对象的移动、复制、变形和组织等，还可以对矢量路径进行修改。1)移动对象对象的移动主要有以下3种方法:返回下一页上一页4.3创建矢量图形(1)用鼠标拖曳对象:这是最直接也是最简单的方法，选中一个或多个对象，然后将鼠标移动到被选中的对象上面，按住鼠标左键不放，将其拖动到希望的位置上。如果在拖动的同时按住Shift键，那么移动只能发生在水平、垂直及45°角上。(2)使用方向键移动:选中对象后，按住Shift键的同时使用方向键以10个像素为单位移动对象，或只用方向键以一个像素为单位精确移动。(3)使用属性面板移动对象:将对象选中后，在“属性”面板中输入X和Y的坐标，坐标以画布为基准。2)裁剪对象裁剪对象的方法是单击“裁剪”工具按钮，移动鼠标指针到图形图像上要裁剪的位置，单击并拖动出一个矩形选区，然后在选区内双击鼠标，即可将矩形选区裁剪出来。返回下一页上一页4.3创建矢量图形3)变形和扭曲对象使用“缩放”工具、“倾斜”工具、“扭曲”工具和其他命令可以实现对所选对象的变形和扭曲操作。也可选择“修改”∣“变形”∣“”命令。(1)缩放对象:缩放对象可以对对象进行水平方向、垂直方向或锁定比例的放大或缩小。其操作方法是:选中对象后，单击“缩放”工具按钮，若要同时水平和垂直缩放对象，则拖动角手柄。如果在缩放时按住Shift键，可以约束比例。若要水平或垂直缩放对象，请拖动边手柄。若要从中心缩放对象，可在拖动任何手柄时按Alt键。返回下一页上一页4.3创建矢量图形也可选择“修改”∣“变形”∣“缩放”命令。然后进行上述操作。(2)倾斜对象:倾斜对象通过将对象沿水平轴、垂直轴或同时沿两个轴倾斜达到变形效果。其操作方法是:选中要操作的对象，单击“倾斜”工具按钮，将鼠标移动至对象的4边，可将对象沿水平方向、垂直方向倾斜为平行四边形。将鼠标移动至对象的4角，当鼠标指针变成指针状时单击并拖动鼠标，可将对象沿水平和垂直方向倾斜为梯形。也可选择“修改”∣“变形”∣“倾斜”命令。然后进行上述操作。(3)扭曲对象:通过用“扭曲”工具拖动选择手柄可以更改对象的大小和比例。返回下一页上一页4.3创建矢量图形其操作方法是:选中要操作的对象，单击“扭曲”工具按钮，将鼠标移动至对象的4边或4角，单击并拖动鼠标即可进行任意扭曲，在窗口内双击或按Enter键应用更改。(4)旋转对象:旋转对象时，对象绕中心点转动。其方法是选择预设的角度或将指针放在对象的变形手柄外部，以便在拖动之前显示旋转指针。利用菜单可以旋转180°，顺时针90°或逆时针90°。在使用变形工具旋转时按住Shift键，可以15°为单位旋转对象。(5)翻转对象:可以沿垂直轴或水平轴翻转对象，而不移动对象在画布上的相对位置。翻转对象时，选择“修改”∣“变形”∣“水平翻转”或“垂直翻转”命令。返回下一页上一页4.3创建矢量图形(6)数值变形:可以输入特定的值对对象进行操作。其操作方法是选择“修改”∣“变形”∣“数值变形”命令，在弹出的数值变形对话框中选择“缩放”、“调整大小”或“旋转”变形类别，然后输入变形的数值，选中变形属性复选框，则变形时包括对象的填充、笔触和效果，选中约束比例复选框，则在变形过程中锁定对象的比例，最后单击“确定”按钮。4)组织对象当画布中包含多个对象时，可以对多个对象进行对齐、堆叠或组合的操作。(1)对齐对象①将对象与最左方的所选对象对齐，可以选择“修改”∣“对齐”∣“左对齐”命令。返回下一页上一页4.3创建矢量图形②将对象的中心点与垂直轴对齐，可以选择“修改”∣“对齐”∣“垂直居中”命令。③将对象与最右方的所选对象对齐，可以选择“修改”∣“对齐”∣“右对齐”命令。④将对象与最上方的所选对象对齐，可以选择“修改”∣“对齐”∣“顶对齐”命令。⑤将对象的中心点与水平轴对齐，可以选择“修改”∣“对齐”∣“水平居中”命令。⑥将对象与最下方的所选对象对齐，可以选择“修改”∣“对齐”∣“底对齐”命令。要使3个或3个以上的对象中心或边缘均匀相隔，可以先将所有对象选定，然后执行如下的操作:返回下一页上一页4.3创建矢量图形①如要均分宽度，可以选择“修改”∣“对齐”∣“均分宽度”命令。②如要均分高度，可以选择“修改”∣“对齐”∣“均分高度”命令。(2)堆叠对象要更改多个对象的堆叠顺序，可以先将对象选定，然后执行如下的操作。①将对象移到最上层，可以选择“修改”∣“排列”∣“移到最前”命令。②将对象上移一层，可以选择“修改”∣“排列”∣“上移一层”命令。③将对象下移一层，可以选择“修改”∣“排列”∣“下移一层”命令。返回下一页上一页4.3创建矢量图形④将对象移到最底层，可以选择“修改”∣“排列”∣“移到最后”命令。如果选定了多个对象，所选对象将在未选对象之前或之后移动，并保持它们之间的相对顺序。(3)组合对象选择“修改”∣“组合”命令。可以将多个对象组合在一起，将它们作为一个单一对象处理。如要取消组，可以选择“修改”∣“取消组合”命令。单击“部分选定”工具按钮:可以在不取消组合的情况下选定组合中的对象。返回下一页上一页4.3创建矢量图形4.3.5使用路径工具路径类似于矢量化的曲线，通过“钢笔”工具、“矢量路径”工具和“重绘路径”工具，可以创建具有各种方向和弧度的路径。对于网站CICorporateImage，由于要具有某种特殊化的形状，因此常常使用路径工具来进行绘制。返回下一页上一页4.3创建矢量图形1.关于路径路径是由贝塞尔(Bezier)曲线组成的。在贝塞尔曲线的两端存在着两个锚点AnchorPoints，这两个锚点之间是由称为控制点的空间参照物的位置来决定的，每个控制点沿锚点的切线方向排列。如果控制点发生了移动，那么与锚点之间的线性联系也就随之发生变化。因此，贝塞尔曲线的形状也将发生变化。控制点离锚点越近时，曲线所包含的区域就越小，甚至可以使控制点与锚点重合，在这种情况下，曲线就不会成为封闭区域;在特殊情况下，当控制点与锚点重合时，将形成一条直线。路径上面有贝塞尔曲线、锚点等元素，通过锚点延伸出来的控制线和控制点可以控制路径的外观，整个构成如图4-20所示。返回下一页上一页4.3创建矢量图形2.创建和编辑路径1)直线路径与曲线路径直线路径和曲线路径的绘制都可以使用“钢笔”工具，其操作步骤如下:(1)新建一个文档，为精确定位，可以选择“视图”∣“标尺”命令以打开标尺。(2)在工具面板的“矢量”选项组中，选中“钢笔”工具，在文档窗口中单击，创建路径的第1个锚点，该锚点以蓝色小方块显示。(3)移动鼠标并再次在文档窗口内单击，此时系统自动将第1,第2个锚点连接成一条直线路径，如图4-21所示。返回下一页上一页4.3创建矢量图形(4)再次移动鼠标并单击，以创建第3个锚点，同时在第3个锚点位置单击并拖动，将产生一条控制线。此时，第2个锚点和第3个锚点之间以曲线相连，曲线形状随着鼠标的移动而改变。绘制过程如图4-22所示。(5)如果要封闭刚才创建的路径，可将“钢笔”工具移动至路径的第1个锚点，此时，在光标的右下角出现一个小圆圈，单击之后将在图像窗口形成封闭的路径，如图4-23所示。2)自由路径自由路径的绘制使用“矢量路径”工具(位于“钢笔”工具弹出的菜单中)。使用这个工具，可以像在纸上绘图一样自由地绘制任意形状的路径。在绘制过程中，Fireworks将自动产生锚点，具体位置事前不可预知。使用“矢量路径”工具并利用“属性”面板(如图4-24所示)设置路径的描边种类和颜色。返回下一页上一页4.3创建矢量图形3)编辑路径路径创建完成后，可以对路径进行简单的操作，如增加、删除、移动锚点，改变控制线的方向和长度等。移动锚点和控制点路径编辑操作中最重要的工具是“部分选定”工具。单击并选中锚点，相邻锚点的两侧将出现控制线和控制点。拖动控制点就可以改变相邻锚点之间的路径形状。提示:按住Shift键的同时，可以逐个加选锚点，被选中的锚点以实心正方形显示。返回下一页上一页4.3创建矢量图形4)锚点的增加、删除“使用尽可能少的锚点创建路径”是一条应当遵循的原则，但为了使路径曲线拟合复杂的图像，增加锚点也是必然的。要增加锚点，首先应选中欲操作的路径，然后选择“钢笔”工具，在路径上面需要添加锚点的位置(“钢笔”工具显示为“钢笔”工具下边显示一个带“+”号的形状)单击，就可以增加一个锚点了。相反，要删除锚点，只需将“钢笔”工具放在某锚点上(“钢笔”工具下边显示一个带“一”号的形状)，单击该锚点，系统会自动删除，锚点被删除后，相邻锚点将直接连接。返回下一页上一页4.4处理位图图像位图图像也称为栅格图像，它由一系列的像素点组成，在对位图图像进行处理时相当于对像素点进行处理。在屏幕上缩放位图图像时，可能会失去一些细节，因为位图图像与分辨率有关，它们包含固定数量的像素，每个像素都分配有特定的位置和颜色值。如果在打印位图图像时采用的分辨率过低，位图图像可能会呈锯齿状。位图图像的优点在于其色彩表现丰富，这一点是矢量图像所不具备的。4.4.1“刷子”工具“刷子”工具是一个非常易用但又非常不容易控制的工具。说其易用，因为该工具是一个自由的绘图工具，只要随意拖动鼠标即可实现图像的绘制。说其不容易控制，主要是因为该工具的设置比较繁锁。返回下一页上一页4.4处理位图图像1.使用“刷子”工具绘图(1)单击工具箱中的“刷子”工具按钮。(2)在图像画板中按住鼠标左键拖动即可在页面中绘制出线条，如图4-25所示。2.设置“刷子”工具“刷子”工具并不是这么简单的绘图工具，使用该工具可以绘制一些非常漂亮的线条。可以使用FireworksCS3软件预制的设置，但是要想得到独一无二的效果，必须花费一些时间进行复杂的设置。设置“刷子”工具的方法如下:当“刷子”工具按钮处于选中状态时，文档窗口下方的属性面板变为与“刷子’，工具相应的属性面板。如果属性面板没有显示在屏幕上，可选择“窗口”∣"属性”命令，或使用快捷键Ctrl+F3，打开“刷子”工具属性面板，如图4-26所示。返回下一页上一页4.4处理位图图像其属性面板中各参数的含义如下。(1)笔触颜色:在该面板中单击颜色按钮，弹出颜色表，如图4-27所示，选择要使用的颜色选项，该颜色将直接应用在该工具绘制的线条上。(2)笔触尺寸:在该面板中的颜色按钮的右侧文本框中可以直接输入要使用的笔触尺寸，或通过单击文本框右侧的下拉按钮，在弹出的列表框中拖动滑块调整笔触的尺寸。(3)描边种类:在“笔触尺寸”右侧的下拉列表中包含了大量的“描边”选项，单击下拉按钮，可以展开该选项中的描边选项，将需要的选项选中即可，如图4-28所示。返回下一页上一页4.4处理位图图像在该下拉列表中包含两个特殊的选项，其中一个为“无”，另一个为“笔触选项”。选中“无”时，“刷子”工具将不采用任何的“描边”效果。选中“笔触选项”时，将进入复杂的自定义笔触设置，如图4-29所示。在其中可以设置描边种类、笔触名称等描边属性。(4)边缘:在FireworksCS3中使用“刷子”工具，绘制出线条的边缘可以是实边，也可以是不同程度的虚边。本选项文本框中的参数就是用来设置这一部分的，设置的数值越大时，边缘越虚，反之越实。可以直接输入要使用的笔触边缘，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动调整笔触的边缘。返回下一页上一页4.4处理位图图像(5)纹理:通过选中一种纹理，可以将该纹理应用到笔触中。同时还可通过调整右侧的幅度选项，定义纹理显示程度。可以直接输入要使用的纹理显示程度，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整纹理显示程度。选中该选项下拉列表框底部的“其他”选项时，会弹出“定位文件”对话框，在该对话框中可以选择要使用的“纹理”文件，如图4-30所示。(6)不透明度:在该选项中可以定义绘制线条的不透明度，可以直接输入要使用的不透明度的参数，或通过单击“不透明度”文本框右侧的下拉按钮，在弹出的框中拖动滑块调整线条的不透明度。该数值越高越不透明，透明度为0时为透明。返回下一页上一页4.4处理位图图像(7)混合模式:“混合模式”是颜色和颜色之间叠加出现另外效果的功能。这种功能在其他软件中多有出现，在FireworksCS3中也不例外，在该下拉列表中列出了许多选项，不同的混合模式得到的颜色叠加结果不同，可以根据需要自行选择。4.4.2“铅笔”工具使用“铅笔”工具可以绘制出边缘坚实的曲线或直线。该工具只能绘制比较细的线条，无法调整笔触的尺寸。绘制的方法与“笔刷”工具基本相同，只要在图像画板中拖动鼠标，即可绘制出相应的线条。设置“铅笔”工具属性时，可以进行如下操作:(1)单击工具箱中的“铅笔”工具按钮。返回下一页上一页4.4处理位图图像(2)此时文档窗口下方的属性面板变为“铅笔”工具相应的属性面板。如果属性面板没有显示在屏幕上，可选择“窗口”∣"属性”命令，或使用快捷键Ctrl+F3，打开“铅笔”工具属性面板，如图4-31所示。(3)在该面板中进行设置。其属性面板中各选项的含义如下。笔触颜色:在该面板中单击“颜色”按钮，弹出颜色表，如图4-32所示，选择要使用的颜色选项，该颜色将直接应用在当前绘制的线条上。返回下一页上一页4.4处理位图图像消除锯齿:选择该复选框时，软件将为绘制的线条进行必要的边缘平滑处理。自动擦除:这个功能通常用于绘制“像素画”。选择该复选框时，拖动鼠标即可实现用填充颜色代替笔触颜色的效果。保持透明度:选择该复选框时，“铅笔”工具只能在现有像素中绘制，而不能在图形的透明区域中绘制。不透明度:在该选项中可以定义绘制线条的不透明度，可以直接输入要使用的不透明度的参数，或通过单击文本框右侧的下拉按钮在弹出的框中拖动滑块调整线条的不透明度。该数值较高时，透明度较低，反之透明度较高。混合模式:在该选项下拉列表中可以选中不同的“混合模式”，应用到“铅笔”工具绘制的线条上。返回下一页上一页4.4处理位图图像4.4.3“橡皮擦”工具使用“橡皮擦”工具，只要在图像上进行拖动即可将经过的“像素”擦除掉，恢复到默认的透明效果。使用该工具在要擦除的图像上拖动鼠标，即可将划过的图像擦除掉。操作步骤如下:(1)对于置入的位图来说，需要先使用选择工具选中该位图。(2)单击工具箱中的“橡皮擦”工具按钮。(3)在选中的图像上拖动鼠标，鼠标经过的地方即被擦除。注:当删除的位图对象不是置入的对象时，单击“橡皮擦”工具后，直接拖动鼠标在对象上涂抹即可擦除对象。设置“橡皮擦”工具，可执行如下操作:(1)单击工具箱中的“橡皮擦”工具按钮。返回下一页上一页4.4处理位图图像(2)此时文档窗口下方的属性面板变为“橡皮擦”工具相应的属性面板。如果属性面板没有显示在屏幕上，可选择“窗口”∣"属性”命令，或使用快捷键Ctrl+F3，打开“橡皮擦”工具属性面板，如图4-33所示。(3)在该面板中进行设置。各选项的含义如下。大小:在该文本框中可以直接输入要使用的“橡皮擦”尺寸，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“橡皮擦”的尺寸。边缘:在该选项文本框中可以直接输入一个数值，设置的数值越大，边缘越虚，反之越实。可以直接输入要使用的“橡皮擦”边缘值，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“橡皮擦”的边缘。返回下一页上一页4.4处理位图图像形状:在该选项区域中，可以通过单击

或

按钮，将“橡皮擦”工具的形状调整为相应的效果。透明度:在该选项中可以定义擦除图像的不透明度。4.4.4“模糊”工具和“锐化”工具在FireworksCS3中，“模糊”工具和“锐化”工具是一组效果相反的工具。通过使用“模糊”工具，在图像中拖动绘制时，可以将相应的区域变模糊。通过使用“锐化”工具，在图像中拖动绘制时，可以使相应的区域变清晰。通过Alt键，可以直接切换使用“模糊”工具和“锐化”工具。虽然使用“锐化”工具可以使当前的图像变清晰，但是千万不要“贪多”反复进行操作，这样会使图像变得非常粗糙。“模糊”工具和“锐化”工具执行的功能虽然相反，但是其设置的方法却很相似，操作步骤如下:返回下一页上一页4.4处理位图图像(1)单击工具箱中的“模糊”工具按钮或“锐化”工具按钮。(2)在其相应的属性面板中进行设置，如图4-34所示。其属性面板中各选项的含义如下。·大小:在该文本框中可以直接输入要使用“模糊”工具或“锐化”工具的尺寸，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“模糊”工具或“锐化”工具的尺寸。·边缘:在该选项文本框中设置参数，设置的数值越大，边缘越虚，反之越实。可以直接输入要使用的笔触边缘柔化的数值，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整笔触的边缘。·形状:在该选项区域中，可以通过单击

或

按钮，将“模糊”工具或“锐化”工具的形状调整为相应的效果。返回下一页上一页4.4处理位图图像·强度:在该文本框中可以直接输入要使用的“模糊”工具或“锐化”工具的执行强度，或通过单击文本框右侧的下拉按钮在弹出的框中拖动滑块，调整“模糊”工具或“锐化”工具的执行强度。数值较大，图像的变化程度越大，反之越小。4.4.5“涂抹”工具使用“涂抹”工具可以用于模拟手指涂抹未干油墨的效果。同时还可以通过使用“涂抹色”选项，实现手指粘墨绘图的效果。操作步骤如下:(1)单击工具箱中的“涂抹”工具按钮。(2)在其相应的属性面板中进行设置，如图4-35所示。返回下一页上一页4.4处理位图图像其属性面板中各选项的含义如下。·大小:在该文本框中可以直接输入要使用的“涂抹”工具尺寸，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“涂抹”工具的尺寸。·边缘:在该选项文本框中设置参数，设置的数值越大，边缘越虚，反之越实。可以直接输入要使用的笔触边缘值，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整笔触的边缘。·形状:在该选项区域中，可以通过单击

或

按钮，将“涂抹”工具的形状调整为相应的效果。·压力:在该文本框中可以直接输入要使用的“涂抹”工具的执行力度，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“涂抹”工具的执行力度。数值较大，图像的变化程度较大，反之较小。返回下一页上一页4.4处理位图图像·涂抹色:允许在每个笔触的开始处用指定的颜色涂抹。如果取消勾选此复选框，该工具将使用鼠标指针的颜色。·使用整个文档:选择该复选框时，利用所有层上所有对象的颜色数据来涂抹。取消勾选此复选框后，“涂抹”工具仅使用活动对象的颜色。4.4.6“替换颜色”工具使用“替换颜色”工具可以快速地将图像中的某些颜色转换为选定的另一种颜色，操作步骤如下:(1)单击工具箱中的“替换颜色”工具按钮。(2)按住Alt键，在要替换的颜色位置上单击鼠标。(3)在“属性”面板中调整要替换的颜色和其他的参数。(4)在要替换的颜色上拖动鼠标，进行替换。返回下一页上一页4.4处理位图图像设置“替换颜色”属性，操作步骤如下:(1)单击工具箱中的“替换颜色”工具按钮。(2)在其相应的“属性”对话框中进行参数设置，如图4-36所示。其属性面板中各选项的含义如下。·大小:在该文本框中可以直接输入要使用的“替换颜色”工具尺寸，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“替换颜色”工具的尺寸。·形状:在该选项区域中，可以通过单击

或

按钮，将“替换颜色”工具的形状调整为相应的效果。·从:在该选项颜色框中选择要进行替换的颜色，也可以通过按住Alt键，按在图像中选取的方法进行定义。返回下一页上一页4.4处理位图图像·终止:在该选项颜色框中选择要替换的颜色。·容差:在该选项中输入或调整数值，从而确定要替换的颜色范围。·强度:在该文本框中可以直接输入要使用的“替换颜色”工具的执行程度，或通过单击文本框右侧的下拉按钮，在弹出的框中拖动滑块调整“替换颜色”工具的执行程度，数值较大时，图像的变化程度较大，反之较小。·彩色化:选中该选项时，使用“终止”选项中的颜色直接替换“从”选项中的颜色。取消选择“彩色化”选项时，可用“终止”选项中的颜色对“从”选项中的颜色进行涂染，并保持一部分“更改”选项中的颜色不变。返回下一页上一页4.4处理位图图像4.4.7图像切片切片是Fireworks中用于实现交互性功能的基本构造块。切片最终是以HTML代码的形式出现的网页对象，而不是以图像的形式存在。切片的功能是将图像划分为多个小区域，用户可以为每个区域分别赋予URL、动作以及创建翻转图效果。所有的切片全部位于FireworksCS3自动创建的网页层中，并位于所有层之上。因此也可以将切片看作是覆盖在原图像上的透明图片。1.创建切片Fireworks为创建切片提供了两个工具，分别为切片工具和多边形切片工具。返回下一页上一页4.4处理位图图像创建切片的方法如下:(1)打开素材图片，如图4-37所示。(2)选择工具面板中的“切片”工具。(3)单击鼠标并拖动图片，绘制切片对象，如图4-38所示。2.应用切片制作翻转图像翻转图像效果是可以在浏览器中随着鼠标移动或单击而变换图像，它是通过将交互性附加到切片上来实现的。翻转图像可以有以下四个状态来响应鼠标的动作。·释放状态:鼠标未击中任何对象。·滑过状态:鼠标移入该对象的敏感区域。·按下状态:单击该对象时，通常在目的页面中为图像翻转过的状态。返回下一页上一页4.4处理位图图像·按下时滑过状态:单击该对象，并进入该对象的敏感区域时该对象的外观状态。利用切片制作翻转图像的方法如下:(1)新建Fireworks文档。(2)选择“编辑"∣“插入”∣"新建元件”命令，打开“元件属性”对话框，在“名称”文本框中输入名称，并选中“按钮”单选按钮，如图4-39所示。(3)单击“确定”按钮，打开元件编辑器，如图4-40所示。(4)选择“文件”∣“导入”命令，打开“导入”对话框，从中选择要导入的图片，如图4-41所示。(5)单击“打开”按钮，在当前工作区中拖动导入图像，并调整图像的位置。返回下一页上一页4.4处理位图图像(6)按照步骤(4)和(5)的方法，分别为“滑过”、“按下”、“按下时滑过”选项卡导入图像。(7)单击“有效区域”选项卡，切换到有效区域状态，从中可调整有效区域。(8)单击“完成”按钮，关闭元件编辑器窗口。选择“窗口”∣“库”命令，打开“库”面板，可看到制作的按钮元件。(9)单击“预览”按钮，预览翻转图像的效果。3.导出切片切片将整个图像分割为多个小区域，在为每个切片进行命名、添加链接或行为等操作后，就可以将图像连同切片一起导出。导出之前可以为每种图像类型的切片指定不同的图像格式来分别保存各个切片图形，方法是在选中切片后，在“属性”面板的“切片导出设置”下拉列表框中选择相应的图像格式，如图4-42所示。返回下一页上一页4.4处理位图图像切片的导出格式全部设置完毕后，可用以下操作步骤导出切片:(1)如果只导出图像中的部分切片，可以先在工作区中选中这些切片。(2)选择“文件”∣“导出”命令，将弹出“导出”对话框，如图4-43所示。(3)在“保存在”下拉列表中指定要保存的文件夹。由于要将切片导出为可用于网页的格式，因此保持“保存类型”和HTML下拉列表框中的默认设置不变。(4)在“切片”下拉列表框中根据需要选择相应的选项。·无:不为每个切片生成单独的切片文件，而将整个文档导出为一个图像文件。返回下一页上一页4.4处理位图图像·导出切片:设置是否仅导出所选的切片以及是否导出无切片区域等。·沿辅助线切片:按照文档中的切片辅助线导出切片。但使用该选项生成的文件无法保留在切片对象中设置的行为。(5)若要对导出文件的HTML属性进一步设置，可以单击“选项”按钮，弹出“HTML设置”对话框，如图4-44所示。(6)在“HTML设置”对话框中可以设置“HTML样式”、“扩展名”、“表格”以及“切片名称”等属性，设置完毕后单击“确定”按钮，返回“导出”对话框。(7)单击“导出”对话框中的“保存”按钮将文档导出。返回下一页上一页4.5输入与编辑文本Fireworks具有简单的文本排版功能，比如，通过调整字的大小、字体、字距、行间距、颜色等生成各种类型的文本。另外，在Fireworks中，创建文本之后，它仍保留可被编辑的特点，并可执行查找文本的操作。4.5.1输入文本输入文本的方法如下:(1)选择工具面板中的“文本”工具，此时“属性”面板如图4-45所示。返回下一页上一页4.5输入与编辑文本(2)在“属性”面板中打开“字体”下拉列表框，从中选择文本的字体，在“大小”文本框中设置字体的大小，单击颜色块，从打开的颜色列表中选择文字的颜色。(3)在工作区内单击，出现文本输入框，此时可输入文本。在“属性”面板中，可单击“粗体”按钮、“斜体”按钮和“下划线”按钮，设置文本的粗体、斜体和下划线效果。在“字距或部分范围字距的调整”文本框中可调整字符间距，如图11-48所示。在“字顶距”文本框中可调整文字的行间距，利用“消除锯齿级别”下拉列表框，可对文本边缘进行光滑处理。返回下一页上一页4.5输入与编辑文本4.5.2使用文本编辑器文本编辑器提供了强大的文本编辑功能，除了包含文本“属性”面板中对文本设置的选项外，还有一些文本“属性”面板中没有的选项，比如，文本的方向、文本的流向等。选择工作区中的文本，选择“文本”∣“编辑器”命令，即可打开“文本编辑器”对话框。1.设置文本的方向文本的方向有两种:横向和纵向。横向文本是从左到右，纵向文本是从上到下。系统默认方向是横向。设置文本方向的方法如下:①选择工作区中的文本，选择“文本”∣“编辑器”命令，打开“文本编辑器”对话框。返回下一页上一页4.5输入与编辑文本②单击“水平文本”按钮和“垂直文本”按钮。2.设置文本的流向设置文本流向的方法如下:①选择工作区中的文本，选择“文本”∣“编辑器”命令，打开“文本编辑器”对话框。②单击“文本自左至右流向”按钮和“文本自右至左流向”按钮，可以改变文本的方向。在Fireworks中，文本是矢量图形而不是位图，可以把文本和路径结合起来使用，从而产生非凡的效果。返回下一页上一页4.5输入与编辑文本4.5.3将文本附加到路径把文本粘贴到路径上后，路径的描边属性会消失，但文本属性没有消失，还可以编辑文本。当文本与路径分离时，路径将恢复原有的描边、填充