网页设计与制作第八章.ppt

1、网页设计与制作学时：学时：60学时学时第八章 制作网页图形图像 了解：了解Fireworks软件的特点、了解在网页设计中相关的设计规范、了解网页中的动态元素、了解网页中图像优化的必要性。熟练掌握：掌握Fireworks的软件基本操作。掌握：掌握Fireworks在图形制作和图像处理方面的操作、掌握Fireworks在制作网页动态元素方面的操作。第一节第一节 Fireworks CS4的工作界面的工作界面Fireworks CS4是一款专业的网页图像处理软件，其工作界面如下图。菜单栏工具栏工具箱属性面板功能面板绘图区第二节第二节 文档的基本操作文档的基本操作 一、新建文档一、新建文档 一、新建文

2、档一、新建文档在Fireworks中新建文档的方法有以下几种：l执行“文件”“新建”命令或按Ctrl+N组合键。l单击工具栏中的“新建”按钮。在“新建文档”对话框中，设定画布的大小、分辨率及画布颜色。单击“确定”按钮，即完成新文档的创建。二、保存文档二、保存文档 二、保存文档二、保存文档在Fireworks中保存文档有以下两种方法：l执行“文件”“保存”命令或按Ctrl+S组合键。l单击工具栏中的“保存”按钮。三、打开文档三、打开文档三、打开文档三、打开文档在Fireworks中打开文档有以下几种方法：l单击工具栏中的“打开”按钮、执行“文件”“打开”命令或按Ctrl+O组合键，在“打开”对话

3、框选择要打开的文档，再单击“打开”按钮。l双击Fireworks图标的文档即可打开该文档。四、导入文档四、导入文档四、导入文档四、导入文档在 Fireworks CS4中，用户可以在当前图像中，导入其他的图像文件，操作步骤如下：（1）执行“文件”“导入”命令，或按Ctrl+R组合键，弹出“导入”对话框。（2）选择要导入的图像文件，单击“打开”按钮。（3）这时鼠标指针会变为直角形状，在画布中拖动鼠标产生一个导入图像的区域，然后释放鼠标，即可图像导入绘制的区域中。第三节第三节 位图的创建与编辑位图的创建与编辑 一、创建位图 一、创建位图一、创建位图位图是由称为像素的彩色小正方形组成的图形。照片、扫

4、描的图像以及用绘画程序创建的图形都属于位图图形。在Fireworks中，如果需要创建位图或是使用位图，常用方法有以下3种：（1）通过工具箱中的位图工具创建位图图像。（2）执行“文件”“导入”将位图图像导入当前的画布中进行编辑。（3）执行“文件”“打开”命令，打开一个位图图像文件进行编辑。二、创建和编辑选区二、创建和编辑选区1.矩形工具矩形工具用于创建矩形选区，在工具箱中选择矩形工具，在画布中拖动鼠标可以绘制一个矩形选区，如果在拖动鼠标的同时，按住Shift键，可以绘制一个正方形选框，如果按住Alt键，则可以从中心向四周来建立选区。（一）创建选区2.套索工具套索工具用于创建不规则的区域，在工具箱

5、中选择“套索”工具（若在该工具上单击可显示该工具包含的相关其他工具），在起始位置，按下鼠标左键然后拖动鼠标圈选需要创建为选区的区域，将鼠标指针移到起始点单击，即可创建一个闭合的区域。3.魔术棒工具魔术棒工具用于选择颜色相似的像素区域。在工具箱中选择魔术棒工具，在图像中需要选择的某种颜色上单击，即可选中与单击处相同或者相似的颜色区域。选择颜色的相似度取决于属性面板中的“容差”和“边缘”选项。二、创建和编辑选区1.调整选区选区绘制后，在不切换其他工具的情况下，可以移动选取框，使用方向键可以以1像素的增量轻推选区，同时按住Shift键和方向键，可以以10个像素的增量移动选区。同样的情况下，将鼠标指针

