fireworks4网页制作培训课件.ppt

1、Fireworks 4.0第一期网页制作班第1页，共33页。简介简介l 是一种优秀网页图形图像设计工具。特色：1、位图处理和矢量图处理合二为一2、文本处理3、导出预览（不需切换到浏览器）4、图像优化5、精美动画6、JavaScript自动化7、设置图像映射8、查找替换和批处理环境第2页，共33页。主要内容主要内容l一、基本使用操作l二、基本绘图操作l三、颜色操作处理l四、文字使用操作l五、编辑矢量对象l六、编辑位图对象l七、使用特效和样式l八、动画设计制作l九、动态按钮制作l十、图像格式输出l十一、图像变换设计l十二、链接设置使用l十三、使用大图切割l十四、自动化的应用第3页，共33页。一、基

2、本使用操作一、基本使用操作l1、熟悉工作区域l2、对象的导入（两种方法）l3、画布尺寸与颜色的调整l4、画布的裁剪与旋转l5、改变影像尺寸l6、裁剪位图对象l7、文件基本操作l8、文件的打开、导入、保存（.PNG）第4页，共33页。二、基本绘图操作二、基本绘图操作l1、使用直线工具绘图l2、使用形状工具绘图（矩形、圆形、多边形）l3、使用路径绘制工具（钢笔、铅笔、笔刷）l4、改变路径操作方法（细部工具、重绘画笔工具、任意形状工具）l5、路径的修改与切割（区域变形工具、切割工具）l6、简化、扩张及附加路径修改改变路径（简化路径、扩张路径、插入路径）第5页，共33页。三、颜色操作处理三、颜色操作处

3、理l1、网页可靠色l2、混色器l3、调色板（样本）的使用l4、滴管（探色棒）工具的使用l5、笔触面板l6、填充面板1、主要填充参数的作用2、修改渐变色3、调整渐变色与图案填充4、使用外部图像文件作为填充图案或纹理5、使用WEB抖动色l7、颜色在路径上的使用（补充）路径涂饰工具（+）和（-）第6页，共33页。四、文字使用操作四、文字使用操作l1、文字的编辑器(1)输入(2)编辑：l修改文字：法一：输入文本后，如要编辑文本，只需双击文本块。l 法二：选择后用“文本”“编辑器”l 法三：直接通过菜单实现(3)对文本设置描边、填充(4)文字的变形处理（缩放、扭曲、顷斜）l2、文字与路径l默认情况下，文

4、本都是以矩形文本块形式显示，但是，用户可绘制一条路径，然后将文本附加到该路径上，使文本按路径形状进行排列。不过，此是路径将失去了它的所有属性，变成一条不可编辑的路径，在预览时也不显示。(1)文本附加到路径：首先创建一个文本对象和一个路径对象，然后都选中，用“文本附加到路径”命令.第7页，共33页。四、文字使用操作四、文字使用操作(2)分离文本与路径：用“文本从路径脱离”命令(3)编辑文本与路径l编辑文本：双击l编辑路径：将文本与路径分离编辑路径再将选择文本与路径附加到路径。l注：添加笔触和填充后，文本对象可作相应变化。(4)按路径排列文本（5）导入文本：用于文本内容很多或已有了现成文档。4、把

5、文字转为路径l当要用矢量处理工具编辑文本时，需转化为路径。l方法：文本转化为路径（可用次选工具编辑任意节点，但内容再不能用文本编辑器修改）l注：文本对象转化成位图对象的方法和矢量图转化为位图的方法一样，可用“修改转换为位图”命令。以后可用位图编辑工具进行编辑。第8页，共33页。五、编辑矢量对象五、编辑矢量对象l1、对象操作使用选择工具、后方选择工具选择了填充有渐变色的图形后，出现两个控制点（圆形、方形）排列对象（修改对齐）l2、对象变形处理修改变形l3、对象相互结合（1）群组工具与取消群组（2）路径的合并与拆分（3）对象的接合（联合、相交、打孔、修剪）l4、调整对象顺序修改排列第9页，共33页

