制定搜索引擎喜欢的网站标签

• 标题（Title）的设计
  • 标题一般只放置1-2个关键词;
  • 不要超过25个汉字，50个英文字母;
  • 越核心的关键词排放位置越靠前;
  • 不要有特殊标点符号;
  • 每个页面不要雷同;

• 描述（Description）的设计
  • 只放4个关键词为佳;
  • 不要超过100个文字、200个英文字母;
  • 不要有特殊标点符号;
  • 融入更多的长尾关键词;
  • 每个页面不要雷同;
• 关键词（Keywords）的设计
  • 关键词不超过5个;
  • 越核心的关键词排放位置越靠前;
  • 每个页面的关键词不同;

制定搜索引擎喜欢的网站构架

• W3C标准对SEO的影响
  • 尽可能多的符合w3c标准(没必要完全通过W3C验证，无形中增加了制作成本以及后期的维护成本);
  • 为图片添加ALT属性，帮助搜索引擎理解图片信息，优化用户体验，避免在用户禁用网页图片加载以及带宽原因造成的图片未能正常显示等问题;
  • 加载的图片符合当前所需的大小尺度标准，避免小图片大加载的问题，节省带宽资源，提升浏览速度;
  • … …
• XHTML+CSS对SEO的影响
  • 用xhtml+css重构传统的table表格布局，(对于代码沉余、嵌套繁琐的table布局通常会robot选择绕行);
  • 标签语义化，简化代码，提升网页打开速度;
  • 优化页面布局，从SEO的角度进行页面布局优化，将页面主内容优先呈现在文档的上方，让搜索引擎更容易抓取内文，模块分布原则main、sub、 extra;
  • 不在页面中使用iframe框架
  • … …
• 静态化页面对SEO的影响
  • 考虑到有时动态页面的参数机制不利于搜索引擎收录，而静态页面更容易收录;
• 目录级别对SEO的影响
  • 目录级别嵌套原则上不超过3层;
  • 目录级别结构上不出现重复的关键词;
• 目录文件名对SEO的影响
  • 目录文件命名，使用符合语义的命名方式；
  • 对于目录文件中出现的关键词组，可以使用”-”或”_”以及”%20″，这里考虑到GOOGLE的原因(GOOGLE将”_”两端的两个关键词会理解为一个词汇)，因此我们采用”-”来连接关键词组
• 网页大小对SEO的影响
  • 网页的大小一般不超过30K;
• 添加使用robots.txt
  • 在根目录下创建robots.txt文件， 默认允许所有robot访问;
  • 避免搜索蜘蛛来寻找并不存在的robots.txt文件时，服务器也将在日志中记录一条404错误;
  • 相应的sitemap可以添加进去;
  • 对robot屏蔽程序目录文件夹;

这是总宽950像素的24栏栅格应用，先来看下淘宝网的一处3栏布局(当然现在的淘宝网已经改版了，尽管我还是不太习惯)：

这里是对应的代码：

我们可以看到 class=”grid-c3-s5e7″ 这个命名似乎有些特别，
再看看其包含的class=”col-main” 和 class=”col-sub” 以及 class=”col-extra skin-orange”

再多一些样本代码：

.grid-c, .grid-c2-s4, .grid-c2-s4f, .grid-c2, .grid-c2f, .grid-c2-s6, .grid-c2-s6f, .grid-c2-s7, .grid-c2-s7f, .grid-c2-s8, .grid-c2-s8f, .grid-c2-s9, .grid-c2-s9f, .grid-c2-s10, .grid-c2-s10f, .grid-c2-s11, .grid-c2-s11f, .grid-c2-s12, .grid-c2-s12f, .grid-c3, .grid-c3f, .grid-c3e, .grid-c3d, .grid-c3c, .grid-c3b, .grid-c3-s5e7, .grid-c3-s5e7f, .grid-c3-s5e7e, .grid-c3-s5e7d, .grid-c3-s5e7c, .grid-c3-s5e7b, .grid-c3-s9e6, .grid-c3-s9e6f, .grid-c3-s9e6e, .grid-c3-s9e6d, .grid-c3-s9e6c, .grid-c3-s9e6b, .grid-c3-s8e8, .main-wrap, .col-sub, .col-extra {
}

