第5章 Fireworks

1、基于Web标准的网页设计 第五章 Fireworks 5.1 Fireworks5.1 Fireworks基础基础 v5.1.1 矢量图和位图的概念矢量图和位图的概念 5.1.2 5.1.2 认识认识FireworksFireworks的界面的界面 5.1.3 5.1.3 新建、打开和导入文件新建、打开和导入文件 1. 新建文档新建文档 v在开始页中点击在开始页中点击“新建新建Fireworks文件文件”，或执行，或执行 菜单命令菜单命令“文件文件”“新建新建”都能新建文档。都能新建文档。 2. 打开文件打开文件 v选择选择“文件文件”“打开打开”菜单项，菜单项，Fireworks可打可打 开

2、其可读的任何图像文件格式。包括开其可读的任何图像文件格式。包括Photoshop格格 式（式（psd）和）和Freehand、Illustrator，CorelDraw 等大部分图像处理软件创建的文件格式等大部分图像处理软件创建的文件格式 3. 导入文件导入文件 v导入文件是把一张图片导入到另一张图片里面去，导入文件是把一张图片导入到另一张图片里面去， 1）选择）选择“文件文件”“导入导入”命令；命令； （2）在导入文件对话框中选择需要导入的文件；）在导入文件对话框中选择需要导入的文件； （3）在文档窗口拖动鼠标指针，出现一个虚线矩形框，如）在文档窗口拖动鼠标指针，出现一个虚线矩形框，如 图图

3、5-5所示，虚线矩形框总是等比例放大，保证导入的图片所示，虚线矩形框总是等比例放大，保证导入的图片 不会变形。松开鼠标，图片就被导入到矩形框中。导入图片不会变形。松开鼠标，图片就被导入到矩形框中。导入图片 大小、位置由拖动产出的矩形框决定，如图大小、位置由拖动产出的矩形框决定，如图5-6所示。所示。 在步骤（在步骤（3）中，也可以直接在文档编辑窗口单击鼠标，图）中，也可以直接在文档编辑窗口单击鼠标，图 片也会被导入。单击的位置即为图片左上角的位置，但图片片也会被导入。单击的位置即为图片左上角的位置，但图片 的大小将保持原有的尺寸不变。的大小将保持原有的尺寸不变。 导入文件还可以通过将要导入的文

4、件拖动到图像文件的编辑导入文件还可以通过将要导入的文件拖动到图像文件的编辑 窗口中实现，图片的大小也会保持原有的尺寸不变。窗口中实现，图片的大小也会保持原有的尺寸不变。 导入文件的步骤导入文件的步骤 5.1.45.1.4画布和图像的调整画布和图像的调整 v1. 修改画布修改画布 v2. 符合画布符合画布 v3. 修剪画布修剪画布 v4. 改变画布的显示比例改变画布的显示比例 v5. 修改图像大小修改图像大小 v6. 裁剪图像裁剪图像 5.1.5 5.1.5 辅助设计工具的使用辅助设计工具的使用 v1. 标尺标尺 v“视图视图”“显示标尺显示标尺”或或“隐藏标尺隐藏标尺”命令，命令， 可以显示或

5、隐藏标尺可以显示或隐藏标尺 v2. 辅助线辅助线 v3. 网格网格 5.2 5.2 操作对象操作对象 v5.2.1 对象和图层的概念对象和图层的概念 v在在Fireworks中，只要我们向画布中添加内容，例中，只要我们向画布中添加内容，例 如画一个矩形，插入一段文字，导入一个图像，如画一个矩形，插入一段文字，导入一个图像， 这些都被看作是添加了一个对象。每插入一个对这些都被看作是添加了一个对象。每插入一个对 象，象，Fireworks就插入了一个图层，可以在窗口右就插入了一个图层，可以在窗口右 侧的侧的“层层”面板中看到画布中具有的图层面板中看到画布中具有的图层 图层示意图层示意 5.2.2

