|
首页 | 名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
我们这里所说的切片(Slice)就是将一幅大图像分割为一些小的图像切片,然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来,成为一幅完整的图像。这样做可以减低图像的大小,减少网页的下载时间,并且能创造交互的效果,如翻转图像等,还能将图像的一些区域用html来代替。Fireworks在网页切片制作方面有很强的优势,今天我们就来仔细看看Fireworks网页切片全攻略。 一、切片在网页制作中的作用 在网页上的图片较大的时候,浏览器下载整个图片的话需要花很长的时间,切片的使用使得整个图片分为多个不同的小图片分开下载,这样下载的时间就大大地缩短了,能够节约很多时间。在目前互联网带宽还受到条件限制的情况下,运用切片来减少网页下载时间而又不影响图片的效果,这不能不说是一个两全其美的办法了。 除了减少下载时间之外,切片也还有其他一些长处: * 制作动态效果:利用切片可以制作出各种交互效果。例如前面将的按钮的这种状态其实最后导出的文件实质上就是不同状态的切片。 * 优化图像:完整的图像只能使用一种文件格式,应用一种优化方法,而对于作为切片的各幅小图片我们就可以分别对其优化,并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量,有能够使得图片变小。 * 创建链接:切片制作好了之后,就可以对不同的切片制作不同的链接了,而不需要在大的图片上创建热区了。 二、创建切片 使用Fireworks工具箱上的切片工具可以为已经制作好的图片创建切片。如图1所示,切片工具有两类,分别为“矩形切片”工具(Slice tool)和“多边形切片”工具(Polygon Slice tool)。
1. 创建矩形切片 首先打开图像,选择工具箱上的的切片工具,在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域,当矩形大小适当时释放鼠标,这样就生成了一个切片,如图2所示。该切片区域被半透明的绿色所覆盖,称为切片对象,另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割,称为切片向导。
2. 创建多边形切片
由上图可见,图像中的切片向导仍旧是水平和垂直的,生成的切片文件也还是矩形的。实际上多边形切片的外形主要是用于设置相应的行为触发区域的。假如切片对象被设置了链接,那么在浏览器中显示的时候,只有点击到多边形区域时才会实现链接跳转,而在这个切片的其他区域则不会出现链接跳转。 三、编辑切片 和热区的编辑异常类似,假如要选取切片,可以利用指针工具、部分选定工具来选中它,也可以使用层面板来进行;选中切片之后,若要移动切片可以利用鼠标、方向键或者属性面板的位置值。 (图7 切片属性面板 图片较大,请拉动滚动条观看)
(图8 将切片类型改为HTML 图片较大,请拉动滚动条观看)
(图10 选择优化方法 图片较大,请拉动滚动条观看) 此外,在属性面板的优化下拉列表中还有几类优化方法,我们可以依据实际情况选择一种优化方法,如图10所示。 四、添加链接 为切片添加链接同样有两种方式,一是利用属性面板,二是利用URL面板。当我们选定某个切片之后,我们可以在这两个面板中为该热区设置链接地址和链接属性。方式和热区的链接方式类似,这里不再重复了。 五、命名切片 在Fireworks中命名切片有如下三种方法:自动命名切片文件、自定义命名切片文件和更改默认的自动命名惯例。
* None:元素钚应用任何名称。 六、导出切片 介绍完了命名原则之后,我们来说一下切片导出的详细步骤: (图12 切片图像 图片较大,请拉动滚动条观看)
(图13 导出切片 图片较大,请拉动滚动条观看) 第三步:在切片下拉列表中选择三个选项: 返回类别: Fireworks教程 上一教程: Fireowrks制作动感卡通表情 下一教程: 设置你最顺手的Firewroks MX 您可以阅读与"Fireworks网页切片应用详解"相关的教程: · Fireworks优化网页图像的详解过程 · Fireworks网页设计综合实例5 · Fireworks 网页设计综合实例-3 · 详解Fireworks MX 2004丰富的图像导出功能 · 样式在Fireworks MX 2004中的应用 |
快精灵印艺坊 版权所有 | 首页会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店 |