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

2016-02-20 00:17 4 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的CSS初学者入门:使用table布局网页不明智,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

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

    既然Table是为存储数据诞生的,那谁的诞生是为了页面布局呢?
    答案就是:,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给页面穿衣服!

来源:http://www.tulaoshi.com/n/20160220/1631602.html

延伸阅读
对于初学PS的朋友来说,在学习的过程中感到十分的迷茫,当看到网上好多优秀的PS作品后,总是感到无从下手,那些优秀的作品是如何制作出来的呢?其实对于初学者来说,认真的学习PS中的最基础性的操作,才是关键。借此作者总结了一些初学者常用的技术技巧与效果制作,希望初学者能够切实的到帮助。 1. 了解PS中的基本概念1.1  PS中的基本概...
标签: Web开发
这几则CSS技巧都是从网络收集来的,作为老手就当作温故而知新,本文主要面对CSS新手朋友,有一些东西或许不是搞的很明白。而这十则CSS技巧能促进你的学习与编码技巧,更多的知识浏览CSS教程频道内容。希望大家能认真阅读。 一、CSS字体属性简写规则 一般用CSS设定字体属性方法: font-weight:bold; font-style:italic; ...
标签: MySQL mysql数据库
  有很多朋友虽然安装好了mysql但却不知如何使用它。在这篇文章中我们就从连接MYSQL、修改密码、增加用户等方面来学习一些MYSQL的常用命令。 一、连接MYSQL。 格式: mysql -h主机地址 -u用户名 -p用户密码 1、例1:连接到本机上的MYSQL。 首先在打开DOS窗口,然后进入目录 mysqlbin,再键入命令mysql -uroot -p,回车后提示你输密码...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadd...
标签: Web开发
我们制作的每一个HTML网页都应该有文档标题。那么到底如何设置标题呢?这个教程就作为网页初学者的入门吧! 给你的文档增加一个标题,按照下面改变你的代码: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html head title我的第一个网页/title /head body 我的...

经验教程

757

收藏

17
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部