向百度、谷歌提交自己的网站(登录搜索引擎)
网站建设完成之后，第一件事情就是向各大搜索引擎提交新网站，让搜索引擎尽快收录你的网站。
百度免费登录入口 http://www.baidu.com/search/url_submit.htm
Google免费登录入口 http://www.google.com/intl/zh-CN/add_url.html
其他搜索引擎登录入口：略
我的Google Analytics GA代码
https://www.google.com/analytics/
新google账号：
294075118@qq.com
2*******8
复制代码段，并将其粘贴到每个网页的 </body> 标记之前，如果您使用一般包含或模板，则可以在该处输入
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20446517-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
插件：
Google Analytics for WordPress
简述产品设计中应遵循的一些规范
在网站产品中，如果你遵循下列的一些设计规范，产品易用性将会得到更好的改善。
1.导航常放在页面上部分；
2.重要内容显示在第一屏；
3.界面上内容越少，用户越好理解；
4.重要按钮突出显示；
5.相同功能按钮在网站里要保持一致；
6.不提供多余的功能；
7.蓝色文字一般代表有链接，无链接时慎用；
8.鼠标移到链接上一般要变色或者出现下划线；
9.鼠标移至按钮、有链接的图片、文字等元素上要成手型；
10.已点击过的链接显示紫色；
11.无链接且不怎么重要的文字用灰色；
12.灰色按钮代表不可操作；
13.界面风格与整站风格相一致；
14.文字要表达清楚、简约；
15.文案措词要统一；
16.正文文字大小要统一；
17.不要有多余的信息；
18.用户操作前，结果可预知；
19.用户操作后，系统有反馈；
20.操作完，用户可撤消；
21.提示用户信息样式要统一；
22.重要内容可考虑用图片显示；
23.表单勿忘对齐；
24.红色代表重要或警示，绿色代表可行；
25.避免内容看起来像广告；
26.页面尽量少广告；
27.让用户知道Ta所处的位置；
如何写交互设计规范
当产品规模大了之后就需要多个产品设计师协作完成整个产品，由于不同产品设计师之间的设计理念、设计方法、设计习惯的不同，协作完成的产品往往会导致产品一致性差，质量参差不齐。这个时候需要一份交互设计规范来规范和指导产品设计，从而保证产品设计的一致性，提升整体产品质量。本文就来说一说交互设计规范应该包含的一些内容：
一、页面信息规范
页面信息规范主要指页面的静态信息应该遵循的规则，包括：
1.标题规范
用于规定整个产品中所有不同层级不同功能的页面应该使用的标题的规则。
2.新窗口链接规范
用于规定页面链接是采用新窗口打开还是本窗口打开的规则。
3.图片规范
用于规定图片信息是否带有alt title值，这些值又取自那里。
二、交互信息规范
交互提示规范主要用于规定在交互过程中交互的方式及其信息提示，包括：
1.预先信息提示
所有交互进行前需要提供充分给用户的预先应该知道的提示信息。
a.表单提交类
表单提交的步骤，每个表单项的要求需要给出提示信息。（如密码要多少多少位。搜索框鼓励输入什么内容。）
b.谨慎类操作
一个操作对用户来说需要慎重操作的。如扣除金币等。需要预先提示。（如：扣除金币的操作需要预先提示扣除金币数目，以及当前金币是否足够。等等。）
c.差异化规则
当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示。或者给出帮助链接。
2、操作信息提示
所有交互进行中需要提供操作相关的提示。
a.操作确认提示
一个操作涉及数据删除，等需要谨慎操作的操作需要给出删除确认提示框。
b.操作错误提示
当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入内容时提交）
3、结果信息提示
交互进行后给出结果反馈是应该给出适当的提示
a.查询类结果
任何信息列表、查询结果，当对应信息无结果的时候需要给出有无结果状态提示。
b.保存类结果
一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。
c.附加类结果
一个表单是对其他数据进行附加的，如评论等。提交成功后应直接跳转到操作产生的结果展示部分。（如提交评论后应该直接展示给用户他提交的评论）
三、通用控件规范
当有一些功能会被多个模块复用的时候（如标准评论框、标准好友选择器等），需要把这些功能提炼出来设计成通用控件被多个模块共用。
有了页面信息规范、交互信息规范、通用控件规范就能保证页面信息的一致、交互方式及提示的一致、通用功能模块一致。从而保证产品的一致性，并提高产品质量。
读书笔记/语录
《项目经理应该知道的97件事》
在理论上，创造一个新产品或者提出一种新方法很简单。但在实践中，我们这些为了生存而去真正操作的人知道，它正变得越来越混乱。
——
《About Face 3 交互设计精髓》
以技术为主导的产品很难控制与使用，之所以失败，是因为没有在作品中注入人性。
——
使用Word、Visio、PowerPoint、Dreamweaver、Photoshop等工具，在绘制原型时速度缓慢、效果粗犷、不易理解和表达想法、无交互体现、修改困难，所以我们使用快速实现、准确表达、带有交互效果且易于上手的原型设计利器：Axure RP
——
交友其实很简单 就是一个个人信息展示+搜索+交流方式
——
web analytics：网站行为跟踪
html/css笔记
复选框默认选中，且呈灰色不可更改：<input type=checkbox checked disabled>
IE hack：
*background:#ff6600; /*IE */
background:#ff6600\0; /*IE8 */
图片垂直居中：
.upload .pic{ width:98px; height:98px; border:1px solid #e6e6e6; text-align:center; display:table-cell;vertical-align:middle;*display:block;*font-size:86px;*font-family:Arial; }
.upload .pic img{vertical-align:middle;}
css3圆角（边框半径）：border-radius: 15px;
css3阴影：-moz-box-shadow:2px 2px 5px #ddd; -webkit-box-shadow:2px 2px 5px #ddd; box-shadow:2px 2px 5px #ddd; 效果预览 不支持ie，水平位移、垂直位移、模糊半径、阴影颜色
清除浮动：clear{ height:0;font-size:0;line-height:1px;clear:both;overover:hidden}
区块间隔：hr_10{ height:10px;font-size:0;line-height:1px;clear:both;overover:hidden}
所有链接新窗口打开：<base target=”_blank”>
字体设置：微软雅黑：Microsoft YaHei 黑体：SimHei 宋体：SimSun
背景半透明：filter:alpha(opacity=60);moz-opacity:0.6; opacity:0.6;
灰色滤镜：filter:gray;
css3圆角：border-radius: 5px;
强制文本断行：word-break:keep-all;white-space: nowrap;
空连接+点击无虚线：<a href=”javascript:void(null)” onFocus=”blur()”></a>
锚链：<a href=”#a”></a><a name=”a” ></a>
表格设置：
.tb_sty table { border:1px solid #202020; border-collapse:collapse }
.tb_sty td { border:1px solid #7e7e7e; line-height:240%; padding:0 10px; background:#cdcdcd; color:#666 }
分页居中：http://www.baisohu.net/upload/page.html
jq返回顶部：http://www.baisohu.net/upload/jq返回顶部.html
加入收藏：http://www.baisohu.net/upload/add_fav.html
星星评级：http://www.baisohu.net/upload/星星评级.html
主体内容自适应100%http://www.baisohu.net/upload/主体内容自适应100%.html
IE6 position:fixed的尴尬：万恶的IE6不支持position:fixed，解决方法有两种，一种是css，一种是js。具体请见：http://www.baisohu.net/upload/IE6_positionfixed_bug.html
仿q-zone右下角弹窗，默认弹出关闭，png兼容ie6，js fixed底部：http://www.baisohu.net/upload/弹窗.html
内部滚动轴：body{scrollbar-face-color:#d7f0ff;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-3dlight-color:#76bdff;
scrollbar-track-color:#efefef;
scrollbar-arrow-color:#185996;
scrollbar-darkshadow-color:#76bdff;}
外部滚动轴：html{代码同上}
软件/工具分享
ICO图标制作：
ps插件：ICOFormat.8bi （复制到 ..Photoshop CSPlug-InsFile Formats目录，再次启动ps，即可打开和保存ico图片格式）
在线生成：http://free.logomaker.cn/tools/icoMaker.aspx
软件：Sib Icon Studio
SEO工具条-Searchstatus汉化增强版：http://www.semyj.com/archives/778
Mockingbird 纯JS在线产品原型设计工具：http://gomockingbird.com/
Firefox扩展Tilt：http://linuxtoy.org/archives/tilt.html （3D化网页元素，使网页开发者可以更加直观的分析网页结构关系。安装后需要使用浏览器进入about:config中搜索webgl，然后找到webgl.disabled设置为False，把webgl.force-enabled设置为True）
关于SNS里的个人空间对于站外用户(包括搜索引擎)可见的问题
SNS里的个人空间
比如可以选择仅全站内用户可见、好友可见、自己可见
如果再加上一个”对站外用户可见”(还可细分为是否包含搜索引擎)
是否有用呢？
这样用户就可以有比较充分和细致的选择权利
比如一个用户可以设定：
日志对包含搜索引擎在内的站外用户开放、或是日志仅支持RSS输出
微博对不包含搜索引擎在内的站外用户开放
相册对站内好友开放、留言板内容对站内好友开放、好友名单对站内用户开放
日志跟贴对站内开放、微博跟贴对站内好友开放
主题的发起和参与对站内开放。。。。。等
不同主题的SNS、会有不同的开放策略
强调社交隐私的可以比较完全的封闭、甚至严格封闭
强调内容交互的、可以对站外(包括搜索引擎)开放、或部分开放
SNS本身并不意味着一定要封闭、或是一定要开放
SNS可以选择零开放、0.2开放、0.5开放、0.8开放、全开放
一切因SNS的主题而定
另外可能有的站点希望通过部分封闭来吸引用户注册、这是策略的一种
同时反过来对站外开放、也是另一种扩大知名度的策略
比如youtube支持在博客和SNS中的视频嵌入
另外如果SNS站点本身倾向于对站外封闭的话
那么是否可以提供选项来支持SNS中的某一个用户对站外开放其空间的某一部分内容呢？:):)
比如开放全部日志、或是开放某一篇日志？
技术细节决定SNS服务质量。
开放其实才是互联网的态度~
Web表单设计研究
注册、下订单、发布内容，网站的这些核心交互，都离不开表单。
对于Web表单来说，用户体验的三个主要因素是：表单结构（框架层）、表单元素（范围层）和表单交互（结构层）
表单标签对齐有四种形式：顶对齐标签、左对齐标签、右对齐标签和输入框内标签。
水平tab和垂直tab表单设计研究：
水平tab和垂直tab都并非完美，设计时要考虑到选项互斥的问题：
如果提交按钮是针对多个tab下的内容，建议使用垂直tab，同时把提交按钮放到tab包含的内容区域外。
如果提交按钮是针对一个tab下的内容，即tab间是互斥的关系，建议使用水平tab，同时尽量把提交按钮放到tab包含的内容区域内。
如果提交按钮针对的是整个页面的内容及其中一个tab下的选项，则还是应该放在所有内容之外（最下面），同时注意下面三点：
1.标签一般在最左侧，不要把互斥tab做成标签的样式，而是要做成标签下的选项。
2.如果tab间是互斥的关系，tab上的文字尽量清晰表达出互斥的关系。
3.尽量不在一个页面上放过多的提交按钮。
<form>
<fieldset>
<legend>请填写您的会员名和密码</legend>
<ul>
<li>
<label for=”email”><span class=”required”>Email</span></label>
<input id=”email” name=”email” class=”text required email” type=”text” />
</li>
</ul>
</fieldset>
</form>
input标签是表单世界中的“老大”，有10种形式，概括如下：
■ <input type=”text” />是标准的文本框。它可以有一个值属性value，用来设置文本框里的默认文本。
■ <input type=”password” /> 像文本框一样，但是会以星号代替用户所输入的实际字符。
■ <input type=”checkbox” />是复选框，用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked，像这样的格式<input type=”checkbox” checked=”checked” />.
■ <input type=”radio” /> 与复选框相似，但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked，使用方法跟复选框一样。
■ <input type=”file” /> 是展示你电脑上的文件的一个区域，就像你在一个软件中打开或者保存一个文档一样。
■ <input type=”submit” /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本（下面的button和reset类型也可以这样，稍后介绍），如下： <input type=”submit” value=”Ooo. Look. Text on a button. Wow” />.
■ <input type=”image” />以图像代替按钮文本，src属性是必须的，像img标签一样。
■ <input type=”button” />是一个如果没有其他代码的话什么都不做的按钮。
■ <input type=”reset” /> 是一个点击后会重置表单内容的按钮。
■ <input type=”hidden” /> 不会显示任何东西，它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。
推荐书籍《Web表单设计》
xml、xsl研究表明
用节点的方式，不用属性，节点可读性更好
<xsl:value-of select=”name” />
name表示一个节点
对应<name>名字</name>
<xsl:value-of select=”@name” />
@name表示一个属性
对应<newscon8 name=”产业资讯”>
<xsl:value-of select=”text()” />
text()是当前的节点的文本值
xml和xsl的每个模块注解一定要写清楚，并且要写明调用几条数据（给程序看的）
不用空格
结束符/一定要写，比如<img src=”{photo}”/> <br/>
Xpath路径要写对
重复的html结构可以做成xml公用模块
html框架、xml节点层级越少越好
xml只放假数据，手动的统一放xsl里
js变量不写在xsl里
禁止搜索引擎收录
方法一：针对目录屏蔽
新建一个txt，命名robots.txt，放在网站的根目录，内容如下：
User-agent: *
Disallow: /upload/
Disallow: /works/
方法二：单页屏蔽
<meta name=”robots” content=”noindex,nofollow“>屏蔽搜索引擎索引，同时也不让蜘蛛爬取页面的链接
<meta name=”robots” content=”index,follow”>不屏蔽搜索引擎索引，也允许蜘蛛爬取页面的链接
<meta name=”robots” content=”noindex,follow”>屏蔽搜索引擎的索引，允许蜘蛛爬取页面的链接
<meta name=”robots” content=”index,nofollow”>不屏蔽搜索引擎，但不允许蜘蛛爬取页面的链接
<metaname=”revisit-after” content=”7 days” >通知搜索引擎多少天访问一次
最近对微博的一些看法
最近在用什么微博：
腾讯：5%，很少用，消息主要是来自qq签名、q-zone等一些关联应用。
嘀咕：10%，比较少主动发消息，除非想发给某个特定的人群看，还有一些来自qq签名的关联。
新浪：85%，随大流，所以不得不用新浪微博啦，虽然曾经我鄙视过新浪微博的转发设计以及评论的垂直阅读，因为姐姐以前很少用新浪微博，所以互动少，评论也就少，看到人家大把大把的评论姐姐就会眼红，另外那些名人也从来不跟普通人互动，所以很没劲。
之前一直都很喜欢嘀咕的回应设计，较为含蓄的交流方式，嘀咕的互动主要是在回应上，可以把它理解为一问一答，如：“悟空@师傅 八戒这个猪头怎么电话老是不通”，只要悟空和师傅都是你的好友，你就可以在你的首页看到该对话，或者去悟空的主页看。腾讯的对话功能也是这么表现的：“悟空对师傅说：八戒这个猪头怎么电话老是不通”，但是腾讯除了对话，还有转播和点评，貌似更聪明了点，可以说是新浪和嘀咕这两种不同微博形式的合体，我是这么觉得的。
第五届D2前端技术论坛报告
非常荣幸能够代表公司参加此次在杭州举办的第五届D2前端技术论坛，本届D2的主题是D平方，潜能无限。
D2是中国所有前端开发者的节日，包括前端设计师、前端开发工程师和所有对前端技术感兴趣的人。D2目的是推动国内前端技术的发展，为国内前端从业者提供一个自由交流、学习、探讨技术的平台，促进国内行业标准跟国际的融合，发掘前端技术可以创造的最大价值。
会议上半场的主题是《前端的昨天、今天、明天》，
今年参加D2的人还蛮多的，现场座无虚席，很多人都是站着出席的，从D2（2005 –2010）的发展，可以很直接的反映出前端从业人员队伍
的壮大过程。05年之前可以把前端这个职位很形象的定义成：网页制作、页面仔，05年之后中国互联网的前端行业发生了巨大的变化，从前端设计到前端开发、
到前端架构师，各种前端职位浮出水面，据淘宝网小马介绍：淘宝从07年开始才正式有前端这个职位，08年发展到14个，09年30个，今年80个，预计明
年会发展到150人。所以说前端乃至整个互联网行业还是有很大发展前景的。前端就是数据到展现的过程，只要有浏览器提供的API，我们就可以做出更多漂亮的应用，这是前端的未来。现场有个互动的环节，就是以小纸条的形式向嘉宾提问，我们向淘宝的圆心同学提了一个很调侃的问题：“请问在你们公司前端工程师说话有多大声、多牛B，通常是被谁强奸？”
以下是圆心同学的部分回答：淘宝首页有个背投广告，去掉以后每年会损失数亿的钱，但是因为对用户不好，在淘宝UED的推动下，该干掉就给干掉了。所以没有存在谁说话更大声，只要谁有合理的理由说服别人谁就有发言权，只要理由充分任何人都可以把pm强奸掉。
上半场有个很有趣的议题：如何向自己的男女朋友介绍自己的工作？嘉宾的回答都蛮有意思的：
* 前端是将枯燥的数据用优雅的方法展现出来
* 面向用户的程序员
* 看到的东西都是我们做的
* 反正我们在做很重要的事情
* 我是做按钮的……
下午是分会场讨论话题，基本上都是在讲前端基础架构，前端基础架构是为解决团队高效开发，并行协作，保证代码品质所建立的一套系统的规范、工具、开
发机制和开发流程。国外那些优秀的技术团队，经过几年的发展，都具备了比较成熟和完善的基础架构，不是依靠个人能力做到的，而是依靠一个强大的前端架构做
出来的。他们都曾有过我们现在遇到的问题，大家都经历过那些痛苦的年代，庆幸的是我们是跟在前人的脚步后面，感谢他们的知识沉淀与分享，共同发展前端行
业。
来自思科的杜欢同学分享的《可复制的前后端分离开发模式》
让我们受益匪浅，主要讲的是利用标签指令的方式，实现数据和模板的分离。可以方便的通过配置在假数据和真实数据接囗之间切换。假数据是由前后端工程师一起
约定的，产出一份“数据接囗说明文档”，在本地每个模块对应一个数据文件。真实数据接囗全部是webservice，也是跟模块一一对应。他讲的是前端基
础架构中最基础的部分－开发流程，无论大小团队，都是通过尽可能并行，简化开发环节，来提高开发效率。根据不同公司的技术特点，通过工具和一系列机制实
现。
一：组织结构的前后端相分离：
下图为推荐的内部组织结构，这个组织结构和我们公司的现状还是蛮贴近的，首先团队必须有一个说话靠谱的Team Leader，分配任务给下面的Technic Leader与Team member协同完成。
二：开发模式上的前后端相分离：
这个开发模式是适合任何后端语言，从而解决前端套页面还是后端套页面这个困扰。
同时他重点强调不用js模板做为分离发案：
最后，要再次感谢公司以及各领导能够让我们出席D2，同时也要感谢本届主办方淘宝网，感谢D2组委会，感谢赞助方果壳网，给我们前端工程师们提供了这样一个交流机会，一起分享技术的乐趣，探讨行业的发展，D2，我们来年再见！
参考资料：
html5观摩
测试浏览器HTML5兼容性表现：http://html5test.com/（总分300）
四大浏览器HTML5速度对比测试：http://video.sina.com.cn/p/tech/i/v/2010-06-28/141461048935.html
HTML5 视频的注意事项：
译文：http://www.alixixi.com/web/a/2010062561468.shtml
YouTube HTML5视频：
只要在视频地址后面加入“&html5=True”，即可直接切换到HTML 5版的YouTube视频观看，如：
http://www.youtube.com/watch?v=ZheMh7QS5QQ&feature=topvideos&html5=True
在过去，流媒体播放等一些精彩应用必须借助第三方软件才可以实现，比如Flash，现在HTML5不但可以播放视频和音频，而且还可以开发出各种网络在线应用程序，如标识的地理位置、离线存储、拖放、图片处理等，使用HTML5开发的一些精彩应用：http://radikalfx.com/files/collage/demo.html
html5学习：
酷站收藏：
百度说吧观察
哥杯具了，一不小心实名认证了，认证完，才发现名字不能改了，太尴尬了，真是一实名成千古恨啊，怕要等到海枯石烂了！比较囧的是：换了张头像，居然说我用的不是本人照片，难道照片要求正面无码、神态端庄？我就说嘛，怎么好多人的头像都那么严肃~~ 百度人工比对照片的编辑还真蛋疼。。另外，这个v的标志显得很多余，大家都v了，同名同姓的大有人在，有v没v有什么差，一点幸福感都没有。另外，这个身份识别是不是跟zf勾结了。。
转发不能同时回复是个问题，另外，百度的回复模式貌似跟新浪一样开放，比较适合讨论话题，一条信息可以看见所有的follow，酱紫follow的力度大了，隐私却被忽略得很彻底（对于一些惜字如金的人来说），有时候觉得嘀咕的回应还是蛮不错的，只有多方互相关注的好友才能看到别人讨论的话题。虽然微薄都有私聊的功能，但是不能针对某个话题，让用户选择用悄悄话的形式回复微薄不知道有没有人考虑过~
百度说吧靠什么黏住用户呢？让虚拟网络更接近真实？当百度说吧活跃到像百度贴吧那样程度的话，百度说吧就可以直接更名百度hi吧了~
web2qq有点2
前端时间听说腾讯要出操作系统，我还以为是pc操作系统，没想到就是基于web的qq2，域名都直接用web2.qq.com，那以后3、4、5、6呢？？很多人误以为这就是传闻中的腾讯os，其实这个只能说是webqq的升级版、os的雏形版。
我更期待的是操作系统啊，小马哥，哪天腾讯有pc操作系统了，哥一定要装双系统啊。
web2qq乍看上去像网页嵌套网页，可以这么理解，web2qq就是无数个Panel的组合，感觉特蹩手蹩脚。。不过按下F11，约等于qqos哈~~
在交互方面，并没有给我带来太大的惊喜，都是清一色的单击。
由于基于web，很多应用都是简化版，并没有多大的实质性作用。
而且对我来说它只是一个快捷方式，没有多大的必要去使用它，因为这些入口几乎都集成在qq面板上了。
目前还一直掉线，而且重登录，貌似所有操作都没被记录。
网页图片优化基本思路
一.压缩图片质量
JPG：可在保真图片色彩度的基础上压缩大小，在网页中只能保持矩形的形态，无透明度，常用于栏目背景、主视角、大背景等，一般可压缩到50-60%，需综合对比压缩比率效果，对于颜色比较少的图片建议压缩至70%或者保存为gif格式。
GIF：最高色彩只有256，只能用于颜色较为单一的图片，可透明，对于gif而言，色彩越少，文件也就越小。在肉眼可可接受的范围内，尽量将gif色彩数量降低，能够对gif图大小进行有效的优化，常用于小图标、圆角边框、按钮等。
江湖上的传说：
* 用firework替代photoshop ，fireword出的图片更优。
* 将 Dreamweaver 的默认图像编辑器设为 Fireworks ，那么在 Fireworks 里修改的文件将立即在 Dreamweaver 里更新，不需要用Photoshop 等软件，切换来切换去的了。
* Fireworks很完整的支持网页16 进制的色彩模式，提供安全色盘的使用和转换，支持背景透明，导出的图片又小又漂亮。
* 在线视频(参考)：Adobe Fireworks CS4 网页原型设计流程与习惯
二.减少图片数量
减少图片数量，从而减少CSS background images请求
解决方法：CSS Sprite
css sprite是一种网页图片应用处理方式，将icon小图标、按钮、栏目背景图进行分类，然后拼接到一张大图上，具体操作请看第四章。
使用css sprite应注意的事项：
* 在合并图片的时候，要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止有效的空间里（或者说固定的高度内）不出现其它背景。
* 开发比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；网上也有一些Css 背景图合并工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，黏贴就OK了！
* 护的时候比较麻烦，如果页面背景有少许改动，就要改动这张合并的图片，如果在原来的地方放不下，最好往下面加图片，这样图片的字节就增加了，还要改动css。
* CSS Sprites非常值得学习和应用，特别是页面有一堆ico图标的时候 。总之很多时候大家要权衡一下利弊，再决定哪些图片需要应用CSS Sprites。
三.图片命名规则
按图片的用途、功能命名：
公用：public.jpg
标题：title.jpg
按钮：btn.jpg
小图标：icon.gif
按html结构命名：
大背景：full_bg.jpg
头部主视觉背景：header_01.jpg header_02.jpg
导航：nav.jpg nav_on.jpg nav_li.jpg
主体： main.jpg
侧边栏：sidebar.jpg
底部：footer.jpg
按模块命名：
即同个模块下的所有图片拼在一张大图上
严禁以下图片命名：
（.jpg
+.jpg
123.jpg
中文.jpg
四.实例讲解
略……
五.页面分析工具
雅虎Yslow（基本）
用于火狐，必需先装firebug才能使用。
谷歌Monster（推荐）
* 检测https协议页面，是否使用了http协议的图片、JS、CSS等；
* 检测CSS、JS、background-image文件是否为404；
* 如果background-image超过6个（可设置检测数量），则提示所有背景图片及大小，超过30KB，标红显示；
HttpWatch (集成在Internet Explorer工具栏 )
谷歌Page Speed
Smush.it（基于 YUI 的在线图片优化工具 ）
扩展阅读：
12个基于网页的图片优化工具
SEO优化技巧：16个方法优化网页中的图片
最近微博很泛滥
无微博不门户，道上混的，一口气就要说出5、6、7、8、9、10个号来：
http://t.sina.com.cn/90hou
http://200hou.t.sohu.com/
http://t.qq.com/mmhalj
http://t.163.com/mmhalj
http://digu.com/mmhalj
http://zuosa.com/90hou
http://www.9911.com/mmhalj
http://t.ifeng.com/mmhalj
http://twitter.com/mmhalj
http://fanfou.com/mmhalj
Google wave：90houjay@googlewave.com
……
天天用的是digu，狐嘀和i嘀都不错的哈，喜欢平民化的交流方式~~新浪、做啥、911这几个几乎都是用滴神把嘀咕的信息同步过去的~
新浪粉丝很多，但分享的信息太杂，偶不是很稀饭新浪的二度传播，满天飞的分享转载还有大量的图片……
前几天翻墙去推关注了苍井空~~
至于sohu，原本不是定位在校园微博么？偶没有太大的感情~~
163缺乏创新，据说163个字符成最大亮点？
qq的还在内侧，腾讯叨叨也好，腾讯邮箱广播也好，反正都整到一块就好了嘛，已经整合到qq客户端，很好很强大…只是那个对话和转播来得很奇怪……
饭否进不去了，叽歪我好像都没注册就被封了…
凤凰微博也在内侧，进去占座了，个人首页居然也没301重定向，很阴暗啊，左边还放着两个logo，咋觉得凤凰做的不是micblog了，很模糊，小组、活动、到处都是facebook的影子
微博的特点是时效非常短，很少人会去翻查几天前的消息，国内微博主要有两个领域，一个是讨论话题，一个是传播内容，拿新浪和嘀咕为例，嘀咕不适合讨论，只 适合传播，它只是一个扬声器，本质是一种一对多的广播，Follower 的声音对它们并没有很大的意义，互动交流效果比较差，对同一个话题，由于回复和讨论没有用线索模式集成在一起，阅读效果非常零散，经常有看到别人的回复， 却会莫名其妙。新浪则更适合讨论，当然他二度传播的概率相当的大。总结：嘀咕的确比较平民，新浪明显比较官方，前者谈生活，后者“做学问”
看了推特和buzz的比较，嘀咕和推特，新浪围脖和buzz，理念和表现形式还是有所区别。
微博其实也是一个很有意思的搜索引擎，譬如：在新浪上搜索“周鸿祎”和百度搜索“周鸿祎”，你觉得哪个搜索结果对你更有价值？
微博，信息分享时代的到来
从推特到饭否，再到新浪微博、嘀咕，从玩具到工具，几乎已经占领了某些人互联网生活的大部分时间。
微博的显著特点是：个体性、短消息、及时性。
微博在用户参与方面，随着手机互联网的发展，将具有很大的优势。
微博的DNA有80%是博客，20%是社会化关系网~~
微博是个人的空间，个人空间多是展示自己的心情和思考，给自己朋友分享的，并且身份是相对公开的，因此比较真实。
社区论坛是公共空间，多是公共话题，用户可以非公开身份发表意见，因此灌水的马甲很多。
四年前，搜索让信息成为第一位的事，两年前，SNS的崛起使其严重摆向了个人交互，现在摆回了信息，只是这个信息加了两个字，成为信息分享。
向五大搜索引擎提交sitemap地图
什么是SITEMAP?
sitemaps是站点管理员向搜索引擎爬虫公布站点可被抓取页面的协议，sitemap文件内容必须遵循XML格式的定义。每个URL可以包含更新的周期和时间、URL在整个站点中的优先级。这样可以让搜索引擎更佳有效的抓取网站内容。
sitemap分为2种形式：
1、sitemap.html ： 这种主要是针对用户而言，让用户能够快速的寻找到自己所需的东西，也是方便搜索引擎来有效的爬取网页内容，提高网站质量。
2、sitemap.xml ：
这种格式主要是谷歌自己推出的一种网站地图写法，你可以通过相关规范写出网站地图然后通过“谷歌管理员工具”提交，这样谷歌的蜘蛛就能有目的的高效的快速
的来访问网站，但是提交的内容谷歌蜘蛛没有保证一定都会收录!这个误区请大家要区分开来。
目前Google
Yahoo和Ask.com支持的最新sitemaps标准是0.9版本。每个标签是对一个URL的描述,每个标签是URL的绝对地址，必须用http或
https开头,每个标签是该URL的最后一次修改时间,每个标签表示该URL的更新频率，可以设置为daily weekly
always,每个标签是该URL在整个站点的权重，是1.0~0.1之间的数值,
sitemaps文件的限制：
必须是utf-8的编码格式
每个sitemaps文件只能有一个的顶级标签。
每个sitemap.xml文件包含的URL建议不超过5w个URL
单个sitemap.xml文件不能超过10M大小
各大搜索引擎提交SITEMAP方式:
向Google提交网站地图Sitemap: http://www.google.com/webmasters
向Yahoo!提交网站地图Sitemap: http://siteexplorer.search.yahoo.com
向MSN提交网站地图Sitemap:
用URL直接提交：http://api.moreover.com/ping?u=http%3A//your.domainname
/sitemap.xml。这是向MSN直接提交网站地图的后门URL。注意”:”被%3A替换掉。
向ASK提交网站地图Sitemap: 直接提交。http://submissions.ask.com/ping?sitemap=http%3A//your.domainname/sitemap.xml。注意”:”被%3A替换掉。
向百度Baidu提交网站地图Sitemap:百度现在开通类似于谷歌的网站管理员工具,但可通过http://www.baidu.com/search/url_submit.html来提交你的网址。百度会自行搜索，更新速度很快。
笔记一则（用户研究、交互设计、站点流程、网站测试、web信息架构）
用户第一次来到网站主页常问的四个问题：
a.这是什么网站？
b.网站上有什么？
c.我能在这里做什么？
d.为什么我应该在这里，而不是在别的地方？
主页要完成的任务：
a.站点的标识和使命
b.站点层次
c.搜索
d.导读
e.内容更新
f.友情链接
g.快捷方式
h.注册
i.让我看到自己正在寻找的东西
j…….还有我没有寻找的
k.告诉我从哪里开始
l.建立可信度和责任感
一旦知道网站是做什么的，接下来主页还需要让用户知道：
a.如果我想搜索，可以从这里开始。
b.如果我想扫描，可以从这里开始。
c.如果我想扫描该网站最精彩的内容，可以从这里开始。
导航系统的种类：
全站导航系统
区域导航系统
情境嵌入式导航系统
标签(tab)的好处：
a.它们不言而喻
b.它们很难错过
c.它们很灵活
d.它们暗示了一个物理空间
使用标签(tab)的三个要点：
a.正确绘制：标签必须看像标签
b.颜色编码：amazon是一个成功的例子。即使色盲也能注意到标签之间的差异。
c.当你进入网站，有一个标签已经选中
如何设计好的标签系统？
保证标签系统的通用性：尽量窄化范围；开发一致的标签系统，而非标签。
标签系统和组织系统、导航系统一样，是自称一体的系统。一致性很重要，因为一致性代表的是可预测性。当系统可预测时，就容易学习。一致性会受到风格、版面形式、语法、粒度、理解性和用户的影响。
标签系统的来源：自己的网站、类似网站和竞争对手网站、受控词表和叙词表。
创建新的标签系统：内容分析、内容作者、用户代言人及主题专家、直接来自用户、间接来自用户。
调整和微调
下拉框的问题：
a.好处：节省空间。
b.存在的问题：
-你必须把它们找出来
-它们难以扫描
-它们不好控制
关于网站测试的几个事实：
a. 如果想建立一个优秀的网站，一定要测试。
b.测试一个用户比不做测试好一倍。
c.在项目中，早点测试一位用户好过最后测试50位用户。
d.人们对招募用户代表的重要性估计过高。如果进行测试的用户接近可能使用网站的用户，那么很好。但更重要的是尽早和经常进行测试。
e.测试的关键不是要证明什么或者反驳什么，而是了解你的判断力。
f.测试是一个迭代的过程。
g.没有什么比现场用户的反应更重要。
在设计网站之前，如果有同类网站的话，应该先测试一下。通常有两种类型的测试：
a.“理解”测试。让测试用户看到这个网站，然后看他们能否理解这个网站，理解网站的目标、价值主张、组织方法、运行方式。
b.关键任务测试。让用户完成一些任务，然后观察他们是怎么做的？
四种常见的信息需求：
已知条目搜索（正确的东西）：用户明确知道自己要找的是什么；
探索式搜索（一些好东西）：用户并不确定想要着的是什么；这种搜索通常是无止境的，用户并没有期待会得到“正确”答案，也没有必要清楚表达他到底想要搜索 什么；用户很高兴能够得到一些结果，然后，会以这些结果作为跳板，再进行下一轮的搜索；至于搜索何时完成，并不见得每次都能够清楚界定出来；
无遗漏式搜索（每样东西）：用户每样东西都想要；用户打算搜索某一主题的任何信息，通常有好几种方式表达TA要搜索的东西；同样，没有必要必须有“正确答案”；用户必须有足够的耐心，需找更多结果；
再次搜索（需要重新找到的东西）：用户需要重新寻找以前碰到过的有用信息；tag这种信息组织方式很适合这类信息需求。
信息架构的组件（分类方法一）：
组织系统（如何组织信息）：以各种方式为我们展示信息；
导航系统（如何浏览信息）：协助用户在内容上移动；
搜索系统（如何搜索信息）：可让用户搜索内容；
标签系统（如何表示信息）：使用对用户来说有意义的语言描述分类目录、选项及链接。
信息架构的组件（分类方法二）：
浏览帮手：这些组件展示预设的路径给用户看，协助用户浏览网站。浏览帮手的种类包括：
组织系统：网站内容分类或者分组的主要方式（例如，按主题、按任务、按用户，或者按年代），也称分类法和等级体系。标签云图也是一种组织系统；
全站导航系统：主要的导航系统，协助用户了解TA在网站的什么位置以及在网站中可以到哪里去；
区域导航系统：主要的导航系统，协助用户了解TA在子网站的什么位置以及在子网站中可以到哪里去；
网站地图/目录：支持主要导航系统的次要导航系统，提供浓缩过的总览以及连向主要内容和子网站的链接，通常是采用概要的形式；
网站索引：辅助性的导航系统，提供排序后的链接列表，连向网站的内容；
网站指南：辅助性的导航系统，针对特定主题提供的特定信息，以及连向网站中相关子主题的链接；
网站向导：辅助性的导航系统，可以通过一系列的步骤来引导用户，也有连向网站中相关子主题的链接；
情境式导航系统：用链接统一连向相关内容。通常内嵌在文字内，一般是用来连结网站中高度专业化的内容。
用户深入网站的三个准则
一.通过在每个页面上包含以下三个设计要素来告诉用户他们所在的位置，以及如何到达网站的其他部分。
a.在左上角显示网站的名字或LOGO；
b.通过一次直接的点击就能够到达主页；
c.搜索功能（最好是在右上角）。
二.帮助用户确定网站其余内容的位置
使用面包屑导航，这样的链接能够显示出用户当前在网站的层次状环境中所处的位置，并且能够使用户原路返回，或向上层移动。也可以在页面上包含一些指向其他同当前位置有直接关系的资源的链接，但不要向用户提供太多的到网站所有位置或无关页面的链接。
三.不要假定用户是沿着一种自顶向下的路径到达当前页面，他们可能采取了一种不同于你原先设想的路径，因而他们在来到当前页面之前，很有可能就没有看到包含在高层页面中的信息。
用户在搜索页面上各位置的点击概率
搜索引擎的结果页面通常被称为STRP页面（即英语Search engine results page的首字母缩写）。这个词很少被作为复数使用，这很恰当，因为大部分用户在一次查询中一般都不会查看超过一个STRP页面。
在93%以上的搜索中，用户只访问了第一个SERP页面，该页面通常只有十个搜索结果以及一些广告。用户只是在7%的情况下才翻到第二个SERP页面，而那些在一次查询中看了三个SERP页面的情况非常少，以致于我们都无法给出一个可靠的估计，但它很可能不超过百分之一。
下面列出一组用户在页面位置点击概率：
首页在搜索结果列表上的位置排名 / 该位置上的链接的点击率
首页排第一/51%
首页排第二/16%
首页排第三/6%
首页排第四/6%
首页排第五/5%
首页排第六/4%
首页排第七/2%
首页排第八/1%
首页排第九/1%
首页排第十/2%
排第二页包括第二页以后/6%
用户在网站内页上的行为
当一个经验不足的用户通过一个深层链接访问一个内部页面时，他们第一次会在那里平均花费60秒钟的时间，而经验丰富的用户在他们第一次访问一个内部页面时会花45秒钟。
既然用户在内部页面上花费45—60秒钟的时间，那么在理论上，他们就可能阅读大约200个单词，不过，通常他们会将一部分时间用于评估网站的导航 系统以及决定下一步去哪里。然而，他们仍可能会阅读100个单词量的信息，这同他们进入主页时只阅读10—20个单词相比已经显得相当多了。支持深层链接 的一个主要原因就是因为用户在网站的内部页面上会阅读更多的内容。
主页和内页的一组数据：
使用Web的经验/花在主页上的时间/花在内部页面上的时间
经验不足/35秒/60秒
经验丰富/25秒/45秒
与主页想比，人们会花费更多的时间在内页上。具有更多Web使用经验的用户能够以更快的速度扫描屏幕，而新手用户更倾向于很仔细地观看屏幕。