http://www.coolany.com/temp/ zh-cn PBlog2 v2.4 http://www.coolany.com/temp/images/logos.gif http://www.coolany.com/temp/ PJBlog3 http://www.coolany.com/temp/article.asp?id=337 anran@coolany.com(anran) Tue,13 Oct 2009 11:09:12 +0800 http://www.coolany.com/temp/default.asp?id=337 1.url中的关键词（第一和第二个字是最有价值的......）
2.域名中的关键词（英文网站的优势）
（Head部分）
3.Title tag中的关键词（10-50个字符，不包含特殊字符）
4.Description tag中的关键词（小于200个字符，这个参数现在Google已不再把它作为重要参数，但仍经常使用）
5.Keywords tag中的关键词（小于10个字，单个关键词必须在页面Body部分出现2次以上才有效，否则可能会被评估为Spam而受到处罚，Google官方曾说明说不再依据此参数评价，但其实仍在使用）

(Body部分)
6.关键词在Body文字部分的密度（5 - 20% - (all keywords/ total words)）
7.单个关键词密度（1 - 6% - (each keyword/ total words)）
8.在H1、H2、H3中的关键词（使用H1、H2、H3字体）
9.关键词字体尺寸（使用黑体、粗体、斜体......）
10.关键词接近度（2个关键词之间邻近的是最佳）
11.关键词短语顺序

（其他部分）
12.关键词在Alt文字中（图形中的Alt属性）
13.关键词在外部站点链接中（锚文本）

导航－内部链接部分：
14.内部页面的关键词（链接页面应该包含关键词）
15.所有内部链接必须是有效的
16.结构树（任何页面不超过4层深度链接）
17.低级页面之间适当的链接

导航－外部链接部分：

18.外部页面的关键词（Google的专利 链接须指向优秀站点，不要链接frame）
19.外部链接的锚文本（Google的专利 应该在此上展开主题和叙述）
20.链接稳定性（Google的专利 避免链接随时变换）
21.所有外部链接是有效的
22.少于100个外部链接（Google官方称限制100个，实际容许2－3次2000个）

Google排名有利因素（二）

页面上的其他因素：
24.域名等级（.edu是最高等级，其次是.org，而.com由于包含很多spam信息，所以会受到Google的严格审查）
25.文件尺寸（页面尺寸绝对不要超过100K，小于40K的为最佳）
26.URL中的连字符（1个或2个是最佳的，4个以上将被认为是spam，10个很可能被降级）
27.页面更新率（Google专利 对于新闻、零售、拍卖等站点更新越快越好）
28.页面数量的更新率（Google专利 老页面与新页面的比值）
29.链接的的更新率（Google专利 尚未能分析）
30.更新频率（更新频率＝蜘蛛的抓取频率）
31.页面主题
32.关键词衍生.....
33.语义关联（同义词等...）
34.潜在的语义索引
35.URL长度（尽可能的小，在IE中只允许2000个字符以内，最好控制在100字符以内）
36.站点大小（Google认为站点越大说明更大的资金支持、更好的组织、更好的架构，因此它会是好的站点）
37.站点年龄（Google专利 越老越好）
38.页面的年龄与站点上其他页面的年龄

Google排名不利因素（三）

39.在图像的form中有文字描述，但Body中没真正的文字描述；
40.镜像站点
41.过度优化
42.链接一个坏站点（不要链接frame....，定期检查每个外部链接站点在Google的状态）
43.重定向或刷新metatags（除非用户点击，否则不要自动跳转页面）
44.不要使用一些不文明的词汇
45.毒药单词
46.过多的横向链接（在你的WEB服务器中有多个站点，它们的横向链接会被视为无效的投票）
47.图片、文字的反盗链
48.关键词重复填充（降级处理）
49.关键词稀释（页面存在过多的非相关关键词，将会降低你真实内容的重要性）
50.页面内容编辑会降低一致性（Google专利 Google定期会对老的cache与新的cache进行比对，如果发现关键词、主题变化了，将会影响它的评价，这是Google针对SEO的有效工具）
51.内容改变频率（Google专利 过于频繁是不利的）
52.锚文本更新率（Google专利 过于频繁是不利的）
53.动态页面（这是搜索引擎的缺陷，可采用缩短URL,减少变量等办法，最好不要使用动态页面）
54.过多的JS代码（不要使用重定向和隐藏链接功能）
55.Flash页面（搜索引擎的蜘蛛是不能抓取flash内容的，如果要用flash页面，须同时有一个静态入口页面）
56.使用frame
57.Robot中设置了“no index”的tag
58.单个像素的链接（会被认为是一个鬼祟的链接）
59.不可见的文字（文字与背景色相同，页面上不可见，但能被蜘蛛检索到）
60.门页（Google专利 ）
61.内容重复（Google通常选一个最老的推送到前面，把其他的推送下去）
62.HTML代码需符合W3C标准

Google排名有利因素（非页面） （四）

反向链接：
63.PR（基于指向站点的链接数量和质量）
64.总的反向链接数（link:www.xxx.com Google axy  linkdomain:www.xxx.com Yahoo....）
65.反向链接页面PR>4
66.链接流行度（Google专利 推进太快会被认为是作弊）

每个反向链接：
67.每个涉及页面的PR
68.链接到你站点的锚文本（Google炸弹）
69.链接时间（Google专利 越久越好）
70.锚文本改变频率（Google专利 频率越高越不好）
71.涉及页面的流行度
72.涉及页面的外部链接数（越少越好，证明你的重要性）
73.涉及页面链接的位置（在HTML代码中最好）
74.涉及页面的关键词密度（针对搜索关键词）
75.涉及页面的title
76.链接来自"行家"网站（Google专利 极大的推进）
77.涉及页面主题相同

目录：
78.被DMOZ收录（巨大推进，因为Google的目录是从DMOZ获取的，一般要28个月才可能被收录）
79.DMOZ分类（据说综合类和地理类主题最适合收录）
80在Yahoo目录中收录（巨大推进，但需要每年支付299美金）
81.在LookSmart中收录
82.被inktomi收录
83.被其他目录类网站收录
84.特大站点的引入链接
85.站点历史悠久表明越稳定（对新的内容至少可以产生1－3周的推动）
86.站点目录树
87.站点地图（关键词在锚文本中体现）

用户行为：
88.页面流量（Google专利 visters数量及趋势）
89.页面选择率（Google专利 经常被点击的页面数量）
90.在页面上花费的时间（Google专利 相对长的时间表示对内容的认可）
91.用户是否将此页面加入书签（Google专利 ）
92.用户删除此书签（Google专利 ）
93.用户离开后去了哪儿（返回？点击链接？....）
94.用户使用的关键词
95.在此域名上花费的时间

网站主行为：
96.域名注册时间 （5年以上是一个有价值的）
97.是否加入合法联盟（拒绝spam，版权保护等）

Google排名不利因素（非页面）（五）