我们选择其中一个来仔细看下可以尝试着作出这样的解释：

上图中 s5e7 里的 5 和 7 代表的是在 24栏 中所占的栏数。

如下这样更方便我们进行模块化操作：

.grid-c3 {}
.grid-c3-s5e7 {}
.grid-c3-s5e7 col-main {}
.grid-c3-s5e7 col-sub {}
.grid-c3-s5e7 col-extra {}

.grid-c2 {}
.grid-c2-s7f {}
.grid-c2-s7f col-main {}
.grid-c2-s7f col-sub {}

稍微注意下你会发现 上例中我只提到了 s, e 的解释，并没有对 f, b, d 做出解释，因为我觉得原理我们已经掌握，f b d 只是淘宝因内容区域不同而采取的命名方法(应该可以这样理解)。
可以看出 -s5e7 , -s7f , -s5e7d , -s5e7b , -s9e6c 之类的就显得不太符合语义化命名，只是为了让我们更方便的使用，我这个人喜欢简洁些的风格，因此在这里我对它进行了升级。

下面看下整合出属于自己的栅栏布局命名，我把这些用在公司的项目上，来看下我的命名方法：

(三栏页面栅格布局-例：部分列表页) Grid-c3-c6e5

class=”grid-c3-w13c6e5″ 完整版
class=”grid-c3-c6e5″ 简洁版

注意这里的数字和上图中的数字进行对比，你会发现我省掉了w13即最宽的那一栏main（通常最宽的为main），
我将c 和 e这样除了main之外的窄栏通常固定宽度， main的宽度则为width:100%; 具体实现如下：

假设最外层的div 为 <div class=”content”>
.content {
 position:relative;
 width:总宽减窄栏的宽度;
 padding-left&right:窄栏的宽度;
}

窄栏浮动，main 绝对定位
.main {
 position:absolute;
 top:xx;
 left&right:窄栏的宽度;
}

先作下简单的说明，这里与淘宝网命名不同的是我没有采取 s（sub）和 e (extra) 这样的习惯，
而是用到了 w(west), c(center), e(east)
我将网页上的方位分为上北下南左西右东
不使用 l (left) 等上下左右表示是因为在如宋体等字体下 left 里的 l 与数字1 很容易造成混乱。

下面是一系列方位栅栏模块化命名例如：

(两栏页面栅格布局-例：首页) Grid-c2-e5

(两栏页面栅格布局-例：商品详细页) Grid-c2-w6

(两栏页面栅格布局-例：注册流程页) Grid-c2-e7

方案一：(三栏页面栅格布局-例：部分列表页) Grid-c3-c6e5

方案二：(三栏页面栅格布局-例：部分列表页) Grid-c3-c7e5

(三栏页面栅格布局-例：商城主页、个人空间预览页) Grid-c3-w6e5

(三栏页面栅格布局-例：个人空间管理页) Grid-c3-w5e6

以上命名都是由class=”grid-c3-w5c13e6″ 这类的完整版去掉main栏目(即最宽的一栏)
简化到class=”grid-c3-w5e6″ 这类简洁版(很快可以猜出-w5e6所对应的宽栏位c13，即左边占24-5-6=13a的main)，
不想用上面的方法为main定width:100%;

.grid-c3-c6e5 .main{ width:13a;}
.grid-c3-c6e5 .sidebar { width:5a;}
.grid-c3-c6e5 .service { width:6a;}

.grid-c3-c6e5的名字看起来蛮长的,考虑过去掉.grid-c3-c6e5中的 grid 这个单词，但似乎不太方便阅读，况且后面会出现 .mode-a , .mode-b 之类的模块命名，统一下会更好；
这里的命名习惯建议使用的表意命名《超越CSS》有提到过。

