第8讲图像的概念与制作-上海财经大学.ppt

《Web应用开发》 上海财经大学信息管理与工程学院 第八讲：图像的概念与制作 电子商务网站开发 第*页 本讲主要内容 图像的概念 Fireworks简介 简单图像的制作 切片的制作 第*页 8.1 网页组成元素 通常网页包含以下元素： 文字 图像 超级链接 表格和层 框架 表单 多媒体项目（动画、声音等） 第*页 8.2 图像的概念 图像格式 BMP、GIF、JPEG、TIFF等，不同格式的图像文件所占的存储空间和显示效果都是不同的。 JPEG和GIF图像文件是WWW上使用最广泛的格式，它们所占的存储空间较少，而且还具有跨平台的特性 图像用途 标题 底图 主图 链接 矢量图形和位图 第*页 GIF GIF的全称是Graphics Interchange Format（图形交换格式）。 它是1987年由Compu Serve公司设计的一种公共的图像文件格式标准，分为GIF87a和GIF89a两个版本。 GIF采用LZW压缩方案，这种压缩方案比较适合颜色单一的图像。如果图像颜色太多的话，LZW压缩方案的压缩效率会大大降低。 GIF图像格式常常用来显示比较简单的画面或动画，例如，素描作品、插图、卡通画等 第*页 JPEG JPEG的全称是Joint Photographic Experts Group（联合影像专家小组） 其最初目的是为了对数字化相片进行压缩。 JPEG是“压缩比”相当高的一种图像存储格式，经常用来显示连续色调作品、数字化相片和扫描图形等。 但它采用的是“有损”压缩算法，每次利用该算法进行图像压缩时，都会丢失一定的图像信息。 第*页 矢量图和位图 矢量图形 矢量图形使用称为矢量的线条和曲线（包括颜色和位置信息）描述图像。编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。矢量图形与分辨无关，这意味着除了可以在分辨率不同的输出设备上显示以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。 位图图形 位图图形由排列成网格的称为像素的点组成。计算机的屏幕就是一个大的像素网格。编辑位图图形时，修改的是像素，而不是线条和曲线。位图图形与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图形会使图像的边缘呈锯齿状。 第*页 8.3 图像制作 Fireworks MX是Macromedia公司开发的专门用于网页图形处理的软件，利用该软件可以生成容量小、质量高的JPEG和GIF图像。 制作简单图像 制作切片 第*页 (1) 制作Logo图像 第*页 (2) 制作主页标题 第*页 (3) 制作导航栏按钮图像 第*页 (4) 制作主页单元格背景图像 第*页 (5) 制作旋转的五角星 第*页 (6) 制作“供应信息”和“求购信息” 第*页 (7) 切片 切片是Macromedia Fireworks MX中用于创建交互性的基本构造块。切片是网页对象，它们不是以图像的形式存在，而是最终以HTML代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。 使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果。可以在“行为”面板中查看指定的行为并使用此面板创建更复杂的交互。 第*页 a. 创建切片对象 可以使用以下方法来创建切片对象： 使用“切片”工具绘制切片对象 或者基于所选对象插入切片 若基于所选对象插入矩形切片，可执行以下操作： 选择“编辑”?“插入”?“切片”。该切片是一个矩形，它的区域包括所选对象的最外面的边缘。 如果选择了多个对象，则请选择应用切片引导线的方式： “单一”可创建覆盖全部所选对象的单个切片对象。 “多重”可为每个所选对象他创建一个切片对象 若绘制矩形切片对象，可执行以下操作 （1）选择“切片”工具 （2）拖动以绘制切片对象。 第*页 b. 创建HTML切片 HTML切片指定浏览器中出现普通HTML文本的切片图像区域。HTML切片不导出任何像素图像数据，它导出出现在由切片定义的表格单元格中的HTML文本。 如果要快速更新出现在站点中的文本而无须创建新图形，则HTML切片很有用。 若创建HTML切片，可执行以下操作： 绘制切片对象并将其保留为选定状态 在属性检查器中，从“类型”下拉列表框中选择HTML。 单击“编辑” 在“编辑HTML切片”窗口中键入文本。如果需要，通过添加HTML文本格式设置标记来设置文本的格式。 单击“确定”以应用更改并关闭“编辑HTML切片”对话框 第*页 c. 创建非矩形切片 若绘制多边形切片，可执行以下操作： 选择“多边形切片”工具 单击以放置多边形的矢量点 当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多余的实边。 若要停止使用“多边