98.流量购买（这些流量产生低的转化率，甚至是0转化率，被认为是来自坏的外部链接）
99.链接分析（老的链接有价值，新的链接暂时没价值，用来阻止快速更改）
100.零外部链接
101.购买链接（Google专利）
102.站点排名优先（Google专利）
103.隐藏（给Google蜘蛛读取的是一个特定的页面，真正显示的是另外的页面）
104.来自坏站点的链接
105.域名偷窃（非法行为，将会被剔除）
106.如果同一IP向Google发送100次同一请求，可能将会被BAN这个IP
107.服务器可靠性>99.9%（注意你的Google更新时间，尽量不在此时间维护）
108.页面被剔除来自大的站点
109.排名处理由于竞争对手的侵害]]> http://www.coolany.com/temp/article.asp?id=283 anran@coolany.com(anran) Tue,17 Mar 2009 11:45:30 +0800 http://www.coolany.com/temp/default.asp?id=283
本文原文出处淘宝网UED Blog(http://ued.taobao.com/blog/2007/08/13/our_design_flow/)


淘宝面试的最后一个环节，是请应聘者向面试官提问，使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中，大约有三分之一会问我：“淘宝的设计流程是怎么样的？”我不是很了解问这个问题的人为什么会有如此高的比例。也许这是一个“安全”的问题，不会对面试有什么危害；也许目前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题；也许这个话题涉及各家公司的“机密”，确实无从找到相关的资料。

总而言之，虽然来面试淘宝的设计师人数有限，但我斗胆假设：目前国内所有网页设计师中的三分之一想了解更多关于“设计流程”方面的知识，而我们也不认为这是什么“机密”的话题(我了解的各公司设计过程都八九不离十，名称不同，本质上是一样的)。所以，就在此简单介绍一下淘宝UED的设计流程，期望对这三分之一的设计师有所帮助。


Step1：原型（Prototype）
设计的第一个阶段，我们称之为原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的话，我就用大白话来说：原型设计，就是完全不管产品长得好不好看，只把它要做的事情和怎么做这些事情想清楚，把它怎么和用户交互想清楚，而且把所有这些都画出来，让人可以直观地看到。

至于怎么画出来，那就随你了。用纸笔画，用白板水笔画，用Photoshop画，用Visio画，或者像我们一样用Axure画，都可以。只要把上面提到的这些都事无巨细地表达出来。

在原型的交付物（Delivery，也就是某个阶段的产出物）中，最重要也最常见的就是线框图（Wireframe），这玩意儿不用多解释了，看下面这张图就明白：

在画线框图的时候，要把握好细节的刻画程度。有些东西只要画个框就行了，而有些东西需要把文案都设计好。以免你的老板或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休，而忽视了最重要的页面主体部分。

此外，还要牢记：原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。


Step2：模型（Mock-up）
在原型被大家接受之后，就该关心产品长得好不好看了。我们以“模型”这个词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、风格、图示、插图等等。

要清楚的是，这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解，对交互设计和尚未进行的HTML/CSS/JS的Code都要有充分的了解。如果不能从全局的角度来做视觉设计，则只能是做做把水晶效果改成金属效果这样的“自娱自乐”，而对产品本身没有任何有价值的帮助。如果原型说：“在这个页面上，A比B重要。”，那他的脑子里就要有十七八种可以表现“A比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的基本要求。

更高一些的要求，才是视觉设计的“原始功能”。“到底是选水晶效果还是金属效果？”，“这个按钮选什么颜色好？”等等。这一类的思考和选择，应着眼于产品的气质、品牌等等，在各种产品间保持一定的统一，在用户心里打下视觉的烙印。其实要做到这一点是很难的，特别是还要满足上一点的要求。一般来说，如果能90%的把交互设计的成果和品牌形象表达出来，已经是很好的结果了。从我自己来说，就常常很郁闷不能用好的视觉语言来表达自己在原型设计中的想法，总是做完模型就打个七折:(

更更高的要求，有些问题用交互设计是很难解决的，这时就需要一个有创造能力的视觉师，可以从视觉设计的角度来创造性地解决问题（一时还没想出好的例子，想出来再补上）。

总的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来来看“视觉设计”的人还不多，大多还停留在“效果”、“风格”等表面议题上。个人以为在“Web标准”和“用户体验”之后，视觉设计是Web设计专业化运动的第三波，市场的需求已经存在，只差有人推动一下。

模型的设计一般来说都是用Photoshop了，下是是个例子（与原型的例子对应）：


Step3：展示版本（Demo）
这步我就不多说了，Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技术实现出来，以便后端的开发工程师可以接手编码。这个过程让小马、正淳专门起个新帖来详细介绍吧。只提一点，前端开发在有些公司是不放在设计团队的，而我们认为前端开发从很大程度上来说是对用户体验的提升和保证，开发只是它的一个手段和形式。所以就把这块工作一直留在我们团队，现在看起来这样很棒：）

把上述原型、模型转为xHTML/CSS之后就是这个页面了：
http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm

Step 0.5 / 1.5 / 2.5 / 3.5
居然还有半个半个的步骤？是的，这是我们的用户研究过程。在各个阶段的前后，我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由：给会员打个电话，旺旺上随便找人聊聊，到公司来做可用性测试，到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上，对研究方法也是不拘一格，“能抓老鼠”就行。关键的关键，研究的结果如何表现到产品上，如何吸收单个用户的意见来服务所有用户。

在这一点上，我们做得还很不够，积累也很薄，需要向同行们多多学习，也请大家多多指点。

最后……
关于流程，要注意：

1. 设计流程的目标，在于保证“无论谁来做这个产品的设计，都能达到80分”；
2. “100分”的完美作品，很有可能没有遵循流程，而是天才地融合了创新、传承和执行力的作品；
3. “流程”这种东西，只有与环境相匹配才能带来正面的作用。

以上是我们UED团队目前的设计流程，也许你也发现了，它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系，有不足的地方也请大家多指教。如果你借鉴了我们的流程，在工作中发现有什么问题，也请回来告诉我们，谢谢大家！
]]> http://www.coolany.com/temp/article.asp?id=250 anran@coolany.com(anran) Thu,10 Jul 2008 10:04:50 +0800 http://www.coolany.com/temp/default.asp?id=250     http://www.UCDChina.com

2、以前常去的设计类网站
    http://www.blueidea.com     (蓝色理想)
    http://www.rgbcn.net     (幻色中国,朋友的站)

3、找素材常去的网站
    http://www.zcool.com.cn      (站酷)
    http://www.krwz.com    (韩国素材)
    http://www.sc-cn.net    (素材中国)
    http://www.deskcity.com    (桌面城市)

4、常去的博客
    http://blog.sina.com.cn/chtong    (春日迟迟,女人的道理,呵呵)
    http://www.fatmouse.cn    (FatMouse, 喜欢他的博客界面设计)
    http://www.tianya8.net    (天涯博奕)