可以看到简洁版的只有3个字母出现 w (west), c (center), e (east)
不用记太多的字母含义，grid-c3-c6e5这样的命名方法让我们更好的对栅格化布局进行操作。

博客园观点：http://www.cnblogs.com/cnpass/archive/2009/05/07/cnpass.html
经典论坛观点：http://bbs.blueidea.com/thread-2926561-1-1.html

PS：一些事情是不会停止的，现在自己再看到这些内容，发现存在很多不足，还好是浅析，标记到这里

【第一步】

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

·TTF或.OTF，适用于Firefox 3.5、Safari、Opera
·EOT，适用于Internet Explorer 4.0+
·SVG，适用于Chrome、IPhone

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel提供的在线字体转换服务获取。它允许我们选择需要的字符生成字体文件（在服务的最后一个选项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。

【第二步】

获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。

字体声明如下：

@font-face {
font-family: ‘fontNameRegular’;
src: url(‘fontName.eot’);
src: local(‘fontName Regular’),
local(‘fontName’),
url(‘fontName.woff’) format(‘woff’),
url(‘fontName.ttf’) format(‘truetype’)
,
url(‘fontName.svg#fontName’) format(’svg’);
}
/*其中fontName替换为你的字体名称*/

在页面中需要的地方使用该字体：

p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}

这样就成功了，大家可以试一试。

如果你的站点使用的是新版Google跟踪码，如下面这段：

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12547002-1");
pageTracker._trackPageview();
} catch(err) {}</script>

那么可在被统计的链接上作出如下添加：

<a href=”http://wordpress.org/” onClick=”javascript:pageTracker._trackPageview (’/outgoing/wordpress.org’);”>

这里统计有多少次从这个链接跳出

<a href=”http://www.uecss.com/example.rar” onClick=”javascript:pageTracker._trackPageview (’/download/example.rar’);”>example.rar</a>

统计example.rar压缩包的下载次数，类似的PDF、ZIP等格式都可以。

如果你的站点使用的是旧版Google跟踪码，如下面这段：

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script><script type=”text/javascript”>try {_uacct = “UA-12547002-1″;urchinTracker();} catch(err) {}</script>

那么可在被统计的连接上作出如下添加：

<a href=”http://wordpress.org/” onClick=”javascript:urchinTracker (’/outgoing/wordpress.org’);”>

这里统计有多少次从这个链接跳出

<a href=”http://www.uecss.com/example.rar” onClick=”javascript:urchinTracker (’/download/example.rar’);”>example.rar</a>

统计example.rar压缩包的下载次数，类似的PDF、ZIP等格式都可以。

当然我们也可以吧英文的分类命名换成中文的命名，便于我们统计。 最简单、最重要、最容易忽视的一点：我们要把之前添加在</body>标签之前的跟踪码放在被统计的链接前面，怕漏掉的话就干脆放到<body>标签后面好了，尽管性能上会做出点牺牲。

另：关于Google Analytics设置当天查询的方法一直没找到，如果你有知道，欢迎告知我，这里先谢谢了

此篇只为Cherry，我的好朋友。

附上官方下载地址：点击这里进入下载页面

目录建立的原则

• 以最少的层次提供最清晰简便的访问结构
• 基本的文件我们用这些文件夹将其归类划分 [ css ] 、 [ images ] 、[ script ] 、[ fla ]

• 确保整个文件树的简洁有序，命名尽量采用简短英文，尽量避免简写、缩写，一律小写
• html 文档的扩张名均以 .html 结尾
• 每个栏目首页以栏目名命名

例如，积分商城下的首页 shop/shop.html

• 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔

例如，news_01.html

开发环境的统一

• 统一文档类型
  • HTML编码类型采用目前主流的 XHTML 1.0 Transitional 格式
  • 尽量采用国际通用的 utf-8 编码格式
