网页设计教程 教学课件 作者 裴献第14章 fireworks cs3.ppt

《网页设计教程 教学课件 作者 裴献第14章 fireworks cs3.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第14章FireworksCS3网页图像设计10/8/20211本章内容Fireworkscs3简介位图图像的创建与编辑矢量图像的创建与编辑网页图像的切片、热区与优化图层、帧与动画制作10/8/20212一、Fireworkscs3简介1、新增功能创建丰富元件元件的智能缩放向单个文档添加多个页面创建基于Flash的幻灯片放映具有层次结构的层使用Photoshop文件将Fireworks文件导入AdobeFlashAdobeBridge10/8/202132、FireworksCS3的启动与退出FireworksCS3的启动（两种方式）FireworksCS3的退出（三种方

2、式）10/8/202143、FireworksCS3工作界面菜单栏工具箱绘图编辑区浮动面板10/8/202154、FireworksCS3文档操作新建文档保存文档打开文档文档的修改返回主菜单10/8/20216二、位图图像的创建与编辑1、位图的概念位图图像(bitmap)：亦称为点阵图像或绘制图像，由“像素（图片元素）”组成的。计算机屏幕就像是一个大的像素网格。这些点可以进行不同的排列和染色以构成图样。10/8/20217位图原图及放大后的效果10/8/202182、位图工具的使用10/8/20219选取框工具套索工具魔术棒工具铅笔工具刷子工具橡皮擦工具橡皮图章工具模糊工

3、具返回主菜单10/8/202110三、矢量图像的创建与编辑1、矢量图的概念矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等，它们都是通过数学公式计算获得的。矢量图形通过公式计算获得，所以矢量图形文件体积一般较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。10/8/202111矢量原图及放大后的效果10/8/2021122、矢量工具10/8/202113直线工具钢笔工具矩形工具文本工具矢量对象返回主菜单10/8/202114四、网页图像的切片、热区与优化1、切片切片是网页对象，它们不是以图像的形式存在，而是以HT

4、ML代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。10/8/202115基于所选对象插入切片使用切片工具10/8/2021162、网页图像的热点区域在网页中的，要求图片上的一部分区域具有超链接功能，或者图片上不同的部分有不同的链接。此时就需要在图片上建立热点区。当建立热点区域后，鼠标放在图片上方时，由光标变为手形。10/8/202117矩形热点工具圆形热点工具多边形热点工具10/8/2021183、图像的优化网页图像设计的最终目的是创建优美的图像，同时能尽快下载。为了达到这样的目的，就必须在最大限度地保持图像品质的同时，选择压缩质量高的文件格式。

5、这种平衡的建立就是优化，也即是选择颜色、压缩和品质的合适组合。10/8/202119GIF图片的优化设置10/8/202120JPG图片的优化设置返回主菜单10/8/202121五、图层、帧与动画制作1、层层就像是在一叠摞在一起的透明纸上分别绘制不同的图形。每个层可以看做是一张完全透明的胶片，文档中的对象都存在层上。在绘制对象时，可以先创建层或者根据需要添加层。10/8/2021222、帧动画是依靠多幅静止图片连续播放而形成，一幅静止的图片就是一帧。以一定的速率播放多帧图片就形成了动画。10/8/2021233、动画打开文件成为动画导入现有的GIF动画通过帧面板制作动画利

6、用元件和实例制作动画补间动画返回主菜单10/8/202124本章小结本章介绍了FireworksCS3相关知识。本章第1节主要介绍了FireworksCS3的基本功能特点，针对该版本介绍了其新增功能。此外，还介绍了FireworksCS3的工作界面及文档操作。第2节介绍了位图相关概念，结合FireworksCS3介绍位图工具的使用。第3节介绍了矢量图的概念，结合FireworksCS3介绍了矢量图工具的使用。第4节介绍了网页图像的切片、热区的建立及优化图像的处理。第5节介绍了FireworksCS3中图层的相关概念及动画制作的基本知识。10/8/202125