2.1.2 Fireworks基本操作_Div+CSS网页制作实战教程-QQ阅读女生中文仙侠网

上QQ阅读APP看书，第一时间看更新

2.1.2 Fireworks基本操作

1．Fireworks软件介绍

Fireworks是第一个针对网页而开发的专业图形图像处理软件，它原来是Macromedia公司的产品，与Dreamweaver、Flash并称为网页三剑客。Macromedia于2005年被Adobe公司收购，Fireworks也成为Adobe旗下的一员。

2．Fireworks的特点

Fireworks将矢量图像处理和位图图像处理合二为一，避免了图像操作在多个应用程序之间来回迁移。其主要特点如下。

●Fireworks的工作文档格式为png图片，能够保存交互及图层等相关信息供以后编辑使用。

●Fireworks矢量图形处理能力强，能任意切图、生成鼠标翻转图像等动画效果。

●具有强大的动画和网络图像生成功能，导出时可以进行图像优化。

●可以导出带有HTML或者JavaScript代码的网页文件。

●Fireworks提供了一个真正集成的Web解决方案。

（1）支持交互式图形

Fireworks的切片和热点是指网页图形中交互区域的对象。切片是将图像切成不同的部分，可以将变换图像、动画效果和超级链接等应用到这些对象上。Fireworks导出的网页中，每个切片都放置在一个表格单元格中，而热点可将URL链接和行为指定给整个图形或图形的某个部分，切片和热点可以在工作区中快速为图形指定交换图像及行为动作。

（2）导出图形时进行图形优化

Fireworks源PNG文档可以导出为多种类型的文件，包括JPG、GIF、GIF动画和包含多种类型切片图像的HTML表格，并且在导出图形时进行不同比例的压缩和图像优化，在文件大小和品质之间取得平衡。

（3）支持编辑矢量图形和位图图像

矢量图形又称向量图形，它由数学方程式所定义的直线和曲线组成，内容以线条和色块为主。矢量图形特点如下。

●矢量图由多个对象元素堆砌而成，各对象在计算机中由数学公式描述。

●每个对象都是实体，具有颜色、形状、轮廓和大小等属性。

●矢量图中所有对象都是用数学公式表示的，因而图形显示大小与文件大小无关，清晰度也与分辨率无关，将其放大或缩小显示，曲线公式自行计算，不会出现锯齿状边缘，如图2-2所示。

图2-2 矢量图形

●矢量图在标志设计、插图设计及工程绘图上应用广泛。

位图图像又称为点阵图像，由许多像素点组成，每个像素点有具体的颜色。计算机显示器屏幕可看作一个大的像素网格，在每个像素网格点上显示不同的颜色、亮度等，便会在整体上呈现出一幅图像，这就是位图图像，其特点如下。

●位图（如图2-3所示）可以表现图像中色彩的细微变化，能够制作色彩和色调变化丰富的图像，画面细腻，过渡自然。

图2-3 位图图像

●位图的清晰度与分辨率有关，图像缩放其清晰度都会下降。例如在屏幕上将位图放大，或以低分辨率打印，图像会出现锯齿边缘。

●位图的文件大小直接与像素点的多少有关，图像幅面越大，文件所占空间就越大。

●通常位图文件比相同内容的矢量图像文件大，但矢量图不易做出色调或色彩变化丰富、内容复杂的图像。

3．Fireworks的工具箱为了安装方便，下面以FireworksCS3为例进行操作讲解，其他版本大同小异。Fireworks将不同图形对象的操作工具箱分类放置，如图2-4所示。

图2-4 Fireworks工具箱

图中右下角带有小三角号的都是工具组，用鼠标按住工具组图标1s后，其隐含的组员图标便会弹出，按住鼠标不放并向右拖动，选择需要的组员并释放鼠标，此工具成员图标便出现在工具箱中，替代了原来的工具组图标。

4．Fireworks基本操作

在Fireworks“工具”面板中，选择的工具决定了创建的对象是矢量图还是位图。例如，从“工具”面板的“矢量”部分选择钢笔工具，就能绘制矢量路径；选择刷子工具，则可以绘制位图对象；选择文本工具，可以输入文字。绘制或导入矢量、位图对象或文本后，既可以使用各种工具、效果、命令和技术来增强和完成图形，也可以使用Fireworks工具编辑导入的JPG、GIF、PNG、PSD等图形，对它们进行裁切、润饰、蒙版处理、调整颜色和色调等处理。

（1）创建新文档

PNG是Fireworks的文档格式，创建新文档的步骤如下。

1）选择“文件”菜单→“新建”，打开图2-5所示的“新建文档”对话框。

图2-5 “新建文档”对话框

