一、切片的“孪生兄弟” ——“spacer(分隔符).gif ”、“colspan”和“rowspan”
我们在FW或PS中,导出切片并输出html页面,然后用dw打开后,总会发现代码中有不少“spacer.gif”、“colspan”和“rowspan”的存在(如下图所示)。
图1
有不少朋友称之为切片生成的“垃圾代码”,于是总是想方设法地把它们删除。然而,有道是:“存在就是合理。”所谓的“垃圾代码”亦是如此,它们在维持页面的表格中发挥着极其重要的作用。“colspan”和“rowspan”分别是“列跨度”与“行跨度”,它们在表格中的起到合并单元格的作用,具体请观看flash教程(建议先用迅雷下载):http://www.pconline.com.cn/pcedu/sj/famous/fif/0505/flash/0514fifdw030903.swf
下面笔者仅对spacer.gif进行解说。
二、掀起“spacer.gif”的红盖头。
1.初说“spacer(分隔符).gif”——网页表格(table)的“骨架”。
不客气地,可以这么说,spacer.gif是为了弥补切片输出网页时候的一个漏洞而产生的。其实,切片输出的网页实质上是一个(如果是“分段式切片”的话,则为多个)被分成若干个单元格的表格(table),只不过每个单元格都完全地被每一幅图片(即每一个切片)所填满而已,正如word中的一些填写了内容的表格。(如下图)
图2
然而,值得注意的是,切片网页表格中的单元格是无法规定其宽度和高度的,它是按它其中的内容(即切片图片)来“支撑”和确定其大小的。而当我们把图片转换为背景时,图片在单元格中将会丧失“支撑”功能,从而导致该单元格“收缩”而变形,这是因为背景已经不是图片了,它是空的,没有内容的,它已经没有了支撑的功能(如下图)。
图3
而在一般情况下,我们在把图片转换为背景后,并没有出现图中单元格收缩变形的情况。原来,这就是spacer.gif的功劳。
2.识破“spacer(分隔符).gif”的庐山真面目。
经过前面的引入,或者大家对spacer.gif都只是有个模糊的概念,那么我们不妨先看看spacer.gif的庐山真面目。它其实是根目录文件夹下的images文件夹中,一个名为spacer.gif的图象文件。如果你用图象软件打开它的话,你看到的将会是一个点,因为它其实只是一个1*1px的小白色正方形。
而在dw中,我们也不妨来找找spacer.gif。在dw“拆分”状态下,鼠标点击代码中有“spacer.gif”的一行,然后就可以在“设计”框中看到它了(如下图)(有时因为被拉伸,所以宽度增大,不再是1*1px)。
图4
同法通过观察所有的spacer.gif,我们发现是它们是分布在一个表格(table)的最上方和最右方的,并且它们与页面中的每一块切片图片的位置都是相互对应的。(如下图)
图5
图6
3.再说“spacer(分隔符).gif”——网页表格(table)的“骨架”。
通过图解,相信大家已经清楚spacer.gif的作用了——它起着支撑网页表格大小的作用。我们从fw或ps中所输出的切片(上文说过,那是一个用单元格放图片的表格),其并非通过规定table(包括其中的单元格)的宽(weight)和高(height)的属性、而是通过表格最上方和最右方的spacer.gif来规定表格大小的;当然,每一个spacer.gif都是按照每个切片的大小量体订造的。
其实说白了,就是所输出的切片表格(包括其中的单元格)的默认大小都只是1*1px,而把表格支撑起成为一个远大于1*1px的页面的,是其幕后功臣——spacer(分隔符).gif。
不妨再打一个比方,切片输出的表格页面相当于是一张卷曲的硬胶纸,自然状态下它是卷起来的,这就对应于表格原本都是取默认值1*1px的。而spacer(分隔符).gif相当于是一些竹竿,其通过固定卷曲硬胶纸的两条邻边,从而使硬胶纸平整地摊开来(如下图),这就是我们所看到的页面。
图7
所以,在我们删除所有spacer(分隔符).gif后,然后把切片图片转换为背景时,该表格的单元格便失去了所有支撑,于是便被打回原型,变回原来“卷曲的硬胶纸”——单元格“收缩”变形回1*1px(如下图)。这就是spacer(分隔符).gif的功能和作用。
图8
4.表格撑破的罪魁祸首。
说到这里,spacer(分隔符).gif为什么是表格撑破的罪魁祸首这个问题已经是不言而喻的了。我们不妨用回刚才那个胶纸和竹竿的比方,“撑破”就是在某一个单元格中所输入的内容超过了spacer.gif的长度,使捆缚在胶纸和竹竿上的绳索被拉断,而竹竿与竹竿之间是环环相扣的,一个断离了,导致后面的竹竿也跟着断离胶纸(如下图)。
图9
三、从源头查杀——封锁“spacer(分隔符).gif”、“colspan”和“rowspan”。
有时,在实际情况中,我们须要把spacer(分隔符).gif删除,以免它影响页面的外观和布局,如分段式切片。而且,有不少朋友为了网页代码的干净,总是不愿意看到spacer(分隔符).gif、colspan和rowspan的存在。其实正如师兄经常指导我们所说的:“切片要切得有技巧,并且要切得规范,这样就可以减少甚至避免“垃圾代码”的产生。”然而在实际情况中,有时的确很难切得十分规范的。
其实,除了在dw中删除“垃圾代码”这个方法外,我们不妨从源头开始查杀,也就是说在fw或ps输出切片的时候,不让spacer(分隔符).gif、colspan和rowspan代码导出。而页面表格在它们不存在的情况下,为防止上面所说到的——在把切片图片转换为背景的时候会使表格中单元格收缩变形的问题,我们其实还可以手动地在dw中编辑代码:到页面的每个里面,用宽度(weight)和高度(height)规定其大小,这样表格不再需要spacer(分隔符).gif来支撑其大小了。
作者:张俊
[此贴子已经被作者于2010-11-25 13:08:47编辑过]