6、移到选区内，当鼠标指针变为箭头形状 时，单击鼠标拖动选区，可以将选区到其他区域上。（二）选区的编辑2.取消选区如果要取消所创建的选区，可以切换其他选区工具，然后在画布外单击即可，另外，同PhotoShop中一样，按Ctrl+D组合键，也可以取消选区。3.添加、减除、交叉选区按住Shift键并绘制其他的选区，可以增加选区内容。按住Alt键，并绘制其他的选区，可以减少选区内容。按Alt+Shift组合键并创建与原始选取框重叠的新选取框，只有两个选取框的交叉区域内的像素被选定。4.反选执行“选择”“反选”命令，即可将对当前的选区进行反选，按【Ctrl+Shift+I】组合键，效果相同。三、位图的编辑

7、三、位图的编辑1.橡皮图章工具使用橡皮图章工具 可以复制照片的某一完好的像素区域，然后用复制的区域替代有划痕或灰尘的区域。2.替换颜色工具使用替换颜色工具 可以选择一种颜色，并用另外一种颜色覆盖此颜色进行绘画。3.红眼消除工具在拍摄的数码相片中，人物的眼睛有些会出现红眼现象，让照片很不美观，“红眼消除”工具，用于矫正红眼效应。4.“橡皮擦”工具使用“橡皮擦”工具 可以擦除图像中不需要的部分。5.模糊和锐化工具模糊工具通过有选择地模糊元素的焦点来强化或弱化图像的局部区域。锐化工具对于修复扫描问题或聚焦不准的照片。6.涂抹工具“涂抹”工具 可以像创建图像倒影时那样将颜色逐渐混合起来。7.减淡和加深

8、工具使用减淡工具 或加深工具 可以分别减淡或加深图像的局部。在编辑位图时，有时候图像有杂点或少量的破损，需要进行修复，或是图像颜色需要调整等各种情况，Fireworks CS4也提供了相关的工具和命令能帮助完成这些工作。四、调整图像颜色和色调四、调整图像颜色和色调四、调整图像颜色和色调在Fireworks CS4中可以调整图像的对比度、亮度、色调范围、色相和饱和度等参数。方法是选中要调整的图像，单击“添加动态滤镜或选择预设”按钮，然后在弹出的“滤镜”菜单中选择相应的命令，如需要调整命令，在“滤镜”下的“编辑或排列效果”框中，双击添加的滤镜，在打开的对话框中设置调整参数，单击“确定”按钮即可。添

9、加“滤镜”双击需修改的“滤镜”修改“滤镜”参数第四节第四节 矢量图形的绘制与编辑矢量图形的绘制与编辑一、绘制矢量图形一、绘制矢量图形一、绘制矢量图形Fireworks CS4提供了许多通过各种方法绘制和编辑矢量对象的工具。可以使用这些基本的形状工具快速绘制直线、圆、椭圆、正方形、矩形、星形以及任何具有3360个边的多边形。完成下面的例子以说明。二、绘制路径二、绘制路径二、绘制路径如果需要绘制直线，选择“直线”工具，单击在画布上拖动即可，按住Shift键同时再绘制直接，可以以45度角的倍数进行直接的绘制。如需要绘制自由路径，选择“矢量路径”工具，在画布上单击拖动即可。如需要绘制平滑的曲线路径，选

10、择“钢笔”工具在画布上单击拖动，即可。下面通过例子进行说明。三、编辑矢量对象三、编辑矢量对象三、编辑矢量对象Fireworks CS4提供了多种编辑矢量对象的方法。可通过移动、添加或删除点来更改对象形状，也可移动点手柄来更改相邻路径段的形状。1.自由变形工具自由变形工具 可以直接对整个矢量对象进行弯曲和变形操作。选择该工具后，在路径上按住鼠标左键，然后推动或拉伸路径的任何部分而不管点的位置如何。在更改矢量对象的形状时，Fireworks会自动添加、移动或删除路径上的点。5.模糊和锐化工具模糊工具通过有选择地模糊元素的焦点来强化或弱化图像的局部区域。锐化工具对于修复扫描问题或聚焦不准的照片。5.

11、模糊和锐化工具模糊工具通过有选择地模糊元素的焦点来强化或弱化图像的局部区域。锐化工具对于修复扫描问题或聚焦不准的照片。2.更改区域形状工具使用更改区域形状工具 可以拉伸变形区域指针外圆内的所有选定路径的区域。3.使用“重绘路径”工具使用“重绘路径”工具 可以重绘或扩展所选路径段，同时保留该路径的笔触、填充和效果特性。四、将路径转为选区四、将路径转为选区四、将路径转为选区用户可以将矢量形状转换为位图选区，然后使用位图工具编辑。将路径转换为选区的操作步骤如下：（1）选择需要转换为选区的路径。（2）执行“修改”“将路径转换为选取框”命令。五、填充矢量对象五、填充矢量对象五、填充矢量对象使用“渐变”工

