XHTML+CSS布局模式因其表现和内容相分离，提高搜索引擎对网页的索引效率，代码简洁、提高页面浏览速度，易于维护和改版等众多优点而在广泛地被人们所接受。以下笔者结合手机商务类网站，对XHTML+CSS布局中兼顾SEO进行一些总结，希望能给站长同仁一些有益的参考。
　　一、做好网页的架构分析工作，是设计好网页的前提
　　一个拥有高访问量的网站是成功网站的一个衡量因素，我们在设计网页时要根据主题的不同进行合理的板式选择和色彩配，将网站要达到的宣传效应通过合理搭配而构成的美丽页面来吸引客户的兴趣，促使他们来访问我们的网站。
　　第一，分析页面板式架构
　　“手机商务网站”主要以网上宣传新款手机和销售为主，这种类型网站的特点就是主要让人感觉到商品丰富而又美丽大方此在选择色彩是主要以蓝色、绿色为主，小图标、小按钮、边框线等点缀小图形以红、橙为主，显得页面绚丽多彩、活泼、大方，视觉冲击力较强;另外，“手机商务网站”主页面主要包括网站BANNER、导航栏、站内搜索、新产品图片宣传、最新新闻、网站服务、产品信息、版权信息等。
　　第二，分析页面排版架构
　　整个网页的框架比较简单，包括Banner图片、导航条、搜索栏、页面主体及版权信息等。因此，采用了基本的网页框架结构。清晰准确的架构设计是下一步布局的基础和关键。
　　第三，依据XHTML+CSS布局网页的模式特点实现页面各模块的制作，凸显布局优势
　　页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一整合，这是设计制作网站的通常步骤，养成良好的设计习惯便可熟能生巧。
　　1、利用DIV标记对页面进行分块，确定好各块以及子块之间的关系依据前边分析的排版结构对页面进行分块，另外制作过程注意利用注释语句，以便让页面代码清晰、易读。
　　2、定义CSS样式实现对各块效果的设计与美化
　　页面各模块划分好之后，接下来就是定义CSS样式对其进行定位和美化工作了，具体操作之前先做好整个网站的样式分析与规划工作，这是有效使用CSS样式表的前提。
　　1)对整个网站中要用到的CSS样式表进行统一规划。从网站效果一致性原则出发，对整个网站的样式进行系统的分析和规划，详细罗列各样式的名称和样式内容。特别要善用属性简写，尽可能地减少冗余代码，例如：
　　margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以写成这样的格式：margin:0 10px。
　　2)统一规划CSS样式的应用范围。对网站中各个页面都要使用的样式效果(例：各页面中的普通文本信息采用统一的大小、字体、行高、颜色等)统一定义在外部样式表文件中，方便各页面的调用，而对某个页面中要单独使用的效果则以内嵌式样式表的形式直接在相应页面中进行定义。
　　3)基于SEO的样式命名规范
　　搜索引擎是通过抓取网站源代码来进行亲密接触的，如何才能更好地让搜索引擎的爬虫更快更准确地觉察到网站内容的相关性，增强网站的搜索优化?可能从最基本的命名规则入手会有意想不到的收获，下面从前端设计的角度整理了一些常用的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做到让搜索引擎明白，从而达到我们的设计目标。
　　3、对页面效果进行整体调整，保证页面的协调和美观
　　经过上边的步骤页面已经基本成形，在制作完成的最后，往往还需要对页面根据效果做一些细节上的调整。例如各个块之间的Padding和Margin的值是否与整体页面协调，各个子块之间是否协调统一等等。另外对于固定宽度且居中的板式，需要考虑给页面添加背景，以适合大显示器的用户使用等。
　　二、考虑浏览器兼容处理，保障不同的用户查看到最好的页面效果
　　在设计网页时，经常碰到在IE中制作的页面换到Firefox预览时，发现页面效果变化很大。针对这样的问题，我们在设计网页时就要进行相应的处理。常用的方法有：从空白页面开始，每做一小步，就同时在各种浏览器中查看，一旦发现显示效果不同，立即查找原因，寻找解决办法;也可以通过软件工具模拟网页在各种不同的浏览器中的效果，例如目前大家用的IETester v0.2.3，这样可以边做边修改;另外，大家在制作过程中要善于总结一些经常出问题的标记的处理办法。例如：边界重合时利用padding或border来避免。您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来，如果您有用到margin，那么很容易产生边界的重合。又如有时候某些错误会使50%+50%成为100.1%，使网页出现问题，这时请尝试将这些值改为49%，甚至49.9%，往往这样的做法才解决了问题等等。

 　网站优化，内部布局很关键的环节，其流程：定位-选择合适的程序-内容的多少选择网站的结构-站内的每个功能利用seo元素，所以重点在于思路，站内优化应当由网站结构，站内链接出发思考。

