第二十三章 Fireworks中切片和链接的应用.pptVIP

* 网 页 设 计 Web net design 第二十三章 Fireworks中切片和链接的应用 一、Fireworks中的切片 切片（Slice）：就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减低图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等。 Fireworks在网页切片制作方面有很强的优势，除了Fireworks以外，ImageReady也具有切片的功能。 网 页 设 计 Web net design （1）创建切片 使用Fireworks工具条上的“切片工具”可以为已经制作好的图片创建切片。切片工具包括：“矩形切片工具”和“多边形切片工具”。这两个工具都是创建切片应用的，但是根据图形的不同我们可以选择不同的切片形状来绘制。 ①首先打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，这个区域就生成了一个切片。该切片区域被半透明的蓝绿色所覆盖，称为切片对象，另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割，称为切片向导。 网 页 设 计 Web net design ②编辑切片和热区的编辑非常类似，如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来进行；选中切片之后，若要移动切片可以利用鼠标、方向键或者属性面板的位置值。默认情况下热区是透明的蓝绿色，如果需要改变热切片的颜色，只需要在所示的切片属性面板中的切片颜色框中选择所需要更换的颜色就可以了。 ③在切片属性面板中,可以为按钮所在切片添加链接和设置链接页面的打开方式。 网 页 设 计 Web net design ④导出切片，选择选择“文件菜单：导出”，会弹出导出对话框。选择需要保存的文件夹，在文件名中输入文件名称. 导出：HTML和切片：则导出的是两个文件一个事网页格式的，一个是切片的多个图像的。 仅图像：这样就保存的都是切片对应的图片了。 切片：导出切片：表示根据切片对象导出多个切片文件 无：表示不生成切片文件，只是将文件导出为一个图像文件 沿辅助线切片：表示依据文件中现有切片向导导出切片 ⑤打开保存的网页格式，那么切片设置按钮的位置就可以点击发生跳转了，也可以Dreamweaver中建立表格，插入需要的图片。 网 页 设 计 Web net design 二、制作交互按钮 ①新建文档，选择“编辑菜单：插入:新建按钮”弹出“按钮编辑器”窗口。用工具绘制按钮以及输入按钮上面的文字。下面的“指示”提示您编辑按钮当前状态的解释。在“滑过”往后的状态，都显示“复制上一个状态的图形”,这样方便我们以后几个状态的编辑。 ②点击“完成”回到文档中，选择文档的“预览”模式，可以预览到按钮的样式。如果不满意，可以回到“原始”模式，双击文档中的按钮，就弹出“按钮编辑器”，可以继续修改了。