6、5.2.2 选择、移动和对齐对象选择、移动和对齐对象 5.2.3 5.2.3 变形和扭曲变形和扭曲 v“缩放缩放”工具：可以放大或缩小图像。工具：可以放大或缩小图像。 v“倾斜倾斜”工具：可以将对象沿指定轴倾斜。工具：可以将对象沿指定轴倾斜。 v“扭曲扭曲”工具：可以通过拖动选择手柄的方向来工具：可以通过拖动选择手柄的方向来 移动对象的边或角。移动对象的边或角。 v旋转对象。使用变形工具组中的任何一样工具，旋转对象。使用变形工具组中的任何一样工具， 都可以旋转对象，将鼠标指针移动到变换框之外都可以旋转对象，将鼠标指针移动到变换框之外 的区域，的区域， 2. 数值变形数值变形 5.2.4 5.2

7、.4 改变对象的叠放次序改变对象的叠放次序 5.2.5 5.2.5 设置对象的不透明度设置对象的不透明度 5.2.6 5.2.6 操作对象的快捷键操作对象的快捷键 v 1）当使用全选箭头选中对象后，使用键盘的方向键可以）当使用全选箭头选中对象后，使用键盘的方向键可以 移动对象，每按一次方向键就使对象在该方向上移动一个移动对象，每按一次方向键就使对象在该方向上移动一个 像素，这在对对象进行精确位置调节时很方便。如果按住像素，这在对对象进行精确位置调节时很方便。如果按住 “Shift”键不放，再按方向键移动，可每次移动键不放，再按方向键移动，可每次移动10像素。像素。 v （2）如果要选中多个对象

8、，需要按住）如果要选中多个对象，需要按住“Shift”键（多选键（多选 键），再用全选箭头就可以同时选中多个对象了，此时多键），再用全选箭头就可以同时选中多个对象了，此时多 个对象外围都会出现选择框，这样可同时对多个对象进行个对象外围都会出现选择框，这样可同时对多个对象进行 移动等操作。移动等操作。 v （3）如果要复制某个对象，可先选中再按住）如果要复制某个对象，可先选中再按住“Alt”键不键不 放拖动某个对象，即可对其进行复制，这比选中对象再用放拖动某个对象，即可对其进行复制，这比选中对象再用 “Ctrl+C”、“Ctrl+V”复制快多了。复制快多了。 v （4）对于所有形状绘制工具而言，

9、按住）对于所有形状绘制工具而言，按住“Shift”键不放进键不放进 行绘制，可以保证其宽、高比始终为原始比例。这对于绘行绘制，可以保证其宽、高比始终为原始比例。这对于绘 制圆形或正方形是必要的制圆形或正方形是必要的 5.3 5.3 编辑位图编辑位图 v在在Fireworks中，用户处理的对象主要分为两类，中，用户处理的对象主要分为两类， 一类是位图图像，另一类是矢量图形。无论是处一类是位图图像，另一类是矢量图形。无论是处 理位图还是矢量图像，用户都应该了解一个基本理位图还是矢量图像，用户都应该了解一个基本 原则，就是原则，就是“先选择，后操作先选择，后操作”，就是说要先选，就是说要先选 中一个

10、对象，这个对象可以是一个多边形对象，中一个对象，这个对象可以是一个多边形对象， 也可以是一些像素组成的位图区域，然后才能对也可以是一些像素组成的位图区域，然后才能对 它进行操作它进行操作 5.3.1 5.3.1 创建和取消选区创建和取消选区 v“选取框选取框”工具（）：在图像中选择一个矩形像素工具（）：在图像中选择一个矩形像素 区域；区域； v“椭圆选取框椭圆选取框”工具（）：在图像中选择一个椭工具（）：在图像中选择一个椭 圆形像素区域；圆形像素区域； v“套索套索”工具（）：在图像中选择一个不规则曲工具（）：在图像中选择一个不规则曲 线形状像素的区域；线形状像素的区域； v“多边形套索多边形

11、套索”工具（）：在图像中选择一个直工具（）：在图像中选择一个直 边的自由变形像素区域；边的自由变形像素区域； v“魔术棒魔术棒”工具（）：在图像中选择一个像素颜工具（）：在图像中选择一个像素颜 色相似的区域。色相似的区域。 1. 1. “选取框选取框”或或“椭圆选取框椭圆选取框”工具工具 v“选取框选取框”工具和工具和“椭圆选取框椭圆选取框”工具位于工具箱工具位于工具箱 的同一个按钮位置，选取框工具用于创建矩形的的同一个按钮位置，选取框工具用于创建矩形的 选区，而选区，而“椭圆选取框椭圆选取框”工具用于选择工具用于选择“椭圆形椭圆形” 选区选区 “边缘边缘”选项选项 v“边缘边缘”选项有三种选

