1.2.2 表格为什么要没落(1)


1.2.2 表格为什么要没落(1)


实际上,表格的功能不是用来进行布局。最初的网页没有今天这么复杂,仅显示文本或几个简单的图像,网页文档从上而下自然流动分布,不需要考虑版式设计问题。


后来随着网页内容的丰富,图像、声音、动画等多媒体不断充斥网页,网页内容不断膨胀,同时用户对于网页视觉提出了更高要求,于是如何把传统印刷中的版式技术转移到网页设计中来就成为了一个比较紧迫的需求。


由于表格不仅可以控制单元格的宽度和高度,而且还可以嵌套,多列表格还可以把文本分栏显示,于是就有人试着在表格中放置其他网页内容,如图像、动画等,以打破比较固定的网页版式。


而网页表格对无边框表格的支持为表格布局奠定了基础,用表格实现页面布局慢慢就成为了一种设计习惯。现在网上的大多数页面都是使用表格来完成布局的,即使在CSS不断普及的情况下,这种状况也很难在短时间内得以改观。


表格布局是不标准的,用W3C制定的规范来说,表格的目的是用来显示数据的,而不是来完成布局,错把表格当布局缘于当时Web技术的缺乏和对标准需求的乏力。


为什么时至今日才会出现这么多人大声疾呼表格布局的非标准问题呢,为什么有这么多设计师迫切的使用XHTML+CSS来重构自己的网页呢?


其实在表格布局之初,就有专家提出异议,而且那时CSS也已经被制定并公布于众,一套较完善的网页标准技术也已经被推向市场,但应者甚寡,微软的IE浏览器更是带头唱反调,标准就这样被非标准淫威了好几年,萎缩在一角默默地隐忍。


现在Web技术从1.0跨入2.0时代,表格布局已经不能再适应新技术发展的趋势了,同时用户对于互联网的需求上升到一个新的层次。如今的Web世界,用户体验是上帝,在民意需求的强势之下,标准占据了上风,连微软这样的巨无霸也不得不诚服于W3C所提倡的标准之下。


什么是Web 1.0,什么是Web 2.0呢?


Web 2.0在两年前也许还是一个新名词,曾几何时它像网上核弹一样爆发了,并以不可阻挡之势燃烧了整个互联网,其热度不压于当年的超女,又曾几何时它悄悄地走进了我们的生活,从陌生走向了熟悉,从概念走向了应用,今天,Web 2.0构成了我们网络生活不可缺少的一部分,大家都在讨论、研究和实践Web 2.0。


目前对什么是Web 2.0并没有很严格的定义,一般来说Web 2.0(也有人称之为互联网2.0)是相对Web 1.0的新一类互联网应用的统称。Web 1.0的主要特点在于用户通过浏览器获取信息,  Web 2.0则更注重用户的交互作用,用户既是网站内容的消费者(浏览者),也是网站内容的制造者。


Web 1.0到Web 2.0的转变,具体的说,从模式上是单纯的"读"向"写"、"共同建设"发展。所以互联网下一步,是要让所有的人都忙起来,用全民力量共同织出贴近生活的网。到目前为止,对于Web 2.0概念的说明,通常采用Web 2.0典型应用案例介绍,加上对部分Web 2.0相关技术的解释,例如,博客(BLOG)、播客、威客、掘客、RSS、百科全书(Wiki,也叫维客)、网摘、社会网络(SNS)、P2P、即时信息(IM)等,关于这些信息技术的解释与更多信息,读者可以参考第12章介绍。


Web 2.0对于网页结构和布局提出更高要求,这不仅仅是为了节省几行代码、减少带宽的问题,实际上今天的带宽对于互联网的发展已经不是主要障碍了。要实现Web的交互与共建,就必须允许用户可以操纵网页,而这些都必须建立在完全标准的网页结构之上,以及更加灵活的布局方式。


显然,Web 2.0的这种要求与表格布局是格格不入的,如果你透过精美的表格页面,会吃惊的发现,用切图生成的网页代码如同天书,后期的维护和更新竟成了一场噩梦。例如,图1.3所示是千龙网千龙伊氏女性频道(http://yesee.qianlong.com/)的一个栏目,这是一个典型的用切图生成的页面,如果查看它的源代码,你会发现里面存在大量的冗余代码,网页结构与表现混杂在一起,如图1.4所示,要想在源代码中查找信息是非常困难的,更别说让用户参与网页共建之中。







 
(点击查看大图)图1.3  切图效果页面







 
(点击查看大图)图1.4  切图所产生的代码

为了帮助读者更好理解表格布局与标准布局的孰优孰劣,我们不妨结合一个案例进行详细分析。







 
(点击查看大图)图1.5切图可能产生很多代码冗余,这时读者会想到:
我用手写代码实现表格布局还不行吗,难道还会出现代码冗余?

问题不是这么简单,读者可以看看左图所示是一个简单的空白布局模板,它是一个三行三列的典型网页布局。




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2