5、站长实用工具
    http://wss.cnzz.com    (流量统计分析)
    http://www.urtracker.cn    (常用的事务跟踪系统)
    http://alexa.chinaz.com    (中文 Alexa )
    http://mindmanager.net.cn  (思维导图)

6、我的MAC需要的网站
    http://www.7do.net    (七度苹果软件下载基地)

7、我喜欢的网站
    http://www.yobo.com    (最喜欢的2.0音乐网站)
    http://www.douban.com    (最喜欢的2.0影评书评网站)
    http://www.tudou.com    (看模糊电影最常去的网站)

8、我自己的网站
    http://www.coolany.com    (以前的"安然_这个夏季~" 实在不知道该做个什么网站,闲置以久)
    http://temp.coolany.com    (我的永久博客)


9、最爱的游戏

游侠SIMS论坛         http://game.ali213.net/thread-2203283-1-1.html
ROSESIMS2FREE       http://www.rosesims.org
XMSIMS  小渺        http://chinese.xmsims.com/sims2
超精致制作            http://sims2.simcredibledesigns.com
华服                  http://game.ali213.net/viewthread.php?tid=2139102&extra=&page=1
http://bbs.gamesir.com/forum-13-1.html
http://sims2diy.5d6d.com/
http://yearsims.5d6d.com/forum-10-1.html
http://www.chinaln.com/

10、西单大悦城电影院  http://www.sddyy.cn


11、有用的网站
三亚旅游必去啊 http://www.100k.cn/
]]> http://www.coolany.com/temp/article.asp?id=221 anran@coolany.com(anran) Fri,26 Oct 2007 15:54:53 +0800 http://www.coolany.com/temp/default.asp?id=221
brightness.exe  背光调节程序

kbdmagr.exe  F1-F10 APPLE功能键程序

avp.exe  是卡巴斯基杀毒软件的相关程序
TCPlus.exe  是腾讯TT浏览器的附带程序旋风下载程序,可删.]]> http://www.coolany.com/temp/article.asp?id=219 anran@coolany.com(anran) Mon,27 Aug 2007 13:43:07 +0800 http://www.coolany.com/temp/default.asp?id=219
1.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

Code:

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>





2.FireFox下如何使连续长字段自动换行

众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决

Code:

<style type="text/css">
<!--
div {
    width:300px;
    word-wrap:break-word;
    border:1px solid red;
}
-->
</style>

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(el, intLen){
    var obj=document.getElementById(el);
    var strContent=obj.innerHTML;  
    var strTemp="";
    while(strContent.length>intLen){
        strTemp+=strContent.substr(0,intLen)+" ";  
        strContent=strContent.substr(intLen,strContent.length);  
    }
    strTemp+=" "+strContent;
    obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);
/* ]]> */
</script>





3.ff下为什么父容器的高度不能自适应

在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。

Code:

clear:both;





4.IE6的双倍边距BUG

浮动后本来外边距10px,但IE解释为20px,解决办法是加上

Code:

display:inline





5. IE6下绝对定位的容器内文本无法正常选择的问题

此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true

6. IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.

7. IE6下两个层中间怎么有间隙

这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

8. list-style-image无法准确定位的问题

list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

9. LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器

Code:

<style type="text/css">
<!--
li {
    width:200px;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
    }

-->
</style>





10.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id="aa"  不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题
ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.



11.如何垂直居中文本

将元素高度和行高设为一致。

Code:

<style type="text/css">
<!--
div {
    height:30px;
    line-height:30px;
    border:1px solid red
    }
-->
</style>





12.如何对齐文本与文本输入框

加上 vertical-align:middle;

Code:

<style type="text/css">
<!--
input {
    width:200px;
    height:30px;
    border:1px solid red;
    vertical-align:middle;
}
-->
</style>





13.为什么FF下面不能水平居中呢

FF下面设置容器的左右外补丁为auto就可以了

Code:

<style type="text/css">
<!--
div {
    margin:0 auto;
}
-->
</style>





14.为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;  这里为了照顾不认识min-height的IE6 可以这样定义:

Code:

{
height:auto!important;
height:200px;
min-height:200px;
}





15.为什么IE6下容器的宽度和FF解释不同呢

Code:

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
    cursor:pointer;
    width:200px;
    height:200px;
    border:10px solid red
    }

-->
</style>
<div onclick="alert(this.offsetWidth)">web标准常见问题大全</div>



问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true

16.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
    scrollbar-face-color:#f6f6f6;
    scrollbar-highlight-color:#fff;
    scrollbar-shadow-color:#eeeeee;
    scrollbar-3dlight-color:#eeeeee;
    scrollbar-arrow-color:#000;
    scrollbar-track-color:#fff;
    scrollbar-darkshadow-color:#fff;
    }

-->
</style>





17.为什么我定义的样式没有作用呢

这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#aa ul li {
    color:red
    }
.aa {
    color:blue
    }
-->
</style>
<div id="aa">
<ul>
<li class="aa">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</li>
</ul>

</div>





18.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

19.为什么这个背景颜色无法显示

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
ul {
    background:red
    }
li {
    float:left;
    width:180px;
    }
-->
</style>
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->  
<ul class="gainlayout">
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>

<div style="clear:both"></div>
</ul>



IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm

解决方法之一:

Code:

<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->  





20.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

Code:

<param name="wmode" value="transparent" />





21.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

Code:

<style type="text/css">
<!--
div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red;
    }

-->
</style>





22 .图片垂直与容器内

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px
    }

-->
</style>

<div><p><img src="logo.gif" /></p></div>



或者使用背景图的办法:

Code:

background:url("logo.gif") center no-repeat;





23.如何让div横向排列

横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
    float:left;
    width:200px;
    height:200px;
    border:1px solid red
    }
-->
</style>

<div>web标准常见问题大全</div>
<div>web标准常见问题大全</div>
<div>web标准常见问题大全</div>]]> http://www.coolany.com/temp/article.asp?id=192 anran@coolany.com(anran) Wed,07 Mar 2007 16:07:49 +0800 http://www.coolany.com/temp/default.asp?id=192 position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位
example:
#div-1 {
position:static;
}

2. position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:

example:
#div-1 {
position:relative;
top:20px;
left:40px;
}

如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。





可见， position:relative;并不是很好用。

3. position:absolute|绝对定位
使用position:absolute;,能够很准确的将元素移动到你想要的位置，让我将 div-1a 移动到页面的右上角:

example:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

4. position:relative + position:absolute|绝对定位+相对定位
如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。
让div-1a定位于div-1的右上角：

example:
<div id="div-1">
<div id="div-1a">
this is div-1a element.
</div>
this is div-1 element.
</div>

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. two column layout|两列布局
让我们实践position:relative + position:absolute的理论，实现两列布局。

example:
<div id="div-1">
<div id="div-1a">this is the column-one</div>
<div id="div-1b">this is the column-two</div>
</div>