12、择，它们的功能如下：选项有三种选择，它们的功能如下： v“实边实边”创建的选取框将严格按照鼠标操作产生创建的选取框将严格按照鼠标操作产生 区域。区域。 v“消除锯齿消除锯齿”防止选取框中出现锯齿边缘。防止选取框中出现锯齿边缘。 v“羽化羽化”可以柔化像素选区的边缘。可以柔化像素选区的边缘。 4. 4. “套索套索”和和“多边形套索多边形套索”工具工具 v“套索套索”工具用于创建曲线形的选区，而工具用于创建曲线形的选区，而“多边形多边形 套索套索”工具是以直线为边界的多边形选区工具是以直线为边界的多边形选区 4. 4. 魔术棒工具魔术棒工具 v魔术棒工具可以在图像中选择一个像素相似的区魔术棒工具

13、可以在图像中选择一个像素相似的区 域。域。 5.3.2 5.3.2 编辑选区中的像素区域编辑选区中的像素区域 v1.“滴管滴管”工具工具 v2. 调整颜色调整颜色 v3. 模糊效果模糊效果 5.4 绘制矢量图形 1. 1. 矢量图形的基本构成矢量图形的基本构成 v矢量图形可分为矢量图形可分为笔触笔触和和填充填充两个部分。而要认识两个部分。而要认识 矢量图形，就必须了解另一个几何概念矢量图形，就必须了解另一个几何概念路径路径。 v“路径路径”是用矢量数据来描述的线条，它本身是是用矢量数据来描述的线条，它本身是 看不见的，但是在看不见的，但是在Fireworks中，为了便于编辑，中，为了便于编辑，

14、 将会使用彩色线条来表示它；沿着路径添加某种将会使用彩色线条来表示它；沿着路径添加某种 颜色样式，得到的颜色样式，得到的线状结果就是线状结果就是“笔触笔触”；而在而在 路径围成的区域中应用某种颜色样式，路径围成的区域中应用某种颜色样式，得到的块得到的块 状结果就是状结果就是“填充填充”。 2. 2. “直线直线”、“矩形矩形”和和“椭圆椭圆”工具工具 v使用使用“直线直线”工具（）、工具（）、“矩形矩形”工具（）或工具（）或 “椭圆椭圆”工具（），可以快速绘制基本矢量形状。工具（），可以快速绘制基本矢量形状。 v绘制好形状后，可以在属性面板中对它进行进一绘制好形状后，可以在属性面板中对它进行进

15、一 步设置。先使用步设置。先使用“全选箭头全选箭头”工具选中画布上的工具选中画布上的 矢量形状，就会出现它的属性面板，矢量形状，就会出现它的属性面板， 3. 3. 填充属性的设置填充属性的设置 v矢量图形的填充方式主要有三种，即矢量图形的填充方式主要有三种，即“实心实心”、 “渐变渐变”和和“图案图案”， （2 2）渐变方式填充）渐变方式填充 渐变引导线的使用。渐变引导线的使用。 v用全选箭头选中矢量图形，这时图形上会自动出用全选箭头选中矢量图形，这时图形上会自动出 现渐变引导线，如图现渐变引导线，如图5-56所示；所示； v如果要旋转渐变引导线，可以单击渐变线一头的如果要旋转渐变引导线，可以

16、单击渐变线一头的 方点拖动，或将鼠标移动到渐变线上方，此时光方点拖动，或将鼠标移动到渐变线上方，此时光 标会变成旋转形状，可按住鼠标拖动旋转，如果标会变成旋转形状，可按住鼠标拖动旋转，如果 按住按住Shift键旋转，可保证渐变引导线以键旋转，可保证渐变引导线以45度增量度增量 为单位旋转；为单位旋转； v如果要改变渐变线的长度，可以拖动渐变线一头如果要改变渐变线的长度，可以拖动渐变线一头 的方点延长或缩短；的方点延长或缩短； v如果要改变渐变线的位置，则需要拖动另一头的如果要改变渐变线的位置，则需要拖动另一头的 菱形点，渐变线将发生平移菱形点，渐变线将发生平移 4. 4. 笔触属性设置笔触属性