2）输入画布宽度和高度，以“像素/厘米”为单位输入分辨率，为画布选择白、透明或自定义颜色。

3）单击“确定”按钮。

（2）打开和导入文件

Fireworks可以打开或导入图像文件，步骤如下。

1）选择“文件”菜单→“打开”，打开图2-6所示的“打开”对话框。

图2-6 “打开”对话框

2）选择文件并单击“打开”按钮。

注意：可以将矢量对象、位图图像或文本从支持拖动操作的任何应用程序（如Flash、Photoshop等）拖到Fireworks中进行编辑。

（3）保存文件

Fireworks保存文件的步骤如下。

1）选择“文件”菜单→“保存”，打开图2-7左边所示的“另存为”对话框。

图2-7 “另存为”对话框

2）如果要将文档导出为其他格式，可以在“优化”面板中选择一种文件格式，如图2-7右边所示，再选择“文件”菜单→“导出”命令导出文档。

3）输入保存位置和文件名（扩展名默认.png），单击“保存”按钮。

（4）设置Fireworks工作环境

Fireworks允许用户根据需要，对其运行环境进行个性化的设置，来适应不同的操作习惯，以提高工作效率。操作步骤如下。

1）按组合键＜Ctrl+U＞或选择“编辑”菜单→“首选参数”，弹出图2-8所示“首选参数”对话框。

图2-8 “首选参数”对话框

2）选“常规”卡片，在其中设置撤销步骤（默认20步）、颜色默认值、启动选项等内容。

3）选“编辑”卡片，在其中设置Fireworks的编辑选项，如图2-9所示，内容如下。

图2-9 “编辑”选项卡

●修剪时删除对象：选中该复选框，用户在使用裁剪工具时，裁剪区域外的图像将被删除。

●在转换为选取框时删除路径：选中该复选框，用户在将路径转换为选取框（修改菜单）后路径将被删除。图2-10为不删除路径时的显示情形。

图2-10 不删除路径时的情形

●刷子大小绘图光标：设置“刷子”“橡皮擦”“模糊”“锐化”“减淡”“加深”“涂抹”等工具的指针形状。如打勾，显示为十字形指针，否则显示的是工具图标指针。

图2-11为使用刷子工具时的显示效果。

图2-11 使用刷子工具时的显示效果

●精确光标：选中该复选框（不选前一项），在使用工具进行图像编辑时，光标将显示为十字形状，有利于用户对图像的精确定位。

●在“钢笔工具选项”选项区中，选中“显示钢笔预览”复选框，可在使用钢笔工具单击时，提供将创建的下一个路径段的预览；如图2-12所示。“显示实心点”复选框打勾，可将未选中的控制点显示为实心点。

图2-12 “显示实心点”复选框打勾时的情形

（5）更改画布

新建或打开图像后，可根据需求调整画布尺寸及颜色，以及对画布进行旋转和裁剪等操作。

1）设置画布颜色。打开“新建文档”对话框，单击其中的“自定义”，从调色板中选择合适的颜色作为画布的颜色，如图2-13所示。

图2-13 设置画布颜色

2）更改画布的颜色。选择“修改”菜单→“画布”→“画布颜色”，或在画布中单击鼠标右键，在弹出菜单中选择“修改画布”→“画布颜色”选项，也可以打开图2-13a所示的“画布颜色”对话框。

3）旋转与修剪画布

选择“修改”菜单→“画布”命令，执行旋转画布操作，如旋转180°、顺时针旋转90°和逆时针旋转90°等。如果图像四周有空白的画布区域，可选择“修改”菜单→“画布”→“修剪画布”命令，将这些空白区域裁掉。如选择“修改”菜单→“画布”→“符合画布”命令，则系统将自动调整画布尺寸，裁去四周的空白画布区域。如果此时有超出画布的对象，则画布被扩展。

a）“画布颜色”对话框 b）颜色选择面板

（6）切片工具的使用

一个由图片为主的网页，整幅图像的下载速度较慢。可在Fireworks中设定好切片大小后，导出为带有表格的HTML文件。该文件中将各幅小图片插入到相应的单元格中，并使表格的格线宽度为0，使各幅图片之间没有缝隙，看起来就像一幅图片一样，在下载时，图像是从切片的各个位置同时出现（马赛克效果），切割后的总占用空间一般少于原图空间。下面根据已经制作好的图像介绍切片工具的操作步骤。

1）导入图像及画辅助线。

●新建文档，画布宽设为500像素、高设为375像素、分辨率设为72像素/英寸，画布底色设为白色，单击“确定”按钮。

●选择“文件”菜单→“导入”命令，导入所需图片，如图2-14a所示。