6、。六、编辑位图对象六、编辑位图对象l1、切换编辑模式与创建位图对象l在Fireworks中同时拥有两种编辑模式，即对象编辑模式与位图编辑模式。(1)切换编辑模式的方法lA、切换到位图编辑模式l法一：选择位图对象，然后选择修改编辑位图l法二：利用蒙版、套索、魔术棒或橡皮图章工具单击位图对象l法三：双击位图lB、从位图编辑模式返回对象模式l法一：用指针工具或子选择工具在图像外任意区域单击l法二：用修改退出位图模式l法三：单击文档窗口下方的图标l法四：按ESC键(2)创建位图对象的方法l法一：文件导入或打开l法二：修改转换为位图第10页，共33页。六、编辑位图对象六、编辑位图对象l2、选区制作与调整

7、(1)制作选区l矩形选区工具、椭圆形选区工具、套索工具、多边形套索工具、魔术棒工具(2)调整选区l增加或减小选区按下Shift键并使用位图选择工具选择图像，可增加选区按下Alt键并选择图像，可增加选区按下Alt+Shift键，可制作新的选区。释放鼠标后，选区结果将是已有选区和新选区的交集。l选区的扩展与收缩：用修改选取框扩大或收缩l平滑选区：用修改选取框平滑l制作边界选区：用修改选取框边框l反选选区：用修改选取框反选l选择与已有选区颜色相近的颜色：用修改选取框选择相似颜色取消选择：Ctrl+D第11页，共33页。六、编辑位图对象六、编辑位图对象l3、在位图模式下编辑（剪切、复制、粘贴、吸管工具

8、、油漆桶工具、橡皮工具、印章工具）(1)在位图编辑模式下绘图(2)图像的擦除、填充与复制应选制作选区，再进行下列操作，否则操作范围为整个位图编辑区。l使用擦除工具擦除像素l利用油漆桶工具填充像素将当前设置的填充图案填充位图或选择的区域（未选为整个文档）l利用橡皮图章工具复制像素单击橡皮工具鼠标移到希望复制的区域单击鼠标移到新的区域拖动复制注：复制方式为“固定”时目标可变；为“对齐”时，复制点与定义点始终对齐选择“对齐”时，在复制过程中可多次松开鼠标，且复制的图像是连续的；而选择“固定”时，只要松开一下鼠标，再复制等于重新复制。l注：滴管工具用来在图像上选择一种颜色作为填充色。第12页，共33页

9、。六、编辑位图对象六、编辑位图对象(3)裁剪位图：编辑修剪位图(4)选区的变形除了使用笔触、填色美化对象外，还可使用特效，为你的按钮、文字、图形创建特效。第13页，共33页。七、使用特效和样式七、使用特效和样式1、使用特效处理选择要使用特效的对象后，打开效果面板，单击增加特效下拉列表，选择一种特效。常用的是默认效果。l2、特效面板使用单击特效行上的特效按钮，打开特效参数面板，这个内部顷斜特效的面板上包括了一个”斜角边缘形状“下拉列表，可选择“平面、平滑、顷斜、架子、圆环、邹边”等形状，其它的参数用来指定导角的宽度和高度，可做一个令人满意的按钮。在内部顷斜特效的面板的最下方下拉列表中列出了按钮的

10、4种状态，分别是凸起、高亮度、凹进、反转。注：取消选中的特效行前面的复选框，可关闭特效。第14页，共33页。七、使用特效和样式七、使用特效和样式l3、编辑特效面板同一个对象可同时使用多个特效，对于不使用的特效，选中后可以删除，也可根据需要保存以后用在其它的对象上。4、特效类型l顷斜和浮雕：内部顷斜特效、外部顷斜特效（作用于对象的外边框）、凸起浮雕（产生凸起的浮雕效果）、凹进浮雕（产生凹进浮雕效果）。l阴影和光晕：阴影（距离参数控制着阴影和对象的距离）、光晕（用来产生光晕效果，可设置辉光的颜色、偏移参数，还可控制辉光和对象的距离）l模糊：设置对象的模糊程序。l调节颜色（是附加功能），设置后可保存