17、设置 v选中需要设置笔触的对象，在属性面板中将显示选中需要设置笔触的对象，在属性面板中将显示 用于笔触设置的各种属性（图用于笔触设置的各种属性（图5-62），其中用得），其中用得 最多的是描边颜色、描边粗细和描边类型选项。最多的是描边颜色、描边粗细和描边类型选项。 5. 5. 自由形状自由形状 v以圆角矩形为例以圆角矩形为例 6. 6. 钢笔工具钢笔工具 v （1）绘制点：使用钢笔工具在画布上单击一下，即绘制了一个点，）绘制点：使用钢笔工具在画布上单击一下，即绘制了一个点， 接下来不要移动鼠标，在这个点附近（光标右下角带有接下来不要移动鼠标，在这个点附近（光标右下角带有“”形时）双形时）双 击

18、鼠标结束或按住击鼠标结束或按住Ctrl键单击结束。键单击结束。 v （2）绘制直线：使用钢笔工具在画布上单击一下，即放置了第一个）绘制直线：使用钢笔工具在画布上单击一下，即放置了第一个 点，然后移动鼠标，再单击一下即放置了第二个点，一条直线段会将点，然后移动鼠标，再单击一下即放置了第二个点，一条直线段会将 这两个点连接起来。继续绘制点，直线段将连接每个节点。执行下列这两个点连接起来。继续绘制点，直线段将连接每个节点。执行下列 操作之一可以结束绘制：在最后一个点处双击完成绘制一条开放路径；操作之一可以结束绘制：在最后一个点处双击完成绘制一条开放路径； 在所绘制的第一个点处单击完成绘制一条封闭路径

19、。在所绘制的第一个点处单击完成绘制一条封闭路径。 v （3）绘制曲线：使用钢笔工具在绘制点按住鼠标并拖动；或者单击）绘制曲线：使用钢笔工具在绘制点按住鼠标并拖动；或者单击 绘制第一个点后，移动鼠标，在绘制第二个点时按住鼠标并拖动，继绘制第一个点后，移动鼠标，在绘制第二个点时按住鼠标并拖动，继 续绘制点，在绘制最后一个点之前松开鼠标，单击绘制最后一个点，续绘制点，在绘制最后一个点之前松开鼠标，单击绘制最后一个点， 接着在最后一个点处双击完成绘制一条曲线，如图接着在最后一个点处双击完成绘制一条曲线，如图5-66所示。所示。 v （4）绘制直线和曲线的混合曲线：在直线节点后绘制曲线，点击并）绘制直线

20、和曲线的混合曲线：在直线节点后绘制曲线，点击并 拖动鼠标即可。在曲线节点后绘制直线，点击即可，如图拖动鼠标即可。在曲线节点后绘制直线，点击即可，如图5-67所示。所示。 其中路径上的空心圆点表示曲线节点，空心方形点表示直线节点。将其中路径上的空心圆点表示曲线节点，空心方形点表示直线节点。将 鼠标移动到曲线节点上单击鼠标可将其转换为直线节点；将鼠标移动鼠标移动到曲线节点上单击鼠标可将其转换为直线节点；将鼠标移动 到直线节点上时，光标右下角会出现到直线节点上时，光标右下角会出现“-”号，此时单击可将该直线节号，此时单击可将该直线节 点删除点删除 v （7）修改路径：对于已经绘制好的路径，可以用）修