12、具 和“油漆桶”工具 可以为矢量对象填充颜色，“油漆桶”工具用于填充纯色，而“渐变”工具用于填充渐变色。下面通过“为迎客松图标填充颜色”例子进行说明。第五节第五节 文本的创建与编辑文本的创建与编辑一、创建文本一、创建文本一、创建文本用户可以将矢量形状转换为位图选区，然后使用位图工具编辑。将路径转换为选区的操作步骤如下：（1）选择需要转换为选区的路径。（2）执行“修改”“将路径转换为选取框”命令。二、设置文字属性二、设置文字属性二、设置文字属性选择文本后，在属性面板中，可以修改文本的相关属性。：用于设置文本字体。：用于设置文本样式。：用于设置文本字号。：用于设置文字颜色。、：用于设置文本样式，加

13、粗、倾斜和下划线效果。：用于设置文本的字间距。：且于设置文本的字顶距。：用于设置文本的对齐方式及排列方式。：用于设置文本段落的首行缩进距离。：用于设置段落文本的段前空格和段后空格。：用于设置单个字符的宽度。：用于设置文本否消除锯齿、文字与背景的过渡方式等，包括不消除锯齿、匀边消除锯齿、强力消除锯齿和平滑消除锯齿。三、将文字附着到路径三、将文字附着到路径三、将文字附着到路径将文本附加到路径的操作步骤如下：（1）使用文本工具，输入文本。（2）使用钢笔工具或其他路径工具，绘制一条路径。（3）选择文本，按住Shift键再选中路径，然后执行“文本”“附加到路径”命令。文本附加到路径是将文本沿路径的方向进

14、行分布。文本附加到路径内是允许将文本在路径内，按路径的形状进行填充。使用“附加到路径内”命令还可以将一整段文本放置一个闭合的路径内，形成特殊的文本排版方式附着路径效果。文本附加到路径文本附加到路径内将段落文本填充在路径形状内四、将文本转换为路径四、将文本转换为路径四、将文本转换为路径四、将文本转换为路径在设计文字的时候，我们经常需要将文字在原有的字体基础之上加以变行，以满足设计的需要。如果要将所选的文本转换为路径，可以执行“文本”“转换为路径”命令。五、网页设计中字体与字号的规范五、网页设计中字体与字号的规范五、网页设计中字体与字号的规范五、网页设计中字体与字号的规范网页设计中对文字的字体与字

15、号有特殊的要求，一般来说，作为网页栏目或宣传语的标题性文字，可以采用任意的字体与字号，以达到设计感的要求，而作为正文内容的段落性文字，则必须遵循以下规范：（1）网页中的段落文字必须清晰可见，文字笔划不得出现明显锯齿，形成笔划缺损;（2）在正文中，中文的字号为12px或9pt，英文无限制，可使用11px字号。（3）字体运用上，正文中不得出现特殊字体，中文一律使用宋体，英文使用Times New Roman或Arial等阅读性较强的字体。当在Fireworks中，要使12px的文字能够清晰地显示，必须设置文字的反锯齿属性为“不消除锯齿”，这样才能使网页效果图中的小字号文字达到设计要求。第六节第六节

16、 动画制作动画制作一、使用帧制作动画一、使用帧制作动画1添加、移动、复制和删除状态如果要添加新的帧，可以单击“状态”面板底部的“新建/重制状态”按钮。若需要添加帧，可单击“状态”面板右上角的扩展按钮，选择“添加状态”选项，弹出对话框。在“数量”选项框里可以拖动滑块或直接输入要添加帧的数量，在“插入新状态”选项里，可以选择要插入新帧的位置。如果要复制帧，可以选中一个现有的帧，拖动到“新建/复制帧”按钮上，然后松开鼠标，如果复制所选择的帧并按顺序放置，可以单击“帧”面板右上角的扩展按钮，选择“重制状态”选项。在弹出对话框中设置。如果要重新排列已有帧的顺序，可以选中需要修改的帖，拖动到新的位置，然后

