资源描述
切片(Slice)就是将一幅大图像分割为一些小的图像切片,然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来,成为一幅完整的图像。这样做可以减低图像的大小,减少网页的下载时间,并且能创造交互的效果,如翻转图像等,还能将图像的一些区域用html来代替。,Fireworks切片,将图像切片至少有三个主要优点:“优化”网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。“交互性”您可以使用切片来创建响应鼠标事件的区域。“更新网页的某些部分”切片使您可以轻松地更新网页中经常更改的部分。,Fireworks切片,使用切片创建切片、编辑切片“矩形切片”、“多边形切片”导出切片导出所选切片、导出为网页使用层面板快速选定切片,切片可以复制到另外一个PNG图像中,注意技巧(等大比例、分辨率),Fireworks切片,在FW可以选择导出表格布局或者div、css布局1、导出Table布局(1)“HTML和图像”(2)FW8、FWCS3、FWCS4、FWCS52、导出Div、CSS布局(1)“CSS和图像(.htm)”(2)FWCS3、FWCS4、FWCS5(FW8导出的是绝对定位的DIV、cs4和cs3又有点不同,推荐使用CS4),Fireworks切片,1、导出Table布局导出-选项-表格间隔:1像素透明间隔符嵌套表格,无间隔符单一表格,无间隔符号,Fireworks切片,古代文学011像素透明间隔符:删除东西表格比例不会变化古代文学02嵌套表格,无间隔符:删除东西表格比例不会变化古代文学03单一表格,无间隔符号:删除东西表格比例会变化,Fireworks切片,2、导出Div、CSS布局(1)CS3、CS4切片属性设置“背景图像”(CS4前景图像也可以)(2)CS4不管背景还是前景都导出,CS3则不会注意区别(3)“名字优化”:起有意义的名字Div自动居中:margin左右auto,Fireworks切片,实例Table布局要点:(1)“首页”控制好切片区域文字的大小,结合样式表如:体育、艺术两个页面,Fireworks切片,实例Table布局要点:(2)内容页:保持水平内容区域自动拉伸只影响两边,两边背景自动拉伸能够连续或者是纯色背景,所以看起来能自动拉伸(通过设置单元格的背景让其拉伸)不要滥用“渐变”色两边纯色或者单调背景,如艺术内容页,教育系页面,Fireworks切片,古代文学页面例子页面可以一次切好,也可以切好宏观再继续切微观(1)宏观可以使用“1像素间隔图像”(2)微观戏切尽量不要使用“1像素间隔图像”,容易变形,使用“嵌套表格,无间隔符”当页面比较简单的时候可以一次切完。复杂的可以先宏观切完,导出后,再细切图片导出网页,最后通过DW复制粘贴回去,Fireworks切片,
展开阅读全文