首页 百科知识 表格实现布局

表格实现布局

时间:2022-10-19 百科知识 版权反馈
【摘要】:表格实现布局实质上是使用边框为0的一系列单元格,将图片内容、文字内容、修饰性的颜色和图片全部纳入到那些单元格中。但是表格最大的问题在于用太多的<tr><td>,将与内容相关的、与表现相关的全都混合在一起。表格布局真正流行起来大概要归功于“切片技术”。得到网页和分割的图片,在Dreamweaver下将纯色的和需要文本显示的部分删除,得到了表格布局。

4.6.1 表格实现布局

表格实现布局实质上是使用边框为0的一系列单元格,将图片内容、文字内容、修饰性的颜色和图片全部纳入到那些单元格中。但是表格最大的问题在于用太多的<tr><td>,将与内容相关的、与表现相关的全都混合在一起。使得除了人工处理外,很难自动将真正的内容剥离出来。最直接的影响就是搜索引擎对网页很可能会发生误解,网站需要升级的时候只能推倒重来,旧的网站几乎没有什么重利用的价值。此外,对于访问者而言,众多<tr><td>以及无意义的为了对齐的修饰图片形成了大量的冗余,浪费了访问者大量的带宽。

表格布局真正流行起来大概要归功于“切片技术”。切片大概的制作流程是先将网页用图像处理软件(比如Photoshop和Firework)制作成一幅图片,然后利用切片工具对图片进行切割,切割完成后将图片按照切割的线条导出成HTML表格和若干小图片,最后对HTML表格进行优化处理,去掉可以用背景颜色替代的单元格的图片。

下面我们使用Firework软件展示一下切片的制作过程:

(1)首先用Firework制作网站页面的效果图。

img187

(2)在Firework中进行切片。

img188使用工具栏中的创建切片工具img189将图片进行如图切割

img190

(3)导出为网页。

img191

(4)得到网页和分割的图片,在Dreamweaver下将纯色的和需要文本显示的部分删除,得到了表格布局。

img192

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