#div-1 {
position:relative;/*父元素相对定位*/
}
#div-1a {
position:absolute;/*子元素绝对定位*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*子元素绝对定位*/
top:0;
left:0;
width:200px;
}

注意，在这个例子中会发现父元素的高度不会随着子元素的高度变化，所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。

6.float|浮动对齐
使用float定位一个元素有float:left;&float:right;两种值。这种定位只能在水平坐标定位，不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。

example:
#div-1a {
float:left;
width:200px;
}

7.make two clumn with float|浮动实现两列布局
如果让一个元素float:left;另一个float:right;控制好他们的宽度，就能实现两列的布局效果。

example:
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

8.clear float|清除浮动
如果你不想让使用了float元素的下面的元素浮动环绕在它的周围，那么你就使用clear,clear有三个值，clear:left;(清除左浮动)，clear:right;(清除右浮动)，clear:both;(清除所有浮动)。

example:
<div id="div-1a">this is div-1a</div>
<div id="div-1b">this is div-1b</div>
<div id="div-1c">this is div-1c</div>

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

至此，这个CSS的定位部分就结束了，你可以动手体会体会加深印象。]]> http://www.coolany.com/temp/article.asp?id=172 anran@coolany.com(anran) Fri,19 Jan 2007 15:34:45 +0800 http://www.coolany.com/temp/default.asp?id=172 <body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

--------------------------------------------------------------------------------
表格变色
<TD onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand">
--------------------------------------------------------------------------------
禁止复制，鼠标拖动选取
<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>
--------------------------------------------------------------------------------
普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>

--------------------------------------------------------------------------------
iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>
--------------------------------------------------------------------------------
IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">
--------------------------------------------------------------------------------
字号缩放
越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
--------------------------------------------------------------------------------
select挡住div的解决方法
在div里加入下面的代码，根据需要调整就可以了。
<iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;">
</iframe>

--------------------------------------------------------------------------------
iframe(嵌入式帧)自适应高度
填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。
<iframe name="guestbook" src="gbook/index.asp" scrolling=no width="100%" height="100%" frameborder=no onload="document.all['guestbook'].style.height=guestbook.document.body.scrollHeight"></iframe>
--------------------------------------------------------------------------------
跳转菜单新窗口
<select name="select" onchange="window.open(this.options[this.selectedIndex].value)">
<option value="http://www.microsoft.com/ie"> Internet Explorer</option>
<option value="http://www.microsoft.com"> Microsoft Home</option>
<option value="http://msdn.microsoft.com"> Developer Network</option>
</select>
--------------------------------------------------------------------------------
flash透明选项
<param name="wmode" value="transparent">
--------------------------------------------------------------------------------

添加到收藏夹和设为首页
<a href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.makewing.com/lanren/');">设为首页</a>

<a href="javascript:window.external.AddFavorite('http://www.makewing.com/lanren/','懒人图库')">收藏本站</a>

--------------------------------------------------------------------------------
记录并显示网页的最后修改时间
<script language=JavaScript>
document.write("最后更新时间: " + document.lastModified + "")
</script>
--------------------------------------------------------------------------------
节日倒计时
<Script Language="JavaScript">
　　 var timedate= new Date("October 1,2002");
　　 var times= "国庆节";
　　 var now = new Date();
　　 var date = timedate.getTime() - now.getTime();
　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));
　　 if (time >= 0)
　　 document.write( "现在离"+times+"还有: "+time +"天")
</Script>
--------------------------------------------------------------------------------
加在HEAD里
禁止缓存
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

--------------------------------------------------------------------------------
让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>
--------------------------------------------------------------------------------
打开窗口即最大化
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>
--------------------------------------------------------------------------------
加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
--------------------------------------------------------------------------------
滚动
<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>滚动信息
</marquee>
--------------------------------------------------------------------------------
防止点击空链接时，页面往往重置到页首端
代码“javascript:void(null)”代替原来的“#”标记
--------------------------------------------------------------------------------

文字或图片弹出指定大小的窗口
在body中加入
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
</script>
弹出代码
<a href="#" target="_self" onClick="MM_openBrWindow('windows01.htm','','width=550,height=380')" width="550" height="380" border="0">图片或文字</a>

--------------------------------------------------------------------------------
flash按钮加链接
on (press) {
getURL("http://www.makewing.com","_blank");
}
--------------------------------------------------------------------------------
跳转页面代码
<meta http-equiv="refresh" content="5;url=http://www.makewing.com">
--------------------------------------------------------------------------------
细线分隔线
<hr noshade size=0 color=#C0C0C0>
--------------------------------------------------------------------------------
网页中的自动换行
<td style="word-break:break-all">就搞定了。
完整的是
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
--------------------------------------------------------------------------------
消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">
--------------------------------------------------------------------------------
禁止页面正文内容被选取
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return
false"onmouseup="document.selection.empty()">

--------------------------------------------------------------------------------
不能点右键，不用CTRL+A，不能复制作!
<body oncontextmenu="window.event.returnValue=false"
onkeypress="window.event.returnValue=false"
onkeydown="window.event.returnValue=false"
onkeyup="window.event.returnValue=false"
ondragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>
--------------------------------------------------------------------------------
IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:
<Body Background="图片文件" bgproperties="fixed">
--------------------------------------------------------------------------------
随机变换背景图象（一个可以刷新心情的特效）
<Script Language="JavaScript">
　　 image = new Array(4); //定义image为图片数量的数组
　　 image [0] = 'tu0.gif' //背景图象的路径
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("<BODY BACKGROUND="+image[number]+">");
</Script>

--------------------------------------------------------------------------------
flash载入影片
on (release)
{
loadMovie("1-01.swf", "_root.loaderclip");
}
--------------------------------------------------------------------------------
图片表单按钮
<form id="form1" name="form1" method="post" action="">
<img src="login.gif" width="62" height="22" onclick="document.form1.submit()" />
</form>
--------------------------------------------------------------------------------
左右阴影背景的CSS定义方法
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}
--------------------------------------------------------------------------------
划过链接 手型鼠标
style="cursor:hand"
--------------------------------------------------------------------------------
如何关闭层
<div id="Layer1"></div>
<a href="#" onClick="Layer1.style.display='none'">关闭层</a>
--------------------------------------------------------------------------------
关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>
--------------------------------------------------------------------------------
如果文字过长,则将过长的部分变成省略号显示
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
--------------------------------------------------------------------------------
进入主页后自动最大化
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

--------------------------------------------------------------------------------
凹陷文字
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="http://www.lenvo.cn/">www.lenvo.cn</a></font>
</div>
--------------------------------------------------------------------------------
运行代码框
<script>
function Preview()
{var TestWin=open('');
TestWin.document.write(code.value);}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >运行</button>
--------------------------------------------------------------------------------

给表格做链接
<table width="100%" onclick="window.open('http://www.makewing.com/', '_blank')" style="CURSOR:hand">
<tr>
<td height="100" bgcolor="f4f4f4"> </td>
</tr>
</table>

