【DIV+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是最好的组合,也是最省时省力的办法。

还需要再说明一下,本节讲得是Table布局页面和CSS布局页面的问题,讨论的是“布局页面”上用谁更好,并不是说在CSS布局的页面内不能用Table,真正厉害的人物是DIV、Table、CSS用得恰到好处,他们三个各做各的事情,DIV布局页面,Table存储数据,CSS给页面穿衣服!

时间: 2024-09-13 05:39:36

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

【DIV+CSS入门教程】DIV+CSS的叫法是不准确的

1.1 DIV+CSS的叫法是不准确的 我想凡是来到"这个专题"的同学,很大部分是冲着DIV+CSS来的,目的就是学习DIV+CSS的,说的再直接一些就是学习如何用DIV+CSS布局页面,如何从一张图片制作成标准的DIV+CSS页面. 如果你看完第一段还没有发现错误的话,那你就很有必要,接着往下看. DIV+CSS这种叫法其实是一种很错误的叫法,这是国人一厢情愿的叫法,而标准的叫法是什么呢? 呵呵,没错,是xHTML+CSS,不理解吧,我来细细给你说,如果下面的你能理解,保证面试的时候

【DIV+CSS入门教程】CSS如何控制页面

本节主要讲解,两个内容, 第一:CSS如何控制页面样式,有几种方式: 第二:这些方式出现在同一个页面时的优先级. 使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表 象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点:不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

【DIV+CSS入门教程】CSS选择器规范化命名

规范的命名也是Web标准中的重要一项,标准的命名可以更好的看懂代码,我想大家应该都有这种经历,某日翻出自己过去写的代码居然看不懂了,呵呵,为了避免这种情况我们就要规范化命名,再说了,现在一个项目不是一个人就可以完成的,是需要大家互相合作的,如果没有规范化命名,别人就无法看懂你的代码,大大降低了工作效率,所以必须规范化命名,这样还显着咱专业! 好了不多说了,关于CSS命名法,和其他的程序命名差不多,也是有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法. [骆驼命名法] 说到骆驼大家肯定会想到它那明显

css入门教程:如何控制li div标签不换行

css入门教程:如何控制li div标签不换行,好了在css文档布局中,很多了东西可以去用,也有很多的细节是值得我们研究的,下面我们就来看看我用css来对li div 进行控制吧. index | aboutme | company | product 看上面这个导航栏吧,从左到右吧,当然我们可以直接定义a 标题也行,但本教程要讲到的是用li 或div 来进行控制哦,下面们来看看上面的代码. <div id=nav> <li>index</li> <li>a

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

CSS入门教程:网页首字下沉

CSS入门教程:网页首字下沉 :first-letter 版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此伪对象仅作用于块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block . 在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下

div+css浮在右上角的布局示例

div+css浮在右上角的布局示例 以下是代码:<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Free CSS Template 8</title> <style type="text/css" media="screen&qu

Div+CSS布局入门教程(一) -- 页面布局与规划

css|规划|教程|入门教程|页面 一.页面布局与规划 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第

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

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