Table布局跟DIV层对于网站的影响

有些网站经常使用表格来布局搭建网站,因为表格搭建起来方便,固定性好,但是到了如今的搜索引擎时代以及为了给用户带来更多的便利,表格的功能已经只有在需要它来清晰展现某些数据时才会用到它。

传统TABLE布局方式实际上是利用了HTML table表格元素具有的无边框特性,由于table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。
表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如width=100%,border=0等。表格布局的 混乱代码就是这样编写的,大量样式年设计代码混杂在表格,单元格中,使得可读性大大降低,维护起来成本也相当高,尽管有类似于Dreamweaver(以下简单称dw)这样可视化的界面进行编写,只要你需要什么,他帮你写入什么样式,最终结果是表格中到处留下设计的足迹,混合式代码也由此而成。
DIV可以理解成一个块,是有个比表格简单的元素,从语法上只有

这样简单的定义。
DIV最大的好处就是样式是由CSS来控制。
但总体上而言:
1. div+css布局比table布局节省页面代码,代码结构也更清晰明了.
2. div+css的页面对搜索引擎支持好,而且速度更快了,能够比table 更加快速的显示网站内容.
3. div+css布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象table要在页面中修改很多信息.

页面中:

//表示调class名为style2的样式
也可以这样写

不过CSS表示就有所不同了

CSS中
.style2{
width: 800px; //宽度
height: 100%; //高度
margin: 0px auto; //页面边距离,如 margin-top:10px 表示上边距为10像素,这里是为自动
margin-bottom:20px; //下边距
border:1px solid #9BDF70; //边框
background-color: #F0FBEB //背景色
}
(在样式指定为div id=的时候必须这样写)
#style2{……

不过,第一种写法明显可以提高代码重用率。
下面我们来看用DIV+CSS的优点体现:
基于web标准的网站在于网站的结构、布局和行为三者的分离。
Css[Cascading Stytle Sheets,层叠样式表]目前最新的版本是2.0,是控制网页布局样式的基础,css能够做到对网页对象位置排版进行像素级的控制。归纳起来有以下几个方面的优势:浏览器支持完善。
表现与结构分离:如专门为字体设计一套样式,专门为版式、各个频道设计一个版式。
样式设计控制功能强大。
继承性优越越,类似于oop面向对象的基本功能。具有良好的继承与重载关系。
传统的table布局和css布局:table布局出来的页面如果想改变,非常困难。本身设计比较复杂,导致混合代码的产生。如何向标准过度:

目前XHTML面对很多的选择,包含三种应用方式。
Transitional方式:松散的过渡型XHTML应用,允许用户使用一部分HTML标签来编写XHTML文档。
Strict方式:严格的方式。
Frameset方式:针对框架页的应用方式。

发挥CSS 2.0的作用:
合理的CSS文件结构
继承与重用的优势
设计跨平台的代码具有良好可用性的CSS样式设计
使用基于DOM的脚本语言来编写交互

Css hack
只是被设计师们习惯使用的一种名称,它表现一种类似于欺骗浏览器的编写方式,由于存在浏览器兼 容问题,而且A浏览器不支持的某些标签但是B浏览器支持。因此使用这种欺骗的方式,我们可以写一段css样式,只被B解析而A浏览器忽略。CSS HACK是目前最流行也是最有效的修补浏览器解析问题的方
式。

什么样的网站才是符合web标准: w3c提供了一个帮助使用者校验自己网站的各个方面的程序。

http://www.w3.org/QA/tools/#validation 使用web标准之后表格还有用么?
CSS经常使用的一句话:使用表格排版是不明智的,表格是用来显示数据。
所以我们做网站seo的,在进行网站诊断时,就要检查网站是否是用div+css搭建的,做网站时更加要利用div+css来搭建了。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