一、网站结构

1、扁平式

这种结构比较合适内容比较少的网站，比如：博客、企业站等等，很多做单页优化，基本都是扁平式结构，有利于搜索引擎蜘蛛的抓取和收录。内容比较多的网站因为内容比较多，把网页生成静态在根目录下会很乱，同时也不好维护。

　　2、垂直式

 　主页是网站的门面，需要每个站长精心的进行设计，获得搜索引擎及用户的喜爱，完成我们与用户和搜索引擎的完美恋爱(seo的需求，现实中本人倡导专一的爱情观)。下面我来讲讲怎样通过爱情观实现网站主页的布局优化。

　　1、以貌取人型布局技巧

现实中第一印象很重要，互联网上亦是如此。因为seo的根本是用户体验，在网站上停留时间的长短就说明了用户对网站喜爱程度的高低，拥有完美的页面能吸引用户的眼球，所以现在的网站在追求内容的同时还在为网站的整体做着美容，请了很多的网站美容师即美工，足见网站美化的重要程度。我们从另一方面想其 实原因很简单，美观的网站布局显得网站专业正规，能给用户带来安全感，不会过于担心网站上挂了木马等 危险程序，用户可放心浏览。

 　大家好，今天给大家分享的是主页布局与网站排名的的关系，在写这篇文章的时候，思考了很久，到底该怎么下笔，写文章嘛，应该要有一个清晰的思路，才好下笔。在说主页布局与网站排名的关系之前，先要讲一下主页布局有哪些技巧以及有哪些需要注意的。

一、首页的头部布局

网站首页的头部布局，是很重要的，这里说的布局，有点过了，应该说是头部的设置，头部设置主要有三大块：

1、title(标题)设置，如果你的网站想要在搜索引擎上有好的排名，那么你的标题就要写的符合搜索引擎的标准，一般不超过25个字以内，也就是50个字符，但不是说写多了不可以，只是在搜索引擎上显示不全，那这个和写没写又有什么区别呢?

 (一)常用的CSS命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

     应用Div+CSS网页布局，制作符合web标准的网站，容易出现的一些问题。

        现在总结一下，以便大家能够看到明白问题出在那里。

        一、CSS校验的问题

        我们设计的网页，都希望符合XHTML标准，CSS通过W3C的校验。有些未通过CSS2.0校验，主要校验错误都是:“Line : 0 font-family: 建议你指定一个种类族科作为最后的选择”

 　我们公司很多客户不知道div+css布局网站有什么好处，所以也随便我们怎么来布局了，现在还有很多企业停留在table布局网页上面，TABLE对于传统企业来说，快捷，方便，但对于现在热门的百度和谷歌来说，TABLE不再是优势，我们今天都用着DIV+CSS来给客户布局网站。那div+css布局网站到底有哪些优势呢?

1、div开发出来的网站，网页文件很小，这是因为css的原因，如果您网站用div的话，你很多图片代码就放在css样式表里面，这样加载起首页就非常快，网站打开速度也就快了。

 　为什么我会写这篇文章呢，其实自己在学习div+css的时候没太多去看前人的经验，只是看了书了盲目的实践,能够把布局布出来就感觉自己真的学会了div+css布局,其实很久之前就要写的了，一直没有时间，今天拿出来跟大家分享下如果避免走误区。

自己在开发css也半年多了,其实div+css的真实名字叫XHTML+CSS，为了方便跟html区别我将写成div+css，自己刚开始写css的时候也是跟一些刚学的同学一样，感觉table比div快，在网页上随便拉拉几个框加上图片出OK了，但是如果你真的学习了div+css后你就会觉得它的好处和方便了，下面说入正题，我今天所说的误区就是选择对的游览器将是对你学习div+css的一个转折点。

    CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。利用层叠样式表 (CSS)，级别 3 (CSS3) 和 Internet Explorer 9，只需少量几个标记，您就可以创建外观非常吸引人的按钮。 本主题演示如何完全利用 层叠样式表 (CSS) 将 简单的超链接转换为时髦的按钮。
　　本主题包括以下 CSS3 功能：
　　1、使用 border-radius 属性的圆角
　　2、使用 box-shadow 属性的阴影
　　3、RGBA 颜色值
　　本主题还包括首次在 Windows Internet Explorer 8 中引入的以下功能：
　　1、数据 统一资源标识符 (URI)
　　2、透明 可移植网络图形 (PNG)
　　起点
　　在本主题中，我们使用如何使用 CSS3 添加圆角框中的同一咖啡公司示例。 我们会将棕色订单信息水平栏中每个产品描述后的“Order Now!”超链接变成一个按钮。 该订单信息栏当前如下所示：　
　　此规则由以下类选择器定义：
 
