生活在西安的Seoer,很年轻!

CSS对SEO的影响

A:网站优化的第一步是先优化网站的代码,比如尽量使用DIC+CSS,少用表格嵌套!

B:为什么?

A:因为采用DIV+CSS代码的网页,更有利于搜索引擎的抓取,对搜索引擎比较友好!

B:那DIV+CSS为什么对搜索引擎友好?

A:因为¥%&……%&……%*

  在网站制作的整个过程中,对于网站采用什么样的结构,如何根据要实现的功能选择合适的语言,从一开始就做好代码优化,这些前期的决定显得尤其重要!那么为什么要采用DIV+CSS布局规范呢?相信这个问题有N种答案,每个人都有自己不同的看法:代码简单、利于维护、避免表格嵌套、保持整站视觉效果一致……那么对于SEO方面,DIV+CSS又有哪些优势呢?

一、首先我们要弄清楚什么是CSS

  CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。
二、采用DIV+CSS的网站对搜索引擎的影响

  1、代码精简

  采用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简带来的好处有两点:一是提高spider爬行效率,能在最短时间内爬行完整个页面,这样对收录质量有一定的好处;二是提由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定的好处。

  2、表格的嵌套问题

  很多站长认为,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实。经过业内人士的多次试验,没有得出完全的结果,但根据目前掌握的情况来看,spider爬行Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。使用table页面,为了达到一定的视觉效果,不得不套用多个表格。如果嵌套的表格中是核心内容,spider爬行是跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
  div+css布局基本上不会存在这样的问题,从技术角度来说,XHTML在控制样式时也不需要过多的嵌套。

  3、网页加载速度快

  DIV+CSS布局较table布局减少了页面代码,加载速度得到很到的提高,同时也减轻了服务器的压力,这在spider爬行是非常有利的。过多的页面代码可能造成爬行超时,spider就会认为这个页面无法访问,影响收录及权重。另一方面,真正的网站优化不只是为了追求收录、排名,快速的响应速度是提高用户体验的基础。

  4、整站维护简单

  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时,到css里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其它部分的布局样式。如果是采用表格嵌套,可以想象一下维护人员的工作量。

  5、保持整站视觉效果一致

  DIV+CSS最重要的优势之一 :保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有的页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。

  6、对排名的影响

  对于XHTML标准的DIV+CSS布局,一般在设计完成后会尽可能完善到能通过W3C验证,与普通table表格组成页面的网站相比,使用XTML架构的网站排名状况一般都要好些。    

首发于楚亚鹏西安SEO博客:http://www.chuyapeng.com(转载请保留)

关于网站重构

  首先,我们要明白什么是网站重构,简单地说就是网页开发工程师通过在HTML中使用结构化的标记以及用CSS控制页面表现,使页面的实际内容与它们呈现的格式相分离。

那么为什么要对网站进行重构呢?

  1、页面加载速度更快

  2、整站后期维护时更加简单方便

  3、整个网站可以保持视觉一致性

  4、更利于搜索引擎的检索(符合SEO的规范)

  5、符合W3C标准,提高网站竞争力

对网站重构需要哪些知识

  1、策划人员必须提出网页的结构

  2、网页设计师需要根据网页的结构和内容设计出独具特色的网页PSD图

  3、前端开发工程师把PSD图转换成DIV+CSS

  4、动态页嵌套

  5、整站优化

  6、后期推广维护

  网站重构不是一种技术,不是css+div,更不是标准,网站重构是一种思想,是一种理念,一种艺术。重构网站先重构人,重构理念,不能只追求技术,追求还原设计稿,追求浏览器的兼容性,重要的是基础和理念。当真正了解什么是网站重构的时候网站重构也就真正开始了。

首发于西安SEO,转载请标明地址:http://www.chuyapeng.com(转载请保留)