--------------------------------------------------------------------------------
让弹出窗口总是在最上面
<body onblur="this.focus();">
--------------------------------------------------------------------------------
CSS文字阴影
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}
--------------------------------------------------------------------------------
后退&关闭窗口
后退：javascript:history.back(1)
关闭：javascript:window.close();
--------------------------------------------------------------------------------
表格透明
style="FILTER: alpha(opacity=72)"
--------------------------------------------------------------------------------
如何避免别人把你的网页放在框架中
<script language=“javascript”><!--if (self!=top){top.location=self.location;} -->< /script>
--------------------------------------------------------------------------------
Alt和Title的区别
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。

<a href="#" Title="给链接文字提示">文字</a>
<p Title="给链接文字提示">文字</p>

<img src="图片链接" alt="给图片提示">

--------------------------------------------------------------------------------
所有的javascript的调用尽量采取外部调用
<SCRIPT LANGUAGE="javascript" SRC="js/xxxxx.js"></SCRIPT>
--------------------------------------------------------------------------------
链接到
response.redirect"login.asp"
location.href="xx.asp"
onClick="window.location='login.asp'"
onClick="window.open('')"

--------------------------------------------------------------------------------

基本链接样式
a:link 表示链接的样式
a:active 表示当前活动连接的样式
a:hover 表示鼠标划过时的样式
a:visited 表示已经访问过的连接的样式

"link-visited-hover-active" 简记为 "lvha" 即 "love"+"hate"

