网页制作案例教程 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 陈建孝 陆锡聪 余晓春 江玉珍 第9章 网页图形处理工具Fireworks CS5.pptVIP

第9章 网页图形处理工具Fireworks CS5 认识图形、图像等概念，了解位图与矢量图在存储格式上的区别 掌握Fireworks CS5中创建、编辑图形的基本方法 掌握Fireworks CS5编辑、转化图像文件的基本方法 掌握动态按钮、切片图、热点等网页元素的操作方法 掌握运用Fireworks CS5设计网站首页的方法 9.1 图形、图像基本概念 计算机中对图的表示方式分成两种：位图和矢量图。理解位图和矢量图的不同存储原理，掌握其各自的编辑处理方法，才能更好地让图片为网页添光增彩。 1．位图 位图（bitmap）也叫点阵图，简称图像(image)，是指由像素阵列构成的图。像素是位图的最小单位，每个像素都有自己的颜色信息，并由其排列来显示图像内容。 位图的特点是色彩变化丰富，可表达信息量丰富的真实自然景物。通常占据较大的存储空间，对图像进行缩放处理容易出现失真现象 图像文件按像素的颜色数可分为以下几种： （1）单色图：又称二值图，每像素存储位数为1bit。 （2）16色图：每像素存储位数为4bit。 （3）8位灰度图：非彩色图像，每像素存储位数为8bit。 （4）8位索引图：256色图，每像素存储位数为8bit。 （5）24位真彩图：每像素存储位数为24bit，其中R、G、B三分量各占8bit。 24位真彩图能显示224=1677216种色彩 1．矢量图 矢量图（vector）也叫向量图，简称图形(graph)。矢量图使用线段和曲线描述图像，所以称为矢量，同时图形也包含了色彩和位置信息。 矢量图形文件体积一般较小，其最大的优点是无论放大、缩小或旋转等不会失真 9.1.2 常用图形、图像格式 常用的图形、图像文件格式有以下几种： 1. BMP格式 2. GIF格式 3. JPEG格式 4. JPEG2000格式 5. PNG格式 6. PSD格式 7. TIFF格式 8. CDR格式 9. WMF 10. EPS 9.2 Fireworks CS5基础知识 使用Fireworks可以加速Web设计与开发，它是创建网站图形图案、优化Web图像、快速构建Web网站界面原型的理想工具。 9.2.1 Fireworks CS5概述 Fireworks是网页设计的常用工具之一，它结合了位图及矢量图的特点，不仅具备强大的图像处理及图形生成功能，还能快速地为图形创建各种交互式的动感效果，而且还可以轻松地把图形输出到Flash、Dreamweaver等软件上进行后继编辑。 9.2.2启动Fireworks CS5  9.2.3 Fireworks CS5工作界面介绍 9.2.3 Fireworks CS5工作界面介绍 9.2.3 Fireworks CS5工作界面介绍 9.2.3 Fireworks CS5工作界面介绍 9.3 Fireworks CS5操作方法 9.3.1 打开和导入文件 1．打开文件: 选择“文件”|“打开”命令 9.3 Fireworks CS5操作方法 1．导入文件 :文件”|“导入”命令或单击工具栏上的“导入”按钮“ ”。 9.3.2 图形对象的绘制及编辑 [例1] “众天下”网站Logo创作 9.3.2 图形对象的绘制及编辑 制作过程： 9.3.2 图形对象的绘制及编辑 [例1] 补间图形创作 9.3.2 图形对象的绘制及编辑 制作过程： 9.3.2 图形对象的绘制及编辑 制作补间图形 9.3.3 动态按钮设计 [例3] 制作星形动态按钮 9.3.3 动态按钮设计 制作过程： 9.3.4 图像的编辑及特效处理 Fireworks分别为矢量图形和位图图像对象提供了两种不同的编辑模式 9.3.4 图像的编辑及特效处理 9.3.4 图像的编辑及特效处理 9.3.5 图像优化方法 文档编辑窗口顶部有4个视图模式选项卡 9.3.5 图像优化方法 9.4.2 Fireworks CS5的网页应用 9.4.1 切片与热点 1. 切片 9.4.2 Fireworks CS5的网页应用 2.热点 9.4.2 Fireworks CS5的网页应用 9.4.2 构建网站首页 [例4] 商务网首页设计 9.4.2 Fireworks CS5的网页应用 小结 本章主要介绍Fireworks CS5的操