常用添加网摘代码 Add Bookmark

<a href="javascript:window.open('http://shuqian.qq.com/post?from=3&title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=930,height=470,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)">QQ书签</a>
 
<a href="#" onClick="javascript:window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title))">Google书签</a>
 
<a href="#" onClick="javascript:window.open('http://myweb2.search.yahoo.com/myresults/bookmarklet?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title))">Yahoo书签</a>
 
<a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:'') : (d.getSelection?d.getSelection():''); void(vivi=window.open('http://vivi.sina.com.cn/collect/icollect.php?pid=28&title='+escape(d.title)+'&url='+escape(d.location.href)+'&desc='+escape(t), 'vivi ','scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes')); vivi.focus ();">新浪网摘</a>
 
<a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:'') : (d.getSelection?d.getSelection():''); void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t), 'keyit' ,'scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes')); keyit.focus();">365Key网摘</a>
 
<a href="javascript:t=document.title;u=location.href;e=document.selection ? (document.selection.type!='None'?document.selection.createRange().text:'') : (document.getSelection?document.getSelection():''); void(open('http://bookmark.hexun.com/post.aspx?title='+escape(t)+'&url='+escape(u)+'&excerpt='+escape(e), 'HexunBookmark' , 'scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes'));">和讯网摘</a>

大型高并发高负载网站的系统架构

1、HTML静态化
其实大家都知道，效率最高、消耗最小的就是纯静态化的html页面，所以我们尽可能使我们的网站上的页面采用静态页面来实现，这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新的网站，我们无法全部手动去挨个实现，于是出现了我们常见的信息发布系统CMS，像我们常访问的各个门户站点的新闻频道，甚至他们的其他频道，都是通过信息发布系统来管理和实现的，信息发布系统可以实现最简单的信息录入自动生成静态页面，还能具备频道管理、权限管理、自动抓取等功能，对于一个大型网站来说，拥有一套高效、可管理的CMS是必不可少的。

除了门户和信息发布类型的网站，对于交互性要求很高的社区类型网站来说，尽可能的静态化也是提高性能的必要手段，将社区内的帖子、文章进行实时的静态化，有更新的时候再重新静态化也是大量使用的策略，像Mop的大杂烩就是使用了这样的策略，网易社区等也是如此。

同时，html静态化也是某些缓存策略使用的手段，对于系统中频繁使用数据库查询但是内容更新很小的应用，可以考虑使用html静态化来实现，比如论坛中论坛的公用设置信息，这些信息目前的主流论坛都可以进行后台管理并且存储再数据库中，这些信息其实大量被前台程序调用，但是更新频率很小，可以考虑将这部分内容进行后台更新的时候进行静态化，这样避免了大量的数据库访问请求。

2、图片服务器分离
大家知道，对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基本上大型网站都会采用的策略，他们都有独立的图片服务器，甚至很多台图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为图片问题而崩溃，在应用服务器和图片服务器上，可以进行不同的配置优化，比如apache在配置ContentType的时候可以尽量少支持，尽可能少的LoadModule，保证更高的系统消耗和执行效率。

3、数据库集群和库表散列
大型网站都有复杂的应用，这些应用必须使用数据库，那么在面对大量访问的时候，数据库的瓶颈很快就能显现出来，这时一台数据库将很快无法满足应用，于是我们需要使用数据库集群或者库表散列。

在数据库集群方面，很多数据库都有自己的解决方案，Oracle、Sybase等都有很好的方案，常用的MySQL提供的Master/Slave也是类似的方案，您使用了什么样的DB，就参考相应的解决方案来实施即可。

上面提到的数据库集群由于在架构、成本、扩张性方面都会受到所采用DB类型的限制，于是我们需要从应用程序的角度来考虑改善系统架构，库表散列是常用并且最有效的解决方案。我们在应用程序中安装业务和应用或者功能模块将数据库进行分离，不同的模块对应不同的数据库或者表，再按照一定的策略对某个页面或者功能进行更小的数据库散列，比如用户表，按照用户ID进行表散列，这样就能够低成本的提升系统的性能并且有很好的扩展性。sohu的论坛就是采用了这样的架构，将论坛的用户、设置、帖子等信息进行数据库分离，然后对帖子、用户按照板块和ID进行散列数据库和表，最终可以在配置文件中进行简单的配置便能让系统随时增加一台低成本的数据库进来补充系统性能。