11、。l4、使用特效插件（相当于Photoshop中的滤镜）特效菜单下的Eye Candy 4000 LEl5、加入外部滤镜第15页，共33页。七、使用特效和样式七、使用特效和样式l下面介绍一个更奇妙的工具，它不但可以保存特效，而且可以保存笔触、填色，甚至字体、字号，并且重复使用时更简单-样式。l6、样式建立应用l(1)使用：选择对象单击一种样式l(2)保存：选择对象应用各种笔触、填充和特效新建样式选择需要保存的内容输入样式名OKl(3)编辑：双击l注：A、在应用样式时不想改变对象原来的填充类型，可将颜色从样式保存中去除（编辑），再进行应用样式。lB、若将一个文本对象的样式保存，在保存样式对话框中

12、就可保存字体、字号和文字风格等属性，这样给文字对象应用样式时，文字对象的字体、字号和风格都可以改变。l(4)导入样式 (5)导出样式l7、使用遮罩效果创建：修改蒙板组成蒙板第16页，共33页。七、动画设计制作七、动画设计制作l1、制作GIF动画(1)创建基本的帧帧动画l法一：选增加帧，再在每帧上画对象l法二：在第一帧上加多个对象全选分配到帧命令(2)创建过渡动画l法一：利用“修改动画就所选创建动画”命令可生成一个带有起始、中间和结束点的动画线，其每一点代表动画中的一帧，移动动画线的长度与方向可改变动画的轨迹。l法二：利用Tween功能创建过渡动画制作好Tween动画后，用户可单独调整任何一帧符

13、号的位置、不透明度，或对其进行缩放、倾斜，以及为其增加效果等。灵活性更大。操作：创建一个对象为其增加样式选择“插入转换为组件”输入组件名称（选择图形）打开库面板拖入文档放在另一位置选中两个符号选择“修改符号内插动画”设置动画帧数并选中分配到各帧复选框OK第17页，共33页。七、动画设计制作七、动画设计制作l2、Frame面板的使用重命名、增加、复制或删除帧将所选对象放置在不同帧中将对象从当前帧移到其他帧设置功能设置帧延迟（100=1S）设置动画播放次数复制到帧（将一帧上的对象复制到其它帧），与复制帧不同。也可用共享图层实现。l3、使用描图纸功能（洋葱皮）l4、建立图层的操作（层面板）注：A、帧

14、是以时间先后为序，不同的帧处在不同的时间段上。B、不同层是指不同通道或空间同一时间的上、下的位置关系。C、一个层上可包含多个对象，一个帧上可有多个层。第18页，共33页。七、动画设计制作七、动画设计制作l5、图层的操作应用同一层上可有多个对象层，图层上新增对象后，会自动在该图层下增加对应的对象层。(1)创建新图层l插入法：插入层l图层面板法1：新建/复制层按钮l图层面板法2：新建层选项(2)选中图层l法一：在文档窗口中，选中属于该图层的任意对象l法二：在图层面板中，单击要选中的图层名称(3)复制图层l法一：选中要复制的图层拖到“复制/删除层”按钮上l法二：选中要复制的图层在选项中选择“复制图层

15、”项选择OKl两者区别：法一只能生成一个副本图层，且副本图层位于被复制图层的下方。法二的复制功能更全面，他不但可以调节复制图层的数量，还可以设置复制图层的位置。第19页，共33页。七、动画设计制作七、动画设计制作(4)删除图层l法一：选中要删除的图层单击删除图层按钮l法二：选中要删除的图层拖到“删除图层”按钮上l法三：选中要删除的图层在选项菜单中选择“删除图层”l注：A、在Fireworks中，网页层是不能被删除的lB、画布不是图层，他位于文档的最底层(5)重命名图层l双击要命名的图层在名称区输入新的名称(6)图层中对象的编辑（两种编辑模式）l多层编辑模式（默认状态）所有图层中的对象都处于可编