21、改路径：对于已经绘制好的路径，可以用“部分部分 选定选定”箭头单击路径上的某个节点，此时该节点会变为实箭头单击路径上的某个节点，此时该节点会变为实 心，表示被选中，此时按住并拖动鼠标，即可调整路径的心，表示被选中，此时按住并拖动鼠标，即可调整路径的 形状，也可使用键盘上的方向箭头以形状，也可使用键盘上的方向箭头以1像素为单位精确移像素为单位精确移 动节点。动节点。 v 提示：提示： 钢笔工具可对任何矢量路径进行修改，例如矩钢笔工具可对任何矢量路径进行修改，例如矩 形、圆等矢量图形的路径，方法是先用形、圆等矢量图形的路径，方法是先用“部分选定部分选定”箭头箭头 选中路径，再选择钢笔工具就能对路径

22、进行修改了。选中路径，再选择钢笔工具就能对路径进行修改了。 v 钢笔工具绘制完路径后一般要使用钢笔工具绘制完路径后一般要使用“部分选定部分选定”箭头箭头 对路径进行调整。很多路径不一定非得使用钢笔绘制，利对路径进行调整。很多路径不一定非得使用钢笔绘制，利 用现有的矢量路径（例如矩形、圆等工具）绘制后再调整用现有的矢量路径（例如矩形、圆等工具）绘制后再调整 可能事半功倍。可能事半功倍。 5.4.2 5.4.2 调整矢量线条调整矢量线条 5.4.3 5.4.3 路径的切割和组合路径的切割和组合 v“刀子刀子”工具（）用于切割矢量图形的路径工具（）用于切割矢量图形的路径 2. 2. 路径组合路径组合

23、 v（1）联合）联合 v（2）相交）相交 v（3）打孔）打孔 v（4）裁切）裁切 5.4.4 5.4.4 路径和选区的相互转换路径和选区的相互转换 v1. 路径转换为选区路径转换为选区 2. 2. 选区转换为路径选区转换为路径 5.5 文本对象的使用 在在FireworksFireworks中修饰文本的一般步骤中修饰文本的一般步骤 v如下：如下： v 选择合适的字体，有时只要选择一款漂亮的字选择合适的字体，有时只要选择一款漂亮的字 体，无须太多修饰也能显得很美观。体，无须太多修饰也能显得很美观。 v 书写文字，并调整间距。书写文字，并调整间距。 v 对文本进行填充和描边处理。对文本进行填充和描

24、边处理。 v 对文本应用滤镜效果，如投影、发光等。对文本应用滤镜效果，如投影、发光等。 5.5.1 5.5.1 文本编辑和修饰的过程举例文本编辑和修饰的过程举例 v （1）新建一个画布。选择工具箱中的文本工具（）。）新建一个画布。选择工具箱中的文本工具（）。 v （2）在文本起始处单击左键，将会弹出一个小文本框；）在文本起始处单击左键，将会弹出一个小文本框； 或者拖动鼠标绘制一个宽度固定的文本框。或者拖动鼠标绘制一个宽度固定的文本框。 v （3）在其中输入文本，也可以粘贴文本。）在其中输入文本，也可以粘贴文本。 v （4）单击文本框外的任何地方，或在工具面板中选择其）单击文本框外的任何地方，或

25、在工具面板中选择其 他工具，或按下他工具，或按下Esc键都将结束文本的输入。键都将结束文本的输入。 v 如果要修改文本，则首先要使用全选箭头（）选中这个文如果要修改文本，则首先要使用全选箭头（）选中这个文 本对象，此时文本对象周围会出现带顶点的蓝色矩形框，本对象，此时文本对象周围会出现带顶点的蓝色矩形框， 如图如图5-103所示。然后用文本工具（）点击并拖动选中其所示。然后用文本工具（）点击并拖动选中其 中的文字，就可以对选中的文字进行修改了，如图中的文字，就可以对选中的文字进行修改了，如图5-104 所示。例如调整大小，水平间距，颜色等所示。例如调整大小，水平间距，颜色等 v3. 给文字描边

26、给文字描边 v4. 添加投影添加投影 5.5.3 5.5.3 将文本附加到路径将文本附加到路径 5.6 蒙版 5.6.1 5.6.1 使用使用“粘贴于内部粘贴于内部”创建矢量蒙版创建矢量蒙版 4. 4. 制作图像背景的文字制作图像背景的文字 v由于文本也是一种矢量，所以也能将位图图像粘由于文本也是一种矢量，所以也能将位图图像粘 贴于文本内部，达到图像背景文字的效果，其制贴于文本内部，达到图像背景文字的效果，其制 作步骤如下作步骤如下 5.6.2 5.6.2 创建位图蒙版创建位图蒙版 v1. 位图蒙版创建的步骤位图蒙版创建的步骤 2. 2. 利用位图蒙版技术制作网页利用位图蒙版技术制作网页Ban