4、缓存
缓存一词搞技术的都接触过，很多地方用到缓存。网站架构和网站开发中的缓存也是非常重要。这里先讲述最基本的两种缓存。高级和分布式的缓存在后面讲述。
架构方面的缓存，对Apache比较熟悉的人都能知道Apache提供了自己的缓存模块，也可以使用外加的Squid模块进行缓存，这两种方式均可以有效的提高Apache的访问响应能力。
网站程序开发方面的缓存，Linux上提供的Memory Cache是常用的缓存接口，可以在web开发中使用，比如用Java开发的时候就可以调用MemoryCache对一些数据进行缓存和通讯共享，一些大型社区使用了这样的架构。另外，在使用web语言开发的时候，各种语言基本都有自己的缓存模块和方法，PHP有Pear的Cache模块，Java就更多了，.net不是很熟悉，相信也肯定有。

5、镜像
镜像是大型网站常采用的提高性能和数据安全性的方式，镜像的技术可以解决不同网络接入商和地域带来的用户访问速度差异，比如 ChinaNet和EduNet之间的差异就促使了很多网站在教育网内搭建镜像站点，数据进行定时更新或者实时更新。在镜像的细节技术方面，这里不阐述太深，有很多专业的现成的解决架构和产品可选。也有廉价的通过软件实现的思路，比如Linux上的rsync等工具。

6、负载均衡
负载均衡将是大型网站解决高负荷访问和大量并发请求采用的终极解决办法。
负载均衡技术发展了多年，有很多专业的服务提供商和产品可以选择，我个人接触过一些解决方法，其中有两个架构可以给大家做参考。
硬件四层交换
第四层交换使用第三层和第四层信息包的报头信息，根据应用区间识别业务流，将整个区间段的业务流分配到合适的应用服务器进行处理。　第四层交换功能就象是虚 IP，指向物理服务器。它传输的业务服从的协议多种多样，有HTTP、FTP、NFS、Telnet或其他协议。这些业务在物理服务器基础上，需要复杂的载量平衡算法。在IP世界，业务类型由终端TCP或UDP端口地址来决定，在第四层交换中的应用区间则由源端和终端IP地址、TCP和UDP端口共同决定。
在硬件四层交换产品领域，有一些知名的产品可以选择，比如Alteon、F5等，这些产品很昂贵，但是物有所值，能够提供非常优秀的性能和很灵活的管理能力。Yahoo中国当初接近2000台服务器使用了三四台Alteon就搞定了。

软件四层交换
大家知道了硬件四层交换机的原理后，基于OSI模型来实现的软件四层交换也就应运而生，这样的解决方案实现的原理一致，不过性能稍差。但是满足一定量的压力还是游刃有余的，有人说软件实现方式其实更灵活，处理能力完全看你配置的熟悉能力。
软件四层交换我们可以使用Linux上常用的LVS来解决，LVS就是Linux Virtual Server，他提供了基于心跳线heartbeat的实时灾难应对解决方案，提高系统的鲁棒性，同时可供了灵活的虚拟VIP配置和管理功能，可以同时满足多种应用需求，这对于分布式的系统来说必不可少。

一个典型的使用负载均衡的策略就是，在软件或者硬件四层交换的基础上搭建squid集群，这种思路在很多大型网站包括搜索引擎上被采用，这样的架构低成本、高性能还有很强的扩张性，随时往架构里面增减节点都非常容易。

CSS Layout

单行单列

采用float浮在左上角，固定宽度
#content {
float: left;
padding: 10px;
margin: 20px;
background: #FFF;
border: 5px solid #666;
width: 400px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 370px;
}
html>body #content {
width: 370px; /* ie5win fudge ends */
}

固定在左上角，固定宽度，采用的是绝对(absolute)定位
#content {
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
margin: 20px;
background: #FFF;
border: 5px solid #666;
width: 400px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 370px;
}
html>body #content {
width: 370px; /* ie5win fudge ends */
}

固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面
#content {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
background: #FFF;
border: 5px solid #666;
width: 74%; /* ie5win fudge begins */
padding: 10px 10% 10px 15%;
voice-family: “\”}\””;
voice-family:inherit;
width: 55%;
padding: 10px 9% 10px 11%;
}
html>body #content {
width: 55%;
padding: 10px 9% 10px 11%;
} /* ie5win fudge ends */

单栏居中固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #c060;
background-color: #CCC;
text-align: center;
/* part 1 of 2 centering hack */
}
#content {
width: 400px;
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
/* opera does not like ‘margin:20px auto’ */
background: #FFF;
border: 5px solid #666;
text-align:left;
/* part 2 of 2 centering hack */
width: 400px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 370px;
}
html>body #content {
width: 370px; /* ie5win fudge ends */
}

单行两列

