网页设计实例教程课件第7章使用Fireworks制作网页图像.ppt

7.3 切片工具的使用 注：还有一个图像文件spacer.gif，是一个1×1像素的透明GIF图像，用来解决图像在HTML表格中重新组合时造成的间距问题。 由代码可以看出，切片图像导出后，由一个边框、单元格间距、内边距均为0的表格组合在一起。这样，在页面中预览的效果便如同原图一样。而在网络上下载的时候，却可以分块儿下载，逐块儿显示。 3. 在Dreamweaver中导入由Fireworks产生的html文件：在Dreamweaver中，把光标移动到要插入图片的位置上，选择“插入菜单--图像对象--Fireworks HTML”命令，弹出“插入Fireworks HTML”对话框，如图7-24所示。 4. 单击浏览按钮，在打开文件对话框选择由Fireworks导出的HTML文件，然后点确定，就将Fireworks HTML文件的内容导入到新页中了。在这里要注意图片和页面的相对位置，最好把Fireworks HTML 和小图片先拷贝到合适的位置，然后再导入。 7.3 切片工具的使用 图7-24 在Dreamweaver中导入Fireworks HTML 7.4 图像热区链接 所谓热区链接就是在图像上划分出一部分区域，使之生成一个超级链接。在一幅图像上可以设置多个热区链接。操作方法如下： 1. 打开图像，在工具箱的Web工具组选择“矩形热点”工具，在图像上绘制矩形热点区域，在属性面板上设置链接的URL（java/class.htm）和目标页的打开方式（_blank)，如图7-25所示： 2. 依次绘制圆形热点和多边形热点。如图7-26所示： 3. 热点设置完成后，导出热点链接代码，如下所示： 由Fireworks导出的HTML文件中，使用map标签来实现热区链接，该标签有name和id属性；在img标签内使用usemap属性，其属性值和map标签的name或id属性值相对应，从而将img和map标记关联起来。 7.4 图像热区链接 7.4 图像热区链接 7.5 使用Javascript 虽然本节的标题是使用Javascript, 但是却不用你编写任何代码。因为这些代码都已经由Fireworks写好了。我们只需要经Javascript代码指定给对象，就可以实现Javascript功能。按钮由多副图像组成，在这里实现一个只有两种状态的按钮，简单而不失一般性。当鼠标指向按钮时，显示另一副图像。这个转换就是使用Javascript。制作步骤如下： 1. 启动Fireworks，新建或打开一个图片文件，选择“编辑--插入--新建按钮”命令；绘制一个矩形，笔触设为无，填充为实心红色（#ff0000）；在属性面板上单击“编辑滤镜”按钮，在弹出菜单选择“斜角和浮雕--内斜角”命令，如图7-27所示： 2. 设置内斜角参数，高度为5、柔滑为3，其他参数不变。如图7-28所示： 3. 在菜单栏选择“窗口--状态”命令，打开“状态”面板，在状态列表选择“状态2”，因为鼠标划过时的变化与默认状态差别不大，在属性面板单击“复制弹起时的图形”，复制释放时的状态的图像。 4. 修改图像，比如给图像增加高亮效果。选择突起的矩形，在属性面板上单击“编辑滤镜”按钮，找到添加的内倾角滤镜，双击显示滤镜参数，修改为“高亮显示的”。 5. 绘制完成后在按钮编辑视图下方点“完成”按钮，结束按钮的绘制，返回绘图区，Fireworks已经自动插入了一个按钮对象。在属性面板为按钮设置链接跳转，如图7-31所示： 6. 按钮绘制完成后，在菜单栏选择“文件--导出”命令，注意选择导出为“HTML和图像”选项，输入文件名button.htm导出，查看导出的图像，如图7-32所示： 7.5 使用Javascript 7.5 使用Javascript 7.5 使用Javascript 当页面加载时，使用body标签onload事件将按钮的第二幅图像预加载,不至于当鼠标移到图片上时再耗时间加载第二幅图像，语句如下： body bgcolor=#ffffff onload=MM_preloadImages(images/button_r2_c2_f2.gif); 当鼠标移动到默认状态的图片上时，利用链接对象的onmouseout（鼠标移出）、onmouseover（鼠标移入）来实现状态图片的切换，就实现了按钮效果。链接代码如下： a href= target=_blank alt=链接按钮 onmouseout=MM_swapImgRestore(); onmouseover=MM_swapImage(button_r2_c2, , images/button_r2_c2_f2.gif,1); 将导出的按钮以及Javascript代码用于网页设计，在Dream