27、nerBanner 5.7 简单GIF动画的 制作 5.7.1 5.7.1 使用补间实例制作动画使用补间实例制作动画 v （1）选择）选择“直线直线”工具按住工具按住Shift键绘制一条水平直线，键绘制一条水平直线， 将直线的笔触颜色设置为黑色。将直线的笔触颜色设置为黑色。 v （2）用全选箭头选中直线，执行菜单命令：）用全选箭头选中直线，执行菜单命令：“修改修改” “元件元件”“转换为元件转换为元件”（快捷键为（快捷键为F8），在弹出的元），在弹出的元 件属性对话框中保持默认设置即可，此时可发现直线上多件属性对话框中保持默认设置即可，此时可发现直线上多 了一个箭头，表示它已转换为元件了。了一

28、个箭头，表示它已转换为元件了。 v （3）按）按“Ctrl+Shift+D”将直线将直线“克隆克隆”出一个新的，这出一个新的，这 样就有两个直线元件了。样就有两个直线元件了。 v （4）选中新克隆出的直线，执行菜单命令：）选中新克隆出的直线，执行菜单命令：“修改修改” “变形变形”“数值变形数值变形”，在数值变形对话框中选择，在数值变形对话框中选择“旋旋 转转”，输入角度为，输入角度为255度，再使用缩放工具，将直线缩短度，再使用缩放工具，将直线缩短 一些，然后移动到如图一些，然后移动到如图5-162所示的位置。所示的位置。 v （5）接下来在）接下来在“层层”面板中同时选中两个元件，执行菜面

29、板中同时选中两个元件，执行菜 单命令单命令“修改修改”“元件元件”“补间实例补间实例”，在图，在图5-163 所示的对话框中，输入步骤为所示的对话框中，输入步骤为15，把，把“分散到帧分散到帧”前面的前面的 勾去掉。点击确定后效果如图勾去掉。点击确定后效果如图5-164所示。所示。 5.7.2 5.7.2 制作遮罩动画制作遮罩动画 v （2）用文本工具输入一段文字，执行菜单命令）用文本工具输入一段文字，执行菜单命令“文本文本”“编辑器编辑器”，在文，在文 本编辑器中将文本的方向改为本编辑器中将文本的方向改为“垂直文本垂直文本”和和“文本自右至左流向文本自右至左流向”，如图，如图 5-166所示

30、。所示。 v （3）按）按F8键将文本对象转换为图形元件。键将文本对象转换为图形元件。 v （4）在文本上方绘制一个和文本对象一样大的矩形作为遮罩层，设置该矩形）在文本上方绘制一个和文本对象一样大的矩形作为遮罩层，设置该矩形 的填充方式为的填充方式为“线性渐变线性渐变”，渐变颜色从左至右为，渐变颜色从左至右为“黑色白色黑色黑色白色黑色”， 如图如图5-167所示。所示。 v 图图5-166 文本编辑器文本编辑器 图图5-167 矩形遮罩层矩形遮罩层 v （5）在）在“层层”面板中选中文本对象和矩形，执行菜单命令面板中选中文本对象和矩形，执行菜单命令“修改修改” “蒙蒙 版版”“组合为蒙版组合为

31、蒙版”。 v （6）将蒙版层中间的铁链图标去掉，选中蒙版层左边的文本对象，将其拖动）将蒙版层中间的铁链图标去掉，选中蒙版层左边的文本对象，将其拖动 到矩形的左边，使文本均看不见。到矩形的左边，使文本均看不见。 v （7）在）在“层层”面板中选中蒙版层，按面板中选中蒙版层，按“Ctrl+C”和和“Ctrl+V”复制一个，这复制一个，这 时可以把原来的蒙版层先隐藏。选中新蒙版层左边的文本对象，将其拖动到时可以把原来的蒙版层先隐藏。选中新蒙版层左边的文本对象，将其拖动到 矩形的右边，使文本均看不见。矩形的右边，使文本均看不见。 v （8）文本排列好后将这两个蒙版层的铁链图标都点上。）文本排列好后将这

