网页制作教学课件 (10)

1、第10章 Fireworks 8Fireworks 8入门入门 初识初识Fireworks 8Fireworks 8矢量图形绘制与编辑矢量图形绘制与编辑10.1 10.1 初识初识Fireworks 8 Fireworks 8 Fireworks 8Fireworks 8同同Dreamweaver 8Dreamweaver 8的启动过程类似。的启动过程类似。启动启动Fireworks 8Fireworks 8后，系统会首先显示起始页。后，系统会首先显示起始页。 在起始页的在起始页的“新建新建”列中单击列中单击“FireworksFireworks文件文件”后，将打开后，将打开“新建文档新建文档

2、”对话框。设置各项参数对话框。设置各项参数后单击后单击“确定确定”按钮，将进入按钮，将进入Fireworks 8Fireworks 8的操的操作界面。作界面。 10.1.1 10.1.1 工具栏工具栏 Fireworks 8Fireworks 8的工具栏包括的工具栏包括“主要主要”工具栏和工具栏和“修改修改”工具栏。默认状态下，工具栏是关闭工具栏。默认状态下，工具栏是关闭的，选择的，选择“窗口窗口”“工具栏工具栏”菜单下的相应菜单下的相应选项，可打开相应的工具栏。选项，可打开相应的工具栏。 “主要主要”工具栏工具栏 “修改修改”工具栏工具栏 10.1.2 10.1.2 工具面板工具面板 默认状

3、态下，默认状态下，“工具工具”面面板位于工作界面的左侧，板位于工作界面的左侧，其中的工具被分成其中的工具被分成6 6个类个类别：选择、位图、矢量、别：选择、位图、矢量、网页（网页（WebWeb）、颜色和视）、颜色和视图。如果某个工具图标的图。如果某个工具图标的右下角有一个小黑三角符右下角有一个小黑三角符号，单击并按住鼠标不放号，单击并按住鼠标不放将打开该工具的同位工具将打开该工具的同位工具组。组。10.1.3 10.1.3 属性面板属性面板 “属性属性”面板是一个上下文关联面板，它用来面板是一个上下文关联面板，它用来显示或设置当前工具、对象或文档的属性。默显示或设置当前工具、对象或文档的属性。

4、默认情况下，认情况下，“属性属性”面板位于工作区底部。面板位于工作区底部。单击此按钮单击此按钮可展开或折可展开或折叠属性面板叠属性面板单击此按钮可以单击此按钮可以半高或全高方式半高或全高方式显示属性面板显示属性面板10.1.4 10.1.4 文档编辑窗口文档编辑窗口 顾名思义，文档编辑窗口主要用于编辑文档。顾名思义，文档编辑窗口主要用于编辑文档。Fireworks 8Fireworks 8的多文档编辑界面可以使用户同的多文档编辑界面可以使用户同时打开和浏览多个文档，单击窗口左上方的文时打开和浏览多个文档，单击窗口左上方的文档标签可以在各个文档之间切换。档标签可以在各个文档之间切换。 标尺标尺网

5、格网格“帧的播放帧的播放”工具栏工具栏 视图控视图控制栏制栏10.1.5 10.1.5 控制面板控制面板 默认情况下，默认情况下，FireworksFireworks中的控制面板成组停中的控制面板成组停放在工作区右侧。利用这些面板，可以方便地放在工作区右侧。利用这些面板，可以方便地管理文档中的层，设置文档优化参数，设置动管理文档中的层，设置文档优化参数，设置动画效果，以及插入特殊字符等。画效果，以及插入特殊字符等。 范例范例1 1 制作一个简单广告条制作一个简单广告条 在认识了在认识了Fireworks 8Fireworks 8的操作界面后，下面通的操作界面后，下面通过一个简单的实例来认识一下

6、在过一个简单的实例来认识一下在Fireworks 8Fireworks 8中工作的一般流程（具体操作见视频中工作的一般流程（具体操作见视频10-110-1）。）。 10.2 10.2 矢量图形绘制与编辑矢量图形绘制与编辑 图像有位图和矢量图两种。严格地说，位图被称图像有位图和矢量图两种。严格地说，位图被称为图像，矢量图被称为图形。它们之间最大的区为图像，矢量图被称为图形。它们之间最大的区别就是位图放大到一定比例时会变得模糊，而矢别就是位图放大到一定比例时会变得模糊，而矢量图不管放到多大都不会模糊。平时我们拍摄的量图不管放到多大都不会模糊。平时我们拍摄的照片、扫描的图像等都属于位图。位图与矢量图

7、照片、扫描的图像等都属于位图。位图与矢量图相比，优点是所表现的效果更真实、细腻，常用相比，优点是所表现的效果更真实、细腻，常用于广告设计等领域；缺点是文件尺寸太大，且和于广告设计等领域；缺点是文件尺寸太大，且和分辨率有关。分辨率有关。 10.2.1 10.2.1 设置笔触与填充设置笔触与填充 如果已经确定了所要绘制图形的颜色，最好在如果已经确定了所要绘制图形的颜色，最好在绘制前就设置好笔触（描边）和填充颜色。绘制前就设置好笔触（描边）和填充颜色。 此时将滴管移至文此时将滴管移至文档区单击可将文档档区单击可将文档中的现有颜色设置中的现有颜色设置为笔触或填充色为笔触或填充色单击此按钮表单击此按钮表

