(一)常用的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}
　　--〉

 　目前有一些空间无法设置二级域名，如果要设置二级域名是要钱的，所以只能做二级目录了。
　　何为二级目录？二级目录就是主站下的子目录，相当于在网站的根目录下再建立文件夹存放单独版块的内容，而这些文件夹就是二级目录，二级目录里必须存放有这些文件中的index.html、index.htm、index.php、index.asp、default.html、default.htm、default.asp、default.php等默首页，这样才是真正意义上的二级目录，也只有这些默认的首页才能继承首页权重的。
　　二级目录的好处：二级目录会继承首页的权重。如果你首页的权重很高，那么二级目录也会有不错的排名，利用二级目录来做一首页没做到的关键词排名也是一个不错的选择。当然要在符合用户需要的内容来做才是最主要的，不要胡乱增加二级目录。适当数量的二级目录可以为首页增加权重。
　　二级目录的用法：为每个版块都建立了一个文件夹单独存放该版块的内容，并且每个文件夹中都有index.html主页面，这个页面一定要好好利用，特别是title的描述，例如要做的关键词太多，而首页写不下，就可以考虑利用这些页的title来做首页做不完的关键词了。

  一个需要优化的网站，我们可以从以下四个方面进行优化分析：网站基础优化、网站内容优化、网站结构优化、外部链接优化。
　　一、网站基础优化
　　基础性优化即网站内容适合搜索引擎收录的一系列前期工作，现在已渐渐融入到网站开发的环节里，成为必须的工作内容，每个基础优化的细节对网站的影响都很小，但所有因素融合到一起就可以产生一定效果了。这些因素包括：
　　1、域名
　　(1)搜索引擎对域名的信任度依次为：gov、org、com、net、cn。
　　(2)域名的年龄对排名也有影响，一般来讲，域名年龄越大搜索引擎给予的权重越高。
　　(3)域名包含关键字会好一点点，比如你是卖壳牌润滑油的网站
 　2、title、meta、静态页、url命名、目录层级、html语义布局(div+css)
　　(1) title不要贪多，突出重点;
　　(2)meta的keywords已经不重要了，description的作用体现在百度的收录描述，吸引人的描述，点击的人就会多;
　　(3) 静态页的确更有利于收录，但不绝对;
　　(4) url的命名很重要，百度更喜欢拼音组合，google更喜欢英文组合，首字母的组合方式意义不大;
　　(5) 程序路径层级不要超过3级，
　　(6) html语义布局，即通过div+css实现结构和表现分离，用html的语义表现内容，比如h1代表一级标题，strong和em代表强调。
　　3、关键词密度
　　关键词密度没有严格的标准，合理即可。如果需要设置，建议密度：3-8%，4-5%也许更好，可以用关键词密度工具检查。
　　4、基础建站知识
　　服务器地址、域名解析、代理访问、独立IP、框架结构、iframe调入等，了解这些知识对网站的优化和运营会有所帮助，需要不断学习。
　　5、分析工具
　　关键词挖掘、搜索指数、关键词密度、网页相似度、关键词热度、浏览来源、Alexa排名、PR值、反链调查、网站收录数调查。
　　6、SEO的一些忌讳：隐藏文字、重点内容采用图片或flash或javascript、网页标题频繁更改、垃圾链接太多、关键词堆砌、过度采集、关键词选择失误、网站代码不简洁、网站主题与内容不符、和作弊网站在同一服务器上。

   大多数的企业在一开始建站的时候首先想到的就是网站的平面设计，也就是要大气，漂亮，所以很多网站优化建设公司会推荐使用flash增加网站动态感，所以现在 还可以看到有企业的首页就是一个flash的引导页面，内页是flash做的导航条，殊不知这样的设计对于网站的搜索引擎排名是相当不利的。
    当然对于做搜索竞价广告的客户，或者有的客户做网站的目的仅仅只是为了印在自己的公司名片上撑门面的，对于这些企业而言，搜索引擎的收录和排名好像都不需要去关注的。
    搜索引擎的竞价广告一般是出现在搜索结果的右侧的，很多企业就想到了是否可以让公司信息出现在搜索结果的左侧呢? 这样即可以减少点击广告的投入，同时还可以获得更多的点击流量。而这正是搜索引擎优化seo可以帮助企业实现的。新渠道接触到了很多类似的客户，但问题在于，对于已经有网站的客户，我们需要在客户原有的网站上去修改，这样操作虽然也可以达到最终的效果，但由于网站原来的架构设计，可能会给修改带来不便，不利于关键词的合理分布;再者也会耽误更长的时间，因为修改好了要再次等待搜索引擎更新网站资料;还有的可能因为网站大规模的改动，造成原有网站的排名暂时下降登风险。