32、两个蒙版层的铁链图标都点上。 v （9）在）在“层层”面板中选中这两个蒙版层，执行菜单命令面板中选中这两个蒙版层，执行菜单命令“修改修改”“元元 件件”“补间实例补间实例”， 输入步骤为输入步骤为25，把，把“分散到帧分散到帧”前面的勾选上。这样前面的勾选上。这样 整个实例就制作完毕了。最终效果如图整个实例就制作完毕了。最终效果如图5-168所示。所示。 5.8 切片及导出 5.8.1 5.8.1 切片的作用切片的作用 v 切片就是将一幅大图像分割为一些小的图像切片，并将每切片就是将一幅大图像分割为一些小的图像切片，并将每 部分导出为单独的文件部分导出为单独的文件 v 网页中有很多边边角角的小

33、图片，如果对这些小图片网页中有很多边边角角的小图片，如果对这些小图片 一张张单独绘制，不仅很麻烦，而且也很难保证它们可以一张张单独绘制，不仅很麻烦，而且也很难保证它们可以 1像素不差的拼成一张大图片。而通过切片，只需绘制一像素不差的拼成一张大图片。而通过切片，只需绘制一 张整体的大图片，再将它们按照布局的要求切割成需要的张整体的大图片，再将它们按照布局的要求切割成需要的 小图片即可，这样开发效率得到很大提高。小图片即可，这样开发效率得到很大提高。 v 在过去，切片还有一个作用，就是能通过对网页效果在过去，切片还有一个作用，就是能通过对网页效果 图进行切片，自动生成整张网页的图进行切片，自动生成

34、整张网页的HTML文档。但是这种文档。但是这种 方式生成的方式生成的HTML文档是用表格排版的，而且代码有很多文档是用表格排版的，而且代码有很多 冗余。因此现在不建议采用切片生成的冗余。因此现在不建议采用切片生成的HTML文档，设计文档，设计 师一般都是在师一般都是在DW中重新制作网页。所以现在切片的唯一中重新制作网页。所以现在切片的唯一 目的就是为了得到制作网页需要的小图片。目的就是为了得到制作网页需要的小图片。 v 有人还喜欢对切片添加链接或交互效果，如添有人还喜欢对切片添加链接或交互效果，如添 加下拉菜单或图像翻转效果。但这些都可以在加下拉菜单或图像翻转效果。但这些都可以在 DW中通过编

35、写中通过编写JavaScript或或CSS实现，而且代码实现，而且代码 更简洁，因此不推荐在更简洁，因此不推荐在Fireworks中为切片添加交中为切片添加交 互或链接互或链接 v 切片还能带来以下一些衍生的好处：切片还能带来以下一些衍生的好处： v 当网页上的图片文件较大时，浏览器下载整个图片需当网页上的图片文件较大时，浏览器下载整个图片需 要花很长时间，切片使得整个图片分为多个不同的小图片要花很长时间，切片使得整个图片分为多个不同的小图片 同时开始下载（同时开始下载（IE浏览器可以同时下载浏览器可以同时下载5个文件），这样个文件），这样 下载的时间就大大缩短了。下载的时间就大大缩短了。 v

36、 如果使用如果使用Fireworks制作整幅的网页效果图，将网页效制作整幅的网页效果图，将网页效 果图转换为网页的过程中，网页效果图中的很多区域需要果图转换为网页的过程中，网页效果图中的很多区域需要 丢弃，例如绘制了文本的区域需要用文本替代，网页效果丢弃，例如绘制了文本的区域需要用文本替代，网页效果 图中单一颜色的区域可以用图中单一颜色的区域可以用HTML元素的背景色取代等等，元素的背景色取代等等， 这时必须把这些区域的图片切出来，才能够将它们删除，这时必须把这些区域的图片切出来，才能够将它们删除， 或者使切片不包含这些区域。或者使切片不包含这些区域。 v 优化图像：完整的图像只能使用一种文件

