网页设计教程14fireworks cs3在网页设计中的应用.ppt

第14章 Fireworks CS3网页图像设计 本章内容 Fireworks cs3简介 位图图像的创建与编辑 矢量图像的创建与编辑 网页图像的切片、热区与优化 图层、帧与动画制作 一、 Fireworks cs3简介 1、新增功能 创建丰富元件 元件的智能缩放 向单个文档添加多个页面 创建基于 Flash 的幻灯片放映 具有层次结构的层 使用 Photoshop 文件 将Fireworks文件导入Adobe Flash Adobe Bridge 2、Fireworks CS3的启动与退出 Fireworks CS3的启动（两种方式） Fireworks CS3的退出（三种方式） 3、Fireworks CS3 工作界面 4、Fireworks CS3 文档操作 新建文档 保存文档 打开文档 文档的修改 二、位图图像的创建与编辑 1、位图的概念 位图图像(bitmap)：亦称为点阵图像或绘制图像，由“像素（图片元素）”组成的。计算机屏幕就像是一个大的像素网格。这些点可以进行不同的排列和染色以构成图样。 2、位图工具的使用 选取框工具 套索工具 魔术棒工具 铅笔工具 刷子工具 橡皮擦工具 橡皮图章工具 模糊工具 三、矢量图像的创建与编辑 1、矢量图的概念 矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等，它们都是通过数学公式计算获得的。矢量图形通过公式计算获得，所以矢量图形文件体积一般较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。 2、矢量工具 直线工具 钢笔工具 矩形工具 文本工具 矢量对象 四、网页图像的切片、热区与优化 1、切片 切片是网页对象，它们不是以图像的形式存在，而是以HTML代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。 基于所选对象插入切片 使用切片工具 2、网页图像的热点区域 在网页中的，要求图片上的一部分区域具有超链接功能，或者图片上不同的部分有不同的链接。此时就需要在图片上建立热点区。当建立热点区域后，鼠标放在图片上方时，由光标变为手形。 矩形热点工具 圆形热点工具 多边形热点工具 3、图像的优化 网页图像设计的最终目的是创建优美的图像，同时能尽快下载。为了达到这样的目的，就必须在最大限度地保持图像品质的同时，选择压缩质量高的文件格式。这种平衡的建立就是优化，也即是选择颜色、压缩和品质的合适组合。 GIF图片的优化设置 JPG图片的优化设置 五、图层、帧与动画制作 1、层 层就像是在一叠摞在一起的透明纸上分别绘制不同的图形。每个层可以看做是一张完全透明的胶片，文档中的对象都存在层上。在绘制对象时，可以先创建层或者根据需要添加层。 2、帧 动画是依靠多幅静止图片连续播放而形成，一幅静止的图片就是一帧。以一定的速率播放多帧图片就形成了动画。 3、动画 打开文件成为动画 导入现有的GIF动画 通过帧面板制作动画 利用元件和实例制作动画 补间动画 本章小结 本章介绍了Fireworks CS3相关知识。 本章第1节主要介绍了Fireworks CS3的基本功能特点，针对该版本介绍了其新增功能。此外，还介绍了Fireworks CS3的工作界面及文档操作。 第2节介绍了位图相关概念，结合Fireworks CS3介绍位图工具的使用。 第3节介绍了矢量图的概念，结合Fireworks CS3介绍了矢量图工具的使用。 第4节介绍了网页图像的切片、热区的建立及优化图像的处理。第5节介绍了Fireworks CS3中图层的相关概念及动画制作的基本知识。 * * 菜单栏 工具箱 绘图编辑区 浮动面板 返回 主菜单 位图原图及放大后的效果 返回 主菜单 矢量原图及放大后的效果 返回 主菜单 返回 主菜单 返回 主菜单 *