关于Fireworks图片切片技术的一点心得补充

今天看到贵版的切片教程,对于新手老说是好东东哈。

对于大图的切割,我自己认为能规则的切就规则的切,不要随心所欲的切。。。之所以这样说,是因为通常切片后,我都不怎么用FW自动生成的HTML表格。。

我们可以先看看FW自动生成的表格的结构(没有经过特殊设置的):

假如一幅图切了两行,第一行是三块图,第二行是两块图,这五副切片的宽度都不一致,那么输出后自动成的表格将会是3行6列的一个大表格。我们发现每个放置切片图的单元格是没有设置固定的width和height参数的,实际上对于单元格尺寸的控制,FW使用了透明图片填充的技巧,在表格的最后一行和最后一列,用了若干个固定尺寸的单元格,这些单元格里用了一个spacer.gif的图片,这也就是我们通常看到FW自动生成的切片源码及文件中会出现这个很小的图片的原因。

再仔细分析一下这个没有嵌套的大表的原理,会发现FW会以行(列)中宽度(高度)最小的一个切片为最小单位,来生成这个表格有多少列多少行,也就是说,上面的切片例子中明明只是5个切片图,却没有用一个2行3列的图来进行布局的原因(事实上在DW中手动进行表格设置的话,也很难达到无缝效果)

这样的话,我们如果对某一个切片的大小进行调整时,就需要对整个大表进行重新输出,对于精益求精的设计者来说,频繁的改动是件很痛苦的事。

所以我在实际运用切片的时候,都是只输出图片,不输出表格的,表格自己来做。。。。具体的做法是具有相同高度的同行切片用一个表格,如果实在需要一行中做不同高度的切片(尽量不要这样做),就需要以高度最高的那个切片为基础,制作复杂的表格嵌套了。。

这样做的最终效果是:一副切割后的大图不是由FW自动生成的那样是一个大表格,而是若干个表格组合在一起的。。。一是方便了对图片中某个切片的修改,二是加快了大图的下载速度(我们知道,浏览器对于<table>标签总是下载到</table>标签出现时才会显示给你看的)

很抱歉,罗嗦了这么多,不知道大家是不是听清楚了我的意思,因为现在不便,没有实例图来给大家辅助讲解,改天有空补出来吧。。。。。。

PS:刚看到了一个关于输出HTML的设置问题,对于新手来说很有意义,如果大家看了那篇,就不用听我在这里罗嗦这么多了,哈哈~不过感觉还是自己做表格好。。。。

时间: 2024-08-30 14:42:09

关于Fireworks图片切片技术的一点心得补充的相关文章

关于 Fireworks 图片切片技术的一点心得补充

心得 今天看到贵版的切片教程,对于新手老说是好东东哈. 对于大图的切割,我自己认为能规则的切就规则的切,不要随心所欲的切...之所以这样说,是因为通常切片后,我都不怎么用FW自动生成的HTML表格.. 我们可以先看看FW自动生成的表格的结构(没有经过特殊设置的): 假如一幅图切了两行,第一行是三块图,第二行是两块图,这五副切片的宽度都不一致,那么输出后自动成的表格将会是3行6列的一个大表格.我们发现每个放置切片图的单元格是没有设置固定的width和height参数的,实际上对于单元格尺寸的控制,

关于微信jssdk实现多图片上传的一点心得分享_javascript技巧

一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置 function signatureJSSDK() { var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数 $.ajax({ url:IPWeiXinJssdk,//调用后台接口,用后台返回的结果来进行微信接口的基础配置 type:"post", dataType:"json", data

如何查找技术资料----我的一点心得体会

作为一个IT人员,如果不能利用搜索引擎很快地查找到自己想要的技术资料的话,那么会很悲剧!特别是面对新技术的时候,由于资料特别少,就算有,大部分也是英文资料.如果这时候,你查找资料的能力比不上别人的话,很有可能就会在新一轮的技术竞赛中被甩在后面,比如现在很火的ios游戏开发.android由于搞的人多,资料也相对来说多一些,门槛也低一些,不需要mac,只要有一台pc就可以弄.但是,接下来的wphone7呢?你准备好了吗? 我来博客园也有将近半年时间了,在入园的时候,我写了一篇<如何学习iphone

使用Webbrowser的一点心得体会

原文:使用Webbrowser的一点心得体会         自从用上VS2005后,发现多了个WebBrowser控件(.net 2003中不带),为图方便吧,有好多小工具就用这个写的,慢慢也有点体会了,总结一下,与网友们共享吧.         1.如何获得"打开网页出错"信息        在DocumentCompleted事件中,判断Document.Url.AbsoluteUri中的"res://":标志即可(以前总用e.Url,怪不得总截取不到)   

分享个人对电子商务seo策略流程的一点心得

摘要: 对百度的SEO们深深感到苦逼与无奈的一点是,我们不能全心全意集中精力去提高电商网站的用户体验与良好的数据分析,因为百度的数据波动有时是没有规律而言.我经常对提问者说: 对百度的SEO们深深感到苦逼与无奈的一点是,我们不能全心全意集中精力去提高电商网站的用户体验与良好的数据分析,因为百度的数据波动有时是没有规律而言.我经常对提问者说:对付百度SEO,最重要的是淡定;策略上以调整+淡定为主.但是其实,我们愿意淡定,但是高层不愿意淡定,办法我们还是要想的.过了这么久,分享一下我个人对电子商务s

GIS开发随笔--GIS技术的一点理解和MapNet控件试验

今天我们来讨论几个没有太大关联的内容,如果在这几个问题方面有人有自己独特的见解,或已经知道了这方面的技术,那么还请您在评论中提出来,供大家探讨,下面我们就来探讨一下吧. 一.这几天忙着测试和修改GIS系统,发现了一些Bug的同时也有了新的需求,不仅改变了界面风格和布局而且代码也少有变化,地图变化最大,需要加入栅格图(太可怕了,一幅栅格图竟然有1.3G),如何加载呢?因为这次的GIS系统是B/S结构的,而且功能也不小,除了栅格图外还有很多层的矢量图,并且提供图层数据和数据库数据的互查功能,所以非常

Fireworks网页切片应用详解

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

Fireworks多边形切片的妙用图文讲解

  本教程向大家介绍了如何利用Fireworks 多边形切片工具制作导航条重叠时的效果,方法很简单也很实用,主要希望大家通过本教程,能熟练掌握多边形工具的使用方法,转发过来,希望对大家有所帮助! 平常大家对网页进行切片输出的时候,一般都用普通的切片工具进行输出的.但是如果遇到导航很多,切片重叠时候,用一般的方法就无法进行处理,这时多边行切片工具的好处就显现出来了,以下我就详细介绍多边形工具的使用方法! 1.打开作好的导航图片,在第一桢做好按钮一般状态图形,在第二桢上,做好按钮over状态图形,如

使用Photoshop制作黑白照片的一点心得

通常,黑白照片比彩色照片更能体现历史感和陈旧感.如果在拍摄的时候没想到调成黑白模式,那么我们可以使用Photoshop将彩色照片转换成黑白照片.转换的方法有很多,下面我们就一张小萝莉照片来探讨下制作黑白照片的一点心得吧! 素材: 大家跟着我的步骤做吧: 复制背景层,并执行菜单命令"图像"→"调整"→"去色",快捷键Ctrl+Shift+U,可以将图片彩色完全去掉,留下不同程度的灰度效果. 我们再换一种方式制作黑白照片.隐藏刚才的黑白图层,点击红圈