37、格式，应用优化图像：完整的图像只能使用一种文件格式，应用 一种优化方式，而对于作为切片的各幅小图片我们就可以一种优化方式，而对于作为切片的各幅小图片我们就可以 分别对其优化，并根据各幅小图片的特点还可以存为不同分别对其优化，并根据各幅小图片的特点还可以存为不同 的文件格式。这样既能够保证图片质量，又能够使得图片的文件格式。这样既能够保证图片质量，又能够使得图片 变小。变小。 5.8.2 5.8.2 切片的基本操作切片的基本操作 v1. 创建切片创建切片 2. 2. 导出切片的两种方法导出切片的两种方法 v（1）用全选箭头单击切片对象选中它，按右键，）用全选箭头单击切片对象选中它，按右键， 在右

38、键菜单中选择在右键菜单中选择“导出所选切片导出所选切片”命令，如图命令，如图 5-173所示。可将当前选中的切片导出，这种方式所示。可将当前选中的切片导出，这种方式 适合于单独导出一些小图标文件。适合于单独导出一些小图标文件。 v（2）执行菜单命令）执行菜单命令“文件文件”“导出导出”，在弹出，在弹出 的图的图5-174所示的所示的“导出导出”对话框中，可以选择导对话框中，可以选择导 出切片，如果选中出切片，如果选中“包括无切片区域包括无切片区域”，则切片，则切片 区域的图片和被切片引导线分割的区域都会导出区域的图片和被切片引导线分割的区域都会导出 成切片，如果不选中该项，则只有切片区域的图成

39、切片，如果不选中该项，则只有切片区域的图 片会被导出。另外，最好选中片会被导出。另外，最好选中“将图像放入子文将图像放入子文 件夹件夹”，这样图像就会存放在与网页同级目录的，这样图像就会存放在与网页同级目录的 images文件夹下。文件夹下。 3. 3. 切片的基本原则切片的基本原则 （1）绘制切片时一定要和所切内容保持同样的尺寸，不能）绘制切片时一定要和所切内容保持同样的尺寸，不能 大也不能小。这可以通过选中所切对象后，按右键，选择大也不能小。这可以通过选中所切对象后，按右键，选择 右键菜单中的右键菜单中的“插入矩形切片插入矩形切片”命令实现。命令实现。 （2）切片不能重叠。）切片不能重叠。

40、 （3）各个切片之间的引导线尽量对齐，特别是要水平方向）各个切片之间的引导线尽量对齐，特别是要水平方向 对齐，这样才容易通过网页代码将这些切片拼起来。对齐，这样才容易通过网页代码将这些切片拼起来。 （4）单色区域不需要切片，因为可以写代码生成同样的效）单色区域不需要切片，因为可以写代码生成同样的效 果。也就是说，凡是写代码能生成效果的地方都不需要切果。也就是说，凡是写代码能生成效果的地方都不需要切 片。片。 （5）重复性的图像只需要切一张即可。例如网页中有很多）重复性的图像只需要切一张即可。例如网页中有很多 圆角框都是采用的相同的圆角图片，就可以只切一个圆角圆角框都是采用的相同的圆角图片，就可

41、以只切一个圆角 框。又如导航条中所有导航项的背景图片都是相同的，就框。又如导航条中所有导航项的背景图片都是相同的，就 只要切一个导航项的背景图片就可以了。只要切一个导航项的背景图片就可以了。 （6）多个素材重叠的时候，需要先后进行切片。例如背景）多个素材重叠的时候，需要先后进行切片。例如背景 图像上有小图标，就需要先单独把小图标切出来，然后把图像上有小图标，就需要先单独把小图标切出来，然后把 小图标隐藏，再切背景图像小图标隐藏，再切背景图像 5.8.3 5.8.3 切片的实例切片的实例 v1. 隐藏网页效果图中可以用隐藏网页效果图中可以用HTML文本替换的文文本替换的文 本对象本对象 2. 2. 把网页中的小图标先单独切出来把网页中的小图标先单独切出来 （1）用切片工具在小图标上绘制一个刚好包含住它的切片）用切片工具在小图标上绘制一个刚好包含住它的切片 （2）设置小图片的背景色透明）