网页设计与制作课件第2章

1、第2章 Fireworks 8的基础知识,2.1 Fireworks 8的工作环境 2.2 Fireworks 8的基本操作 2.3 应 用 实 例 2.4本章小结,本章重点： 了解Fireworks 8的工作环境 掌握Fireworks 8文档的基本操作,启动Fireworks 8后，屏幕首先显示的是开始页。在开始页中用户可以选择开始工作那个项目。通过开始页，可以轻易访问最常用的操作和最近访问过的项目，还可以产品介绍或教程了解关于Flash的得更多信息。 选择开始页中【新建】Fireworks文档，或者【打开】最近使用过的文档，就可以进入Fireworks 8主窗口。 Fireworks 8

2、主窗口如图2-1所示。主要由标题栏、菜单栏、工具栏、工具箱、编辑窗口、浮动面板等组成。,2.1 Fireworks 8的工作环境,图2-1 Fireworks 8的主窗口,2.1.1 工具栏 使用工具栏中的按钮可以快速地完成菜单中的一些常用命令，使得设计工作更加方便快捷。 Fireworks 8中有【主要工具栏】和【修改工具栏】。【主要工具栏】包含文件的基本操作，操作步骤的撤销恢复及图像内容的复制移动等常用操作，如图2-2所示。【修改工具栏】包含图像对象旋转、组合和改变叠放顺序等常用操作，如图2-3所示。 选择菜单【窗口】|【工具栏】|命令，单击【主要工具栏】可以显示或隐藏【主要工具栏】。单击

3、【修改工具栏】可以显示或隐藏【修改工具栏】。,图2-2 主要工具栏,图2-3 修改工具栏,2.1.2 工具箱 【工具箱】又称工具面板，如图2-4所示，Fireworks 8的工具箱中共有6组不同种类的工具，分别是选择、位图、矢量、Web、颜色和视图工具。有些工具按钮的右下角有个小三角形，表示这是一个工具组，在该工具按钮上按下鼠标左键不放，将会显示该组中所有工具，用户可以选择自己需要的工具。 当用户选择一种工具后，在属性面板中将显示该工具的详细参数设置，用户可以设置合适的参数以满足自己使用该工具的需要。 选择菜单【窗口】|【工具】命令，可以显示或隐藏工具箱。,2.1.3 浮动面板 浮动面板是Ma

4、cromedia公司软件产品的一个特色，Fireworks 8将一组相关操作集中在一个浮动面板中，处理起来即方便又快捷，且可视化的结果能立即反映到图像中。浮动面板可以折叠、展开、组合、移动、缩放和关闭，即灵活又有效地利用了屏幕的空间，在屏幕个性化视图的组成上，用户有了更多的选择权。 如图2-5所示，Fireworks 8主窗口右面是浮动面板的停靠区，拖动工作区和浮动面板停靠区之间的分割栏可以改变浮动面板停靠区的宽度。 单击分割栏按钮，可以打开或关闭浮动面板停靠区，如图2-6所示，暂时不用浮动面板，可以关闭浮动面板停靠区，扩大工作区。 Fireworks 8可以把若干个浮动面板组合成一个浮动面板

5、组，由哪几个浮动面板组成一个浮动面板组，用户可以自由选择。图2-7是一个已经展开的由【帧】浮动面板和【历史记录】浮动面板组成的浮动面板组。,图2-4 工具箱示意图,图2-5 浮动面板停靠区和分割栏按钮,图2-6 关闭浮动面板停靠区,图2-7 展开的浮动面板组,拖动浮动面板组的移动按钮可以在浮动面板停靠区中改变浮动面板组的排列顺序，拖动中在浮动面板停靠区中显示的颜色条，如图2-8所示，也就是正被拖动的浮动面板组的位置。也可以将浮动面板组拖出浮动面板停靠区，浮在工作区的上面。将浮动面板组从外面拖入浮动面板停靠区，必须等颜色条出现才能放开鼠标，否则浮动面板组只是浮在浮动面板停靠区上。在浮动面板组里单

6、击浮动面板的名称可以选定当前活动的浮动面板，单击快捷菜单按钮，可以打开与当前活动的浮动面板相关的快捷菜单，执行更多的命令。 单击折叠按钮，可以将浮动面板组折叠起来，如图2-9所示。在折叠的浮动面板组上单击展开按钮可以将浮动面板组展开。,图2-8 将浮动面板组移入浮动面板停靠区,图2-9 折叠的浮动面板组,Fireworks 8中有下列常用的浮动面板：。 （1）【混色器】和【样本】面板：用于选择图像中描边和填充的颜色，在【混色器】面板中可以用RGB的数值来选择各种各样的颜色。 （2）【层】面板：提供对图像图层的各种操作，对图层进行管理。 （3）【帧】面板：提供对动画中帧的各种操作，对帧进行管理。

