第八课 切片和热点的应用.pptVIP

科力计算机学校 第八课 切片和热点的应用 主要内容 ： 切片 创建切片 变换图像 热点 弹出菜单的制作 一、切片 1、关于切片 切片是网页对象，它们不是以图像的形式存在，而是最终以 HTML 代码的形式出现。 切片就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减低图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用html来代替 。 2、除了减少下载时间，切片还有其他一些优点： 制作动态效果：利用切片可以制作出各种交互效果的切片。 优化图像：完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。 创建链接：切片制作好了之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热区了。 二、创建切片 　　 使用Fireworks工具箱上的切片工具可以为已经制作好的图片创建切片。切片工具有两类，分别为“矩形切片”工具和“多边形切片”工具。 1. 创建矩形切片 首先打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个切片。 该切片区域被半透明的绿色所覆盖，称为切片对象. 另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割，称为切片向导。 2. 创建多边形切片 　　打开一幅图像，可以利用多边形切片工具在多边形的每个顶点单击制作多边形切片 3、编辑切片 和后面将要讲到的热区编辑非常类似，如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来进行； 选中切片之后，若要移动切片可以利用鼠标、方向键或者属性面板的位置值。 默认情况下热区是透明的绿色，如果需要改变热切片的颜色，只需要在切片属性面板中的切片颜色框中选择所需要的颜色即可。 三、变换图像 1、关于变换图像 当指针滑过一个图形时，该图形将触发另一个图形的显示。可以在工作区中快速创建变换图像和交换图像效果。触发器始终是一个网页对象 — 切片、热点或按钮。 2、创建变换图像 ⑴拖放变换图像方法是使切片交互的最简单方法 ①“编辑”→“插入”→“切片”或“热点”，将切片或热点附加到触发器图像。 ②“帧”面板→“新建/复制帧”按钮创建一个新帧。 ③在画布上所需位置的新帧中再放置一个用作目标的图像。 ④选择图像→“编辑”→“插入”→“切片”将切片附加到图像。 ⑤在“帧”面板中选择“第 1 帧”返回到包含原始图像的帧。 ⑥选择覆盖触发器区域（原始图像）的切片、（热点或按钮）然后将指针放在行为手柄上。指针随即变为手形。 ⑦将触发器切片（热点）的行为手柄拖到在步骤 4 中创建的目标切片。 ⑧从“交换图像自”弹出菜单中，选择在步骤 2 中创建的帧→“确定”。 ⑨“预览”按钮以预览和测试不相交变换图像。 ⑵“行为”面板（Shift+F3）使您可以创建更复杂的交互 ①选择包含要修改的行为的触发器切片或热点。 ②选择要编辑的行为。 ③单击事件旁边的箭头，从弹出菜单中选择一个新事件： “onMouseOver”：在指针滑过触发器区域时触发行为。 “onMouseOut”：在指针离开触发器区域时触发行为。 “onClick”：在单击触发器对象时触发行为。 “onLoad”：在载入网页时触发行为。 四、热点 1、关于热点 Web 设计人员可以使用热点来使较大图形中的各个小部分产生交互，并将网页图形的区域链接到 URL。 创建热点 2、创建热点 ⑴可以使用“矩形热点”工具、“圆形热点”工具或“多边形热点”工具在图形的目标区域周围绘制热点。 ⑵可以选择一个对象，编辑→插入→热点→然后在该对象上插入热点。 3、编辑热点 在“属性”检查器的“热点形状”弹出菜单中选择“矩形”、“圆形”或“多边形”。 4、创建图像映射 ⑴关于图像映射 在所需图形上插入几个热点之后，必须将该图形导出为图像映射，这样才能使其在 Web 浏览器中运行。导出图像映射时，将生成包含有关热点及相应 URL 链接的映射信息的图形和 HTML。 ⑵导出图像映射 ①对图形进行优化，以使其做好导出准备。 ②“文件”→“导出”→选择要放置 HTML 文件的文件夹，并为该文件命名。 ③在“保存类型”弹出菜单中→“HTML 和图像”。 ④“保存” 五、创建弹出菜单 1、关于弹出菜单编辑器 弹出菜单编辑器是一个带有选项卡的对话框，它会引导您完成整个创建弹出菜单的过程。它的许多用于控制弹出菜单特征