Fireworks网页切片应用详解(一)

2016-02-19 18:22 11 1 收藏

下面,图老师小编带您去了解一下Fireworks网页切片应用详解(一),生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Fireworks网页切片应用详解(一)[ 】

   我们这里所说的切片(Slice)就是将一幅大图像分割为一些小的图像切片,然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来,成为一幅完整的图像。这样做可以减低图像的大小,减少网页的下载时间,并且能创造交互的效果,如翻转图像等,还能将图像的一些区域用HTML来代替。Fireworks在网页切片制作方面有很强的优势,今天我们就来仔细看看Fireworks网页切片全攻略。

  一、切片在网页制作中的作用

   在网页上的图片较大的时候,浏览器下载整个图片的话需要花很长的时间,切片的使用使得整个图片分为多个不同的小图片分开下载,这样下载的时间就大大地缩短了,能够节约很多时间。在目前互联网带宽还受到条件限制的情况下,运用切片来减少网页下载时间而又不影响图片的效果,这不能不说是一个两全其美的办法了。

   除了减少下载时间之外,切片也还有其他一些优点:

  * 制作动态效果:利用切片可以制作出各种交互效果。例如前面将的按钮的这种状态其实最后导出的文件实质上就是不同状态的切片。
  * 优化图像:完整的图像只能使用一种文件格式,应用一种优化方式,而对于作为切片的各幅小图片我们就可以分别对其优化,并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量,有能够使得图片变小。
  * 创建链接:切片制作好了之后,就可以对不同的切片制作不同的链接了,而不需要在大的图片上创建热区了。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


  二、创建切片

   使用Fireworks工具箱上的切片工具可以为已经制作好的图片创建切片。如图1所示,切片工具有两类,分别为“矩形切片”工具(Slice tool)和“多边形切片”工具(Polygon Slice tool)。

   下面我们分别就这两类热区工具的使用作介绍。


图1 两类切片工具


  1. 创建矩形切片

  首先打开图像,选择工具箱上的的切片工具,在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域,当矩形大小适当时释放鼠标,这样就生成了一个切片,如图2所示。该切片区域被半透明的绿色所覆盖,称为切片对象,另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割,称为切片向导。

图2 绘制矩形切片

   要使切片与对象区域紧密匹配,可以和热点一样先选中要制作成为切片的对象,然后点击“Edit”菜单,选择“Insert”-“Slice”;如果选择了多个对象,则会出现一个如图3所示的对话框,选择“Multiple”按钮,可以创建多个切片,如图4所示。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

图3 提示对话框


图4 制作多个切片

来源:http://www.tulaoshi.com/n/20160219/1617446.html

延伸阅读
最近看到很多朋友对切片有疑虑,所有又写了一个简单的关于切片的教程,希望对大家有所帮助,这个教程主要就是介绍了一下切片的流程,写的不细,需要细致的教程可以看我写的巩义的教程http://bbs.blueidea.com/thread-2682629-1-1.html。 在Fireworks或者是PhotoShop中设计好的网页效果图,需要导入到Dreamweaver中进行排版布局。在导...
标签: Web开发
创建 HTML 切片 HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片不导出图像,它导出出现在由切片定义的表格单元格中的 HTML 文本。 如果要快速更新出现在站点中的文本而无须创建新图形,则 HTML 切片很有用。 若要创建 HTML 切片: 绘制切片对象并将其保留为选定状态。 在"属性"检查器中,从"类型"弹...
创建 HTML 切片 HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片不导出图像,它导出出现在由切片定义的表格单元格中的 HTML 文本。   如果要快速更新出现在站点中的文本而无须创建新图形,则 HTML 切片很有用。 若要创建 HTML 切片: 绘制切片对象并将其保留为选定状态。 在"属性"检查器中,...
使切片具有简单的交互效果 拖放变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。 具体说来,拖放变换图像方法使您可以确定指针经过一个切片时该切片所发生的变化。最终结果通常称为变换图像。变换图像是在网页浏览器中当指针经过其上方移动时,其外观发生更改的图形。 当选定切片时,一个带有十字的圆圈出现...
创建非矩形切片 当试图将交互性附加到非矩形图像时,矩形切片可能无法满足需要。例如,如果打算将变换图像行为附加到切片,而切片对象互相重叠或者形状不规则,则矩形切片可能会与交换图像交换出非您所要的背景图形。Fireworks 解决此问题的方法是:允许您使用"多边形切片"工具绘制任何多边形形状的切片。   您也可以在...

经验教程

176

收藏

40
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部