DIV+CSS初学者必须要理解的实质

  DIV+CSS是什么意思?实质是什么?DIV+CSS的优势何在?新手学习div+css,该如何入门?使用什么软件来布局页面和编辑css呢?能不能提供几个实例具体讲解一下怎么来实现?等等诸如此类的问题,是新手们最常问的。回答这些问题,也是仁者见仁,智者见智了。不过从严格的角度来讲,div+css的叫法是不对,只不过像我们这些菜鸟级的都这样叫,习惯了而已。

  1、那么DIV+CSS是什么意思呢?实质是什么?

  要弄懂这个意思,首先你要对网页有一定了解,对和div相对的table布局有很好的认识,这样理解起来就不难了。

  DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。用div盒模型结构给各部分内容划分到不同的区块,然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。

  CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。在我们用table布局时,都曾接触和应用到css。

  DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

  简单地说,div 用于搭建网站结构(框架)、css 用于创建网站表现(样式/美化),实质即使用XHTML对网站进行标准化重构,使用CSS将表现与内容分离,便于网站维护,简化html页面代码,可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。

  当然不是所有的网页都需要用div布局,例如数据页面、报表之类的页面的时候还是会用table,web 标准里并没有说要摒弃table。所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。

  2、DIV+CSS的优势何在?

  1:表现和内容相分离

  将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。符合W3C标准,微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
 
  2:提高搜索引擎对网页的索引效率

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

  3:代码简洁,提高页面浏览速度

  对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,代码更加简洁,前者一般只有后者的1/2大小。对于一个大型网站来说,可以节省大量带宽。并且支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。

  4:易于维护和改版

  样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。

  3、新手学习div+css,该如何入门?

  学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法!要想学好网页标准化布局,要先摈弃传统的table布局时形成的固定思维方式,用div布局,从内容出发。而且必须要对html标签有很好的认识,起码见了要知道它怎么用,干什么的。因为一个样式它是不可能脱离HTML页面的,HTML不与样式结合的话, CSS就失去了存在的意义。接下来就是css了,必须能写出常用css的样式。

  学习方式可以从网上找现在的教程或资料学,另外推荐几本书:《CSS权威指南》《网站重构》《网站布局实录》《HTML参考大全》。阅读一本书,一般来说第一次要先把整个书通读一遍,不理解的也要往下看,在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象,但一定有很多不明白的地方,没关系,继续往下看。第二遍你就要边看边做学习笔记了,把你认为是重点的部分写上,还有,你觉得有疑问的部分也要记下,带着疑问看下去,如果没有答案,你可以去BBS上发一个贴子,好心人还是很多的,提示一句:“一定要学会如何去问问题!” 。你还要上机去练习书上的例子,最让你困惑的:“一是记不住,二是对概念的理解有误(这一条可能是书译的不好,另外就是你的理解不对)”,对于第一条你就要树立信心,坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了,努力了就会有回报,有结果。

  4、使用什么软件来布局页面和编辑css呢?

  关于这个问题,只要已经能达到会手写的程度,用什么软件都可以,比如记事本。对于新手来说推荐使用DreamWeaver、微软出的FrontPage的替代品Microsoft Expression Web或TopStyle。

Div+css学习心得

接触Div+css时间也不短了,本来想总结一下,下午看见一位从TABLE转型到Div+css的作者写的一篇文章,很详细,基本是每个初学者都必须要走过的,很精辟,就转了过来!

  很多从table布局转型到DIV+CSS布局的同行们都很不习惯,大部分人还是坚信:我为什么要转型,table布局不是照样能写页面?

  我并不想反驳,因为table布局也有自己的好处,起码可以节省开发时间(如果你table布局比较熟练的话)。但如果你选择了DIV+CSS那么你就不要用table的思想来布局。

  我碰到过许多用table布局思想的人来写DIV+CSS,总结以下几点

1.没有语意

  a.图片语意。

  使用DIV+CSS的时候你要明白,什么是装饰图,什么是内容图,例如BANNER、产品图片,这些是想要给用户看的,属于内容图,那么你就要用<img>标签来引用它,并且加上alt属性,这样你的图片就可以被搜索引擎收录了。例如一些修饰性的圆角,背景,那么你就要用容器的CSS背景background来做。

  许多table布局思想的人做的页面都会多出如:圆角图片、一个透明的1px gif图片等等,这些尽量不要出现,会增加页面的HTTP请求,增加服务器负担。

  所以这里我要强调,当你使用背景的时候,尽量把图片切入一张图中,使用background-position来定位显示的位置,这个很重要,几乎所有门户网站都这样做了,例如新浪的背景图片:新浪首页背景图新浪背景图,这里提供一个关键词:css sprites。

  b.标签语意。

  许多人刚写DIV+CSS的时候都会犯个错误,那就是滥用DIV,你会发现他的页面只有DIV,或许就UL、li、A。

  标签语意在搜索引擎中让你的网站的排名靠前起到很重要的作用,如标题使用h1\h2\h3\h4\h5\h6,无序列表使用ul\li,有序列表ol\li,当然你也可以使用dl,dt(标题),dd(内容)来写,等等,xhtml提供了很多的标签,每种标签都有语意。

  这里有篇关于标签语意的表格,供大家参考:HTML语意规范