8、示不要笔触示不要笔触单击此按钮表单击此按钮表示不要填充示不要填充10.2.2 10.2.2 绘制线条绘制线条 在在FireworksFireworks中，用来绘制线条的工具有中，用来绘制线条的工具有“直线直线”工具、工具、“钢笔钢笔”工具、工具、“矢量路径矢量路径”工具以及工具以及“重绘路径重绘路径”工具，本节重点介绍工具，本节重点介绍“钢笔钢笔”工具工具的应用。的应用。选中选中“钢笔钢笔”工具后，在不同位置单击可绘制连工具后，在不同位置单击可绘制连续的直线段。如在某点单击并拖动，则可绘制曲续的直线段。如在某点单击并拖动，则可绘制曲线路径，此时将在节点位置出现调整杆。线路径，此时将在节点位置出

9、现调整杆。 10.2.3 10.2.3 绘制形状绘制形状 利用利用FireworksFireworks提供的其他绘画工具可以非常方提供的其他绘画工具可以非常方便地绘制椭圆、矩形、星形等。其中，使用便地绘制椭圆、矩形、星形等。其中，使用“矩矩形形”工具和工具和“椭圆椭圆”工具时，如果按住工具时，如果按住【ShiftShift】键单击并拖动，则可绘制正方形和圆形。按住键单击并拖动，则可绘制正方形和圆形。按住【AltAlt】键单击并拖动可绘制中心对称矩形和椭键单击并拖动可绘制中心对称矩形和椭圆。按住圆。按住【Shift+AltShift+Alt】组合键单击并拖动，可组合键单击并拖动，可从中心点绘制正

10、方形和圆形。从中心点绘制正方形和圆形。 10.2.4 10.2.4 编辑矢量图形编辑矢量图形 1 1“部分选定部分选定”工具工具 利用利用“部分选定部分选定”工具可以方便地调整路径工具可以方便地调整路径形状。例如，单击节点并拖动可调整节点位形状。例如，单击节点并拖动可调整节点位置；单击调整杆端点并拖动可改变调整杆的置；单击调整杆端点并拖动可改变调整杆的长度与方向，进而改变路径形状。长度与方向，进而改变路径形状。2 2“自由变形自由变形”工具工具 利用利用“自由变形自由变形”工具工具 可推拉路径的任意部可推拉路径的任意部分，从而弯曲路径，此时系统将自动增加、移分，从而弯曲路径，此时系统将自动增加

11、、移动或删除路径上的节点。动或删除路径上的节点。当光标靠近路径时，如果光标箭头的右下角显当光标靠近路径时，如果光标箭头的右下角显示了一个示了一个“s”s”，此时单击并拖动可调整路径，此时单击并拖动可调整路径的弯曲程度。如果光标离路径稍远，光标箭头的弯曲程度。如果光标离路径稍远，光标箭头的右下角显示为的右下角显示为“o”o”，此时单击可为路径增，此时单击可为路径增加一段圆弧，如果继续拖动，则可以改变圆弧加一段圆弧，如果继续拖动，则可以改变圆弧的位置。的位置。 3 3“更改区域形状更改区域形状”工具工具 利用利用“更改区域形状更改区域形状”工具可推拉路径。选择工具可推拉路径。选择该工具后，将光标移

12、至路径区域单击并拖动即该工具后，将光标移至路径区域单击并拖动即可改变路径形状。同样，利用该工具的属性面可改变路径形状。同样，利用该工具的属性面板可设置推拉半径、推拉强度等。板可设置推拉半径、推拉强度等。 4 4“刀子刀子”工具工具 用用“指针指针”工具工具 选中路径后，选择选中路径后，选择“刀子刀子”工工具具 在目标路径上单击并拖动可绘制分割线，释在目标路径上单击并拖动可绘制分割线，释放鼠标后即可分割路径。放鼠标后即可分割路径。5 5组合路径组合路径 通过选择通过选择“修改修改”“组合路径组合路径”菜单下的菜单下的“联联合合”、“交集交集”、“打孔打孔”或或“裁切裁切”等命令可等命令可以方便地

13、组合路径。以方便地组合路径。6 6改变路径改变路径 使用使用“修改修改”“改变路径改变路径”菜单中的各选项也菜单中的各选项也可以非常方便地对路径进行编辑。可以非常方便地对路径进行编辑。 （1 1）路径简化）路径简化 （2 2）扩展笔触）扩展笔触 （3 3）扩展与收缩路径）扩展与收缩路径 10.2.5 10.2.5 设置矢量图形填充效果设置矢量图形填充效果如果路径的填充内容为渐变色或图案，则使用如果路径的填充内容为渐变色或图案，则使用“指针指针”工具单击路径后将出现一个或两个调工具单击路径后将出现一个或两个调整杆，利用调整杆可调整填充效果。整杆，利用调整杆可调整填充效果。拖动调整杆拖动调整杆端点，调整端点，调整填充效果填充效果移动图案移动图案中心点中心点 10.2.6 10.2.6 对象组合和取消对象组合和取消 要组合对象，应首先选择要组合对象，应首先选择“指针指针”工具工具 或或“部分选定部分选定”工具工具 ，然后按住，然后按住【CtrlCtrl】键单击键单击选择多个对象；或者拖出一个选择框来选择多选择多个对象；或者拖出一个选择框来选择多个对象，此时位于选择框内或与选择框相交的个对象，此时位于选择框内或与选择框相交的对象均被选中。最后选择对象均被选中。最后选择“修改修改”“组合组合”菜单或按菜单或按【Ctr