《网页设计基础教程与上机指导第版Fireworks快速入门.ppt》由会员分享,可在线阅读,更多相关《网页设计基础教程与上机指导第版Fireworks快速入门.ppt(14页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、http:/网页设计基础教程与上机指导第版Fireworks快速入门 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示:教学提示:Fireworks 8是创建、编辑和优化网页图像的多功能应用程序。是创建、编辑和优化网页图像的多功能应用程序。随着该软件版本的不断升级,其功能也在不断加强,因此随着该软件版本的不断升级,其功能也在不断加强,因此Fireworks 8受受到越来越多图像网页制作者的青睐。目前最新的版本
2、到越来越多图像网页制作者的青睐。目前最新的版本Fireworks 8中文版中文版更是以它方便快捷的操作模式,以及在位图编辑、矢量图形处理与更是以它方便快捷的操作模式,以及在位图编辑、矢量图形处理与GIF动动画制作功能上的多方面优秀整合,赢得诸多好评。本章主要介绍画制作功能上的多方面优秀整合,赢得诸多好评。本章主要介绍Fireworks 8的概述以及的概述以及Fireworks 8的工作环境。通过本章的学习,读的工作环境。通过本章的学习,读者可以快速了解、熟悉者可以快速了解、熟悉Fireworks 8。n教学目标:教学目标:熟悉熟悉Fireworks 8的基础知识的基础知识熟悉熟悉Firewor
3、ks 8的工作环境的工作环境掌握位图图像的编辑掌握位图图像的编辑掌握矢量图形的编辑掌握矢量图形的编辑掌握对文本的编辑掌握对文本的编辑掌握网页特效文字的制作掌握网页特效文字的制作http:/23.1 Fireworks 8概述概述nFireworks是第一个为网页制作而设计的图像处理软件,能使图像以最简洁的方是第一个为网页制作而设计的图像处理软件,能使图像以最简洁的方式在网页中显示出最好的效果,它最为突出的功能是可以导入多种格式的图像文式在网页中显示出最好的效果,它最为突出的功能是可以导入多种格式的图像文件,包括件,包括Macintosh的的PICT文件,文件,Freehand、Illustra
4、tor和和CorelDraw等软等软件制作的矢量文件,件制作的矢量文件,Photoshop编辑处理过的编辑处理过的PSD文件以及常用的文件以及常用的GIF、JPEG、BMP和和TIF等格式的文件,甚至还可以导入等格式的文件,甚至还可以导入ASCII码的码的TXT文本文件,而且文本文件,而且Fireworks 8还可以辨识矢量文件中的绝大部分标识和还可以辨识矢量文件中的绝大部分标识和Photoshop文件中的图文件中的图层。作为一款专门为网页制作而设计的图像处理软件,层。作为一款专门为网页制作而设计的图像处理软件,Fireworks 8卓越的切割卓越的切割和优化导出功能使得用户可以直观简便地找到
5、图像质量与下载速度之间的最佳平和优化导出功能使得用户可以直观简便地找到图像质量与下载速度之间的最佳平衡点。衡点。Fireworks 8是是Fireworks系列的最新版本,首先对工作界面进行了改进,系列的最新版本,首先对工作界面进行了改进,使之和使之和Dreamweaver8、Flash 8的界面统一;其次增强了部分功能,并对从的界面统一;其次增强了部分功能,并对从前版本中已有功能的实现进行了简化。如图前版本中已有功能的实现进行了简化。如图23.1所示是所示是Fireworks 8的启动界的启动界面。面。http:/23.2 Fireworks 8的工作环境的工作环境nFireworks 8的
6、工作界面主要有标题栏、菜单栏、工具箱、的工作界面主要有标题栏、菜单栏、工具箱、文档窗口、浮动面板和属性面板组成,如图文档窗口、浮动面板和属性面板组成,如图23.2所示为所示为Fireworks的工作环境。的工作环境。n1.菜单栏菜单栏n2.状态栏状态栏n3.工具箱工具箱n4.文档窗口文档窗口n5.属性面板属性面板n6.浮动面板浮动面板http:/23.3 编辑位图图像编辑位图图像nFireworks 8提供了大量的工具来编辑位图提供了大量的工具来编辑位图图像。在编辑图像时,常用的工具有【套用图像。在编辑图像时,常用的工具有【套用】、【刷子】和【红眼消除】等。】、【刷子】和【红眼消除】等。n23
7、.3.1 使用套索工具编辑位图图像使用套索工具编辑位图图像n23.3.2 使用刷子工具编辑位图图像使用刷子工具编辑位图图像n23.3.3 使用红眼消除工具编辑位图图像使用红眼消除工具编辑位图图像http:/23.3.1 使用套索工具编辑位图图像使用套索工具编辑位图图像n使用【套索】工具选择的区域形状使用【套索】工具选择的区域形状是不规范的,【套索】工具在图像是不规范的,【套索】工具在图像中选择自由变形区域。使用【套索中选择自由变形区域。使用【套索】工具的具体操作步骤如下。】工具的具体操作步骤如下。(1)打开图像文件,选择工具箱中的【打开图像文件,选择工具箱中的【套索】工具。套索】工具。(2)拖
8、曳鼠标在要进行选取的区域边缘拖曳鼠标在要进行选取的区域边缘进行勾勒,如图进行勾勒,如图23.10所示。所示。(3)当要封闭选区时,可以将鼠标放置当要封闭选区时,可以将鼠标放置到开始处,再释放鼠标,此时软件将到开始处,再释放鼠标,此时软件将在开始处和结尾处连成一条直线进行在开始处和结尾处连成一条直线进行封闭。封闭。http:/23.3.2 使用刷子工具编辑位图图像使用刷子工具编辑位图图像n【刷子】工具是一个非常易用但又非常不容易控制的工具。说其不容易【刷子】工具是一个非常易用但又非常不容易控制的工具。说其不容易控制,主要是因为该工具的设置非常繁琐,在平面设计软件区域还是不控制,主要是因为该工具的
9、设置非常繁琐,在平面设计软件区域还是不多见的。说其易用,主要是因为该工具是一个自由的绘图工具,只要使多见的。说其易用,主要是因为该工具是一个自由的绘图工具,只要使用鼠标拖曳即可实现。使用刷子工具绘图的具体操作步骤如下。用鼠标拖曳即可实现。使用刷子工具绘图的具体操作步骤如下。(1)选择工具箱中的【刷子】工具。选择工具箱中的【刷子】工具。(2)在图像中按住鼠标左键拖曳即可在图像上绘制出线条。选择【窗口】在图像中按住鼠标左键拖曳即可在图像上绘制出线条。选择【窗口】|【属性】命令,打开【属性】面板,在面板中显示【刷子】工具的相关参数,【属性】命令,打开【属性】面板,在面板中显示【刷子】工具的相关参数,
10、如图如图23.12所示。所示。n在【属性】面板中可以进行如下设置。在【属性】面板中可以进行如下设置。【笔触颜色】:单击【颜色】按钮,在弹出的颜色框中设置刷子的【颜色】。【笔触颜色】:单击【颜色】按钮,在弹出的颜色框中设置刷子的【颜色】。在其右边的文本框中设置刷子的【大小】。单击其右边的列表框,在弹出的在其右边的文本框中设置刷子的【大小】。单击其右边的列表框,在弹出的菜单中设置刷子的【描边】种类。菜单中设置刷子的【描边】种类。【纹理】:在该选项的下拉列表中可以选中要使用的各种纹理选项。【纹理】:在该选项的下拉列表中可以选中要使用的各种纹理选项。http:/23.3.3 使用红眼消除工具编辑位图图
11、像使用红眼消除工具编辑位图图像n【红眼消除】工具可以消除数【红眼消除】工具可以消除数码相机照片中经常出现的红眼,码相机照片中经常出现的红眼,使照片恢复正常的效果。使用使照片恢复正常的效果。使用【红眼消除】工具的具体操作【红眼消除】工具的具体操作步骤如下。步骤如下。(1)打开图像文件,选择工打开图像文件,选择工具箱中的【红眼消除】工具,具箱中的【红眼消除】工具,如图如图23.15所示。所示。(2)在【属性】面板中设置在【属性】面板中设置相应的属性。相应的属性。(3)将鼠标指针移动到红眼将鼠标指针移动到红眼上,进行拖动,即可消除红上,进行拖动,即可消除红眼。眼。http:/23.4 编辑矢量图形编
12、辑矢量图形n对于一次绘制的图形,很难符合要求,所以经常需对于一次绘制的图形,很难符合要求,所以经常需要对其进行编辑修改。要对其进行编辑修改。n编辑矢量图形之前,需先选取要修改的图形对象,编辑矢量图形之前,需先选取要修改的图形对象,在在Fireworks 8中,主要使用【指针】工具、【选中,主要使用【指针】工具、【选择后方对象】工具和【部分选取】工具,如图择后方对象】工具和【部分选取】工具,如图23.17所示。所示。1.选取单个对象选取单个对象2.选取多个对象选取多个对象3.选取被遮挡的对象选取被遮挡的对象4.转换为位图图像转换为位图图像http:/23.5 对文本的编辑对文本的编辑n在在Fir
13、eworks 8的文件中,文本作为一个对的文件中,文本作为一个对象整体而被保存和控制。用户可以在文件的象整体而被保存和控制。用户可以在文件的任意位置输入文本,然后将输入的文本作为任意位置输入文本,然后将输入的文本作为对象在文件中进行处理。对象在文件中进行处理。n23.5.1 输入文本输入文本n23.5.2 编辑文本编辑文本n23.5.3 附加文本到路径附加文本到路径n23.5.4 转换文本为路径转换文本为路径http:/23.5.1 输入文本输入文本n当要在文档窗口中输入文本时,选择工具箱中的【文本】工具进行输入。当要在文档窗口中输入文本时,选择工具箱中的【文本】工具进行输入。输入文本之前,首
14、先要创建文本块,文本块按照不同的创建方式可以分输入文本之前,首先要创建文本块,文本块按照不同的创建方式可以分成两类,分别是自动调节大小的文本块和固定宽度文本块。成两类,分别是自动调节大小的文本块和固定宽度文本块。1.自动调节大小的文本块自动调节大小的文本块(1)在工具箱中选择【文本】工具。在工具箱中选择【文本】工具。(2)将鼠标指针置于文档中,在需要创建文本的位置单击,显示出一个插入符。将鼠标指针置于文档中,在需要创建文本的位置单击,显示出一个插入符。(3)使用键盘或者其他方式输入文本。使用键盘或者其他方式输入文本。2.固定宽度文本块固定宽度文本块(1)在工具箱中选择【文本】工具。在工具箱中选
15、择【文本】工具。(2)将鼠标指针置于文档中,在需要创建文本的位置拖动鼠标,创建一个文本框,将鼠标指针置于文档中,在需要创建文本的位置拖动鼠标,创建一个文本框,如图如图23.24所示。所示。(3)使用键盘或者其他方式输入文本,如图使用键盘或者其他方式输入文本,如图23.25所示。所示。http:/23.5.2 编辑文本编辑文本n在在Fireworks 8中输入的文本会作为一个对象出现在文档窗口中,可以中输入的文本会作为一个对象出现在文档窗口中,可以像选择其他对象一样选择文本,然后对其进行编辑。像选择其他对象一样选择文本,然后对其进行编辑。n(1)在工具箱中选择【文本】工具,在文字上进行单击,如图
16、在工具箱中选择【文本】工具,在文字上进行单击,如图23.26所所示。此时【属性】面板如图示。此时【属性】面板如图23.27所示。所示。n(2)单击【字体】右边的下拉按钮,在弹出的下拉列表中设置需要的字单击【字体】右边的下拉按钮,在弹出的下拉列表中设置需要的字体。体。n(3)单击【颜色框】右下角的颜色按钮,在弹出的菜单中选择需要的颜单击【颜色框】右下角的颜色按钮,在弹出的菜单中选择需要的颜色。色。http:/23.5.3 附加文本到路径附加文本到路径n一般文字都按照横排或者纵排直线排列,还可以按照一个任意一般文字都按照横排或者纵排直线排列,还可以按照一个任意路径的形态排列。附加文本到路径的具体操
17、作步骤如下。路径的形态排列。附加文本到路径的具体操作步骤如下。(1)使用工具箱中的【多边形】工具,在文档中绘制一个多边形,如图使用工具箱中的【多边形】工具,在文档中绘制一个多边形,如图23.28所示。所示。(2)使用工具箱中的【文本】工具,在文档中单击输入文本,如图使用工具箱中的【文本】工具,在文档中单击输入文本,如图23.29所示。所示。(3)选中多边形,按住选中多边形,按住Shift键的同时选择文字,选择【文本】键的同时选择文字,选择【文本】|【附加【附加到路径】命令,将文本附加到路径,如图到路径】命令,将文本附加到路径,如图23.30所示。所示。http:/23.5.4 转换文本为路径转
18、换文本为路径n在在Fireworks 8中输入文字后,文字依然保持着文本的属性,均采中输入文字后,文字依然保持着文本的属性,均采用内码的形式存在。如果要将文字转换为简单的路径,可以执行以用内码的形式存在。如果要将文字转换为简单的路径,可以执行以下操作,将文本转换为路径后,可以放弃文字的属性,这样就不怕下操作,将文本转换为路径后,可以放弃文字的属性,这样就不怕字体丢失问题的出现。并且文字转换为路径后,可以使用编辑路径字体丢失问题的出现。并且文字转换为路径后,可以使用编辑路径的工具对转换为路径的文字进行编辑。转换文本为路径的具体操作的工具对转换为路径的文字进行编辑。转换文本为路径的具体操作步骤如下。步骤如下。(1)在工具箱中选择【指针】工具。在工具箱中选择【指针】工具。(2)选中要进行转换为路径的文字。选中要进行转换为路径的文字。(3)选择【文本】选择【文本】|【转换为路径】命令,此时文本就会转换为路径,【转换为路径】命令,此时文本就会转换为路径,如图如图23.32所示。所示。