7、 （4）【信息】面板：提供画布上鼠标所在点的颜色和坐标的信息。颜色用RGB数值表示，坐标原点默认为画布的左上角，可以用标尺改变坐标原点。,（5）【历史记录】面板：列出最近使用过的操作，以便能够快速撤消和重复这些操作。 （6）【库】面板：元件是Fireworks 8中可以重复使用的对象，元件保存在元件库中。可以把图像中的对象转换为元件，也可以使用Fireworks 8提供的元件，【库】面板提供对元件库中元件的各种操作，对元件进行管理。 （7）【优化】面板：用来设置图像文件的输出格式、品质以及最终输出的文件大小等参数。 （8）【样式】面板：样式是一组格式的集合，使用样式可以快速地对对象进行复杂的格

8、式化。使用【样式】面板可以方便地使用样式库里的样式，并对样式进行管理。,灵活使用浮动面板组可给图形图像编辑带来方便，浮动面板组的基本操作如下。： 1打开浮动面板组 选择菜单【窗口】，单击浮动面板的名称，则该浮动面板所在的浮动面板组会在浮动面板停靠区打开。 2选择浮动面板组中的浮动面板 单击浮动面板组中的浮动面板名称或选择菜单【窗口】，单击浮动面板的名称， 3关闭浮动面板组 在浮动面板组中单击快捷菜单按钮 ，打开快捷菜单，选择【关闭面板组】命令。,4重命名面板组 （1）在浮动面板组中单击快捷菜单按钮 ，打开快捷菜单，选择【重命名面板组】命令。 （2）输入面板组的个性化的名字。 5重新组合浮动面板

9、组 （1）单击需要重新组合的浮动面板使之成为当前活动的浮动面板。 （2）在浮动面板组中单击快捷菜单按钮 ，打开快捷菜单，并在级联菜单中选择要加入的浮动面板组。,2. 1. 4 属性面板 Fireworks 8是一个面向对象的软件，工具箱里的工具和Fireworks 8图像的组成部分都是对象。对象取不同的属性就会呈现不同的状态，起到不同的作用。Fireworks 8中用于给对象设置属性值的是【属性】面板。 当选择了不同的对象时，【属性】面板中显示的就是该对象可以设置的内容。单击【属性】面板右下角的小三角按钮，可以选择显示【属性】面板中的部分常用属性或显示全部属性。【属性】面板是一个特殊的浮动面板

10、，也可以做折叠、展开和移动等操作。,图2-10是选择了Fireworks 8图像中的文本时的【文本】属性面板，显示了文本对象可以设置的全部属性，包括字体，文字大小，颜色等。,图2-10 选择了文本时的【文本】属性面板,图2-11是选择了工具箱里【刷子】工具时的【刷子】属性面板。显示了刷子对象的部分常用属性。包括刷子的大小，颜色等。,图2-11 选择刷子工具时的【刷子】属性面板,2.1.5 标尺 Fireworks 8提供了标尺、辅助线和网格帮助用户在Fireworks 8图像中精确定位。标尺以像素为单位。选择【视图】|【标尺】命令可以显示或隐藏标尺。 1改变画布上的坐标原点 如图2-12所示，

11、用鼠标拖动标尺左上角的有两条虚线交叉的区域，在画布中将两条虚线交叉点对准要设置为原点的点放开即可。 2利用标尺定位 用鼠标拖动需定位的对象，水平和垂直标尺上会出现黑色的色块，如图2-13所示，使两色块均对准要定位的刻度值即可。,图2-12 设置坐标原点,图2-13 利用标尺定位,2.1.6 辅助线与网格 辅助线可为用户绘制图形和对象定位提供帮助。Fireworks 8还提供了将对象吸附到辅助线的功能，即当对象移到离辅助线一定距离时会自动吸附到辅助线上。 在对图像进行编辑时可以锁定辅助线，使其不能移动。 网格可视为一系列等距离的水平和垂直辅助线构成的体系，同样有显示或隐藏，吸附对象等功能，操作与

12、辅助线类似。,1产生和删除辅助线 把鼠标指针定位在标尺内，拖动到画布内，即可产生一根辅助线，将辅助线拖出画布即可将它删除。 2锁定辅助线 选择菜单【视图】|【辅助线】|【锁定辅助线】命令，有 复选标记则锁定，无 复选标记则可移动。 3对齐辅助线 选择菜单【视图】|【辅助线】|【对齐辅助线】命令，有 复选标记则对象会自动吸附到辅助线，无 复选标记则不会自动吸附。,4显示或隐藏辅助线 选择菜单【视图】|【辅助线】|【显示辅助线】命令，有 复选标记则显示，无 复选标记则隐藏， 5改变网格单元格的尺寸 选择菜单【视图】|【网格】|【编辑网格】命令，在弹出的对话框中输入合适的网格单元格的尺寸，并单击【确

