网页设计基础教程与上机指导Fireworks快速入门.pptx

会计学1网页设计基础教程与上机指导网页设计基础教程与上机指导(zhdo)Fireworks 快速入门快速入门第一页，共14页。23.1 Fireworks 8概述概述(i sh)n nFireworksFireworks是第一个为网页制作而设计的图像处理软件，能使图像以最简洁的方式在网页中显示出最是第一个为网页制作而设计的图像处理软件，能使图像以最简洁的方式在网页中显示出最好的效果，它最为突出的功能是可以导入多种格式的图像文件，包括好的效果，它最为突出的功能是可以导入多种格式的图像文件，包括MacintoshMacintosh的的PICTPICT文件，文件，FreehandFreehand、IllustratorIllustrator和和CorelDrawCorelDraw等软件制作的矢量文件，等软件制作的矢量文件，PhotoshopPhotoshop编辑处理过的编辑处理过的PSDPSD文件以及常用文件以及常用的的GIFGIF、JPEGJPEG、BMPBMP和和TIFTIF等格式的文件，甚至还可以导入等格式的文件，甚至还可以导入ASCIIASCII码的码的TXTTXT文本文件，而且文本文件，而且Fireworks Fireworks 8 8还可以辨识矢量文件中的绝大部分标识和还可以辨识矢量文件中的绝大部分标识和PhotoshopPhotoshop文件中的图层。作为一款专门为网页制作而设文件中的图层。作为一款专门为网页制作而设计的图像处理软件，计的图像处理软件，Fireworks 8Fireworks 8卓越的切割和优化导出功能使得用户可以直观简便地找到图像质量卓越的切割和优化导出功能使得用户可以直观简便地找到图像质量与下载速度之间的最佳平衡点。与下载速度之间的最佳平衡点。Fireworks 8Fireworks 8是是FireworksFireworks系列系列(xli)(xli)的最新版本，首先对工作界面进行的最新版本，首先对工作界面进行了改进，使之和了改进，使之和Dreamweaver8Dreamweaver8、Flash 8Flash 8的界面统一；其次增强了部分功能，并对从前版本中已有功的界面统一；其次增强了部分功能，并对从前版本中已有功能的实现进行了简化。如图能的实现进行了简化。如图23.123.1所示是所示是Fireworks 8Fireworks 8的启动界面。的启动界面。第2页/共14页第二页，共14页。23.2 Fireworks 8的工作的工作(gngzu)环境环境n nFireworks 8Fireworks 8的工作的工作(gngzu)(gngzu)界面主要有标题栏、菜单栏、工具界面主要有标题栏、菜单栏、工具箱、文档窗口、浮动面板和属性面板组成，如图箱、文档窗口、浮动面板和属性面板组成，如图23.223.2所示为所示为FireworksFireworks的工作的工作(gngzu)(gngzu)环境。环境。n n1.1.菜单栏菜单栏n n2.2.状态栏状态栏n n3.3.工具箱工具箱n n4.4.文档窗口文档窗口n n5.5.属性面板属性面板n n6.6.浮动面板浮动面板第3页/共14页第三页，共14页。23.3 编辑编辑(binj)位图图像位图图像n nFireworks 8提供了大量的工具来编辑位图图像。在编辑图像时，常用的工具有【套用】、【刷子(shu zi)】和【红眼消除】等。n n23.3.1 使用套索工具编辑位图图像n n23.3.2 使用刷子(shu zi)工具编辑位图图像n n23.3.3 使用红眼消除工具编辑位图图像第4页/共14页第四页，共14页。23.3.1 使用套索工具编辑使用套索工具编辑(binj)位图图位图图像像n n使用【套索】工具选择的区域形状是不使用【套索】工具选择的区域形状是不规范的，【套索】工具在图像中选择自规范的，【套索】工具在图像中选择自由变形区域。使用【套索】工具的具体由变形区域。使用【套索】工具的具体操作步骤如下。操作步骤如下。n n(1)(1)打开图像文件，选择工具箱中的【打开图像文件，选择工具箱中的【套索】工具。套索】工具。n n(2)(2)拖曳鼠标在要进行选取的区域边缘拖曳鼠标在要进行选取的区域边缘进行勾勒，如图进行勾勒，如图23.1023.10所示。所示。n n(3)(3)当要封闭选区时，可以将鼠标放置当要封闭选区时，可以将鼠标放置(fngzh)(fngzh)到开始处，再释放鼠标，此时到开始处，再释放鼠标，此时软件将在开始处和结尾处连成一条直线软件将在开始处和结尾处连成一条直线进行封闭。进行封闭。第5页/共14页第五页，共14页。23.3.2 使用刷子工具编辑使用刷子工具编辑(binj)位图位图图像图像n n【刷子】工具是一个【刷子】工具是一个(y(y )非常易用但又非常不容易控制的工具。说其非常易用但又非常不容易控制的工具。说其不容易控制，主要是因为该工具的设置非常繁琐，在平面设计软件区不容易控制，主要是因为该工具的设置非常繁琐，在平面设计软件区域还是不多见的。说其易用，主要是因为该工具是一个域还是不多见的。说其易用，主要是因为该工具是一个(y(y )自由的绘自由的绘图工具，只要使用鼠标拖曳即可实现。使用刷子工具绘图的具体操作图工具，只要使用鼠标拖曳即可实现。使用刷子工具绘图的具体操作步骤如下。步骤如下。n n(1)(1)选择工具箱中的【刷子】工具。选择工具箱中的【刷子】工具。n n(2)(2)在图像中按住鼠标左键拖曳即可在图像上绘制出线条。选择【窗口在图像中按住鼠标左键拖曳即可在图像上绘制出线条。选择【窗口】|【属性】命令，打开【属性】面板，在面板中显示【刷子】工具的【属性】命令，打开【属性】面板，在面板中显示【刷子】工具的相关参数，如图相关参数，如图23.1223.12所示。所示。n n在【属性】面板中可以进行如下设置。在【属性】面板中可以进行如下设置。n n【笔触颜色】：单击【颜色】按钮，在弹出的颜色框中设置刷子的【笔触颜色】：单击【颜色】按钮，在弹出的颜色框中设置刷子的【颜色】。在其右边的文本框中设置刷子的【大小】。单击其右边的列颜色】。在其右边的文本框中设置刷子的【大小】。单击其右边的列表框，在弹出的菜单中设置刷子的【描边】种类。表框，在弹出的菜单中设置刷子的【描边】种类。n n【纹理】：在该选项的下拉列表中可以选中要使用的各种纹理选项。【纹理】：在该选项的下拉列表中可以选中要使用的各种纹理选项。第6页/共14页第六页，共14页。23.3.3 使用红眼消除工具使用红眼消除工具(gngj)编辑位图编辑位图图像图像n n【红眼消除】工具可以消除数码【红眼消除】工具可以消除数码相机照片中经常出现的红眼，使相机照片中经常出现的红眼，使照片恢复正常的效果照片恢复正常的效果(xiogu(xiogu)。使。使用【红眼消除】工具的具体操作用【红眼消除】工具的具体操作步骤如下。步骤如下。n n(1)(1)打开图像文件，选择工具箱中打开图像文件，选择工具箱中的【红眼消除】工具，如图的【红眼消除】工具，如图23.1523.15所示。所示。n n(2)(2)在【属性】面板中设置相应的在【属性】面板中设置相应的属性。属性。n n(3)(3)将鼠标指针移动到红眼上，进将鼠标指针移动到红眼上，进行拖动，即可消除红眼。行拖动，即可消除红眼。第7页/共14页第七页，共14页。23.4 编辑矢量编辑矢量(shling)图形图形n n对于一次绘制的图形，很难符合要求，所以经常对于一次绘制的图形，很难符合要求，所以经常(jngchng)(jngchng)需要对其进行编辑修改。需要对其进行编辑修改。n n编辑矢量图形之前，需先选取要修改的图形对象，在编辑矢量图形之前，需先选取要修改的图形对象，在Fireworks 8Fireworks 8中，主要使用【指针】工具、【选择后方中，主要使用【指针】工具、【选择后方对象】工具和【部分选取】工具，如图对象】工具和【部分选取】工具，如图23.1723.17所示。所示。n n1.1.选取单个对象选取单个对象n n2.2.选取多个对象选取多个对象n n3.3.选取被遮挡的对象选取被遮挡的对象n n4.4.转换为位图图像转换为位图图像第8页/共14页第八页，共14页。23.5 对文本对文本(wnbn)的编辑的编辑n n在Fireworks 8的文件中，文本作为一个对象整体而被保存和控制。用户可以在文件的任意位置输入文本，然后(rnhu)将输入的文本作为对象在文件中进行处理。n n23.5.1 输入文本n n23.5.2 编辑文本n n23.5.3 附加文本到路径n n23.5.4 转换文本为路径第9页/共14页第九页，共14页。23.5.1 输入输入(shr)文本文本n n当要在文档窗口中输入文本时，选择工具箱中的【文本】工具进行输入。输入文本之当要在文档窗口中输入文本时，选择工具箱中的【文本】工具进行输入。输入文本之前，首先要创建文本块，文本块按照不同的创建方式可以分成两类，分别是自动调节前，首先要创建文本块，文本块按照不同的创建方式可以分成两类，分别是自动调节大小大小(dxi(dxi o)o)的文本块和固定宽度文本块。的文本块和固定宽度文本块。n n1.1.自动调节大小自动调节大小(dxi(dxi o)o)的文本块的文本块n n(1)(1)在工具箱中选择【文本】工具。在工具箱中选择【文本】工具。n n(2)(2)将鼠标指针置于文档中，在需要创建文本的位置单击，显示出一个插入符。将鼠标指针置于文档中，在需要创建文本的位置单击，显示出一个插入符。n n(3)(3)使用键盘或者其他方式输入文本。使用键盘或者其他方式输入文本。n n2.2.固定宽度文本块固定宽度文本块n n(1)(1)在工具箱中选择【文本】工具。在工具箱中选择【文本】工具。n n(2)(2)将鼠标指针置于文档中，在需要创建文本的位置拖动鼠标，创建一个文本框，如图将鼠标指针置于文档中，在需要创建文本的位置拖动鼠标，创建一个文本框，如图23.2423.24所示。所示。n n(3)(3)使用键盘或者其他方式输入文本，如图使用键盘或者其他方式输入文本，如图23.2523.25所示。所示。第10页/共14页第十页，共14页。23.5.2 编辑编辑(binj)文本文本n n在在Fireworks 8Fireworks 8中输入的文本中输入的文本(wnbn)(wnbn)会作为一个对象出现在文档窗口中，可以像会作为一个对象出现在文档窗口中，可以像选择其他对象一样选择文本选择其他对象一样选择文本(wnbn)(wnbn)，然后对其进行编辑。，然后对其进行编辑。n n(1)(1)在工具箱中选择【文本在工具箱中选择【文本(wnbn)(wnbn)】工具，在文字上进行单击，如图】工具，在文字上进行单击，如图23.2623.26所示。所示。此时【属性】面板如图此时【属性】面板如图23.2723.27所示。所示。n n(2)(2)单击【字体】右边的下拉按钮，在弹出的下拉列表中设置需要的字体。单击【字体】右边的下拉按钮，在弹出的下拉列表中设置需要的字体。n n(3)(3)单击【颜色框】右下角的颜色按钮，在弹出的菜单中选择需要的颜色。单击【颜色框】右下角的颜色按钮，在弹出的菜单中选择需要的颜色。第11页/共14页第十一页，共14页。23.5.3 附加文本附加文本(wnbn)到路径到路径n n一般一般(ybn)(ybn)文字都按照横排或者纵排直线排列，还可以按照一个任文字都按照横排或者纵排直线排列，还可以按照一个任意路径的形态排列。附加文本到路径的具体操作步骤如下。意路径的形态排列。附加文本到路径的具体操作步骤如下。n n(1)(1)使用工具箱中的【多边形】工具，在文档中绘制一个多边形，如使用工具箱中的【多边形】工具，在文档中绘制一个多边形，如图图23.2823.28所示。所示。n n(2)(2)使用工具箱中的【文本】工具，在文档中单击输入文本，如图使用工具箱中的【文本】工具，在文档中单击输入文本，如图23.2923.29所示。所示。n n(3)(3)选中多边形，按住选中多边形，按住ShiftShift键的同时选择文字，选择【文本】键的同时选择文字，选择【文本】|【附【附加到路径】命令，将文本附加到路径，如图加到路径】命令，将文本附加到路径，如图23.3023.30所示。所示。第12页/共14页第十二页，共14页。23.5.4 转换文本转换文本(wnbn)为路径为路径n n在在Fireworks 8Fireworks 8中输入文字后，文字依然保持着文本的属性，均采用中输入文字后，文字依然保持着文本的属性，均采用内码的形式存在。如果要将文字转换为简单的路径，可以内码的形式存在。如果要将文字转换为简单的路径，可以(ky(ky)执执行以下操作，将文本转换为路径后，可以行以下操作，将文本转换为路径后，可以(ky(ky)放弃文字的属性，放弃文字的属性，这样就不怕字体丢失问题的出现。并且文字转换为路径后，可以这样就不怕字体丢失问题的出现。并且文字转换为路径后，可以(ky(ky)使用编辑路径的工具对转换为路径的文字进行编辑。转换文使用编辑路径的工具对转换为路径的文字进行编辑。转换文本为路径的具体操作步骤如下。本为路径的具体操作步骤如下。n n(1)(1)在工具箱中选择【指针】工具。在工具箱中选择【指针】工具。n n(2)(2)选中要进行转换为路径的文字。选中要进行转换为路径的文字。n n(3)(3)选择【文本】选择【文本】|【转换为路径】命令，此时文本就会转换为路【转换为路径】命令，此时文本就会转换为路径，如图径，如图23.3223.32所示。所示。第13页/共14页第十三页，共14页。感谢您的观看感谢您的观看(gunkn)！第14页/共14页第十四页，共14页。