布局用CSS+DIV的优点总结_经验交流

采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,像阿里巴巴、163等大型门户站点就已经完成了重构工作。本人在去年就已经有了使用CSS+DIV来编写网页源码的习惯了,个人感觉这种方法确实比传统的TABLE形式的源码架构强多了。

1:表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。

2:提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。

3:提高页面浏览速度

对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

还有因为<table>标签是要等</table>下载好以后才可以显示的,所以整个网页是一下子跳出来的,这样让人感觉起来显示速度非常的慢。而使用css+div,<div> 标签不用等</div>下载好就可以显示里面的内容的,所以让人感觉打开网页的速度非常之快。

4:易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

从以上的描述来看,采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。

CSS+DIV所以成为目前网页布局主流,在我看主要核心原因,其实不仅仅是其符合W3C标准,而是通过采用CSS+DIV,网页工程从此: 

表现与内容分离

现在div+css已经很风靡了,各大网站都纷纷重构为div+css模式,网易就是最好的例子,采用层和CSS后,给用户最直观的体验就是网页打开速度快了很多。能给用户好的体验,为什么不做呢?

今天我主要从SEO的角度来分析用DIV+CSS进行网站制作或重构的必要性: 

1、用div+css构架的网站容易向W3C 标准靠拢,网站是否符合W3C标准是搜索引擎给网页排名的一个影响因素,特别是YAHOO,它看的比较重。

2、网站源代码简洁,除了几个div,ul,li,dl,dd,dt之类的标签外,几乎不用其他标签,这样,是网站内容完全裸露在搜索引擎的蜘蛛面前,便于抓取关键内容,增大关键内容的页面的比重,从而为排名因素增加比重。 

3、可轻松做到关键内容先被蜘蛛读取。一般的站点都是左中右三栏式,页面的主要内容是在中间一栏,而蜘蛛读取页面内容是按照从上而下,从左至右的顺序进行的,如果你的左栏内容比较多,那就麻烦了,你的页面主要内容权值就会下降。而用div+css就可以把主要先写在前面,在写左栏,右栏内容,然后通过CSS一定位就可以了 

4、方便调整网站结构布局。对于常用的表格布局,若想改下布局,可谓牵一发而动全身,网站层结构如果设计的合理,可以用CSS很轻松的改变网站的表现,这就是结构和内容,行为的分离。如果网站结构定期改动,自然对搜索引擎的蜘蛛吸引力不小的。
一个用层和css做好根基的网站,以后的优化工作自然会省力不少的。 

时间: 2024-09-10 11:43:29

布局用CSS+DIV的优点总结_经验交流的相关文章

DIV+CSS布局教程大全与pdf电子书 下载_经验交流

div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

使用CSS框架布局的缺点和优点小结_经验交流

现在好多网站都用了div+css来布局网页结构,优点是速度快了,可负面影响呢,来看下面的分析前端时间写了一篇<利用CSS框架进行高效率的站点开发>,有不少朋友问我相关的问题.很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议.效果是很明显的.当然,CSS框架有利也有弊,最近也看了一些相关的文章.一些感想,与大家分享.  CSS框架之利:  1.开发效率的提高.          如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作.定义好的框架可以

非常漂亮的Div+CSS布局入门教程第1/5页_经验交流

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页_经验交流

作者:唐国辉 实例网页网址:http://www.hsptc.com/css2.html前言       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和

研究了一下div+css的高度自适应问题_经验交流

div+css还是比较难搞的,要实现上下两个div高度自适应感觉麻烦,查了下资料只找到上下高度都是百份比的是可以的,我要实现上面的div是具体像素高度,下面是自适应剩余的百份比.自己搞了一下还要用上js,不知道是不是很笨,有好的方法请大家帖出来. <body style="height:100%; margin:0px; width:100%;"> <div id="ddii22″ style=" background-color:#ffffff;

不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码_经验交流

纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: 复制代码 代码如下: .r1{width:80px;height:80px;background:red;float:right;          position:fixed !important; top/**/:200px;          position:absolute; z-index:300; top:expression(offsetParent.

div+css实现自适应宽度按钮_经验交流

CSS自适应宽度圆角按钮 首页 不是首页 他也许是首页 但他一定不是首页 好了,就这样把.别扯了~

DIV+CSS 简单的导航条_经验交流

网站首页 我的日志 给我留言 情感文章 网站首页 我的日志 给我留言 情感文章 网站首页 我的日志 给我留言 情感文章

IE6,IE7和firefox对DIV的支持区别_经验交流

1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用"*+html",现在用IE7浏览一下,应该没有问题了. 现在写一个CSS可以这样: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html