两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边(提醒：left的代码是定义左边CSS的，right是定义右边CSS的，下文的top和其它也一样，请结合相应位置阅读)
#content {
float: left;
padding: 10px;
margin: 20px;
background: #FFF;
border: 5px solid #666;
width: 300px;
/* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 270px;
}
html>body #content {
width: 270px;
/* ie5win fudge ends */
}
#content2 {
float: left;
padding: 10px;
margin: 20px;
background: #FFF;
border: 5px solid #666;
width: 300px;
/* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 270px;
}
html>body #content2 {
width: 270px;
/* ie5win fudge ends */
}

两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边
#content {
float: left;
padding: 10px 2% 10px 2%;
margin: 20px 1% 20px 2%;
background: #FFF;
border: 5px solid #666;
width: 44%; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 41%;
}
html>body #content {
width: 41%; /* ie5win fudge ends */
}
#content2 {
float: right;
padding: 10px 2% 10px 2%;
margin: 20px 2% 20px 1%;
background: #FFF;
border: 5px solid #666;
width: 44%; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 41%;
}
html>body #content2 {
width: 41%; /* ie5win fudge ends */
}

三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
position: absolute;
margin: 20px 190px 20px 190px;
top: 0px;
left: 0px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
}
#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}

类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题
body {
margin: 20px 0px 0px 0px;
/* n6.01win-mac won’t recognize top margin
for middle box, so it goes here */
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #060;
background-color: #CCC;
}
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 0px 190px 20px 190px; /* n6.01win n6mac
won’t recognize top margin for middle box, so it
goes in body */
padding: 10px;
border: 5px solid #666;
background: #FFF;
}
#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space at right
swhen there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}

三栏满屏左右列绝对定位，中间列自适应。宽度满屏
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
border: 0px;
background: #FFF;
width: 190px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 170px;
}
html>body #left {
width: 170px; /* ie5win fudge ends */
}
#middle {
padding: 10px;
border: 0px;
background: #FFF;
/* ie5win fudge begins */
margin: -20px 190px 0px 190px;
voice-family: “\”}\””;
voice-family:inherit;
margin-top: 0px;
}
html>body #middle {
margin-top: 0px; /* ie5win fudge ends */
}
#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space at right
when there is no scroll bar */
margin: 0px;
padding: 10px;
border: 0px;
background: #FFF;
width: 190px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 170px;
}
html>body #right {
width: 170px; /* ie5win fudge ends */
}

顶行三列

顶行三栏顶行自适应页面宽度。左右列绝对定位，中间列自适应页面
#top {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
height: 100px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
}
#right {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}

顶行三栏满屏宽度满屏
#top {
margin: 0px 0px 0px 0px;
padding: 10px;
border: 0px;
background: #999;
height: 100px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
height: 80px;
}
html>body #top {
height: 80px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 100px;
left: 0px;
margin: 0px;
padding: 10px;
border: 0px;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 130px;
}
html>body #left {
width: 130px; /* ie5win fudge ends */
}
#middle {
padding: 10px;
border: 0px;
background: #FFF;
margin: 0px 150px 0px 150px;
}
#right {
position: absolute;
top: 100px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
margin: 0px;
padding: 10px;
border: 0px;
background: #FFF;
width: 150px; /* ie5win fudge begins */
voice-family: “\”}\””;
voice-family:inherit;
width: 130px;
}
html>body #right {
width: 130px; /* ie5win fudge ends */
}

网站策划的职责与作用

什么是网站策划？
网站策划是一个策划师，其策划的核心就是“网站”这个产品。而对于“网站”产品，我将其按性质分为2类：自主研发类网站产品；对外销售类网站产品。比如，一些IT公司则完全自主研发、设计、运营、推广网站，并从网站产品的市场运作中获得利润，这类网站称为自主研发类网站产品；而一些IT公司会对外提供企业建站，或外包建站的业务，这类产品称对外销售类网站产品。目前互联网上大家经常看到的都是前者类型居多。

根据不同的产品策划，网站策划根据工作内容又被分成以下几类：
1）文案性网站策划：负责编写网站上的填充内容，比如公司简介、用户协议等；
2）编辑性网站策划：实际上就是网站编辑，在网站建设时参与了网站的规划工作，但其平常工作职责以网站编辑维护为主；
3）规划性网站策划：这类网站策划主要负责对新产品的整体规划，包括内容建设，网站布局，网站结构方面的规划，其职能及个人素质要求高于前2者；
4）项目管理性策划：这类网站策划具备了一定的IT项目管理经验，在网站建设过程中运用了大量的IT项目管理模式及经验，通过规范、高效的协同管理，来规划建设一个“网站”产品，在产品研发过程中，这类型策划需要参与每一个项目管理的规划阶段，并保持与各实施环节人员的沟通，如程序员、设计师、技术员、运营人、市场人员、商务人员等等，这类策划在一些大型互联网公司中存在，但其职务名称可能并不称之为策划。
而我个人比较推荐大家往第4种策划方向发展，这应该是未来网站策划发展的长远方向。