13、定】按钮确认。,2.2 Fireworks 8的基本操作 使用Fireworks 8制作图像时，首先应该掌握Fireworks中图像文件的基本操作。文件的基本操作包括新建文档、打开文档、导入文档、导出文档和保存文档等。,2.2.1 创建新文档 创建新文档的操作步骤如下。 （1）选择菜单【文件】|【新建】命令，打开如图2-14所示的【新建文档】对话框。 （2）输入画布的宽度和高度值，度量单位可以是像素、英寸或厘米。输入分辨率，单位可以是像素英寸或像素厘米，默认的分辨率是72像素英寸。 （3）在【画布颜色】选项组中设置画布的颜色，颜色可为白色、透明色或者自定义的其他颜色。 （4）单击【确定】按钮。

14、,图2-14 【新建文档】对话框,2.2.2 打开文档 打开文档的操作步骤如下。 （1）选择菜单【文件】|【打开】命令，打开【打开】对话框，如图2-15所示。 （2）在【查找范围】文本框中确定要打开的图像文档的位置，并在【打开】对话框选择所需要的图像文件，单击【确定】按钮，就可以打开一个已存在的图像。 也可以选择菜单【文件】|【打开最近的文件】命令，打开的子菜单中会列出最近打开过的图像文件，单击选择所需的文件名，就可以便捷地打开该图像文件。 如果选中多个图像文件，并选择【打开】对话框底部的【以动画打开】的选项，就可以将选中的多个图像制作成逐帧动画。,2.2.3 导入文档 在Fireworks

15、8中，可以将已有的图像文件作为一个对象插入到正在编辑的图像中，插入的图像也可以是其他格式的图像文件，例如：Photoshop格式的图像文件，FreeHand格式的图像文件，Illustrator格式的图像文件，未压缩的CorelDRAW格式的图像文件和动画GIF格式的图像文件。,图2-15 【打开】对话框,导入图像的操作步骤如下。 （1）新建或打开一个图像。 （2）选择菜单【文件】|【导入】命令，打开【导入】对话框。 （3）在【导入】对话框中选择所需要导入的图像文件，单击【打开】按钮。 （4）在编辑窗口中可以看到鼠标指针变成一个直角的折线，在需要显示图像的区域的左上角向右下角拖动鼠标，此时会随

16、鼠标拖动出现一个线框，释放鼠标后即可出现导入的图像。,2.2.4 保存文档 图像文档保存的操作步骤如下。 （1）选择【文件】|【保存】命令，如果图像是第一次保存，则会打开如图2-16所示的【另存为】对话框。 （2）在【另存为】对话框中选择图像的保存路径和输入文件名，单击【保存】按钮即可保存该图像，此时保存的图像文件类型只能是png图像文件。 （3）如果图像不是第一次保存，则不会打开【另存为】对话框，直接将图像以原文件名保存在原路径下。 图像【另存为】与【保存】的区别在于可以把图像保存为其他格式的图像文件。选择【文件】|【另存为】命令，在【另存为】对话框中的【另存为类型】下拉列表中可以选择需要的

17、文件类型，如图2-17所示。,图2-16【另存为】对话框,图2-17 【另存为】对话框中的【另存为类型】下拉列表,2.2.5 导出文档 Fireworks 8采用的图像文件格式是png格式，由于其中保存了图层、帧等信息，所以文件较大，一般不适合直接用于网页制作。 导出图像的操作会将图像中的所有图层合并，并采取优化措施，把图像保存为JPEG或GIF等占用空间较小的图像文件格式，也可以保存为gif格式的动画。 Fireworks 8附带了一些与网页制作有关的功能，会自动生成相关的HTML文件，导出图像的操作可以把相关的HTML文件和图像文件一起保存。,导出操作还可以将正在编辑的图像的一部分保存为一

18、个单独的图像文件。导出操作不会破坏正在编辑的png格式的图像文件。 导出操作要设置导出图像的格式及导出图像的质量等参数，Fireworks 8会保持这些参数，如果这些参数没有改变，就不必再设置，直接导出就可以了。,1.设置导出图像的参数 导出图像前可设置导出图像的质量等参数，操作步骤如下。 （1）选择菜单【文件】|【图像预览】命令，打开【图像预览】对话框如图2-18所示。 （2）在【图像预览】对话框的【格式】下拉列表可以选择导出图像的格式，对每一种图像格式都可以设置与导出图像质量有关的一系列参数，设置完毕后单击【确定】按钮，也可直接单击【导出】导出文件。,图2-18 【图像预览】对话框导出文档

