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

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

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

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

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

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

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

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

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


  二、创建切片

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

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


图1 两类切片工具


  1. 创建矩形切片

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

图2 绘制矩形切片

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

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

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

图3 提示对话框


图4 制作多个切片

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

延伸阅读
      添加链接: 1,打开object 面板 2,在link框内添入链接地址 3,在alt 框内可输入替代图象的文字,在图象下载的过程中这些文字会显现出来 给切片加上链接的方式也是一样的 切片 切片可以将一副大的图片分割开来,这样可以减低图象的大小,并且能创造交互的效果,如...
热区(Hotspot)有时又称之为热点,是图像上带有超链接的一块区域,它可以呈矩形、圆形、甚至还可以是多边形。和文本超链接的情况一样,当浏览者将鼠标移动到热点上时,鼠标会变成手形。 文本和图像都可以在网页上创建超级链接。一般情况下一个图像只链接到一个目标。但是有时候一幅较大的图片上有不同的小区域,不同的小区域的图片要...
使切片具有简单的交互效果 拖放变换图像方法是创建变换图像和交换图像效果的快速而有效的方法。 具体说来,拖放变换图像方法使您可以确定指针经过一个切片时该切片所发生的变化。最终结果通常称为变换图像。变换图像是在网页浏览器中当指针经过其上方移动时,其外观发生更改的图形。 当选定切片时,一个带有十字的圆圈出现...
标签: Web开发
创建 HTML 切片 HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片不导出图像,它导出出现在由切片定义的表格单元格中的 HTML 文本。 如果要快速更新出现在站点中的文本而无须创建新图形,则 HTML 切片很有用。 若要创建 HTML 切片: 绘制切片对象并将其保留为选定状态。 在"属性"检查器中,从"类型"弹...
创建 HTML 切片 HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片不导出图像,它导出出现在由切片定义的表格单元格中的 HTML 文本。   如果要快速更新出现在站点中的文本而无须创建新图形,则 HTML 切片很有用。 若要创建 HTML 切片: 绘制切片对象并将其保留为选定状态。 在"属性"检查器中,...

经验教程

718

收藏

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