网站策划的职责与作用
网站策划应被定位为公司项目管理的业务支持机构或内部咨询机构，其主要职责包括：
（1）开发和维护Web项目管理标准、方法和程序；
（2）为公司提供Web项目管理的咨询和指导；
（3）为公司提供Web项目管理培训；
（4）为公司提供有关Web项目管理的其他支持。
网站策划的职责可进一步细化。下表所列的是网站策划的一些具体职能，供参考。

网站策划的一些具体职能
====================================================
工作范围　　　　　　　　　所提供的服务
====================================================
项目计划工作的技术　　　　选择和维护项目计划方法
支持　　　　　　　　　　　保存和更新计划摸板
收集和整理经验教训
维护项目进展情况的衡量标准
为时间和费用估计提供咨询
————————————————————
项目审计　　　　　　　　　指定检查项目每个里程碑所需的
核对表（检查清单）
支援项目中问题的解决
记录和维护解决问题的方案或方法
————————————————————
项目控制方面的支持　　　　不断维护项目变更控制的记录
维护项目变更控制的措施及终止项目的条款
确定时间表中的项目并不断维护
进行项目发展趋势的分析
支持项目状态报告的开发
对所有项目进行总结和提炼
————————————————————
项目团队方面的支持　　　　参与项目团队的组建工作
对团队成员进行项目管理技术的训练和指导
————————————————————
开发项目管理技能　　　　　对未来项目所需的技能进行评估
参与项目的绩效评价
支持项目团队的不断学习
————————————————————
维护项目管理程序　　　　　维护和更新项目管理的基本方法
提出关于项目管理程序培训的一般要求
将项目管理制度化
确定程序所要求的培训
维护项目管理的制度、程序和方法
确定程序所要求的通用培训
维护项目管理的政策、程序和方法
————————————————————
项目管理工具　　　　　　　对项目及组织机构进行工具的需求评估
评价现有工具对项目的适用性和兼容性
协调项目团队的工具培训
提供有关工具的技术专家意见
————————————————————
项目执行方面的支持　　　　建议新项目的优先级
就跨项目的资源分配提出建议
审查对项目进展情况的评估结果
为执行项目的人员提供项目管理咨询
————————————————————
项目报告　　　　　　　　　定期或连续地收集和确认信息
准备并分发各种报告
为高层管理者准备报告
————————————————————
问题　　　　　　　　　　　为项目经理建立记录并跟踪相关问题
在问题解决之后核销该问题
维护有关问题的历史资料以供参考
————————————————————
风险　　　　　　　　　　　进行风险评估、量化，减轻风险
跟踪风险及结束风险事件
准备应急计划
————————————————————
行动方案　　　　　　　　　记录行动方案的记录并跟踪各种举措
在行动方案实施结束后进行整理
维护关于行动方案的历史资料
————————————————————
信息交流　　　　　　　　　准备信息交流计划
根据需要更新信息交流计划
向项目利益相关者分发各种报告
保存和维护各种交流信息的副本
————————————————————
进度表　　　　　　　　　　利用自动化系统准备项目进度表
根据项目进展报告记录项目进展状态
根据需要制定项目进度表
————————————————————
费用　　　　　　　　　　　准备项目预算
根据费用支出情况维护费用预算
报告预算执行情况
————————————————————
质量　　　　　　　　　　　准备质量保证和质量控制计划
维护质量保证和质量控制计划
准备测试和演示方案
保存和更新测试记录
————————————————————
内部项目管理咨询　　　　　对项目的各个阶段提供项目管理专家
意见以改善计划，恢复项目，对技术
问题提供建议，为项目的的成功提供
建议
====================================================
网站策划还可能包括其他的职能。确定某项职能是否应包括在网站策划职能范围内的标准是项目负责人能否更有效地行使这一职能的前提。

网站策划部门内部又可视情况对web项目进行风险评估：
（1）进行单个项目的风险评估；
（2）开发风险评估的标准和程序；
（3）提供风险评估操作方面的指导和咨询；
（4）提供风险管理培训；
（5）选择和维护风险管理工具；
（6）作为风险管理资源分配的智囊团。