2.嵌套错误

  这里要批评下百度知道http://zhidao.baidu.com/browse/74 头部列表是个table,当然这样做并没有什么问题,但是它在td中嵌套了一个li,这是个嵌套错误,li只能存在于ul/ol下,显然百度并不会故意去犯这样的错误,因为在IE6/7下浮动的li的项目符号会无法显示,这个BUG一直令我费解,这也可能是百度的无奈之举吧。

  而往往初学者更多的是a里面有div ,span里有ul这样。

  这里有篇关于嵌套规则的相关文章:HTML嵌套规则

3.浏览器兼容

  当别人发我一个网站的时候,我都会用火狐去打开它,一是可以看它的兼容性,二是可以用firebug看其代码是否语意,如果有漂亮的图片也可以直接拿下来用。

浏览器兼容性应该是DIV+CSS最重要的,有人说,火狐用户量这么少,直接可以无视了,IE的用户群多么庞大云云,这些话都是扯淡!

  火狐是标准浏览器,IE6、IE7是不标准的,独立的,且用户群庞大的存在。而标准浏览器有哪些呢:chrome(谷歌浏览器)、safari(MAC)、opera、甚至IE8!当你的页面在火狐下调试通过后,其他浏览器基本不会出现什么大的问题,而IE6、IE7下可能是乱七八糟的。

  这里我推荐新人用IE6当主测,因为IE6存在着许许多多莫名其妙的BUG,边写边测,就可以尽量避免这些BUG,例如双倍MARGIN,而火狐下出现的不兼容往往都是没有清除浮动造成的。

原文出处:http://blog.sina.com.cn/s/blog_5d35f3070100czoc.html

DIV+CSS初学者应该注意的几个问题

  作为DIV+CSS初学者,如果在动手写代码之前对网页整体结构由一个清晰认识的话,写起来会事半功倍!但是,写的过程中总是有这样那样的问题,使得我们不得不停下来去查找资料,弄清属性定义等等!

其实有很多方法可以在提高我效率的同时让我们对DIC+CSS有更深刻的理解!下面我们列举几点:

一、CSS命名规范:
1、文件命名规范

  全局样式:global.css;
  框架布局:layout.css;
  字体样式:font.css;
  链接样式:link.css;
  打印样式:print.css;

2、常用类/ID命名规范

  页 眉:header
  内 容:content
  容 器:container
  页 脚:footer
  版 权:copyright 
  导 航:menu
  主导航:mainMenu
  子导航:subMenu
  标 志:logo
  标 语:banner
  标 题:title
  侧边栏:sidebar
  图 标:Icon
  注 释:note
  搜 索:search
  按 钮:btn
  登 录:login
  链 接:link
  信息框:manage
  ……

二、处理浏览器BUG问题,关于这点,不知那位高人把CSS BUG变成顺口溜了!在这里引用一下,很容易记住的!

  一、IE边框若显若无,须注意,定是高度设置已忘记;

  二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

  三、三像素文本慢移不必慌,高度设置帮你忙;

  四、兼容各个浏览须注意,默认设置行高可能是杀手;

  五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

  六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

  七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

  八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

  九、IE浮动双边距,请用display:inline拘。

  十、列表横向排版,列表代码须紧靠,空隙自消须铭记。
  DIC+CSS学习是一条很长的路,真正走下去必须要有一颗虔诚的新心!

第一个DIV+CSS作品完成

第一个Div+Css第一个作品,写的比较粗糙,很多细节处理不是很到位,代码可读性有待进一步加强!很多东西只有自己去做,才能更深刻的理解!

总结一下:

1、 还是那句话,思想决定层次,一个好的网页整体架构思想比看一步写一步效率高的多。

2、不断学习新东西,DIV+CSS学习其实是一种思想,只有不断改变思想、接受新东西,才能不断提高自己!

再次感谢阿泽ThinkerPan一直以来的支持和指导!

返回顶部