新    渠道seo品牌服务机构建议：企业网站优化最好是从网站建设开始;也就是将seo的要素都融入到网站开发的过程中,北京月饼团购，为网站以后的搜索引擎优化营销打下良好的基础。

  近来总有客户会问起“你们能做alexa排名吗？”，听到这样的问题我真的很失望，都什么年代了，还有人会在考虑这样的问题，从话中我们不难看出还有很大一部分人，还是不明白网络营销的意义，所以才会在非核心问题上去大做文章花费精力或成本，我更痛恨那些什么都明白却又还在继续挣黑心钱的那些很多所谓的网络营销服务商或个人，客户不论是想选择怎样的服务，目的都是一样的，利用网络真正推广自己产品、服务直至品牌，但是为什么会把提高alexa排名作为这里面的一个重要指标呢?那些想做alexa排名的人是否知道alexa排名是由什么决定的呢？作google左侧的排名大家都好理解，为了更多的人搜索到，那alexa排名究竟说明什么，真的很有用吗?我们一起来看一下决定alexa排名的几个因素：
    1.alexa的网站排名是按照每个特定网站的被访问量进行排名的。访问量越大，越靠前。
    2.纳入统计的访问量仅来自使用alexa工具栏（alexa toolbar）的用户。也就是说，只有用户下载了alexa工具栏，并将其嵌入自己的浏览器。这样，该用户访问某个网站的话，访问的记录才能算作被访问网站的访问量。据alexa统计，现在使用该工具栏的用户达数百万。
    3.alexa工具栏仅在windows操作系统下，internet exploer浏览器中管用，使用其它操作系统或者浏览器的访问将不能被计数。
    4.遇到有安全保护或加密的站点（如使用https协议），alexa工具栏将自动关闭，因此那些安全系数高的网站，alexa将不能对其进行搜索和统计排名。
    5.受使用alexa工具栏用户的语言、地域、文化等各方面的影响。因此英文网站相对于其它语言的网站，访问量数据更容易被充分地统计。
    我相信大家看完后，都应该明白alexa排名能说明什么，我来总结，如果你的网站确实很好，那么alexa排名可能会不错，但是不是绝对的，反之 alexa排名不错的网站，也不能说网站就没有问题，因为提高网站流量的手段太多了，是不是有效的自然流量就不一定了，这一点其实跟pr值一样，他们都只是衡量网络营销效果的一些基本的参数，只是一个方面的评判标准。
    总之一个真正的好网站这两个指标经过一段时间的积累后，都会有所增加，会逐渐好起来，但是这两个值比较好的绝对不一定就是营销做得好的网站了，因为那些最让我痛恨的人在使用着各种各样的手段欺骗着机器更欺骗着客户，因为客户的无知，把目标定在了pr值、alexa排名提高上，等到这些都提高了，却发现业务没有得到更大的发展，所以客户失去了对网络的信任，导致现在的网络营销服务路上困难重重。
    归根结底，客户的无知加上那些不正当服务商破坏了正常的服务市场，导致现在的局面，我们的解决办法只有一个，用知识引导客户，教育客户，让客户理解真正的营销概念，用我们的服务成功案例告诉客户我们有能力帮助您成功，说大一点，还要靠所以业内人士的共同努力，一个大众认知的改变是需要一个过程的，坚持到底才能成功…