电子商务网站开发 第八讲：图像的概念与制作 上海财经大学信息管理与工程学院

本讲主要内容 图像的概念 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. 创建非矩形切片 若绘制多边形切片，可执行以下操作： 从矢量对象或路径创建多边形切片： 选择“多边形切片”工具 单击以放置多边形的矢量点 当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多余的实边。 若要停止使用“多边形切片”工具，请从“工具”面板中选择其他工具。不必再次单击第一个以关闭多边形。 从矢量对象或路径创建多边形切片： 选择一个矢量路径 选择“编辑”“插入”“热点” 选择“编辑”“插入”“切片”

d. 给切片添加简单的交互响应 拖曳图像翻转是建立翻转和图像交换效果最快的方法。拖曳图像翻转可以定义当鼠标指针经过图像时发生的事件，最终的效果是往往是翻转图像。 当一个切片被选中时，在切片中央有一个带十字的小圆圈，这就是行为手柄。只要把行为手柄从触发切片拖动到目标切片，你就可以简单地建立图像翻转和交替图像效果。

e. 快速建立按钮 选择“编辑插入新建按钮”命令 分别为释放态、滑过态、按下态建立好图像 指定切片按钮的链接 导出