　　.product_orderinfo {

  随着互联网经济的不断发展，互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长，各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量，我们对网页中每一个栏目的增删，都会是一个很复杂的过程。为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观，而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会。
　　1、在一个网页中同时调用CSS的多种引入方式
　　在HTML中引入CSS的方式很多，例如直接插入式，使用链接外部样式表，使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问，这些引入方式能不能同时在一个网页中被调用，它们之间会不会产生混乱?其实，我们大可不必这么担心，这就是它为什么称之为“层叠样式表”的原因，浏览器在处理网页中的样式表是按照一定的顺序来处理的，首先检查页面中是否有直接插入式CSS，如果存在就先执行它，针对本句的其它CSS就不去管它了;接着检查网页源代码中的"STYLE"标记，有就执行了;接下来再依次检查执行"@import"导入的内部样式表和链接的外部样式表。因此，我们完全可以在一个网页中同时调用CSS的多种引入方式。
　　2、快速创建CSS外连式文件
　　对于一个初接触CSS的网页设计人员来讲，要用写字板之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：首先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver的编辑窗中调出 CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改;全部定义好后，再用记事本创建一个空的CSS 外连式文件，把在〈 head 〉与〈 /head 〉之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。
　　3、让背景图案静止不动
　　当网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时一般图象和文字是一起移动的，那么我们有没有办法使背景图象不随文字一起 “滚动”呢?利用CSS就可以实现这样的目的，我们只要把下面这段源代码直接放在网页的与标签之间就可以了，其中bg.jpg就是网页中的背景图象，大家可以把它换成自己需要的背景图象：
　　Example Source Code
　　〈 style type="text/css" 〉
　　〈!--
　　BODY { background: purple url(bg.jpg);
　　background-repeat:repeat-y;
　　background-attachment:fixed
　　}
　　--〉
　　〈 /style 〉
　　4、让网页自动进行“首行缩进”
　　用DreamWeaver来设计网页的用户知道，在DreamWeaver中输入空格不是那么的方便，我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框(Style Definition for .style1)，在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置 “首行缩进”功能，在这里要注意的是，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：
　　Example Source Code
　　〈 style type="text/css" 〉
　　〈!--
　　.style1 { text-indent: 2em}
　　--〉
　　〈 /styl e 〉
　　5、巧用css来设定文字的背景
　　在DreamWeaver中，如果我们需要给文字加上不同的背景颜色时，操作上很简单，只要用鼠标单击属性面板上的文字颜色按钮，从弹出的颜色设置栏中选择需要的颜色就可以了。但如果我们要给部分文字加不同的背景色，该怎么操作呢?由于DreamWeaver3中没有这方面的功能，但我们可以巧妙利用 css来实现这样的目的。具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为bjstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码：
　　Example Source Code [
　　〈 style type="text/css" 〉
　　〈!--
　　.bjstyle { background: #cc00bb}
　　--〉
　　〈 /style 〉
　　6、给指定内容加边框
　　在DreamWeaver中，我们可以利用CSS强大的定义功能来给某部分内容加边框，定义时首先打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框(Style Definition for .style1)，该对话框的“Border”设置项就是用来定义指定内容边框线的，其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的，这些设置项设置好后还需要在下面的“Style”中定义线型，否则我们将看不到定义的边框线，因为 css默认的线型是“none”。下面是一个定义了上边框为：蓝色细线;左边框为：绿色中粗线的CSS源代码：
　　Example Source Code
　　〈 style type="text/css" 〉
　　〈 !--
　　.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
　　--〉
　　〈 /style 〉
　　7、用样式表来控制超级链接的颜色
　　如果你仔细研究一下超级链接，你就会发现，浏览器处理超级链接的默认方式是，对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的，对于已经访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间，可能就产生厌倦之感，并且很有可能与自己网页的背景颜色不协调。因此我们完全可以按照自己的视觉要求，来自由更改超级链接的显示颜色，让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代码，代码如下：
　　我们可以把这段源代码添加在HTML文件的……之间，它可以对对本网页中的任何一个超级链接都起作用，其中这段代码中的：
　　A:link {text-decoration: none; color:blue}是说明了超级链接还没有被访问，它没有下划线，颜色为蓝色。
　　A:visited { color:red; text-decoration:line-through }说明了超级链接被访问后，它的颜色变成了红色，有了一根删除线。
　　A:active { color:white; text-decoration:underline }说明超级链接处于活动状态的时候，它的颜色变成了白色，有了下划线。
　　A:hover {text-decoration:none;color:#FF0000;background-color:black}说明鼠标移动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。
　　根据上面的解释，我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种，以便能更好地展示自己的个性。
　　〈 style type="text/css" 〉
　　〈!--
　　.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
　　--〉