网页制作div+css实验报告

html-css011

网页制作div+css实验报告,第1张

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。SEO是指搜索引擎优化,主要就是通过对网站的结构、标签、排版,关键字等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎中获得较高的评分,从而获得较好的排名。DIV+CSS网页布局对SEO有很重要的影响。具体来看到底有什么好处呢?

DIV+CSS的网页布局对SEO的好处一、不存在表格的嵌套问题

很多“网站如何推广”的文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来,但根据目前掌握的情况来看,Spider爬行Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。

使用Table布局,为了达到一定的视觉效果,不得不套用多个表格。如果嵌套的表格中是核心内容,蜘蛛(Spider)爬行时跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

DIV+CSS的网页布局对SEO的好处二、精简的代码

使用DIVCSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。

代码精简所带来的直接好处有两点:一是提高蜘蛛(Spider)爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处二是由于能高效的爬行,就会受到蜘蛛(Spider)欢迎,这样对收录数量有很大好处。

而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,XHTML在控制样式时也不需要过多的嵌套。

这虽然没有得到确认,但还是建议使用Table布局的朋友们,在设计时尽可能的不要使用多层表格嵌套,SEOer(seo工作者们)们在文章中说明了这一点,相信他们也不是没有依据。

DIV+CSS的网页布局对SEO的好处三、对搜索引擎的排名

基于XTHML标准的DIV+CSS布局,一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面,但事实证明使用XTHML架构的网站排名状况一般都不错。

DIV+CSS的网页布局对SEO的好处四、提高网页的访问速度

DIV+CSS布局较Table布局减少了页面代码,加载速度得到很大的提高,这在蜘蛛(Spider)爬行时是非常有利的。过多的页面代码可能造成爬行超时,蜘蛛(Spider)就会认为这个页面无法访问,影响收录及权重。

真正的SEOer(seo工作者们)不只是为了追求收录、排名,快速的响应速度是提高用户体验度的基础,这对整个搜索引擎优化及营销都是非常有利的。

换一个角度抛开DIV+CSS对SEO的有利影响.单独来讲这种div+css布局也是很有益的,可以说是实下是最流行的网页布局方式.可是加快我们网站的速度,便于管理与修改.当然div+css布局也有不完善的方面,比如说,他的css样式表与各种浏览器之间的不兼容问题.当然如果你是div+css高手的话相信这个不难吧!

导读(内容太多了- -!):

第一部分,你可以去看看使用CSS的华丽效果,用table做不到的哦

第二部分,这是我自己的总结,比较片面,不过那个例子应该很好懂

第三部分,网上搜索到的总结,全面,我能看懂得部分加了点小备注

第一部分:

有一个网站叫CSS禅意花园(链接见参考资料,英文网站,点击select a design下面的超链接可以切换CSS),网站只有一个HTML页面,但是有几百个CSS文件,点击超链接可以切换该网页使用的CSS文件。切换了CSS后页面的样子完全变了,变成另外一个迥然不同的风格,文字的位置也全部发生了变化。你看了以后就知道DIV+CSS的好处了。。

如果像以前那样用table来排版,想要做出这种完全不同的风格你就只能重新写HTML。

第二部分:

从网页美工和网站维护人员的角度(因为我是做这个的- -!)来说,使用css:

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

举例:

假设你有100个页面,每个页面的风格都是一样的,里面都有10个表格。

如果你全部用html来做,就需要给所有的页面的表格里写表格的边框颜色、背景颜色、文字大小(假设这些外观代码要使用3行),那么你就要给1000个表格写这些东西(你就要写3000行。。)。这里面所有的外观设置都是重复的。以后你打算改变表格的风格,你就要改1000个表格。

但是如果你结合HTML和CSS来做,你就可以在每个页面上加上一句

<link href="table.css" rel="stylesheet" type="text/css"/>

然后在table.css这个文件里写上

table{

border:1px solid #ddd

background:#eee

font-size:12px

}

然后你这1000个表格就看起来都一样了。这里只需要写3行代码。

以后你要修改表格,只需要修改table.css里面的这3行代码。

第三部分:

从所有人的角度来说(这是我查到的。。),CSS的优点有:

1 缩减代码,提高页面浏览速度

2 结构清晰,对搜索引擎更加友好(貌似这就是楼上说的SEO)

3 支持各种浏览器,兼容性好(不同浏览器解析出来的样子一般是不一样的,一想到这个我就头大)

4 简单的修改,缩短修改时间(恩,这点我想到了)

5 强大的字体控制和排版能力(是的。。不需要一页一页去改字体,可以统统一起改,而且有行高、段前空白这些功能)

6 使用CSS可以结构化HTML,提高易用性

7 更好的扩展性(你可以在页面里引入多个CSS样式表,某个样式表是电脑专用,某个样式表是手机专用,某个样式表是打印的时候专用)

8 更灵活控制页面布局(表格控制布局就很死板啦,不能随便改来改去的)

9 内容和表现分离,干净利落(网页内容在HTML里,网页的样式内容在CSS里)

10 更方便搜索引擎收录,获得更高评价(貌似又跟SEO有关)

11 优化表结构

12 更快加载有图片的页面