--------------------------------------------------------------------------------
在同一页面设置不同文字链接效果的样式
<style type="text/css">
.green {COLOR: #309633}
.green A:link {COLOR: #309633; TEXT-DECORATION: none}
.green A:visited {COLOR: #309633; TEXT-DECORATION: none}
.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}
.green A:active {COLOR: #309633; TEXT-DECORATION: none}
</style>
<a href="#" class="green">文字</a>

--------------------------------------------------------------------------------
下拉跳转菜单
<select name=select onchange="javascript:window.open(this.options[this.selectedIndex].value)"style="color:#333">
<option>----请选择----</option>
<option value="http://www.makewing.com/lanren/">懒人图库</option>
<option value="http://www.makewing.com/store/">MakeWing Store</option>
<option value="http://www.izhu.com/">爱烛网</option>
</select>]]> http://www.coolany.com/temp/article.asp?id=142 anran@coolany.com(anran) Wed,01 Nov 2006 13:09:28 +0800 http://www.coolany.com/temp/default.asp?id=142
　　那Web 1.0是什么呢？

　　他们说，记得静态HTML的WWW时代么？

　　（那个时代的WWW应用、人们的Web体验、对社会的影响如何？）

　　那么动态HTML和静态HTML下的Web相比，是多少版本？1.5？对了，他们是真这么叫的。

　　（在效果和影响上，与1.0相比，扩展和加深多少？）

　　要呈现的数据存储在数据库中，通过Web服务端的程序，应用户的请求，取出数据，加上事先设计的模板，动态的生成Html代码，发送到用户的浏览器那里。

　　他是1.0系列，应为用户在浏览器中所见和Web 1.0一样，它有0.5的升级，因为数据不是事先制作并发布，而是动态生成，和用户的需要交互生成。

　　那好，在加0.5，到Web 2.0，变化是在哪里呢？

　　（看到了正在崛起的和改变的，会继续朝着什么方向改变互联网和社会呢？）

　　更新：关于各个版本的差别，看看亚马逊的例子。

　　事情没有那么幸运，Web 2.0并不是一个具体的事物，而是一个阶段，是促成这个阶段的各种技术和相关的产品服务的一个称呼。所以，我们无法说，Web 2.0是什么，但是可以说，那些是Web 2.0。

　　WikiPedia的Web 2.0条目下列出了这些条件：

　　* CSS 和语义相关的 XHTML 标记

　　* AJAX 技术

　　* Syndication of data in RSS/ATOM

　　* Aggregation of RSS/ATOM data

　　* 简洁而有意义的 URLs

　　* 支持发布为 weblog

　　* RESTian (preferred) 或者 XML Webservice APIs

　　* 一些社会性网络元素

　　必须具备的要素有：

　　* 网站应该能够让用户把数据在网站系统内外倒腾。

　　* 用户在网站系统内拥有自己的数据

　　* 完全基于Web，所有的功能都能透过浏览器完成。

　　（以上内容引用自英文版维基百科）

　　虽然这只是一家之言，不过，对于其中谈到的几个要素，大家还是公认的。

　　- 基于RSS/ATOM/RDF/FOAF等XML数据的同步、聚合和迁移。

　　数据不再和页面和网站混粘在一起，它独立了，它跟着用户走。这是Web 2.0的很重要特征。这也是为什么Blog是Web 2.0的代表的原因。在网志上，常主角的是相互独立的一则则的网志。

　　独立，然后有物理表现。现在，就能让他们活跃起来。透过对XML数据的处理，这些内容能被自由的组合，被各种应用程序，不论是Web程序还是桌面程序等呈现和处理。

　　当然，最重要的是背后的人。

　　- 社会性因素。

　　内容跟着人走，内容又能够被用户自由的组合，也就是说，用户能够自由的借助内容媒介，创建起一个个的社群，发生各种社会性的（网络）行为。

　　此外还有标签以及建立在开放标签系统之上的Folksonomy。

　　- 第三个公认的因素是开放API，这个技术性稍强些，得另花时间研习，可以先看看例子：amazon、flickr、google map等。

　　从Web应用的产品/服务生产者角度来说，该如何创建Web 2.0的产品呢？

　　重要的是要抓住这么几点，一个是微内容（这里有定义），一个是用户个体。除了这两个最基本的之外，还可以考虑社群内的分享以及提供API。

　　微内容：英文是microcontent。用户所生产的任何数据都算是微内容，比如一则网志，评论，图片，收藏的书签，喜好的音乐列表、想要做的事情，想要去的地方、新的朋友等等。这些微内容，充斥着我们的生活、工作和学习，它的数量、重要性，还有我们对它的依赖，并不亚于那些道貌岸然、西装革履的正统文章、论文、书籍。

　　对微内容的重新发现和利用，是互联网所开创的平等、民主、自由风气的自然衍生，也是互联网相关技术消减信息管理成本之后的一个成果。

　　我们每天都生产众多的微内容，也消费着同样多的微内容。对于Web 2.0来说，如何帮助用户管理、维护、存储、分享、转移微内容，就成了关键。

　　用户个体。对于Web 1.0的典型产品/服务来说，用户没有具体的面貌、个性，它只是一个模糊的群体的代名词而已。但是对于Web2.0的产品和服务来说，用户是个实实在在的人。Web 2.0所服务的，是具体的人，而不是一个如同幽灵般的概念。并且，这个人的具体性，会因为服务本身而不断地充实起来。

　　如何为这个具体的个体服务，是Web 2.0设计的起点。

　　因此，一类可以被称作Web 2.0的产品/服务将是这样：

　　服务于用户个体的微内容的收集、创建、发布、管理、分享、合作、维护等的平台。

　　其他的呢？恐怕就设计到好些人提到的，微内容的XML表现；微内容的聚合；微内容的迁移；社会性关系的维护；界面的易用性等等。

　　以及是否就是开源、参与、个人价值、草根、合作等等？

　　Web2.0是许多方面起头并进又相互牵连的一个新的阶段的到来。因此，不同的人，有着不同的看法。那么，对于Web开发人员来说，Web2.0意味着什么呢？

　　他们说Web2.0阶段，Web是一个平台，或者说，Web正在变得可编程，可以执行的Web应用。野心家们设想这个它的终极目标是Web OS。

　　Web 1.0时候，Web只是一个针对人的阅读的发布平台，Web由一个个的超文本链接而成。现在的趋势发生了变化，Web不仅仅是Html文档的天下，它成了交互的场所。

　　Web 2.0 Conference网站的横幅引用Jeff Bezos的话说“Web 1.0 is making the internet for people，web 2.0 is making the internet better for computers”。

　　具体来讲，他们说Web成为一个开发环境，借助Web服务提供的编程接口，网站成了软件构件。

　　这些，就是Web Service的目标吧，信息孤岛通过这些Web Service的对话，能够被自由构建成适合不同应用的建筑来。

　　一些例子：del.icio.us、flickr、a9、amazon、yahoo、google、msn等提供的编程接口衍生出的各种应用。

　　为什么要开放APIs，这涉及到集市中的商业方面的技术策略。当然，还有更深层的原因，那是什么呢？

　　这种交互不仅体现在不同的网站服务之间，同时还体现在用户和Web之间在浏览器上的交互。这也是为什么在美味书签的收藏中Web2.0和AJAX如此相关的一个原因。

　　在Web页面上使用桌面程序有的那些便利，真的是很享受的事情。这恐怕也是Web可编程的一个方面，Web页面不再是标记和内容混合那样的简单，它就是一个可以编程的地方（是这样理解吧？）

　　有人反对说，AJAX的使用对搜索引擎不友好，只有Web 1.0的站长才关心这个事情吧，在Web 2.0时候，站长应该关心的是用户参与的便利、用户的自由度，至于搜索，有RSS/ATOM/RDF等，更本用不着操心，Google不是已经顺应这个趋势，让大家主动提交了么？

　　可编程的第三个方面，是否在于Web应用和桌面应用之间的无缝连接趋势的出现？类似这里说的“从工具上，是由互联网浏览器向各类浏览器、rss阅读器等内容发展”

　　编程的一个重要目的是对数据的操作，因此，对于网站来说，除了Web Service接口之外，最近为简便方式就是将内容以RSS/RDF/ATOM格式，或者有意义的XHTML格式输出，同时实现内容和表现的分离。

　　[Web 2.0是个历史学的概念，而非是个技术性的概念，它是对Web发展历史断代的成果。对这个概念的梳理，能帮助我更好的把握互联网正在发生的技术与文化。]

　　中文网志圈谈论的Web 2.0内容摘要：

　　- “Web 2.0是用来研究现象、发现规律的东西，不是用来招商引资、搭台唱戏的东西。当越来越多的互联网应用采取与用户互动的方式，越来越多的内容是由用户产生，越来越多的用户参与到互联网创造的过程中的时候，其实它代表了一种新的思潮。在这种思潮之下，一些新的技术开始出现，一些古老技术重新焕发了生机。随便你怎么表述这样一种现象，但现象本身是实实在在存在的，不管是叫它Web 2.0，还是社会化互联网。”[Keso：老冒给Web 2.0浇了一桶冷水]

　　- “我觉得最有价值的一个是， web应用的数据格式开始逐渐出现了交换“标准”...这些标准...更加容易被机器自动化处理...能帮助人更好地过滤和定制化信息。其次，更多的服务将以web service的形式来提供，...这使得web 服务可以被互相集成， 从而诞生更多新的服务...人的重要性被提高了。过去web更多注重在信息提供， 而现在的越来越多的应用更加关注人，也就是所谓“社会性”。此外web的可用性改进正在被越来越重视...”[老冒：朝web 2.0泼点冷水]

　　- “我认为Web x.x是人们为了区别不同时代Web的发展而使用的，而这些概念也是经过归纳出来的结果。抓住对方向，如Wikipedia中所提到的朝向互动及社会网络的方向发展，不论应用何种技术，只要能达到目的都是很好的。甚至作为一般的使用者，都可以不去理会Web x.x的讨论，因为我们都已经在使用这些技术或网站了。”[图书馆观点：Web 2.0]

　　- “RSS逐渐成为在线内容提供服务的标准发行平台。Blog以及user-generated内容的兴起。My Yahoo提供的RSS整合型服务。同时提出了值得密切关注的一些发展中领域，其中包括搜索技术，个性化，User-Generated内容（包括 blog，评论，图像和声音），音乐，短视频和Accessibility(易访问性）”[Owen：Mary Meeker新作 - 关于Digital World的发展报告的摘取]

　　- “我们谈论的Web2.0带给我们的是一种可读写的网络，这种可读写的网络表现于用户是一种双通道的交流模式，也就是说网页与用户之间的互动关系由传统的“Push”模式演变成双向交流的“Two- Way Communication”的模式。而对于Web服务的开发者来说，Web2.0带来的理念是服务的亲和力，可操作性，用户体验以及可用性。”[Owen：BaCKpACK-体验可读写的Web服务]

　　- “web 2.0是一种可以被分发的信息概述，web文档被格式化成了web数据。我们不会再看到不同旧地信息，现在我们所注意到是一种聚合、再混合内容的工具。”[songzhen：也说Web 2.0的翻译]

　　- “从这些应用中可以看到：如果基于传统的HTML，同样的功能实现将变得非常复杂和不稳定，数据的再生产和交换成本是很高的。所以：RSS这个标准最终要的贡献就是使得互联网的大部分网站变得可编程：类似的例子还有Blog中的：TrackBack Ping等机制，这些机制都是依赖XML/RPC实现的。当初为Lucene设计一个RSS/XML的接口也是为了这个初衷，它使得全文检索服务可以轻松的嵌入到各种应用中，通过关键词将各种内容之间实现更丰富的关联(Well Referenced)。”[车东：RSS，简单协议使得互联网可编程]

　　- “聚合的可能性以及如何更好地聚合（通常来说，更好的聚合应该基于个人知识管理和人际关系管理）很显然应该成为新一代或者说web2.0架构的核心之一。还有，你会重新发现，恰好是分散带动了聚合，聚合促进了分散，通过聚合的思维，互联网的网络状变得越来越丰富和密集，web2.0就变得越来越有趣味，它将web1.0时代的硕大节点即门户网站不断消解，去努力创造一个更加和谐的自然网络图谱。”[Horse：rss，聚合的无数可能]

　　- “新的web2.0网站都依赖于用户参与、用户主导、用户建设”。[Horse：Web 2.0这个词]

　　- Keso：Web 1.0与Web 2.0的区别

　　- “表面上看，Bloglines取代了门户，成为一个新的中心，但这里有一个重大的区别。门户是只读的，它带有某种锁定的性质。你可以离开门户，但你无法带走门户的内容。Bloglines则完全不同，你觉得它好用，就会继续使用，有一天你不再喜欢Bloglines，你完全可以导出你的OPML，到另一个 RSS订阅网站，或者干脆用客户端软件浏览同样的内容。所以，像Bloglines这样的网站，是可写的，你可以导入，也可以导出。就像你对信息拥有选择权，对服务提供商也同样拥有选择权，没有人可以锁定你，主动权在你自己手上。”[Keso：再说信息选择权]

　　- “Flickr、del.icio.us、Bloglines等Web 2.0服务，通过开放API获得了很多有趣、有用的想法，并借助外部的力量，让用户获得了更好的体验。更多大公司也加入到开放API的潮流中，Google、Yahoo!、Amazon、Skype。Google桌面搜索今年3月才开放API，很快就产生了大量的创造，大大扩充了可搜索的文件格式。”[Keso：开放API]

　　- “归纳：web1.0天天谈门户，web2.0谈个人化；web1.0谈内容，web2.0谈应用；web1.0商业模式，web2.0谈服务；web1.0谈密闭、大而全，web2.0大家谈开放、谈联合；web1.0网站中心化，web2.0谈个人中心化；web1.0一对一，web2.0谈社会性网络；web1.0不知道你是狗，web2.0你去年夏天干了什么我一清二楚甚至想要干什么呢。。。”[van_wuchanghua：发现了N.HOOLYWOOD，我还知道你今年夏天要干什么]

　　- “我认为Web2.0有下面几个方面的特性: 个性化的传播方式. 读与写并存的表达方式. 社会化的联合方式.标准化的创作方式. 便捷化的体验方式. 高密度的媒体方式．”[飞戈：Web2.0与未来的网络]

　　- “用RAILS写的网站带有典型的读写网络的特征：RAILS创建的三个架构中的ACTIVE RECORD这个模块中，如果你读读它最重要的基类 ActiveRecord::Base，你会发现有CREAT,EDIT,SAVE,DESTROY这些方法已经天然包含在内了，这让实现一个数据库的CRUDS行为变得如此简单。由于这些类的方法直接和网页的名称映射到一起，这使得网页本身就像一个可以编缉的数据库的数据项。”[Blogdriver：RUBY ON RAILS，wEB2.0世界新生的创造力]

　　- “Greasemonkey一定名列前茅。这个通过User Script就能修改任何网页输出效果的插件极大的提高了用户阅读的自主性，一推出就引起了轰动，同时也引来了不少争议。”[Webleon：platypus，完全可写的互联网]

　　- “Web1.0到Web2.0的转变，具体的说，从模式上是单纯的“读”向“写”、“共同建设”发展；从基本构成单元上，是由“网页”向“发表/记录的信息”发展；从工具上，是由互联网浏览器向各类浏览器、rss阅读器等内容发展；运行机制上，由“Client Server”向“Web Services”转变；作者由程序员等专业人士向全部普通用户发展；应用上由初级的“滑稽”的应用向全面大量应用发展。 ”[Don：Web 2.0概念阐释]

　　Web 2.0阶段的一个重要特征是开放，和Web初期的开放有很大不同，有以下几种突出的表现：

　　内容方面。

　　- 内容的创作共用授权。它的广谱和可选择性，让它具有了足够的生命力。CC先是在网志圈中广泛采用，后来许多商业公司也纷纷采用CC方式（比如BBC）；先是文本世界采用，后来逐渐推广到了多媒体世界，比如音频、视频、Flash动画等等。一场自由的文化（free culture）运动在各个方面悄然铺开。

　　- 内容来源方面的开放。和早期的Web阶段相比，由于使用相关设备的成本降低，利用相关技术的门槛减低，人们可以自由生产并发布各种内容，比如文本信息，比如语音记录，比如视频录制等。信息的生产和传播不再仅仅是商业资本或者技术精英的特权。在Web的新阶段，原来在商业、技术与大众之间的信息生产和传播的落差被削平。消除信息垄断和去中心化已经成为可能。不仅如此，信息的生产和消费的模式也发生了变化，从原来的生产/消费的对立，变成了参与式的信息集市。

　　Web主体方面。

　　- 商业网站也渐渐采取了开放的、参与的模式。除了内容上的CC授权出现之外。原来并不外露的内容，也随着blog、podcasting等的兴盛而对外开放。一些网站还在技术层面开放，比如开放源代码，比如开放APIs（编程接口），让自己成为一个平台，让用户可以参与衍生产品的创造，用户本身也是产品的生产者。不仅是内容、技术层面，在鼓励用户的参与上，也有相应的开放出现，比如一些新闻网站的RSS源的输出、引用通告（trackback）功能的采纳、blogthis便利的提供，无一不是让用户参与到内容生产、传播的各个环节。

　　- 个人信息层面的开放。有开放，才有交流，才有社会行为和形态产生。个人内容的开放是与一类Web 2.0服务的兴起有关。它涵盖了内容（文本、声音、影像、视频）、关系、行为等等。]]> http://www.coolany.com/temp/article.asp?id=141 anran@coolany.com(anran) Wed,01 Nov 2006 13:00:47 +0800 http://www.coolany.com/temp/default.asp?id=141
搜索最大的贡献是，把互联网上海量的信息，用机器初步分了个线索。但是，光知道网页里有哪些关键字，只解决了人浏览网页的需求。所以，Tim-Berners-Lee在提出WWW不久，即开始推崇语义网（Semantic Web）的概念。为什么呢？因为互联网上的内容，机器不能理解。他的理想是，网页制作时和架构数据库时，大家都用一种语义的方式，将网页里的内容表述成机器可以理解的格式。这样，整个互联网就成了一个结构严谨的知识库。从理想的角度，这是很诱人的，因为科学家和机器都喜欢有次序的东西。Berners-Lee关心的是，互联网上数据，及能否被其它的互联网应用所重复引用。举一个例子说明标准数据库的魅力。有个产品叫LiberyLink。装了它后，到Amazon上去浏览时，会自动告诉你某一本书在用户当地的图书馆能否找到，书号是多少等。因为一本书有统一的书号和书名，两个不同的互联网服务（Amazon 和当地图书馆数据库检索）可以公享数据，给用户提供全新服务。