• 避免因开发工具的不同所造成的差异
  • 编写前应事先声明开发工具
  • 避免因工具不同Tab键造成的缩进程度不同，统一使用4个空格位的缩进度
  • 避免过分缩进(一些常见的编辑器会对 <html> 标签下的 <body> 进行缩进)

CSS样式文档组织结构

通过合理有效的组织样式文档结构，控制样式文档的优雅降级，使得网站能更好的符合浏览器的解析要求，同时方便日后的维护工作。

基础样式 （base.css）//加载给所有页面最基础的样式

模块样式 （module.css）//同类页面及相似页面的共同样式

页面级样式 （list.css 、member.css 、shop.css 、service.css）

所有独立页面使用自己独有的样式文件，命名以页面功能或所在模块为基准

• 首页 的样式文档组织结构，如下：

//结合首页的特性，仅加载了base.css 和 home.css，文档home.css用来给予首页的独有的样式。

• 产品专区系列&列表页 的样式文档组织结构，如下：

//通过给product&list（产品专区系列&列表页）页面加载list.css样式文档，来提供给此系列独有的样式。

• 会员专区系列 的样式文档组织结构，如下：

//通过给member（会员专区系列）页面加载member.css样式文档，来提供给此系列独有的样式。

• 积分商城系列 的样式文档组织结构，如下：

//通过给shop（积分商城系列）页面加载shop.css样式文档，来提供给此系列独有的样式。。

• 客户服务系列 的样式文档组织结构，如下：

//通过给service（客户服务系列）页面加载service.css样式文档，来提供给此系列独有的样式。

• 以上样式文件均由上至下逐级加载，不可随意调换位置，后期新样式入应在其后置入。

HTML文档的布局规划

• 两栏第一种布局：主内容在左边，侧栏在右边，如下图

//将主内容content放置于左侧，使得用户能很好的聚焦于主内容content区块，这种布局将主内容content放在左边，辅助内容放置在右边以rightbar命名，如：产品专区系列页面 。

• 两栏第二种布局：主内容在右边，侧栏在左边，如下图

//将侧边栏放置于左侧，使得用户能很方便的操作以快速查看适合的信息，这种布局将主内容content放在右边，辅助内容放置在左边以leftbar，如：客户服务系列页面

• 通栏单列布局，如下图

//这种布局在container容器中仅放置了主内容content，减少干扰因素，提供清晰的环境，以便用户更快速的锁定进入下一步操作，如：产品介绍页。

Box盒模型

• 简洁的box，未添加任何前缀

//HTML代码部分

//有上面这段代码可以看出，我们通过更换box-skin-yel（yel在这里代表yellow）可以很方便的控制box的皮肤，注释fillet style所包含的代码部分用来控制圆角标签，如：投保指南页面下的“温馨提示”这个box

• 通过为box添加前缀ms，设置特定的盒子ms-box

//HTML代码部分

//这里的class=”lt”为左部圆角，class=”rt”为右部圆角，底部class=”ms-btm”可以用来添加扩展，如：更多链接。

Css Sprites拼合优化

• 通过Css Sprites有效的减小页面请求次数，如下图

//这里我们列举的是通过Css Sprites技术将多个图标拼合在一张图片上进行优化处理（具体规格为50px的等边网格分布），有效的将原本需要多次http request的页面请求，降为只需加载一次即可完成同类所需的全部加载，以提升网站的性能。

//上图为全站navigation的特效图片优化，同样的还有button的优化，优化的源文件保存在（../ Css Sprites拼合源文件）文件夹下。

Css语句缩写

• 颜色

color:#333333;    缩写为  color:#333

• 盒子（常用的四种写法）

property:value1;   //表示所有边都是一个值value1

property:value1 value2;   //表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3;   //表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4;   //四个值依次表示top,right,bottom,left

• 边框 (border)

