CSS初学者入门:使用table布局网页不明智

使用Table布局页面为什么是不明智的?
大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页面,用Table布局出来,然后变换板块和风格,你就会体会到Table布局的不灵活性,这是为什么呢,因为Table的诞生是为存储数据用的,功能和Execel差不多,不是用来布局用的,只不过后来大家发现用Table可以把想放的页面元素,比如图片,放到任何自己想放的地方,且做出来的页面可以兼容多种浏览器,于是Table就承担起了布局页面的重担,这一做就是好几年... ...直到Web2.0时代的到来,Table才从布局页面的工作中逐渐解脱,专心的去存储数据^_^

既然Table是为存储数据诞生的,那谁的诞生是为了页面布局呢?
    答案就是:DIV,DIV就是为布局页面而诞生的,只不过一直不被人认同,原因就是DIV去布局页面需要CSS的配合,使用比较繁琐,还不如Table拖拖拽拽页面就布局OK了,感觉还不如Table方便,从而DIV被人们放置在一个无人问津的昏暗角落里,暗暗的等待着伯乐的出现,直到2003年美国加州Scott Design公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲,使DIV看到了阳光,走出了阴霾... ...

说了那么多,我们对比一下Table布局页面和DIV布局页面的优缺点

使用表格进行页面布局会带来很多问题:

* 把格式数据混入你的内容中。这使得文件的大小无谓地变大,而用户访问每个 页面时都必须下载一次这样的格式信息,带宽并非免费。

* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

* 这还使我们保持整个站点的视觉的一致性极难,花费也极高。

* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。 而使用CSS进行网页布局,它会:

* 使你的页面载入得更快

* 降低你的流量费用

* 让你在修改设计时更有效率而代价更低

* 帮助你的整个站点保持视觉的一致性

* 让你的站点可以更好地被搜索引擎找到

* 使你的站点对浏览者和浏览器更具亲和力

* 在世界上越来越多人采用 Web 标准时,它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。

网上有一篇文章,转过来,文章着重介绍DIV三点优势,也许看完文章后,就像社区元老heflyaway说的感觉作者比较迷恋Table,每篇文章都不可避免的带有个人色彩,而转出来的目的,其实就是想给大家降降DIV+CSS的温度,免得“走火入魔”,视DIV+CSS是为万能的,如果想学好CSS布局页面,就要从多个方面看它,好了,不多说了,下面是作者对CSS布局页面的三点优势及理解:

1、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。

2、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。

3、搜索引擎更友好,排名更容易靠前。

第一点、内容和形式分离
网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。
这个是DIV+CSS技术最显著的特点,也是CSS存在的根源。完全的颠覆现在传统(table)网页设计的技术。所有现在用table制作的内容,都可以用CSS来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,让生成的网页文件大小更精简,更小。table时代,一个页面表格达到10个以上是非常普遍的事情,但是现在用DIV+CSS,一个table都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div+CSS时,不像以往使用table时,必须把全部table读取完了才显示页面内容,现在是可以读一个div就显示一个效果,大家打开网页不用等。好处真是明显而强大。
这个优点的确是显著的,凡是使用传统table建的网页,内容多的话,有时候达到30K左右都有可能,文件打了打开时,肯定就有0.0几秒的延迟。使用DIV+CSS,你前台打开看到的全是直接内容,CSS文件都是导入链接的,是另一个文件,根本和HTML文件大小没关系,这种生成的HTML文件,一个也就10K左右大小。

第二点,改版网站更简单容易了
不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。
DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站HTML页面,只需要重新写CSS,再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。

第三点,搜索引擎更友好,确实能够对SEO起到一定的帮助。
通过DIV+CSS对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

综上所述,个人感觉DIV+CSS不能太迷信它的很好很强大,它作为制作网页,美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点,但是完全只用它来做,太费时费力,对于全国中小型网站长来说,真的不太适合。我个人觉得用table+DIV+CSS是最好的组合,也是最省时省力的办法。

时间: 2024-10-27 03:51:40

CSS初学者入门:使用table布局网页不明智的相关文章

【DIV+CSS入门教程】使用Table布局是不明智的

使用Table布局页面为什么是不明智的? 大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页

CSS快速入门

css|快速入门     在当今的网页制作中,几乎所有漂亮的网页都用了CSS. CSS是 Cascading Style Sheet的缩写,有些书上把它译为 "层叠样式表".有了CSS的控制,我们的网页便会给人一种赏心悦目.工工整整的感觉,同时字体的色彩变化也使主页变得更加生动活泼.虽然只短短的十几行代码,得到的效果却不同凡响.其基本用法是在网页中插入如下格式的一段代码: 下面以一段比较典型的CSS代码为例介绍其具体用法. 例:这段代码 中间的部分共七行,可看出有这样的特点:前两行的格

初学者来看:学习网页技术CSS怎么入门?

css|初学|网页 引言: 引用一本书中的一段文字:"当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典.一本汉语语法书和一本初级教程.但是,他将这些书放 在一个书筐里,并说到下周才能派上用场.在第一周,他只教我听和记一些短语.在开始严格有序的学习前,他要我学会如何复述一些短评."请问,哪里有餐 馆?"."请给我来点米饭"."这件衣服多少钱?".在那个星期,我不得不无条件地接受知识.句子结构.发音和语法.然而,到了星期五我居然

做网页,用DIV布局好还是table布局好?

网页布局 做网页,用DIV布局好?还是table布局好??请问他们的优缺点各是什么呢?div相对table布局来说,调试起来要麻烦多了.因为要考虑各种浏览器下的css支持标准兼容性. 实际上,布局时根据需要来决定,倾向于table表示数据,div用来布局. div,table都是HTML标签,怎么用,只要表达给网站浏览者信息就足够了,如何组织信息是设计者的问题. 表格代码冗长,维护麻烦,如今推行WEB标准,用丰富的标签设置更灵活,维护也更方便,当然包括TABLE和DIV. 如今DIV的滥用程度似

div+css布局与传传统的table布局区别

为什么我们用div+css布局而不用传传统的table布局 一.用div+css网站布局的好处 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息. 2:提高搜索引擎对网页的索引效率 用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价. 3:提高页面浏览速度 对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小. 4:易于维护和

比较详细的DIV+CSS布局网页对网站SEO的影响_网站应用

SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量

DIV+CSS布局网页对网站SEO的影响

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处

DIV+CSS与TABLE布局的明显区别

DIV+CSS布局较Table布局减少了页面代码,加载速度得到很大的提高,这在Spider爬行时是非常有利的. 网站布局从以前的TABLE方式转换到现在的DIV+CSS布局方式..那么这种方法比起以往的TABLE布局方式对网站都有什么影响呢? 本文来做个简单介绍 主要体现在以下几个方面 一.解决表格嵌套让蜘珠触角无数不大 很多"网站如何推广"的文章中称,搜索引擎一般不抓取三层以c的官方证实.我的几项实验结果没有完全出来,但根据目前掌握的情况来看,Spider爬行Table布局的页面,遇

网页制作学习:用CSS创建三栏页布局

css|创建|网页 三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法