但是，语义网提出之后，曲高和寡，响应的人不多。为什么？因为指望要网页的制作者提供这么多额外的信息去让机器理解一个网页，太难；简直就是人给机器打工。这违反了人们能偷懒就偷懒的本性。看看Google的成功就知道。 Google有个Page Rank技术，将网页之间互相链接的关系，用来做结果排序的一个依据，变相利用了网页制作人的判断力。想一想网页的制作者们，从数量来说，比纯浏览者的数量小得多。但Google就这一个革新，用上了网页的制作者的一部份力量，已将其推上了互联网的顶峰。

所以互联网下一步，是要让所有的人都忙起来，全民织网，然后用软件，机器的力量使这些信息更容易被需要的人找到和浏览。如果说WEB1.0是以数据为核心的网，那我觉得WEB2.0是以人为出发点的互联网。 我们看一看最近的一些WEB2.0产品，就可以理解以上观点。

Blog： 用户织网，发表新知识，和其他用户内容链接，进而非常自然的组织这些内容。

RSS： 用户产生内容自动分发，定阅

Podcasting： 个人视频/声频的发布/定阅

SNS： blog+人和人之间的链接

WIKI： 用户共同建设一个大百科全书

从知识生产的角度看，WEB1.0的任务，是将以前没有放在网上的人类知识，通过商业的力量，放到网上去。WEB2.0的任务是，将这些知识，通过每个用户的浏览求知的力量，协作工作，把知识有机的组织起来，在这个过程中继续将知识深化，并产生新的思想火花；

