建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > FireWorks教程 >

Fireworks网页切片应用详解

更新时间:2017-04-11整理编辑:建站学习网阅读:0

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

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

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

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

  * 制作动态效果:利用切片可以制作出各种交互效果。例如前面将的按钮的这种状态其实最后导出的文件实质上就是不同状态的切片。

  * 优化图像:完整的图像只能使用一种文件格式,应用一种优化方式,而对于作为切片的各幅小图片我们就可以分别对其优化,并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量,有能够使得图片变小。

  * 创建链接:切片制作好了之后,就可以对不同的切片制作不同的链接了,而不需要在大的图片上创建热区了。

  二、创建切片

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

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

  图1 两类切片工具

  1. 创建矩形切片

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

  图2 绘制矩形切片

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

  图3 提示对话框

  图4 制作多个切片

  2. 创建多边形切片

  如图5所示,打开一幅图像,可以利用多边形切片工具在多边形的每个顶点单击制作多边形切片,如图6所示。

  图5打开图像

  图6 创建多边形切片

  由上图可见,图像中的切片向导仍然是水平和垂直的,生成的切片文件也还是矩形的。实际上多边形切片的形状主要是用于设置相应的行为触发区域的。如果切片对象被设置了链接,那么在浏览器中显示的时候,只有点击到多边形区域时才会实现链接跳转,而在这个切片的其他区域则不会出现链接跳转。

  同理,如果切片和对象区域完全符合或者说用户是基于路径对象制作切片,只需点击“编辑“菜单,再选择“Insert“->“Slice“即可。

  三、编辑切片

  和热区的编辑非常类似,如果要选取切片,可以利用指针工具、部分选定工具来选中它,也可以使用层面板来进行;选中切片之后,若要移动切片可以利用鼠标、方向键或者属性面板的位置值。

  默认情况下热区是透明的绿色,如果需要改变热切片的颜色,只需要在图7所示的切片属性面板中的切片颜色框中选择所需要的颜色即可。

  (图13 导出切片 图片较大,请拉动滚动条观看)

  第三步:在切片下拉列表中选择三个选项:

  * Export Slice(导出切片):表示根据切片对象导出多个切片文件

  * None(无):表示不生成切片文件,只是将文件导出为一个图像文件

  * Slice Along Guides(沿引导线切片):表示依据文件中现有切片向导导出切片

  另外,如果我们只希望导出一部分切片,只需要选中所需要导出的切片,右击鼠标在快捷菜单中选择“Export Selected Slice“(导出所选切片)即可。

本文网址:https://www.dedexuexi.com/wysj/FireWorks/2699.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
Fireworks用陨石背景打造飞火流星动画特效
« 上一篇2017年04月11日
Fireworks钢笔工具简单钩制破损边缘
2017年04月11日下一篇 »
  • Fireworks CS5、CS4、CS3版本功能比较
    0阅读
    Adobe Flash Professional CS5 软件可以完成精彩的交互创作,可用于提供跨个人计算机、移动设备以及几乎任何尺寸和分辨率的屏幕一致呈现的令人痴迷的互动体验。 Adobe Fireworks CS5 软件使用户能为 Web 以及几乎任何设备(比如智能手机、报亭到嵌入式屏幕等)创建...
  • Fireworks教程:轻松制作水晶小图标
    0阅读
  • 利用Fireworks打造石头字效果
    0阅读
    1、素材。烂墙壁照片一张以及胶片照片一张。 2、新建500*350画布,插入背景图片。然后调整亮度和色调如下。 3、拉一个大小为500*350的放射状渐变的矩形。参数设置如下。 4、输入文字影视。字
  • Fireworks教程:制作波尔卡点边框
    0阅读
    效果如下 选择一个图片,用FW打开 在图片上面建立一个层,作一个和图片一样大小的矩形,用白色填充 为这个举行添加效果Edges 具体设置如图 注意Color(颜色填充)这里选择黑色 选中矩形,Ctr
  • Fireworks简单方法设计网页闪字动画效果
    0阅读
    最近网络上很流行一种超炫的闪彩文字及签名,在QQ空间里、论坛签名里、各类回贴和博客都有炫彩闪字的身影,一些具有个性的闪字还相当耀眼,那么这种炫彩字是如可制作出来的呢?其实制作
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录