网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第4章.ppt

《网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第4章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第4章Fireworks应用4.1Fireworks基础4.2处理位图4.3制作Web特效4.4绘制图形4.1Fireworks基础4.1.1Fireworks的界面启动FireworksMX之后，默认情况下并没有打开任何文档，按【Ctrl+N】键新建一个文档或者按【Ctrl+O】键打开一个文档，此时它的界面如图4.1所示。返回目录图4.1FireworksMX界面4.1.2常用操作1．新建Fireworks文档新建文档的步骤如下。（1）单击“文件”菜单中的“新建”命令（或按【Ctrl+N】快捷键），打开“新建文档”对话框

2、，如图4.3所示。图4.3“新建文档”对话框（2）在打开的对话框中输入宽度（文档在水平方向上的尺度）和高度（文档在垂直方向上的尺度）的设定数值，单位可以是像素、英寸或者厘米。（3）输入指定的分辨率，单位是“像素/英寸”或者“像素/厘米”。对于在Web上显示的图像，通常设置为“72像素/英寸”。（4）画布颜色的设置有3种选择，分别为“白”、“透明”和“自定义”。如果指定自定义颜色，可以使用颜色面板进行选择。（5）将所需的选项设置好之后，单击“确定”按钮，则可以打开新文档进行创作。2．设置文档的显示大小Fireworks可以在

3、6%~6400%的缩放范围内显示图像。可以使用3种方法放大与缩小图像的显示：①在工具面板（如果工具面板没有显示，请选择“窗口”菜单中的“工具”命令）中单击“缩放工具”，在需要放大的位置单击，则被单击的图像就会依照放大比例的排列依次放大显示，如果选择了放大镜工具后，按住【Alt】键单击画布，图像会依照缩小的比例逐次缩小；②从文档窗口的缩放比例列表中选择一项放大或者缩小比例来进行图像的缩放操作，如图4.1所示；③单击“视图”菜单中的“放大”命令来放大图像，也可使用【Ctrl+=】快捷键来放大图像，单击“视图”菜单中的“缩小”命

4、令来缩小图像，或者按【Ctrl+-】快捷键来缩小图像。3．改变图像大小制作Web图像时，在很多情况下都需要扩大或者缩小图像的大小，以便适应Web页面的要求。要改变图片的大小，可以选择“修改”菜单中“画布”命令，然后在其子菜单中选择“图像大小”命令，再在打开的“图像大小”对话框中进行设置，如图4.4所示。图4.4“图像大小”对话框4．改变画布设置5．使用标尺、引导线和网格6．以不同的模式显示图像7．将图像优化导出为GIF格式要使图像能够应用在网页上，通常需要将其导出为GIF格式或者JPEG格式。图4.5GIF格式优化面板为了

5、预览优化后的图像效果，单击图像窗口上的“2幅”标签进入该模式显示图像，如图4.6所示。图4.6在文档窗口预览图像导出效果8．将图像优化导出为JPEG格式图4.7JPEG格式优化面板对于JPEG格式，图像质量是指图像被压缩后的质量，它是由图像文件的压缩程度来决定的，图像压缩程度越大，优化后的图像文件越小，则图像质量越差，即效果最差；图像的压缩程度越小，优化后的图像文件越大，则图像质量越好。平滑是另一种有效减小图像文件大小的手段，设置平滑度后，图像会变得光滑（实际上是图像变得模糊了），图像文件也就相应地变小了，即平滑度越大，文

6、件越小。4.2处理位图4.2.1位图处理工具概览图4.8位图处理工具返回目录4.2.2简单的位图处理实例4.3制作Web特效4.3.1制作简单动画动画的基本原理就是通过多帧连续播放而产生动态效果。在Fireworks中可以方便地制作这样的多帧动画，下面以“流动的线”动画为例来介绍制作动画的基本过程。返回目录制作“流动的线”动画的步骤如下。（1）按【Ctrl+N】键新建一个文档，设置文档宽度为300个像素，高度为5个像素，分辨率为72像素/英寸，设置画布的颜色为“白色”。（2）单击“工具”面板中的“刷子”工具，在“属性检查器

7、”中设置其属性，然后在画布上拖动鼠标，绘制一小段线，如图4.12所示。图4.12利用“刷子”工具绘制线段（3）在文档中的画布区域以外单击，取消选中所画的线段。在“属性检查器”中更改“刷子”的颜色，然后在画布上绘制第2条线段，如图4.13所示。图4.13利用“刷子”工具绘制第2条线段（4）重复步骤（3），再绘制若干条不同颜色的线段，效果如图4.14所示。图4.14在第1帧绘制的所有线段（5）在“帧”面板右下角单击“新建/复制帧”按钮新建一帧，此时帧面板如图4.15所示。在“帧”面板中单击“帧1”后按【Ctrl+A】键将该帧上

8、的所有内容选中，然后按【Ctrl+C】键复制。单击“帧2”，然后按【Ctrl+V】键将其粘贴。图4.15“帧”面板（6）用“指针”工具单击最右边的一条线段将其选中，按【Ctrl+X】键将其剪切，然后用“指针”工具框选择其他所有线段，按右方向键使它们右移，接着按【Ctrl+V】键将刚才剪切的线段粘贴，并将