从内容产生者角度看，WEB1.0是商业公司为主体把内容往网上搬，而WEB2.0则是以用户为主，以简便随意方式，通过blog/podcasting 方式把新内容往网上搬；

从交互性看，WEB1.0是网站对用户为主；WEB2.0是以P2P为主。

从技术上看，WEB客户端化，工作效率越来越高。比如像Ajax技术, GoogleMAP/Gmail里面用得出神入化。

我们看到，用户在互联网上的作用越来越大；他们贡献内容，传播内容，而且提供了这些内容之间的链接关系和浏览路径。在SNS里面，内容是以用户为核心来组织的。WEB2.0是以用户为核心的互联网。

那么，这种意义上的WEB2.0，和Tim Berners-Lee的语义网，有什么不同呢？语义网的出发点是数据的规整及可重复被机器调用，提出使用语义化的内容发布工具， 试图从规则和技术标准上使互联网更加有序。 Google等搜索引擎，在没有语义网的情况下，尽可能的给互联网提供了线索。 WEB2.0则是鼓励用户用最方便的办法发布内容（blog/podcasting），但是通过用户自发的（blog）或者系统自动以人为核心（SNS）的互相链接给这些看似凌乱的内容提供索引。 因为这些线索是用户自己提供，更加符合用户使用感受。互联网逐渐从以关键字为核心的组织方式和阅读方式，到以互联网用户的个人portal（SNS）为线索，或者以个人的思想脉络（blog/rss）为线索的阅读方式。WEB2.0强调用户之间的协作。WIKI是个典型例子。从这个角度看，互联网是在变得更有序，每个用户都在贡献:要么贡献内容,要么贡献内容的次序.

对下一代互联网的看法，还会有很多的讨论。有一点可以肯定，WEB2.0是以人为核心线索的网。提供更方便用户织网的工具，鼓励提供内容。根据用户在互联网上留下的痕迹，组织浏览的线索，提供相关的服务，给用户创造新的价值，给整个互联网产生新的价值，才是WEB2.0商业之道。]]> http://www.coolany.com/temp/article.asp?id=110 anran@coolany.com(anran) Thu,22 Jun 2006 19:58:34 +0800 http://www.coolany.com/temp/default.asp?id=110
　　 也许你会问，GIF图片不是能透明吗？那干嘛还那么麻烦，嘿嘿，GIF是可以透明，但可以半透明么？那很明显是不行的，但css就可以。想学就跟我来。

　　 如果是完全变透明，那么它的意义不大，重要的是它可以令图片半透明，嘿嘿，还不明白么？既然是半透明，学过photoshop的人都应该知道，半透明了，就可以半遮半掩的显示图片下面的元素！我们利用这一点可以做很多效果哦，例如类似烟雾效果啦，当然，如果你肯动动脑筋，更精彩的效果可能都能做的出来。我们今天只讨论如何在Dreamweaver 4中设置与使用这种特效。

Ok，我们现在开始，前提是你得打开Dreamweaver 4，下面是设置步骤：

1：在Dreamweaver 4中点window>>css styles(或按键盘的shift+f11),调出css styles窗口。

2：在css styles窗口中，单击右下角的加号，弹出new style窗口。设置如图：



3：点ok，弹出一个大窗口style definition for .clarity，我们按照下图设置。


也许你已经注意到了Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)这一段代码，里面有很多问号，这需要我们去用参数来代替它，不要看到代码就怕，无非就几个意思，了解后不就那么一回事嘛。
　　 要得到好的效果，那么这些用来代替问号的参数可不能马虎，先看看每一样参数的意思我们再继续。

（1）“Opacity”代表透明度水准，范围是0---100，其实就是百分比的意思，如果你想变为全透明，那么就用0代替Opacity后面的问号吧。

（2）“FinishOpacity”就是用来指定结束时的透明度，范围跟Opacity一样（FinishOpacity为可选参数，不想要的话就去掉它吧。

（3）“Style”是指定透明区域的形状特征，0代表统一形状，1代表线形，2代表放射形，3代表长方形。比如我们一般可以写成Style=1。

（4）“startX”与”startY”就是代表渐变效果开始的X与Y坐标，（坐标应该知道是什么吧）一般我们设置为StartX=0, StartY=0（这样就是表示的透明效果是从图片的左上角开始的。）

（5）“FinishX”与“FinishY”当然，这个就是代表渐变效果结束时的横纵坐标了，这里很关键，填什么数值那就要看你的图片的高与宽了，假设我们的图片高与宽分别是100、200像素，那么就可以写成FinishX=200， FinishY=100。（如果你只想要一半的面积是透明，那么可以设置成FinishX=100， FinishY=50）

给下面一个完整代码的给你们参考：（下面的数值我是假设图片高与宽分别是100、200像素）

Alpha(Opacity=25, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100)

4：ok，这时候你应该做的是把你想要的数值把那些讨厌的问号替换掉，设置好这些参数后，就点击ok。设置的步骤到此就算完成了，但设置完了不代表我们就做完了，我们还要把这个效果赋予图片呢。下面介绍如何使用的步骤。

1：在Dreamweaver 4插入一图，假设高为100，宽为200单位是像素（为了能看到效果，我们可以把网页的背景设为红色等鲜明的色彩。

2：再次调出css styles窗口（参见设置步骤1）

3：在css styles窗口中，应该有个clarity，如图指明处：


4：在Dreamweaver 4选中你插入的图。

5：用鼠标单击上图3的指明处。

6：大功告成，你可以按键盘的f12来预览了（注意，这种特效在编辑状态下是不可见的，一定要预览才可见。

怎么样，图片是不是变的半透明了？这教程只起到抛砖引玉的作用，说到底还是要大家掌握了方法后能举一反三。]]>