border-width:1px;

border-color:#ccc;

border-style:solid;

可以缩写为一句: border:1px solid #ccc;

• 背景 (background)

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

• 字体 (font)

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

// 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

• 列表(list)

取消默认的圆点和序号可以这样写

list-style:none;

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif)

习惯的设立 （如注释、代码排列等）

• 注释
• 通过注释有效的组织管理代码文档，将相关的文档放归类在一起，以便阅读与修改，示例供参考

/**************************************/
/*                                  Globals                               */
/**************************************/

/***************************************/
/*                                   Header                                 */
/***************************************/

/***************************************/
/*                               Navigation                             */
/***************************************/

/***************************************/
/*                         Main Content                               */
/***************************************/

/***************************************/
/*                                     Footer                                */
/***************************************/

//这里将多个CSS文件合并在一个文档，以便通过减小请求次数，达到优化的目的。

• 通过适当的注释将合并后的文档进行有效的组织管理，方便日后查找、维护
• 尽量避免特殊符号的使用

• 代码排列及结构

所编代码按照字母的排序A-Z来编写，如下面的例子：

div.test1 {

text-align: left;

margin: 5px;

z-index: 1;

padding: 0 8px;

border: 1px solid #ccc;

}

div.test2 {

border: 1px solid #ccc;

margin: 5px;

padding: 0 8px;

text-align: left;

z-index: 1;

}

//在多行代码的情况下，按照字母排序(如div.test2)来编写的代码，会更易于查找

• 代码结构上配合上一条提到的字母的排序方式，采用多行编写，对于一个标签下的CSS属性 ≤3 时，我们将其编写在同一行内，合理的节省空间
• 每个标签的后面和左花括号之间加上一个空格便于区分查找

例如，div.test1 { 中 “div.test1” 和 “{“ 之间用空格隔开

• 每个Css属性后面加上均分号，即便是一组属性的最后一个，避免后期添加因遗漏而导致的错误

根目录下的 readme.txt

• 详细记录了web开发过程中的更新内容；
• 首次更新对重要文档给出适当的解释（重要文件的关联部分)

PS：box部分用了position属性来实现圆角，这样一来在IE6中不得不去添加width属性以解决错位问题(但并不是所有)
下次在更新这里吧，阴雨天睡觉看起来是个不错的选择O(∩_∩)O~

这里我们需要用到一个JS文件,点击下载这个JS:

http://cid-8127d59343265667.skydrive.live.com/self.aspx/NamipanPublic/2010-01-25/jquery.js

还有必须前面申明 :

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dt-->&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" > </html>

不然在ie下面就是没用的 。这些都准备好之后，在img的下面加上这样一段代码：

<script type=”text/javascript”>
$(“#banner”).width(document.documentElement.clientWidth);
</script>

在图片上引用ID:

img src="" id="banner" alt="" 注：这个ID要一至，不然会没有效果。

这时我们会看到图片会自适应分辨率的大小图片会被自动缩放，但是可能会和Design有一些出入。我们可以采用第二种方法： 图片的变化只限于分辨率小于1300或是1024的情况下变化，那么我们的那段代码就要这样去写:

<script type="text/javascript">
if(window.screen.width <= 1024) { $("#banner").width(document.documentElement.clientWidth); }
</script>

这样我们就只会看到当分辨率小于1024的时候才会看到图片自动缩放了。

font-family:"Microsoft Yahei"; 

也可以是对应的unicode

font-family:"\5FAE\8F6F\96C5\9ED1";

但微软雅黑对应的unicode2即&#x5FAE;&#x8F6F;&#x6B63;&#x9ED1;&#x4F53;写在样式文档里是没有效果的，因为unicode2是以文本形式输出的，这个可以将对应的unicode2放到html文档中尝试一下，对应输出微软雅黑四个字

有时候找起来还真是麻烦，索性将找到的整理了一下在这儿种下，暂放这么多。