17、松开鼠标。如果要删除帧，可以选择需要删除的帧，然后单击“帧”面板右下角的“删除帧”按钮，或者将需要删除的帧拖动到“删除帧”按钮上，然后松开鼠标。一、使用帧制作动画2在帧间共享层如果在制作动画时，希望某个对象在动画里一直出现，可以把该对象放在一个单独的层上，然后在“层”面板里设置共享，这时该对象就会在每一帧中可见。要使层可以共享，可以执行以下操作：（1）在层面板中，选择要共享的父层；（2）然后，单击右键，在右键菜单中选择“在状态中共享层”命令。一、使用帧制作动画3使用“洋葱皮”功能“洋葱皮”主要的功能就是在当前编辑的帧上，可以看到其他帧上面的对象，方便的编辑。在“帧”面板单击左下角的“洋葱皮”按

18、钮，打开洋葱皮设置。当打开“洋葱皮”功能后，当前帧之前和当前帧之后帧上的对象会变暗，并且在默认情况下“多帧编辑”是打开的，这样就可以不用离开当前编辑的帧就可以编辑其他帧中的对象。如果需要调整“洋葱皮”显示帧的数量，在“洋葱皮”设置中选择“自定义”，在弹出对话框中设置。一、使用帧制作动画4设置“帧延时”设置帧延时，就是设置状态延迟，是指当前帧的画面停留的时间。“状态延迟”主要的作用是用于设置每一帧播放的速度，在“状态”面板中双击帧右侧的默认数字“7”，或是单击“状态”面板右侧的扩展按钮，选择“属性”，可以调整帧的播放速度。下面通过“10秒倒计时动画”例子的制作进一步了解帧的操作。二、使用动画元件

19、制作动画 二、使用动画元件制作动画 使用动画元件来制作动画，是将动画对象转换为动画元件后，然后通过其中的动画元件属性设置完成动画制作，它的特点是可以将一段动画存储在元件中，这段动画可以在画布中复制粘贴很多个，并可以对其外观等属性进行修改。下面通过“文字缩放动画”例子的制作进一步了解帧的操作。三、使用“打开”窗口制作动画三、使用“打开”窗口制作动画FireworksCS4中，还可以利用“打开”窗口，直接制作动画，完成下面“行走的马”动画：第七节第七节 热点与切片的应用热点与切片的应用一、制作热点一、制作热点（一）创建热点在Fireworks中，热点工具包括矩形热点工具、圆形热点工具 和多边形热点

20、工具。如果需要为对象添加热点，方法如下：选择一种矩形热点工具或圆形形热点工具，然后在需要创建热点的对象上拖动鼠标，创建完成后松开鼠标，完成热点的创建。当要创建不规则的热点时，选择“多边形热点”工具，然后在需要创建热点的对象边缘上单击，创建多个点，Fireworks会将这些点连接成一个热点。一、制作热点（二）制作精确热点选择需要创建热点的对象，单击“编辑”“插入”“热点”命令。对象上便会自动出现精确的热点。如果选中的是多个对象，会弹出对话框询问是要建立一个包含所有对象的矩形热点还是给每一个对象建立各自的热点。一、制作热点（三）为热点添加链接热点创建完成后，需要在属性面板中的“链接”文本框中输入单

21、击该热点时打开网页的URL。当单击热点时，便会打开相应的页面，如图。二、使用切片二、使用切片在FireworksCS4中，为对象添加切片的方法有以下两种：1、使用切片工具为对象添加切片2、使用菜单命令创建精确切片第八节第八节 网页元素的优化与输出网页元素的优化与输出一、网页元素的优化一、网页元素的优化一、网页元素的优化（二）使用优化面板优化图像使用“优化”面板，可以对切片或是整个图像进行优化。二、网页元素的输出二、网页元素的输出（一）导出单个图像当文档编辑完成后，便可以进行输出了成图像文件了。二、网页元素的输出（二）导出切片当我们需要将所创建的切片单独做为一个图像文件输出。二、网页元素的输出（三）导出HTML文档默认情况下，当导出包含切片或热点的Fireworks文档时，为了保存其交互性（如热点上的超链接、按钮等），我们需要导出一个HTML文件及其相关图像。导出的HTML文件可以在Web浏览器中查看，或导入Dreamweaver等其他应用程序中，以供进一步编辑。THE END