19、,2.导出文档 图像编辑完成后可将图像文件导出保存，操作步骤如下。 （1）选择【文件】|【导出】命令，打开【导出】对话框。 （2）在【导出】对话框中选择图像的保存路径和输入文件名，在【导出】下拉列表中选择要导出的内容，单击【导出】按钮即可导出该图像。 Fireworks 8可在图像上添加切片和建立超链接的热点，然后导出为HTML网页文件。也可以选择导出HTML和图像，并指明保存切片图像的文件夹，将HTML网页文件和切片图像文件一起导出保存。,导出部分图像 导出操作还可以将正在编辑的图像的一部分保存为一个单独的图像文件，操作步骤如下。 (1) 选择菜单【文件】|【图像预览】命令，打开如图2-20

20、所示的【图像预览】对话框。 (2) 单击【导出区域】按钮 ，图像上出现八个控制点的虚线框, 虚线框中的图像就是导出内容。 (3) 拖动控制点可改变虚线框的大小。把鼠标指针放在虚线框内，鼠标指针变成手形，拖动可移动虚线框，用虚线框围住要输出的图像部分，如图2-20所示。 (4) 单击【导出】按钮，即可将虚线框中的图像导出为一个图像文件。,图2-20 用虚线框围住要输出的图像部分,2.2.6 画布的设置 画布是作图的空间，创建新图像就是新建了一块画布，可以在图像建建立以前或者以后设置画布的大小和颜色，画布颜色是图像最底层的颜色。 1修改画布颜色 新建文档时可以设置好画布的颜色，或者在编辑图像的时候

21、调整画布的颜色，操作步骤如下。 （1）选择菜单【修改】|【画布】|【画布颜色】命令，打开如图2-21所示的【画布颜色】对话框。 （2）单击混色器，选择所需要的颜色。 也可以选择文档【属性】面板中画布的颜色框，在弹出的混色器中选择所需要的颜色。,图2-21【画布颜色】对话框,2修改画布大小 在编辑图像的时候，常常会因图像大小改变而需要调整画布的大小，其操作步骤如下。 （1）选择【修改】|【画布】|【画布大小】命令，打开如图2-22所示【画布大小】对话框。 （2）在【宽度】和【高度】文本框中设置画布新的尺寸。 （3）在如图2-22所示的【锚定】选项组中共有9个选项，每一选项中的小黑点表示原画布在新

22、画布中的位置，在【锚定】选项组中选定一项，指定Fireworks 8在画布的哪一边进行扩展或裁减，单击【确定】按钮，即可更改画布的大小。 修改画布的大小不会影响原画布上的图像的尺寸,图2-22 【画布大小】对话框,3旋转画布 选择菜单【修改】|【画布】命令，在其子菜单项中，有三个关于旋转画布的命令：【旋转180】、【旋转90顺时针】、【旋转90逆时针】，选择一种旋转命令，即可完成画布的旋转，画布中的图像也随之旋转。 4修剪画布 修剪画布就是使画布的大小正好与其中的图像一样大小，这是在对图像编辑后经常会做的操作。选择【修改】|【画布】|【修剪画布】命令或者选择【修改】|【画布】|【符合画布】命令

23、后，画布立即会扩展或收缩至画布中图像内容相同的大小。,2.2.7图像的缩放 1修改图像的大小 选择菜单【修改】|【画布】|【图像大小】命令，打开如图2-23所示的【图像大小】对话框。可在对话框中修改图像的参数，图像大小尺寸和打印尺寸的单位可以是像素、英寸或原图像尺寸的百分比，选择【约束比例】则修改过大小的图像仍保持原先的长和宽的比例。 改变画布大小是仅对画布进行缩放，对画布中的所有图像没有影响；而改变图像大小后，画布与图像一起做相同比例的缩放。,图2-23 【图像大小】对话框,2图像屏幕显示的缩放 单击工具箱里的按钮，鼠标指针在画布里变成，单击即可放大显示图像。按住Alt键，鼠标指针在画布里变成，单击即可缩小显示图像。 图像屏幕显示的缩放并不改变图像的实际大小，只是按放大或缩小的比例在屏幕上显示出来，在屏幕上放大图像便于对图像做细微的编辑。,2.2.8 操作步骤的撤销与重做 在图像制作或编辑过程中，常常要纠正错误操作或反复测试图像的效果，因此做过的操作步骤经常要撤销与重做。 逐步撤销和重做 选择菜单【编辑】|【撤销】命令，或单击主要工具栏上按钮，或按快捷键Ctrl+Z，都可以撤