16、辑状态l单层编辑模式：选择选项菜单中的“编辑单一图层”只能对单个层的对象进行编辑第20页，共33页。七、动画设计制作七、动画设计制作(7)图层属性的设置(显示和隐藏、锁定和解锁）(8)为图层建立位图对象(9)设置共享层与合并图层l设置共享层：在选项菜单中选择或双击该层l合并图层：修改平面化层l注：A、将某层设置为共享层时，当前帧以外其他所有帧中的同名层均被删除。lB、合并图层时，被隐藏的图层或对象子层将被丢弃，而共离层将被自动复制到各帧。(10)调整对象的不透明度与混合模式(11)改变图层重叠次序l选择后用鼠标直接拖动第21页，共33页。七、动画设计制作七、动画设计制作l6、使用遮罩效果(蒙版

17、）法一：创建蒙版组法二：通过粘贴方法创建蒙版l导入一幅图复制到剪贴板新建文件绘制作一椭圆并选中若将剪贴板中的内容作为蒙版，则用“编辑粘贴为蒙版”命令；若将剪贴板中的内容作为对象，当前对象伙蒙版，则用“编辑粘贴到内部”命令；法三：根据选区制作蒙版（位图遮罩）l导入一幅图制作选区选择“修改蒙版显示所选”命令l导入一幅图制作选区单击“添加蒙版”按钮第22页，共33页。七、动画设计制作七、动画设计制作l7、使用SymbollFireworks具有库面板，放在库中的对象称为符号，在库面板中，将该符号拖到文档中，就创建了实体，实体就是原始对象的副本，当符号对象进行修改时，实体自动变化以反映符号的修改。创建

18、：法一：插入新建符号 法二：制作一个对象使用转换命令（F8）l注：不能为实体指定笔触和填色，但可以对实体变形和添加特效。还可以在层面板上修改实体的透明度和混合模式。l修改符号：双击任何一个实体l断开链接后的实体可修改任何属性。l8、Symbol动画应用l制作或引入一个对象转换为动画类型选择参数OKl9、分身动画的制作l制作或引入一个对象（动画类型）内插动画l10、输出GIF动画l文件导出第23页，共33页。八、动态按钮制作八、动态按钮制作l1、设置按钮对象(两种方法）l2、鼠标事件设置（四种状态）l3、设置链接区域（切割工具、多边形切割工具）l4、设置按钮链接（两种方法）第24页，共33页。九

19、、图像格式输出九、图像格式输出l1、图像输出设置l2、输出JPG文件第25页，共33页。十、图像变换设计十、图像变换设计l1、简单的图像变换l2、复杂的图像变换第26页，共33页。十一、链接设置使用十一、链接设置使用l1、使用链接工具l2、直接设置链接l3、WEB层的管理l4、设置链接对象l5、使用链接设置项l6、链接的弹出菜单l7、使用链接面板第27页，共33页。十二、使用大图切割十二、使用大图切割l1、什么是大图切割l2、切割大尺寸图像l3、切割对象与图层l4、输出HTML文件l5、链接区文字置换第28页，共33页。十三、自动化的应用十三、自动化的应用l1、使用查找和替换l2、使用项目清单

20、l3、批处理的使用l4、脚本储存使用第29页，共33页。创建按钮（Buttons）和导航条 l按钮是网页中应用极多的元素，众多的按钮就形成了导航条，导航条的作用就是要让浏览者清楚知道当前所处的位置，并且通过导航条可以方便的将浏览者带到其他的地方而不会迷失。因此按钮表现有以下几种状态：Up：默认状态，即通常的状态，这时的鼠标是不在按钮范围之内的。l Over：鼠标滑过按钮时的状态。l Down：按钮被点击后的状态，通常它是出现在目标网页中的。l Over While Down：鼠标滑过处于Down状态下按钮的时候按钮的状态，通常极少应用。l创建按钮：Insert-New Button 这样就会出

21、现按钮编辑器，第30页，共33页。创建导航条创建导航条 l打开Library面版，将按钮重复拖到画板中，使其有多个按钮。l将这些按钮摆放整齐后，打开object面版，选中一个按钮可以在object面版中看到相关的参数，其中的Button Text就是每个按钮的文字，我们只要修改object面版中的文字就可以改变画板上按钮的文字。在弹出的窗口中选择Current，如果选择All就改变画板上所有按钮的文字。注意一下Library面版，你每改变一次就会自动生成一个按钮。第31页，共33页。创建弹出式菜单l先绘制一个作为触发的按钮，然后选择Insert-Slice在按钮上建立切割，因为一定要有切割或热区才能创建弹出式菜单，所以在创建弹出式菜单之前一定要先建立切割或热区。第32页，共33页。演讲完毕，谢谢观看！第33页，共33页。