<?xml version="1.0" encoding="gb2312"?>
<rss version="2.0">
	<channel>
		<title>金麦网络</title>
		<link>http://www.kingmx.com</link>
		<copyright>Copyright (C) 2006 金麦网络-Kingmx.com All Rights Reserved.</copyright>
		<item>
			<title>个人整理的FF、IE的最基本的CSS兼容技巧</title>
			<link>http://www.kingmx.com/article.php?id=15156</link>
			<pubDate>2007-3-29</pubDate>
			<description><![CDATA[
CSS 常见注意事项：
http://www.awflasher.com/blog/archives/638 - 转载请保留链接，随时可能修改！
同时兼容IE、FF的基本注意事项
1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)

&lt;wrapper&gt;
&lt;div id="floatA"&gt;&lt;/div&gt;
&lt;div id="floatB"&gt;&lt;/div&gt;
&lt;div id="NOTfloatC"&gt;&lt;/div&gt;
&lt;/wrapper&gt;

这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在
&lt;div id="floatB"&gt;&lt;/div&gt;
&lt;div id="NOTfloatC"&gt;&lt;/div&gt;
之间加上&lt;div class="clear"&gt;&lt;/div&gt;
aw提醒您：这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：

.clear
{
clear:both;
}

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如我的某一个wrapper如下定义：

.colwrapper
{
overflow:hidden;
zoom:1;
margin:5px auto;

}[/code]onhavinglayout-绝对不得错过，每一个制作CSS以及用脚本操作DOM的人都不得错过！

[page]

2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
&lt;div id="IamFloat"&gt;&lt;/div&gt;
相应的css为

#IamFloat
{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}

3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。
在IE中，外层的宽度会被内层更宽的div挤破。
一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下

.tabd1
{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
}

值得注意的是，一定要将
xxxx !important 这句放置在另一句之上，具体原因很简单，就不说了：）

[page]

补充：
当时发表这篇文章时，并没有IE7的出现，而且那个时候我也没有很多地考虑JavaScript。这次更新一些。
一、IE6的border。会自动往外加margin。
当第一个box和第二个box之间的margin为a时，如果两个box都没有border，那么IE6、IE7、FF下面都没问题。
当有border时，FF和IE7的border不会占用它们之间的“空位”，而IE6这个老喜欢“自作聪明”的家伙就把margin给撑开了。
我并没有调试是否padding也会有这个副作用，我个人怀疑也有，但是既然把问题分析道这一步了，就不赘述了。
解决方案就是判断是否是IE6，然后动态的修补margin。其间涉及到js获取浏览器版本、样式值这些技术。参阅
http://www.awflasher.com/blog/archives/791

二、对于块元素，在IE6下面最好制定宽度才可float起来，尤其是a标签。

三、在IE下，如果采用了list-style-position:inside，那么可能会造成li元素强行往前缩进。
]]></description>
		</item>
		<item>
			<title>FF,IE兼容问题</title>
			<link>http://www.kingmx.com/article.php?id=15155</link>
			<pubDate>2007-3-29</pubDate>
			<description><![CDATA[相对来说，FF对CSS要求更严格一些。对FF来说，一般在属性后加!important就可以了，这样就对FF等浏览器重新定义了。有以下方面,都是从网上找的:
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
在firefox和IE中的BOX模型解释不一致导致相差2px解决方法：{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反。
!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
------------------------------------------------
1、IE与Firefox下对CSS解析的区别
对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！
img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；
title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用
结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用
其他的细节差别
当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。
其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。
非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。
后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。
[page]
2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
&lt;div id="parent"&gt;
&lt;div id="content"&gt; &lt;/div&gt;
&lt;/div&gt;
当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案
&lt;div id="parent"&gt;
&lt;div id="content"&gt;&lt;/div&gt;
&lt;div style="font: 0px/0px sans-serif;clear: both;display: block"&gt; &lt;/div&gt;
&lt;/div&gt;
在层的最下方产生一个高度为1的空格，可解除这个问题
3、CSS DIV
一、基本上每个区块的div 都要有自己的id，杜绝不同功能的区块用同一个id/class
二、每个稍大的区块div 后面都跟一个&lt;!-- /id --&gt;标记开始、结束
三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0
四、巧妙地处理并列的两列:
1)
右列为P, width=44.5%, float=left
左列为P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid
以上两种方法关键点在于选择其中一个为float=left
五、随机的切换图片：
#random {
BACKGROUND: url(/rotate.asp);/*这个ASP文件自己写吧，不难*/
}
4、关于div的高度自适应
　　今天小尿让我帮他的页子解决一个问题，就是div的高度自适应，也就是在一个父级div中嵌套一左一右两个子div，右边的子div内容可无限扩展，而可以使得父级div的高度能被无限拉长，用一般的布局方法，在IE中可以正确浏览，在Mozilla中父级div的高度就固定在10px左右，无法自适应高度，height:auto也不行，怎么办呢。网上参考到一篇资料，要实现自适应高度，div层必须具有float属性，于是我开始动手试验，float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被移动位置了。
xhtml:
&lt;div id="container_father"&gt;
&lt;div id="container"&gt;
&lt;div id="panel"&gt; test&lt;br /&gt;
test&lt;br /&gt;
test&lt;br /&gt;
&lt;!-- id="panel" --&gt;
&lt;/div&gt;
&lt;div id="sidebar"&gt;
&lt;ul&gt;
&lt;li class="current"&gt;预安装检查&lt;/li&gt;
&lt;li&gt;阅读 PFC 授权协议&lt;/li&gt;
&lt;li&gt;初始化数据库&lt;/li&gt;
&lt;li&gt;完成安装&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- id="sidebar" --&gt;
&lt;/div&gt;
&lt;!-- id="container" --&gt;
&lt;/div&gt;
&lt;/div&gt;
CSS
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}
[page]
5、深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)什么发生故障？
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！
情况应该如何？
下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
陈旧的IE“双倍占据”
原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。
这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。
重点
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。
最后，修复办法！
直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。
Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。
现在如何来做？
研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：
9.5.1 Positioning the float: the 'float' property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.
right
Same as 'left', but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
[page]
这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。
下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了"inline"修复。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
附：FF和IE对CSS的不同理解F
F: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格 
在firefox和IE中的BOX模型解释不一致导致相差2px解决方法： 
{margin:30px!important;margin:28px;} 
注意这两个margin的顺序一定不能写反。!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： 
div{maring:30px;margin:28px} 
发现一个ie和firefox的不同处，就是对于a的visited的判断，前者是对a而言的，比如所有多个相同hrel的a，但是ie是分别处理的，即使这个url访问过，但是只要这个a没有点击，就不会挂上visited的伪类；对于ff的这点特性我就有点郁闷，个人觉得ie在这个问题处理上更加人性化，也更加现代一点，但是转念一想ff也没有错，因为a存在的意义就是url，若不是通过url判断，还能够通过什么呢，^_^，矛盾 ]]></description>
		</item>
		<item>
			<title>关于色彩的\&amp;quot;纯度\&amp;quot;概念问题</title>
			<link>http://www.kingmx.com/article.php?id=15112</link>
			<pubDate>2007-3-13</pubDate>
			<description><![CDATA[
这个帖子源于小红 (Redfall)一个问题，关于小红，不用我多介绍，她就是《网页设计与配色实例分析》的作者。连她都觉得困扰的色彩问题，是什么呢？我们来看看……

Redfall：问一个常常让我疑惑的问题：我以前以为刺眼的颜色饱和度就高，柔和的颜色饱和度就低，但后来写文章的时候看数值显示才发现不是这样的。这是为何？

经由我的解答，小红觉得这些知识有普及的必要性，也可以作为她在网上陆续刊出的《网页设计与配色实例分析》RGB与HSB 内容的一个补充。因此，我应她的邀请，将我们在MSN上关于这个问题的对话整理在下面。

Quester：其实，这可能是很多人会误解的问题。关于色彩的理论，我之前说过，屏幕色彩，印刷色彩，绘画色彩，是三种相关但又相互独立的体系，他们对色彩概念的描述是不同的，说谈及的三原色也不同。因此，最近我一直在强调，在讨论色彩问题之前，先搞清楚大家在哪一个范围里面讲问题，以免造成不必要的争论和纷扰。

小红说的“我以前以为刺眼的颜色饱和度就高，柔和的颜色饱和度就低”这个观念对吗，以小红的科班底子来讲，不可能有这样基础概念错误的可能，因为，美术教科书上的确是这样写的。



这就是我所说的概念差异：传统美术和设计学科，对色彩（准确的说是“颜色”）的描述，是基于孟塞尔色立体的(孟塞尔颜色系统 (Munsell Color System)是美国艺术家阿尔伯特孟塞尔Albert H. Munsell（1858-1918）在1898年创制的颜色描述系统。至今仍是比较色法的标准。)，我们知道，孟氏色立体有三类“极色”，白色极、黑色极、纯色极。这样一来，色立体看起来就有点像飞碟。单个纯颜色，不管是往里面“掺入”黑色变暗还是“掺入”白色变淡都是属于“纯度”变化。

那么，现在我们在电脑上用来描述色彩的“设备无关性”HSB，是怎么来描述的呢？



HSB，看起来是很直观的 H (Hue)色相、S（Saturation）纯度、B（Brightness)明度。这里补充一个概念要引起大家注意：B（Brightness)明度，L（Lightness）亮度 （来自于Lab色彩模式）在色彩学里面是两个概念，计算方法也不同，请不要混淆。

要说明HSB怎么来计算色彩，要从HSB和RGB的关系来讲，下面的内容涉及到HSB和RGB的计算公式，或许有些枯燥，但是为了了解根本还是请耐心看下去，我也尽量用通俗的语言来描述他们：

因为RGB和HSB中都有个B，避免混淆，公式中用V来表示HSB的B。

读入值为RGB是0~1之间的小数，由0~255转换。

H = (0+(G-B)/(MAX-MIN))*60 ,IF R=MAX
H = (2+(B-R)/(MAX-MIN))*60 ,IF G=MAX
H = (4+(R-G)/(MAX-MIN))*60 ,IF B=MAX

S = MAX-MIN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (Windows模式算法，圆锥色立体)
S = (MAX-MIN)/MAX&nbsp;&nbsp;&nbsp; (Adobe模式算法，圆柱色立体)

V = MAX





我们来看看我们关心的S（纯度）的产生：纯度 ＝ RGB三值中的最大值和最小值的差 和 最大值的比值

那么也就是说，这个差值越悬殊，色彩的纯度就越大。即使是████ R0 G255 B180 （H 162 S 100 B 100）这样高亮颜色，或者是 ████ R0 G23 B16 （H 162 S 100 B 9）这样的很暗黑的颜色，纯度也是一样高。

再来看看B（明度）的产生：明度 = RGB三值中的最大值

也就是说，明度是由最大值的原色所决定的，和颜色的混合无关，并不是我们想像中的RGB的叠加越多，明度就越大。

比如，R：0，G：90，B：200。那RGB中的最大值是200。

200/255=0.784=78%&nbsp;&nbsp; 这个就是HSB 的 B 明度值

让我们来验证一下:



到此，我们就可以明白，传统的美术教学概念和HSB色彩模式的表述上有细微的区别，说得简单一些，是因为他们采用了不同的色立体结构来诠释色彩关系。





另外有人又问：HSB 它到底对我们有什么用处呢？

你可以把HSB 理解为 人于计算机之间 进行色彩沟通的一个界面。

因为计算机描述色彩在屏幕上显示，是以RGB表示的，但我们人类不可能用眼睛来“分光”，直接读出RGB的值。

但是我们可以描述一个颜色用“在这个黄色的基础上，更红一些，更亮一点，不要太鲜艳”这样的方式。

那么 黄色，就是 色相（H），更红一些，是指的色相变化； 更亮一些，是明度（B）上的调节提高；不要太鲜艳，是纯度（S）的调整降低。

我们可以用 HSB 来调整和对比颜色， 然后 经过 HSB 到 RGB 的转换，得到新的RGB色值来指导它在屏幕如何显示出来。

HSB 色彩更适合“人类的表达方式”，比直接读给你RGB色值更加具有感性的认识。

唯一的问题，会对你刚开始学习使用和认读 HSB 色彩有一点困难的是：你要学会背熟色相环的度数，如下：

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

0　&nbsp; 红色&nbsp;&nbsp;&nbsp; R=&nbsp; 0&nbsp; =(120*0)&nbsp; ▲顶点
60&nbsp;&nbsp;&nbsp; 黄色&nbsp;&nbsp;&nbsp; Y= B-180°（补色）＝60
120&nbsp; 绿色&nbsp;&nbsp;&nbsp; G=120=(120*1)&nbsp; ▲右下角
180&nbsp; 青色&nbsp;&nbsp;&nbsp; C= R-180°（补色）＝180
240&nbsp; 蓝色&nbsp;&nbsp;&nbsp; B=240=(120*2)&nbsp; ▲左下角
300&nbsp; 品红色&nbsp; M= G+180°（补色）＝300
360＝0&nbsp; 回到红色&nbsp; R

那么，我们 看到 这样一组数值 H 100 S 50 B 80 是什么感觉？ 
H 100，在黄绿之间，靠近绿色多点。
S 50，纯度中等，比较不耀眼和浓艳。
B 80，明度较高，是比较浅的色彩。

看看，和你的感觉吻合吗？&nbsp; 
██████████████████████&nbsp;&nbsp; 
(H100, S50, B80)&nbsp; (R136, G204, B102)
]]></description>
		</item>
		<item>
			<title>web2.0网站常用可用性功能模块分析</title>
			<link>http://www.kingmx.com/article.php?id=14942</link>
			<pubDate>2007-1-13</pubDate>
			<description><![CDATA[
Web&nbsp;2.0网站是指将传统的网站构架（平台、内容源、用户、传播方式等）转化到以用户为核心的网站构架上来，包括一系列体现web2.0概念的元素、定位和创意。web2.0网站在构架上须体现两大宗旨，即强大的后台系统和简单的前台页面，也即提供良好的用户体验，体现以人为本，技术服务人类的宗旨。
　　web2.0网站常用功能块通常包括以下几大项：
　　Tag标签功能块
　　Tag(中文叫做“标签”)&nbsp;是一种新的组织和管理在线信息的方式。它不同于传统的、针对文件本身的关键字检索，而是一种模糊化、智能化的分类。
　　网页使用Tag标签的好处：
为页面设置一个或者多个Tag标签可以引导读者阅读更多相关文章，为别人带去流量同理也为自己带来流量。&nbsp;
可以帮助读者及时了解一些未知的概念和知识点，提高用户体验。&nbsp;
Tag是人的意志和趋向的体现，Tag可以帮助你找到兴趣相投的人。&nbsp;
　　基于以上优势，Tag标签代替了传统的分类法，成为web2.0网站使用率最高的功能块（与其说是功能块倒不如说是一种内容导航和内容组织形式）。
　　一句话：Tag标签是一种更灵活的分类方法，功能在于引导，特点是无处不在，体现智能性、模糊性和趋向性。
　　RSS订阅功能块
　　RSS是在线共享内容的一种简易方式（也叫聚合内容，Really&nbsp;Simple&nbsp;Syndication）。通常在时效性比较强的内容上使用RSS订阅能更快速获取信息，网站提供RSS输出，有利于让用户获取网站内容的最新更新。网络用户可以在客户端借助于支持RSS的聚合工具软件（例如SharpReader,NewzCrawler、FeedDemon），在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。
　　RSS订阅的方式：
订阅到客户端软件如周伯通、遨游浏览器RSS阅读、Foxmail&nbsp;RSS阅读等，此方式使用者较多&nbsp;
订阅到在线阅读（聚合类）门户网站如Google&nbsp;Reader，Yahoo&nbsp;Reader，抓虾、Gougou等，省去了安装RSS阅读器的麻烦&nbsp;
订阅到在线单用户聚合器如Lilina等，比较灵活&nbsp;
　　RSS订阅功能的最大好处是定向投递，也就是说RSS机制更能体现用户的意愿和个性，获取信息的方式也最直接和简单，这是RSS订阅功能备受青睐的一大主要原因。
　　推荐和收藏功能块
　　说到推荐功能，不仅web2.0网站在大量使用，传统的以cms平台为代表的内容模式的网站也在大量使用，推荐功能主要是指向一些网摘或者聚合类门户网站推荐自己所浏览到的网页。当然，一种变相的推荐就是阅读者的自我收藏行为，在共享的模式下也能起到推荐的作用。
　　比较有名的推荐目标有以del.icio.us为代表的网摘类网站包括国内比较有名气的365key、和讯网摘、新浪vivi、天极网摘等。这里值得一提的是前段时间曾涌现了大批网摘类网站，但他们坚持活下来的好像没有几个了，推荐使用前面提到的这几个网摘门户，人气基本上是使最旺的。
　　评论和留言功能块
　　web2.0强调参与性，强调发挥用户的主导作用，这里的参与性除了所谓的订阅、推荐功能外更多地体现在用户对内容的评价和态度，这就要靠评论功能块来完成。一个典型的web2.0网站或者说一个能体现人气的web2.0网站都会花大量篇幅来体现用户的观点和视觉。这里尤其要提到web2.0中的带头老大web&nbsp;blog，评论功能已经成为博客主人与浏览者交流的主要阵地，是体现网站人气的最直观因素。
　　评论功能块应用在博客系统中实际上已经和博客内容相分离，而更好的应用恰恰是一些以点评为主的web2.0网站比如豆瓣、点评网等，这里的评论功能块直接制造了内容也极大地体现了网站的人气，所以说评论功能块是web2.0网站最有力的武器。
　　站内搜索功能块
　　搜索是信息来源最直接的方式之一，无论你的网站是否打上web2.0的烙印，搜索对于一个体系庞大、内容丰富的大型网站都是非常必要的。Tag标签在某种程度上起到搜索的作用，它能够有效聚合以此Tag为关键词的内容，但这种情况的前提是此Tag标签对浏览者是可见的，也就是说当Tag标签摆在浏览者的眼前时才成立，而对于那些浏览者想要的信息却没有Tag标签来引导时搜索就是达到此目的的最好方法。
　　对于web2.0网站，站内搜索以标题或者Tag为搜索域都能起到好的效果，但本人不建议使用内容搜索域，因为这不符合搜索的高效性原则。同时，具有突出关键词的内容往往都可以用Tag标签来引导，因此使用内容域来搜索实际上是一种浪费服务器资源的行为，而且搜索结果的准确性将大打折扣。
　　群组功能块
　　我为什么要把群组作为web2.0网站的功能块来分析呢，因为群组是web2.0网站的一大特点，也是web2.0所要体现的服务宗旨所在。一个web2.0网站，博客也好、播客也好、点评也好，抑或是网摘、聚合门户，他们都强调人的参与性。物以类聚、人以群分，每个参与者都有自己的兴趣趋向，web2.0网站的另一主要功能就是帮助这些人找到同样兴趣的人并形成一个活跃的群体，这是web2.0网站的根本。
　　总结：web2.0网站倡导的是集体创作、共享资源，靠的是人气，体现的是参与性，一个没有参与性的web2.0网站都不足以成为web2.0。以上提到的这几个功能块就是以吸引用户参与和引导用户参与为目的的，真正的web2.0不是什么深奥的东西，只有一点，那就是如何让浏览者沸腾起来。 
]]></description>
		</item>
		<item>
			<title>在flash中使用像素字体技巧</title>
			<link>http://www.kingmx.com/article.php?id=14920</link>
			<pubDate>2007-1-8</pubDate>
			<description><![CDATA[制作商业Flash动画的朋友相信对于象素字体一定不陌生。它又小又酷，非常漂亮，受大多数设计师的欢迎。目前像在全国非常有名的04系列字体（图－1） 
300)this.width=300" border=0> 
04系列字体的官方网站：http://www.04.jp.org/ 大家可以到这里面去下载所有的04系列字体。 
　　对于04系列字体，Flash的支持并不完善。不仅对于04系列，对于其他各种类型的字体支持都不是那么完善，因为Flash是一个矢量动画软件。他可以很好的解决图像因为放大或缩小所造成的失真问题，但对于由单个象素构成的图形支持不好，即使目前的FlashMX也是如此。比如（图－2） 
300)this.width=300" border=0> 
曾经有许多网友问过我关于象素字体的处理方法，但因为很麻烦，所以没有一一说清楚，于是决定写这篇文章，针对象素字体在Flash中的运用技巧所出现的各种问题的解决方法。 
1. 象素字体的基本使用 
　　这时候就有网友要问了，难道连如何使用这种字体都要说明吗？是的，因为这种字体的特殊性，对于他的基本使用，有必要说明。每一种象素字体都有它最合适的一个大小，如果不符合这个大小就会出现模糊，或者失去了象素字体的视觉效果等等，就像宋体的最佳大小是9号字体一样。一般的象素字体最佳大小都在4号～15号之间，至少目前我还没有遇到超出这个范围的字体。下面我把04系列字体的最佳大小清单列出来，以供大家参考。 
300)this.width=300" border=0> 
由上列清单可以看出，一般的象素字体都是在8号大小，所以一般我们都有8号，如果不行，再一个一个的进行试验。 
2. 关于象素字体的坐标。 
　　象素字体它的构成是由象素做单位构成的，而对于它在场景中的坐标而言，必须是整数！这是好多朋友犯的错误。如果嵌入了MovieCilp中，MovieCilp在场景中的坐标也必须是一个整数，否则就会出现模糊的状况。而且对于将Flash嵌入网页中对它的大小设定也必须是原动画的大小，否则都会出现模糊的状态。 
3. 在符号中的使用 
　　为了能够更好的组织动画结构，我们一般都会用符号去构成动画。如果将象素字体嵌入符号中，编辑时也要注意。在构成象素字体的时候，一定要在主场景中构成，也就是先在主场景中输入文字，然后按F8键将其转换为符号，如果先生成符号，在符号中编辑，字体会出现模糊状况。而对于在调用编辑时候，一定不能从符号库中去调用。因为每个符号在Flash中就是一个小动画，而他们在主场景中的坐标并不受限制，也就是一个符号有他一个自己的内部坐标系。所以如果要关联主场景中的主坐标系，就要首先在主场景中生成元素，然后在创建符号，让符号使用主场景的坐标系。调用的时候在主场景中双击这个符号进行编辑，符号仍然使用主场景的坐标系，如果从符号库中去调用，则脱离了与主场景的坐标系关联。 
　　这也需要我们在制作动画的时候养成一个非常好的习惯，否则你需要重新制作整个符号。 
4. 象素之间的错误排列 
　　有时候在输入字体的时候并没有发生模糊的状况，而导出动画的时候却出现了如图－2中第行文字的情况，这是Flash对矢量图形的处理错误。要解决这个问题也不难，只是相对比较麻烦。 
　　要测试字体是否出现排列错误的情况，可以用Ctrl+B连续两次打散文字图形。如果出现了这种情况，先撤销之前的操作，然后用直线工具，将排列错误的象素在新图层中勾画出来，然后剪贴，在文字的那个图层按Ctrl+Shift+C将线框粘贴在原处，并把排列错误的象素分割出来，然后选中删除即可。（图－4） 
300)this.width=300" border=0> 
5. 请勿使用动态字体 
　　Flash的文字工具有个功能是动态装入字体，即调用字库Fonts显示相应的字符，这样可以很好的减少动画文件的体积。但在使用这个功能之前请先考虑：观看这个动画的网友是否装有这些字体呢？例如象素字体一般非专业用户都没有安装这类字体。观看的时候会团成一团，非常有损美观。我看过好多大意的朋友使用这个功能来解决象素字体模糊的问题，在自己的机器上测试没有问题。而像一般的宋体等等字体默认安装的字体，则可以使用这个功能。 
6. 使用Photoshop辅助 
　　像之前提到的对于象素错误排列的问题可以用勾画然后删除的方法，但假设有上百甚至上千个文字等着你一个一个去勾画难道还一个一个去画吗？所以这里建议用Photoshop。他在解决这类象素问题上非常良好，而且Flash也支持对于透明GIF的导入。我们中Photoshop先输入要输入的文字，然后在文字选项中选择“消除锯齿无”。然后导出透明的GIF再导入Flash，这样就可以很好的解决了，但相对出来的动画体积比较大。（图－5） 
300)this.width=300" border=0> 
7. LoadMovie()方法的注意 
　　用Flash做网站的朋友经常要用到LoadMovie方法去读取一些动画，而如果在动画中使用了象素字体，这里就要注意了：返回放置动画的目标不能是符号，因为我之前已经说过了，符号和主场景并没有使用一个坐标系，如果读取到了符号中就会出现模糊，这里我们要读取到层级里，但有些朋友就提出了：我需要读取的动画有一个特定的坐标，如果这样的话读取动画后会自动将动画设置成X:0,Y:0的坐标。要解决这个问题把被读取动画的大小设置的和主动画一样大小，然后在做被读取动画的时候事先计算好他在主动画中的位置，这样就可以解决这个问题了。 
8. 周边资源 
　　因为目前象素字体异常的流行，国外又推出了许多新的象素字体，例如HOOGE系列的，对Flash的支持都不错。大家可以到国外的网站去找找，国内我还没有见到有下载的。或者可以访问我的网站，在我的网站里面也有这几个系列的字体下载，地址：http://www.blackflasher.net/ 
　　另外其实在系统中，还有一个非常棒的象素字体，而且他是任何Windows机器上都带有的，就是系统默认的缺省字体：_sans字体，使用他一定要用动态字体功能，他的最佳大小是9号。这样他就即可以减少文件大小问题，也可以达到很好的视觉效果。如图－6 
300)this.width=300" border=0 zzzpop="点击这里用新窗口浏览图片"> 
　好了，关于象素字体的使用方法就介绍到这里，顺便提醒大家，如果想让字体更漂亮，建议全部字母使用大写，因为象素字体本身在视觉语言中是以点的形式存在的。而点一定要规则，否则会失去了存在的意义。所以用全部大写的字母来使用象素字体会更加好看！ 
]]></description>
		</item>
		<item>
			<title>中国互联网100个Web2.0网站名单</title>
			<link>http://www.kingmx.com/article.php?id=14915</link>
			<pubDate>2007-1-8</pubDate>
			<description><![CDATA[
1 猫扑 http://www.mop.com 

2 和讯 http://www.hexun.com 

3 豆瓣网 http://www.douban.com 

4 奇虎 http://www.qihoo.com 

5 网易博客 http://blog.163.com 

6 噢噢中国 http://www.oo.cn 

7 百度贴吧 http://post.baidu.com 

8 新浪博客 http://blog.sina.com.cn 

9 网络秀 http://www.m149.com/ 

10 客齐集 http://www.kijiji.com.cn 

11 VeryCD http://www.verycd.com/ 

12 Donews http://www.donews.com 

13 天涯社区 http://www.tianya.cn 

14 土豆网 http://www.toodou.com 

15 大旗网（原ChinaBBS) http://www.daqi.com/ 

16 58同城分类 http://www.58.com/ 

17 周博通 http://www.potu.com 

18 大众点评网 http://www.dianping.com 

19 BlogCN http://www.blogcn.com 

20 博客网 http://www.bokee.com 

21 Zcom智通 http://www.zcom.com 

22 fotoal http://www.fotoal.com/ 

23 fotolog http://www.fotolog.com.cn/ 

24 优友地带 http://www.uuzone.com 

25 赛我网 http://www.cyworld.com.cn 

26 YOK优客搜索 http://www.yok.com 

27 My See http://www.mysee.com/ 

28 CSDN http://www.csdn.net 

29 楚现会 http://www.appiir.com 

30 feedsky http://www.feedsky.com 

31 365Key http://www.365key.com/ 

32 摩网 http://www.moabc.com 

33 菠萝网 http://www.podlook.com 

34 影立驰 http://www.tvix.cn/ 

35 E都市 http://www.edushi.com/ 

36 银河台 http://www.radio.cn 

37 邦邦网 http://www.81088.com 

38 口碑网 http://www.koubei.com 

39 Blogbus http://www.blogbus.com/ 

40 网库黄页 http://www.99114.com 

41 xplus http://www.xplus.com.cn 

42 看天下 http://www.kantianxia.com 

43 POCO http://www.poco.cn 

44 CNCN城市平台 http://www.cncn.com/ 

45 聚网 http://www.365ju.com/ 

46 爆米花网 http://www.pomoho.com 

47 快乐米 http://www.colorme.com.cn 

48 qzone http://qzone.qq.com/ 

49 磊客中国 http://www.rox.com.cn/ 

50 职友集 http://www.jobui.com 

51 亿友 http://www.yeeyoo.com/ 

52 联络家 http://www.linkist.com/ 

53 PPlive http://www2.pplive.com/ 

54 波普播客 http://www.imboke.com 

55 天际网 http://www.tianji.com 

56 拍客地带 http://www.fzone.cn 

57 搜狐博客 http://blog.sohu.com/ 

58 Mapbar http://www.mapbar.com/ 

59 赶集 http://www.ganji.com/ 

60 又拍网 http://www.yupoo.com/ 

61 乐视网 http://www.le-tv.com 

62 万蝶移动博客 http://www.pdx.cn 

63 狗狗 http://www.gougou.com/ 

64 乐乐互动 http://www.lele.com/web/ 

65 3G门户网 http://www.3g.net.cn 

66 Cblinkx TV www.cblinkx.tv 

67 滚石音乐网 http://irock.cn/ 

68 粉丝网 http://www.ifensi.com 

69 我要（51） http://www.51.com 

70 易登网 http://www.edeng.cn 

71 K68 http://www.k68.cn 

72 中国播客网 http://www.vvlogger.com 

73 那里网 http://www.naalee.com 

74 Teein帖易中文聚合门户 http://www.teein.com 

75 众评 http://report.7234.com/ 

76 酷客音乐网 www.koook.com 

77 淘职网 www.go2work.com.cn 

78 捉鱼网 http://www.joyes.com 

79 新聚网 http://www.tagriver.com 

80 We@link http://www.wealink.com 

81 网眼 http://www.webeye.net.cn 

82 中国交友中心 http://www.96333.com 

83 博易 http://www.anyp.cn/ 

84 中国114黄页 http://www.114chn.com 

85 TOM博客 http://blog.tom.com 

86 圈网你我他 http://www.niwota.com 

87 94pop流沙歌秀 http://www.94pop.com 

88 本地通 http://www.bodoto.com 

89 爬狗 http://www.pagou.com 

90 歪酷博客 http://www.yculblog.com 

91 天方有声图书 http://www.tingbook.com 

92 中国博乐网 http://www.boloo.com 

93 小蜜蜂 http://www.com.tv 

94 播客宝典 http://www.hopesome.com 

95 爱米网 http://www.aimi.cn 

96 嘻哈哈 http://www.seehaha.com 

97 人脉招聘网 http://www.rmzp.com 

98 分类哥哥 http://www.fenleiGG.com 

99 Komoo http://www.komoo.com 

100 碰碰网 http://www.pengpeng.com 

注：以上排名不分先后。 

中国互联网产业Web2.0 100佳第二轮提名表 

1 265 http://www.265.com 
2 周博通 http://www.potu.com 
3 噢噢中国 http://www.oo.cn 
4 英才网联 http://www.800hr.com 
5 易登网 http://www.edeng.cn 
6 淘职网 http://www.goojob.com.cn/ 
7 邦邦网 http://www.81088.com 
8 网库黄页 http://www.99114.com 
9 摩网 http://www.moabc.com 
10 职友网 http://www.jobui.com 
11 快乐米 http://www.colorme.com.cn 
12 奇波 http://www.qibox.com 
13 万蝶移动博客 http://www.pdx.cn/pdx/ 
14 口碑网 http://www.koubei.com 
15 粉丝网 http://www.ifensi.com 
16 赛我网 http://www.cyworld.com.cn 
17 800so http://www.800so.cn 
18 大众点评网 http://www.dianping.com 
19 365Key http://www.365key.com/ 
20 CSDN http://www.csdn.net 
21 BlogCN http://www.blogcn.com 
22 可乐圈 http://quan.kele8.com 
23 卓娱互动 http://www.joyes.com 
24 闪酷flash http://www.flashku.com 
25 静花家族 http://www.jiazu5157.com 
26 我的行动网 http://www.mywebaction.com 
27 乐视网 http://www.le-tv.com 
28 新聚网 http://www.tagriver.com 
29 上海锋众 http://www.7234.com 
30 43things http://www.aimi.cn/tag/43things 
31 58同城分类 http://www.58.com/ 
32 圈网你我他 http://www.niwota.com 
33 拍客地带 http://www.fzone.cn 
34 天天在线 http://www.116.com.cn/ 
35 土豆网 http://www.toodou.com 
36 中国博乐网 http://www.boloo.com 
37 新浪博客 http://blog.sina.com.cn/ 
38 搜狐博客 http://blog.sohu.com/ 
39 DTOP娱乐门户 http://www.dtop.cn/ 
40 TOM博客 http://blog.tom.com/ 
41 94pop流沙歌秀 http://www.liusha.net/ 
42 我要（51） http://www.51.com 
43 Teein中文聚合门户 http://www.teein.com 
44 无聊吧 http://www.wuliaobar.com 
45 Donews http://www.donews.com 
46 和讯博客 http://blog.hexun.com/ 
47 POCO http://www.poco.cn 
48 中国播客网 http://www.vvlogger.com 
49 天涯社区 http://www.tianyaclub.com 
50 328T网站秀 http://328t.com 
51 百合网（天仙配） http://www.baihe.com 
52 Komoo http://www.komoo.com 
53 Fotolog http://www.fotolog.com.cn 
54 中国114黄页 http://www.114chn.com 
55 滚石音乐网 http://irock.cn/ 
56 楚现会 http://www.appiir.com 
57 爬狗　http://www.pagou.com/ 
58 天方有声图书 http://www.tingbook.com 
59 Lagoo http://blog.lagoo.com.cn/ 
60 无忧美食 http://www.51cate.com 
61 赶集 http://www.ganji.com/ 
62 优友地带 http://www.uuzone.com 
63 菠萝网 http://www.podlook.com 
64 WAP天下 http://www.waptx.com 
65 世外桃源 http://www.4wai.com 
66 3G门户网 http://www.3g.net.cn 
67 CNCN城市平台 http://zs.cncn.com 
68 看天下 http://www.kantianxia.com 
69 关系传媒 http://www.adiii.cn/ 
70 站台信息 http://www.zhantai.com/ 
71 feedsky http://www.feedsky.com 
72 易缘网 http://www.91yuan.com 
73 那里网 http://www.naalee.com 
74 Zcom智通 http://www.zcom.com 
75 屹天星源 http://www.ytxy.com.cn/ 
76 客齐集 http://www.kijiji.com.cn 
77 天际网 http://www.tianji.com 
78 播客天下 http://www.imboke.com 
79 窄告网 http://www.narrowad.com 
80 K68 http://www.k68.cn 
81 博客网 http://www.bokee.com 
82 分类哥哥 http://www.fenleiGG.com 
83 又拍网 http://www.yupoo.com/ 
84 飞行网 http://www.woandme.com 
85 中文RSS搜索引擎 http://www.feedss.com/ 
86 Blogbus http://www.blogbus.com/ 
87 博阅网 http://www.boyue.com/ 
88 豆瓣网 http://www.douban.com/ 
89 九帮网 http://www.9bang.com/ 
90 榕树下 http://www.rongshuxia.com/ 
91 我摘 http://www.wozhai.com/ 
92 看稀奇网 http://www.kanxiqi.com 
93 人脉招聘网 http://www.rmzp.com 
94 图书漂流网 http://www.tspl.cn/ 
95 未名交友网 http://www.jiaoyou8.com 
96 数氧通 http://www.o2-wireless.com/ 
97 西陆社区 http://www.xilu.com 
98 亿友 http://www.yeeyoo.com/ 
99 亿友123 http://www.eyou123.com/ 
100 中交星网 http://www.cttnet.net.cn/ 
101 网易博客 http://blog.163.com/ 
102 qzone http://qzone.qq.com/ 
103 聚网 http://www.365ju.com/ 
104 灯火网 http://www.denghuo.com.cn/ 
105 天涯博客 http://www2.tianyablog.com/ 
106 博客动力 http://www.blogdriver.com/ 
107 博客园 http://www.cnblogs.com/ 
108 歪酷博客 http://www.yculblog.com/ 
109 博客中国人 http://www.blogchinese.com/ 
110 我爱博客网 http://www.52blog.net/ 
111 中华部落阁 http://www.mblogger.cn/ 
112 你的博客网 http://yourblog.blogbus.com/ 
113 敏思博客 http://www.blogms.com/ 
114 博客天下 http://www.blogms.com/ 
115 博客之家 http://www.blogerhome.com/ 
116 中国户外博客网 http://www.blogoutdoor.com/ 
117 神州博客网 http://www.blogercn.com/ 
118 挖一挖 http://www.wayiwa.com/ 
119 博易网 http://www.anyp.cn/ 
120 狗狗 http://gougou.com/ 
121 新闻蚂蚁 http://www.newsants.com/ 
122 联络家 http://www.linkist.com/ 
123 嘿友 http://www.heiyou.com/ 
124 中国缘 http://www.chinacircle.com/ 
125 杰杰友网 http://www.jjyou.com/ 
126 Weslink http://www.wealink.com/ 
127 迷你交友网 http://www.meuu.com/ 
128 四度关系 http://www.4dguanxi.com/ 
129 浩友网 http://www.hiu.com.cn/ 
130 联趣 http://www.u2unet.com/ 
131 xplus http://www.xplus.com.cn 
132 维库 http://www.wikilib.com/ 
133 天下维客 http://www.allwiki.com/ 
134 网络天书 http://www.cnic.org/wiki 
135 派派播客网 http://www.e-paipai.com/ 
136 播客中国 http://www.podcast.com.cn/ 
137 博搜 http://www.booso.com/ 
138 My See http://www.mysee.com/ 
139 feedsearch http://www.feedsearch.net/ 
140 中客网 http://www.oao.cn/ 
141 Grassland http://www.grass.org.cn/ 
142 八方 http://www.8fang.net/ 
143 OYO交友中心 http://www.oyo.com.cn/ 
144 E都市 http://www.edushi.com/ 
145 Mapbar http://www.mapbar.com/ 
146 uucun http://www.uucun.com 
147 悠视网 http://www.uusee.com/ 
148 必购网 http://www.bgo.cn/ 
149 一登网 http://www.1deng.com/ 
150 消息树 http://www.xiaoxishu.com/ 
151 爱情公寓 http://www.i-part.com.cn/ 
152 新聚网 http://www.tagriver.com/ 
153 嘻哈哈 http://www.seehaha.com/ 
154 环球网 http://www.wlub.com/ 
155 掌讯远景 http://www.china1258.net 
156 本地通 http://www.bodoto.com 
157 VeryCD http://www.verycd.com/ 
158 搜职网 http://www.globehr.com/ 
159 你有钱 http://www.niyouqian.com/ 
160 百度贴吧 http://post.baidu.com/ 
161 猫扑 http://www.mop.com/ 
162 友联网 http://www.uland.com/ 
163 引领猫网络贵族俱乐部 http://www.10com.cn/ 
164 17dig发掘网 http://www.17dig.com/ 
165 拉风网 http://www.lafeng.net/ 
166 fotoal http://www.fotoal.com/ 
167 Fotoblog http://www.fotoblog.cn/ 
168 空中传媒 http://www.kongzhong.com/ 
169 易秀网手机博客 http://www.ecshow.com/ 
170 掌上博客 http://www.goblog.com.cn/ 
171 价值博客 http://www.chinavalue.net 
172 乐乐互动 http://www.lele.com/web/ 
173 小蜜蜂 http://www.com.tv/ 
174 爱信息网 http://ixinxi.com/ 
175 中国交友中心 http://www.96333.com 
176 SerchWeb http://www.searchweb.cn 
177 ChinaBBS http://www.chinabbs.com 
178 落伍者 http://www.im286.com/ 
179 报童网 http://www.baotoo.com/ 
180 光芒时代 http://www.roxbeam.com 
181 商之讯 http://o.tq.cn/tq/index.jsp 
182 PPlive http://www2.pplive.com/ 
183 网眼 http://www.webeye.net.cn
]]></description>
		</item>
		<item>
			<title>网站建设中一些容易被忽视的问题</title>
			<link>http://www.kingmx.com/article.php?id=14873</link>
			<pubDate>2006-12-27</pubDate>
			<description><![CDATA[
关于这篇文章其实早就想写了，只是由于自己太懒才一直拖到现在。主要想谈谈在网页制作中几个比较容易被忽视的问题，算不上什么高深的教程，只是自己平时工作学习中所遇到的问题积累，写下来一是可以给初学者提个醒，二来也是帮自己做个笔录，毕竟年纪大了，记性不好了... 
　　1、让你想当然，给你点颜色看看

　　这个问题其实被很多人忽略，小到个人站点，大到门户网站都有可能犯这个错误。不信想想看，如果你所做的网站背景是白色的，那么你还会记得在 CSS 里写下 Background-color:#ffffff 这句代码吗？我敢打赌，大部分人不会！并不是因为大家偷懒，而是这个举手之劳被彻底忽略了，为什么？因为我们所用的 Windows 操作系统在大多数的情况下，运行在其上的各种软件的默认背景色是白色，这其中就包括 IE 浏览器，所以在网站背景是白色的条件下，许多的网页制作者就想当然的忽略了关于背景色的设置，反正大家都是白色，不设的话也看不出来。但是不要忘记了，Windows 从 XP 开始支持系统主题的更换，有很多第三方的主题会更改系统默认的设置，其中就包括背景色的设置，如果没有强制设定页面中的背景色，那么页面就会以当前浏览器的背景色来显示内容，其结果就是网站美观性被大大的降低，拿大家都熟悉的网易来举例，下面的截图是在我机子上浏览时的样子，由于前不久换了一套 Vista 的主题风格，所以浏览器的背景色变成了浅灰色。

　　仔细看看网易的 Logo ，看出来吗？对，那个 Logo 的背景是白色的，但旁边的背景色却是灰色的，换句话说就是网易整个页面的背景原定就是白色的，这在浏览器背景为白色的前提下是看不出什么来的，但是像现在这样就“漏馅”了。不光是网易 ，许多的门户站都是这样，具体我就不去举例了，可见关于 Background-color 设定的重要性。所以，不论你的网站是什么样的背景色，请一点记住把它设定好，哪怕它是白色！

　　2、立正！向左～～～看齐

　　大家都知道 Table 的默认水平对齐方式（align）为左对齐，设 align="left" 和不设其效果是一样的，于是很多人不去设置这个属性，我以前也是如此。但是在某些特殊的情况下，IE 会把默认的左对齐理解为居中对齐，从而导致页面的排版出现问题，虽然说具体是什么情况下会出问题连我自己都说不清楚，但是这种情况绝对存在，所以大家在做页面的时候一定要习惯性的设置表格的 align 属性，不要偷懒跳过这步，对页面的表现来说，这所谓的多此一举绝对有益无害。

　　3、单元格宽度－隐形杀手

不知你有没有遇见过这种情况，假设当你给一个单元格的 align 设置了左对齐后，却发现放在单元格中的文字并没有应用该属性的效果，反而继续是居中显示，查看文字两端也并没有发现任何垃圾代码包含其中，可是无论如何都改变不了文字的位置。郁闷吗？反正当时我是很郁闷，直到后来，我才发现原来是单元格的 Width 属性在作怪，将其删除或重新设置后问题得到解决，所以，当你也遇到同样的问题时，不妨检查一下出问题单元格的 Width 设置，相信你会找到解决的方法。

　　4、打死滚动条都不消失

　　有时为了一些个性化的需要，有些人喜欢将浏览器的滚动条隐藏掉，这个效果做起来很容易，但是有时会发现明明代码一点问题没有，而且查看用的浏览器也不是非 IE 内核型的，但可恶的滚动条就是不消失！而且这个问题很多都出现在用 DW 等可视化编辑软件制作出的网页上。那原因是什么呢？其实原因就在该页面的头部代码里，查看该页面的源代码，你会发现在最上边有类似这样的两句代码：




&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

　　这两句代码叫做 DOCTYPE 声明，是 Document Type(文档类型)的简写，用来说明你用的 XHTML 或者 HTML 是什么版本。简单点说这两句代码是制作标准化页面所必不可少的关键组成部分，浏览器就是根据你定义的文档类型来解释你页面的标识，并展现出来的。换句话说，如果你定义了一个错误的 DOCTYPE，那么你的标识和 CSS 都不会生效。而定义滚动条显示与否的 overflow、overflow-x、overflow-y 这三个属性恰恰没有被网页标准所采纳，所以如果你的页面上方定义过 DOCTYPE ，那么这三个属性便是无效代码了，解决方法就是删除头部的 DOCTYPE 声明，虽然在标准日益普及的今天不推荐这么做。

　　5、都是注释惹的祸

　　为代码写注释是个好习惯，但是有时也会出现一些问题，例如为 CSS 写中文注释。
如果你为自己定义的 CSS 写了中文注释，那么在一些特殊情况下（例如服务器端的支持，页面所用的程序类型等）会导致部分代码无故失效，这种情况我遇见好几回了，所以在技术上没解决这个问题之前，还是不要为 CSS 写注释的好，养成良好的命名习惯足以让其它人看懂自己代码的意义，即使一定要写，也请用英文写吧...什么？拼音！！！拜托，你用拼音试试看，保证一个星期后连你自己都不明白那写的是什么。

　　6、神啊，发光吧～～～

　　这个问题有些滥竽充数的嫌疑，只是有很多人问起过，所以也一并放上来。是关于 CSS 的 Glow Filters ，这个滤镜的效果是对环绕对象内容边缘制作发光效果，也有人称描边效果，多被用在文字的表现上，但是许多人在运用了该滤镜后发现并没有出现想要的效果，究其原因多半是由于把这个滤镜直接运用到了文字上，要知道该滤镜对文字是没有效果的，那为什么还能制作出发光文字呢？那是因为一定要把它运用在放置文字的容器上，例如 Table 。所以，如果没有效果的话，就检查一下是不是用错地方了。

　　该滤镜的另外一个问题是，虽然发光效果是有了，但是感觉文字上的那圈光晕好像是被裁了一样，少了一块似的。这是由于所放置文字的容器高度低于该滤镜的发光范围所至，解决方法有三种：

　　1、缩小 Font-Size 
　　2、增加 Height 值高度 
　　3、降低 Strength 值的大小

　　7、思考中...

　　其实这些问题都不是什么了不起的大问题，但往往越是小问题才越容易被人忽略，希望上面这些经验教训对你能有所帮助，哪怕有一个人从中收益就不枉我罗哩罗嗦这么半天了。
]]></description>
		</item>
		<item>
			<title>再谈视觉与体验</title>
			<link>http://www.kingmx.com/article.php?id=14872</link>
			<pubDate>2006-12-27</pubDate>
			<description><![CDATA[
&nbsp;&nbsp;&nbsp; 我想这个话题已经变成了老生常谈，似乎所有团队中的设计与非设计人员都在谈这个问题。我想我如果说视觉和体验都重要，一个也不能轻视，那就太狭隘了。因为我深刻觉得现在已经到了一个该划分区域的时候了 
　　我想如果从理论上，准确地来分析，那么我们要把一个网络产品的设计比作一个工业设计。我们可以回想早期的俄罗斯的工业设计，那时候的产品很耐用，并且非常的结实，寿命长，唯一的缺点就是看上去太笨拙了，人们在使用他们的同时，已经不满足于那些没有经过任何美化和人性设计的外表，而抱怨连天。直到日本和欧洲一些人性化的工业设计出现，这个状况被彻底改观了，人们开始追求更高的生活品质，追求更细致的设计。那么我想，这应该是一个从可用-〉易用的过程，而这个易用饱含着视觉设计。

　　回到我们的网站上来，网站是一个互动的媒体，它不等于早期的插花、广告、电视媒体、广播等等，它既是一个传播信息的媒体，也是一个分享信息的平台，那么它就需要互动，所以说，我们在考虑视觉之前，最好先把易用性和可用性考虑清楚。那么到这里，我可以总结一下，谈论视觉和体验到底谁重要是没有意义的，因为他们本身就不是相同的东西，而我们只需要弄清楚我们对于产品思考问题的顺序就对了

　　作为设计师，我们在接到一个新产品的时候，最好先要弄明白自己在做什么，并且考虑清楚最基础的产品需求，当你达到这个基本的产品需求的时候，再开始考虑这个产品是否易用。而我们最后要用视觉手段，来实现我们的产品目标。注意，我在这里把视觉归纳成为我们的手段，而我们的产品目标则是我们的根基和目的。那么一个手段有很多种，只要我们能最后达到目标，可以不择手段。

　　综上所述，如果我们再谈论视觉和体验谁重要，那是门外汉的行为。视觉是我们的手段，而体验是我们的根基。把手段和根基相比是没有意义的，它本身就不是相同的东西，我们也许会迷惑于产品到底适合什么手段，但至少要弄明白考虑问题的顺序。
]]></description>
		</item>
		<item>
			<title>网站可用性情感评测</title>
			<link>http://www.kingmx.com/article.php?id=14871</link>
			<pubDate>2006-12-27</pubDate>
			<description><![CDATA[

人们无法不对软件产生感情，所以要保证你的用户界面唤起的是愉快的情感。

技术不再仅与生产效率有关，年复一年，技术不断入侵我们生活的方方面面：工作、家庭、旅游和休闲。这意味着根据目标设定和成就、任务出错率、甚至是任务本身定义可用性已不再足够。相反，可用性这一学科正逐渐涉及一个更加令人惊慌的概念——人们对他们应用的装置、应用程序和网站产生的情感。

一段时间以来，可用性的情感因素已日益成为一个新兴领域。社会学家、人类学者和社会心理学家已经对我们的技术心理反应本质进行了大量的研究，但他们的发现主要用于学术领域。现在，许多提供产品和网站的商业机构或者寻求用户的情感回应，如信任、愉悦或忠诚；或者支持基于情感的行为，如娱乐和友谊网络。因此，开发者面临的压力不断增大，不仅要了解情感设计，还要支持、结合并评估情绪性。

困难在于情感是一种复杂而又无意识的行为。多数情况下，我们不明白自己为何对某些事物产生感情，这说明我们无法清楚解释为什么我们会对一款产品或一个网站的评价、功效或价值形成特殊（通常是根深蒂固）的观点。情感也会因人和环境产生巨大的差异：一个人觉得有趣的事情，另一个人会觉得厌烦；在晚饭后让人愉快的事情在早餐前却令人急躁。

如何根据情感设计

你已经在根据情感而设计——只是你没有意识到而已。许多领域的研究员都赞同这个观点：即情感与认识关系密切，互相影响。这说明，虽然合适的特性与功能相当重要，但产品的美学吸引力也不容忽视——它是一款实用产品的基本组成部分，也是促使终端用户做出购买决策的核心因素。

一些技巧尝试以一种适度结构化的方法来评估情感强度，从而转变情感表达——例如，“你有多烦？有些/非常/特别烦”——然后把这些结果与各种感觉相匹配。对一个金融网站产生某种程度的厌烦与认为该网站可信的感觉有关。在同一个网站上使用同样的标志、鲜明的色彩、刺激性的图片或与众不同的动画可能不会引起厌烦，但这种情况往往会造成猜疑，并降低可信度。

完全根据情感进行设计相当困难，通过设计来影响总体感觉则容易一些：


对网站而言，以连贯、合理的方式组织信息，并保持专业性的“外观和感觉”十分重要。将微妙的色彩、一致的字体和布局与直观导航和任务导向的功能结合起来，就可以唤起用户的积极情感反应，从而改善信任程度，提供可信度和安全性。 
软件应用程序以任务为中心，并突出经常访问、运行稳定的功能，这将直接增强情感满意度，提高质量和总体吸引力。 
注重美学与风格设计的产品在用户与产品之间建立依属感，以及与性能改善认知密切相关的愉悦感。 
对任何产品产生积极的情感肯定会建立忠诚，形成重复购买与推荐行为。 

焦点的转变

对于可用性实践者而言，情感日益占支配地位使我们长期持有的焦点（何为“成功的”用户体验）复杂化。以前，他们关注的焦点问题在于你通过关注一项设计的主要功能缺陷，能够在多大程度上满足程序员和开发者的需求，却往往忽略了情感的作用。询问产品是否运行正常，是否易于使用或理解，或者甚至是否直观，与询问用户对它的感觉相比，前者更易于量化，也因此更便于测量。

但是，要了解用户对一个产品或网站的反应，询问与情感有关的问题，不管是从短期还是长期来看，都是一种更有意义、更快捷也更可靠的方法。或者你也可以忽略顾客根据自己甚至都没有意识到的情感、感觉和个人价值做出购买决策这一事实。根据常理设计，很好；根据情感设计，更好！

Joanna Bawa是可用性顾问兼技术作家。在过去15年中，她在大小型机构和公司中从事信息质量和可用性的分析、评估和改进工作。
]]></description>
		</item>
		<item>
			<title>如何开始标准之路</title>
			<link>http://www.kingmx.com/article.php?id=14870</link>
			<pubDate>2006-12-27</pubDate>
			<description><![CDATA[今天在经典里看到有网页提到怎么学习WEB标准。经典里的朋友们纷纷给出相应的方法，有的说去买书看，有的说在经典里泡。我觉得大家没人给出一个比较明确而有效果的学习方法，我就想写点我的意见，可是又不知怎么写，只好就把自己是怎么开始标准之路的心得与大家分享一下，希望能帮助刚开始入门的朋友们。
刚开始接受WEB标准是在2004年的6月份，那时经典里有一些高手们正在讨论一个新东西。当时叫什么我不清楚，反正不叫DIV+CSS，只是觉得挺有意思的，就进去看看。发现高手们谈的不是很明白，当时自己HTML代码都认识不全的，只会用DW(Dreamweaver简写，下同)。只是看看高手们发的一些国外的作品，觉得很漂亮。但是由于当时自己对HTML的不熟悉也并没有立刻进入学习。但是开始了解WEB标准的一些优点了，而最吸引我的就是那种HTML不用动，只需要更新CSS就能把网站变成另一个样子。我是个设计师，程序的美妙我是不能理解的，但是这个换肤的特性却深深的吸引我了。
正式开始学习是在九月份的时候。我采用了局部应用法，也就是说网页的大部分依然使用表格，只在局部采用CSS来定义样式，通过这样的方式我先了解了CSS的一些特性。但是只用了很少的CSS功能。也只局限于文字上的一些应用。对于布局，大面积的布局根本没有涉及。正是由于这样的局部应用法，提升了我的信心，并且帮助了我扎实了基本，因为那里我开始练习看HTML代码了。
后来我已经不满足于这种局部的应用了，所以我希望全局的应用，但是当时国内根本没有什么相关的资料可查，有一些高手翻译的文档基本上还是理论层面上的，根本不起什么作用。但是这些问题并不大，因为我学习网页就是从拆别人的网页开始的，原来是在DW中拆可看到的格式，现在在记事本中拆代码。我想问题不大，那里我就必需要找到一个全世界做得最好的WEB标准网站来拆，当时一直在看Dave Shea 的禅意花园的一些翻译过来的中文资料，其中看到Dave非常推崇StopDesign的作者Douglas Bowman我想Dave这么推崇他，我想他的网站必然可以算是当时世界上最好的WEB标准站点了。事实上等我拆看他的代码时发现，他真的非常牛。直到现在有很多代码都是我所不能理解的。
榜样找到了，下面就是拆了，想要把他的网站代码下载下来没问题，关健是怎么样去分析。一开始我把他的代码分成了两个部分，一个是HTML结构，一个是CSS样式。分别打印出来。一开始我先看的是他的HTML结构，他的HTML结构写得非常的严谨，我现在的结构思路基本上是依据StopDesign结构改变的。主要是研究他是怎么划分的，然后还研究了他的命名，我现在的命名与他的命名不一样，我采用了一些编程人员使用的命名标准。能过研究HTML代码绝对会让你有很大的进步。这一步非常的重要。
当结构基本上懂了之后，就开始读他的CSS代码，一开始就是单纯的读CSS关键是看高手是怎么写代码的。并且不同的CSS文件之间的关系，以及一些CSS Hack的东西。但是单纯的看是没用的，还需要对应HTML来理解，不然根本不能完全理解CSS的作用。那要怎么样对应HTML来理解呢。我的办法还是一个字“拆”。怎么拆呢，我先把他们还原成为一个正常的样式。然后为了弄明白一句CSS的意思，我就把这句CSS删除然后看效果。如果删除后还是没出现预料的变化，那我就会再查找一下，倒底是怎么回事。有时还会自己去改动，设置来看效。也就是在这样的拆拆改改中就基本上知道了WEB标准的一些技巧。
正在学习之中公司要去接个项目，是个政府项目。当时记得好像是十一月份了，为了拿到这个项目我开始用最迷人的换肤特性去引诱我的客户，果然客户被这种特性深深的吸引，并且我告诉他们，通过这种方式的构建在改版时可以节约大约百分之三十到百分之四十的费用。最终我们拿到了这个项目当然价格不菲，开发周期也破天荒的达到了两个月之久。钱有了，时间也有了。下面我要做的就是如何为客户实现这些，与是我开始了我非常大胆的举动，我要用WEB标准来开发这个项目，于是我开始了结构的策划，CSS的预想。依据设计稿，我不断的修改原来的结构，不断的修改CSS，同时还要应对IE5的浏览器，工作中也出现过解决不了的问题，最后我还去修改了设计稿。使之能更容易用WEB标准开发。
通过不断的努力，我第一个WEB标准的网站就这样完成了，虽然没办法通过验证，但是换肤的特性是绝对没问题的，并且可以适合IE5~IE6，Firefox等浏览器。
以上是我从一无所知到，基本掌握这样技术的过程，虽然也有很多不是没说清楚，但是有一点，学标准需要非常的毅力，因为你会遇到很多困难，有时你会觉得学不下去，但是要学会想办法解决问题才能让你沉到更多的知识。希望以上的文字能让大家有所收获。
]]></description>
		</item>
		<item>
			<title>美国网站和日本网站到底有什么不同？</title>
			<link>http://www.kingmx.com/article.php?id=14835</link>
			<pubDate>2006-12-22</pubDate>
			<description><![CDATA[

美国网站和日本网站到底有什么不同？

2005年Forrester Research 针对美国和日本网站的用户体验进行了一次网友调查，结果发现大部分网站都不能达到网友的预期，分别从每个因素来看，美国和日本网站则可说是“各有所长”。此次调查中四个关键指标分别为“价值”、“导航性”、“表现”、“可信任程度”。

参与测评的网站为汽车类，媒体类，零售类和旅游类。

价值

这部分共包括四个问题：

1. 从首页来看，访问者是否可以达成他们的目标？

2. 核心内容是否都出现在适当的位置？

3. 核心功能是否都出现在适当的位置？

4. 核心内容和核心功能是否出现在页面的首要位置？

在问题3核心功能的位置上，日本网站的表现最差，而美国网站则在这方面表现的最好。很多日本网站喜欢强迫访问者浏览产品信息这类“无价值”的信息，阻碍了访问者的浏览进程；美国网站则更多地是把首要的核心功能列在显要的位置，方便访问者很快地找到想要地信息。典型的例子：本田Honda的美国网站和日本网站：http://automobiles.honda.com/ http://www.honda.co.jp/ 











导航性

这部分共包括六个问题：

1. 每个类别和子类别是否都有明确的名称，每个类别是否是相对独立且排他的？

2. 菜单类别是否可以马上罗列出或是表达出下属子类别？

3. 条目的划分是否符合逻辑？

4. 能够有效地进行功能转换？

5. 网页中的其他超级链接是否清晰并且有帮助？

6. 关键词搜索（站内搜索）是否全面准确？

除了搜索的问题外，其他方面美日网站的表现比较接近。就搜索来说，日本网站在搜索结果的相关性和搜索界面的可用性方面要优于他们的美国对手。 

表现

这部分共包括九个问题：

1. 网站使用的语言是否简单易懂？

2. 网站是否简单易懂的使用了图片、图标和符号？

3. 网站的文章是否容易阅读？

4. 文章的格式和布局是否利于快速浏览？

5. 网页的布局是否有效地利用了空间？

6. 交互部分和固定部分是否安排合理？

7. 交互部分是否容易辨认？

8. 交互部分是否是前后连贯的？

9. 网站是否考虑的用户手眼配合的因素？

在这个部分日本和美国网站显示出明显的差异。日本网站通常会使用大字号容易阅读的字体，而美国网站的字体则越来越小了。日本网站的设计缺乏连贯性，用户很难通过快速浏览获取需要的信息，相比较而言，美国网站在这方面做得比较好。

可信任程度

这部分包括6个问题：

1. 网站是否以文字形式标示出保密和安全条款？

2. 网页是否提供用户当前所在位置的说明?

3. 在用户行为之后网站是否做出了反馈？

4. 网站是否提供结合前后内容的关于重点问题的帮助？

5. 网站是否帮助用户从错误中恢复？

6. 网站的业绩很好吗？

在这部分调查中，美日网站的表现都不尽如人意，尤其是在明确保密条款和帮助用户从错误中恢复这两个问题。


&nbsp;
]]></description>
		</item>
		<item>
			<title>如何开始标准之路</title>
			<link>http://www.kingmx.com/article.php?id=14833</link>
			<pubDate>2006-12-22</pubDate>
			<description><![CDATA[
今天在经典里看到有网页提到怎么学习WEB标准。经典里的朋友们纷纷给出相应的方法，有的说去买书看，有的说在经典里泡。我觉得大家没人给出一个比较明确而有效果的学习方法，我就想写点我的意见，可是又不知怎么写，只好就把自己是怎么开始标准之路的心得与大家分享一下，希望能帮助刚开始入门的朋友们。
刚开始接受WEB标准是在2004年的6月份，那时经典里有一些高手们正在讨论一个新东西。当时叫什么我不清楚，反正不叫DIV+CSS，只是觉得挺有意思的，就进去看看。发现高手们谈的不是很明白，当时自己HTML代码都认识不全的，只会用DW(Dreamweaver简写，下同)。只是看看高手们发的一些国外的作品，觉得很漂亮。但是由于当时自己对HTML的不熟悉也并没有立刻进入学习。但是开始了解WEB标准的一些优点了，而最吸引我的就是那种HTML不用动，只需要更新CSS就能把网站变成另一个样子。我是个设计师，程序的美妙我是不能理解的，但是这个换肤的特性却深深的吸引我了。
正式开始学习是在九月份的时候。我采用了局部应用法，也就是说网页的大部分依然使用表格，只在局部采用CSS来定义样式，通过这样的方式我先了解了CSS的一些特性。但是只用了很少的CSS功能。也只局限于文字上的一些应用。对于布局，大面积的布局根本没有涉及。正是由于这样的局部应用法，提升了我的信心，并且帮助了我扎实了基本，因为那里我开始练习看HTML代码了。
后来我已经不满足于这种局部的应用了，所以我希望全局的应用，但是当时国内根本没有什么相关的资料可查，有一些高手翻译的文档基本上还是理论层面上的，根本不起什么作用。但是这些问题并不大，因为我学习网页就是从拆别人的网页开始的，原来是在DW中拆可看到的格式，现在在记事本中拆代码。我想问题不大，那里我就必需要找到一个全世界做得最好的WEB标准网站来拆，当时一直在看Dave Shea 的禅意花园的一些翻译过来的中文资料，其中看到Dave非常推崇StopDesign的作者Douglas Bowman我想Dave这么推崇他，我想他的网站必然可以算是当时世界上最好的WEB标准站点了。事实上等我拆看他的代码时发现，他真的非常牛。直到现在有很多代码都是我所不能理解的。
榜样找到了，下面就是拆了，想要把他的网站代码下载下来没问题，关健是怎么样去分析。一开始我把他的代码分成了两个部分，一个是HTML结构，一个是CSS样式。分别打印出来。一开始我先看的是他的HTML结构，他的HTML结构写得非常的严谨，我现在的结构思路基本上是依据StopDesign结构改变的。主要是研究他是怎么划分的，然后还研究了他的命名，我现在的命名与他的命名不一样，我采用了一些编程人员使用的命名标准。能过研究HTML代码绝对会让你有很大的进步。这一步非常的重要。
当结构基本上懂了之后，就开始读他的CSS代码，一开始就是单纯的读CSS关键是看高手是怎么写代码的。并且不同的CSS文件之间的关系，以及一些CSS Hack的东西。但是单纯的看是没用的，还需要对应HTML来理解，不然根本不能完全理解CSS的作用。那要怎么样对应HTML来理解呢。我的办法还是一个字“拆”。怎么拆呢，我先把他们还原成为一个正常的样式。然后为了弄明白一句CSS的意思，我就把这句CSS删除然后看效果。如果删除后还是没出现预料的变化，那我就会再查找一下，倒底是怎么回事。有时还会自己去改动，设置来看效。也就是在这样的拆拆改改中就基本上知道了WEB标准的一些技巧。
正在学习之中公司要去接个项目，是个政府项目。当时记得好像是十一月份了，为了拿到这个项目我开始用最迷人的换肤特性去引诱我的客户，果然客户被这种特性深深的吸引，并且我告诉他们，通过这种方式的构建在改版时可以节约大约百分之三十到百分之四十的费用。最终我们拿到了这个项目当然价格不菲，开发周期也破天荒的达到了两个月之久。钱有了，时间也有了。下面我要做的就是如何为客户实现这些，与是我开始了我非常大胆的举动，我要用WEB标准来开发这个项目，于是我开始了结构的策划，CSS的预想。依据设计稿，我不断的修改原来的结构，不断的修改CSS，同时还要应对IE5的浏览器，工作中也出现过解决不了的问题，最后我还去修改了设计稿。使之能更容易用WEB标准开发。
通过不断的努力，我第一个WEB标准的网站就这样完成了，虽然没办法通过验证，但是换肤的特性是绝对没问题的，并且可以适合IE5~IE6，Firefox等浏览器。
以上是我从一无所知到，基本掌握这样技术的过程，虽然也有很多不是没说清楚，但是有一点，学标准需要非常的毅力，因为你会遇到很多困难，有时你会觉得学不下去，但是要学会想办法解决问题才能让你沉到更多的知识。希望以上的文字能让大家有所收获。 
]]></description>
		</item>
		<item>
			<title>自定义标记来布局页面</title>
			<link>http://www.kingmx.com/article.php?id=14832</link>
			<pubDate>2006-12-22</pubDate>
			<description><![CDATA[

今天我们来学习如何使用有趣的自定义标记来布局页面。有的朋友可能有这样的疑问，自己随便定义的标记浏览器怎么能正确的认识呢？

这里我们就要用到文档的命名空间，那么命名空间又是指什么？

大家知道XML有一个很大的特点就是他的可扩展性。你可以创建你自己的标记或使用别人创建的标记，这里就存在了一个问题，即你所定义的标记和别人定义的标识有可能相同，但他们各自所表示的意义却不同。

打一个形象的比喻，比如有两个人名字都叫蓝色，一个人在经典，一个人在天涯，如果你要找他们就可以这样说明，天涯:蓝色 、 经典:蓝色，这样就不会混淆了。

命名空间的意义就是要告诉别人这个文档是属于谁的。xhtml是html向xml过渡的产物,这里他也提供给了我们一个命名空间。

看下面的例子，我们命名一个名称为blueidea的前缀，http://bbs.blueidea.com是用来说明命名空间的url。xmlns是指xhtml namespace

&lt;html xmlns:blueidea="http://bbs.blueidea.com"&gt;

有意思的是我们甚至可以用中文来做标记(用中文可能会出现编码问题)。这样的文档看起来真的是一目了然。

下面我们定义一个标记叫做“新闻标题”格式因该是“blueidea:新闻标题”

&lt;blueidea:新闻标题&gt;最新更新&lt;/blueidea:新闻标题&gt;

然后用CSS定义他 ，格式: blueidea\:新闻标题 {}

需要注意的是我们自定义的标记默认属性，有点象a、span等内联元素。

下面是我写的一个基本布局，(兼容IE5、6、7 FF2 OP9)是不是很有意思，象XML，其实本来自定义标记就是用在xml上地。大家赶紧自己来试一下吧，因为很多东西都是自己从实践中摸索出来的。

运行代码框
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns:blueidea="http://bbs.blueidea.com"&gt;
&lt;style&gt;
* {
	padding:0;
	margin:0
	}
body{
	text-align:center;
	}
blueidea\:页面上部 {
	position:relative;
	display:block;
	margin:0 auto;
	width:700px;
	height:150px;
	border-bottom:3px solid orange;
	background:black
	}
blueidea\:主体部分 {
	display:block;
	margin:0 auto;
	width:700px;
	text-align:left;
	background:#eee	
	}
blueidea\:主体部分 blueidea\:主体左侧 {
	display:block;
	width:220px;
	height:500px;
	border-right:1px solid #ddd;
	background:#f3f3f3
	}
blueidea\:新闻标题 {
	display:block;
	padding-left:5px;
	height:25px;
	line-height:25px;
	background:#ccc
	}
blueidea\:新闻列表 {
	display:block;
	list-style:none;

	height:160px;
	background:#eee
	}
blueidea\:页面下部 {
	display:block;
	margin:0 auto;
	width:700px;
	height:100px;
	background:black
	}
blueidea\:站点标志 {
	position:absolute;
	top:20px;
	left:20px;
	padding-top:2px;
	display:block;
	width:90px;
	height:31px;
	background:#eee	
	}
blueidea\:导航菜单 {
	position:absolute;
	top:124px;
	left:300px;
	display:block;
	}
blueidea\:导航菜单 a {
	float:left;
	margin-left:2px;
	width:60px;
	height:25px;
	font:12px/25px 宋体;
	color:white;
	text-decoration:none;
	border:1px solid orange;
	border-bottom:0;
	}
blueidea\:导航菜单 a:hover {
	border:1px solid #FDE201;
	border-bottom:0;
	}
blueidea\:页面 {
	border:1px solid #FDE201;
	}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;blueidea:页面上部&gt;
&lt;blueidea:站点标志&gt;&lt;img src="http://bbs.blueidea.com/images/blue/logo.gif" alt="蓝色理"/&gt;&lt;/blueidea:站点标志&gt;

&lt;blueidea:导航菜单&gt;
&lt;a href="#"&gt;home&lt;/a&gt;
&lt;a href="#"&gt;work&lt;/a&gt;
&lt;a href="#"&gt;contact&lt;/a&gt;
&lt;/blueidea:导航菜单&gt;

&lt;/blueidea:页面上部&gt;


&lt;blueidea:主体部分&gt;
&lt;blueidea:主体左侧&gt;

&lt;blueidea:新闻标题&gt;最新更新&lt;/blueidea:新闻标题&gt;

&lt;blueidea:新闻列表&gt;
&lt;li&gt;·aaaaaaaaaaa&lt;/li&gt;
&lt;li&gt;·aaaaaaaaaaa&lt;/li&gt;
&lt;li&gt;·aaaaaaaaaaa&lt;/li&gt;
&lt;li&gt;·aaaaaaaaaaa&lt;/li&gt;
&lt;li&gt;·aaaaaaaaaaa&lt;/li&gt;
&lt;li&gt;·aaaaaaaaaaa&lt;/li&gt;
&lt;/blueidea:新闻列表&gt;

&lt;/blueidea:主体左侧&gt;




&lt;/blueidea:主体部分&gt;

&lt;blueidea:页面&gt;ssssss&lt;/blueidea:页面&gt;
&lt;blueidea:页面&gt;ssssss&lt;/blueidea:页面&gt;
&lt;blueidea:页面&gt;ssssss&lt;/blueidea:页面&gt;
&lt;blueidea:页面下部&gt;&lt;/blueidea:页面下部&gt;
&lt;/body&gt;
&lt;/html&gt;
]]></description>
		</item>
		<item>
			<title>用户体验良好的网站其主页需要具备的十二个使命</title>
			<link>http://www.kingmx.com/article.php?id=14831</link>
			<pubDate>2006-12-22</pubDate>
			<description><![CDATA[

笔者最近在给编辑部培训的时候发现一个问题，就是他们在设计专题或者页面的时候自我意识太强，缺少页面设计的基本思维，想怎么设计就怎么设计，有些只是看到别人的页面是这样，他也就闷头模仿，还给思域传递了一句名言：“模仿是雷管，创新是炸药”。话虽如此，可是既然要成为一名专业的编辑或者页面设计师就必须懂得页面设计有哪些准则，如何站在公司的角度考虑公司的利益，如何站在用户的角度给用户良好的体验，如何站在行业的角度延续行业长期培育起来的用户习惯。 


下面笔者想重点说说，在主页设计的时候我们应该赋予主页的十二个任务： 


第一个任务：体现站点的标识和使命 


上次看到一组数据，说当今全球网站数量已经上亿了，平均每天看1万个网站，那么一个人要花30年才能看完这些网站，可是30年中又会有无数的网站诞生，也许又要花60年才能再看完，总之这辈子笔者是看不完了。说明网站竞争相当激烈，同一个类型的网站同时有上万家在竞争是不足为奇的，所以在竞争中一个网站的主页就显得格外重要。 


主页要不能放过任何一个可能访问或者正在访问甚至访问过的用户，大家都削尖了脑袋想办法如何处理这三个问题。那么对于任何一个访问你网站的用户你就要了解他第一次打开你网站他关心什么。经过思域长时间的调查和试验，用户第一次打开一个网站大部分是这四个问题： 


A 这是什么网站？ 


B 网站上有什么？ 


C 我能在这里做什么？ 


D 为什么我应该选择这里，而不是其他地方？ 


下面我们以阿里巴巴为例看看他是如何表达这四个问题的。

阿里巴巴在国内是电子商务类网站用户体验公认做得最好的，这个思域不想论证，就看他的网站LOGO，橙色加黑色，网站整体CI就是这个色，标识下方的“全球领先的网上贸易市场” 


第一个问题：阿里巴巴是做什么的？看完这个LOGO如果您还不知道，那么接着您的视线从LOGO位置水平向右移，看到导航，还不知道是做什么的？天！好吧，请托动滚动条，浏览一下网页。 


第二个问题：我能在这里做什么？从阿里巴巴首页右上角的导航条，很明显的告诉用户，用户在这里可以“采购”和“销售”这是主打服务，其他的看用户的需求。 


第三个问题：网站上有些什么？如果前两个问题你在阿里巴巴上已经没有疑问了，那么这个问题阿里巴巴已经在主页上很好的回答你了。 


第四个问题：为什么我应该在这里？“全球领先的网上贸易市场”这句话的效果不要小看哦！ 


好了，通过阿里巴巴的例子，已经告诉各位看官主页的第一个任务――体现站点的标识和使命。主页要告诉用户我这是什么网站，我是做什么的，为什么你应该来我的网址。 


第二个任务：网站导航和站点层次 


网站要给出网站提供的服务的概貌，既要包括内容――“我能在这里找到什么？”。也要包括功能――“我能做什么？”。还有这些服务是如何组织的。这项工作通常由持久导航来处理。其实一个网站的导航是非常重要的，他是网站的通道，通道如何设计才能让用户最方便快捷的到他想去的页面，如何设计才能把网站最好的内容体现在用户面前，导航设计有哪些讲究，避免出现哪些错误，这些问题思域后面的文章都会一一解答。 


第三个任务：搜索 


对于信息量大的网站搜索是很必要的，否则即使你其他元素处理得再好，用户在你网站上体验的感觉就像波音747的靠背椅全部换成了小板凳！ 


第四个任务：导读 


就像杂志封面一样，主页要用一些“里面有精彩内容”的暗示来吸引我，“内容推荐”部分应该突出最新、最好、最热门等的内容片断，例如头条或者热销和热文等等。“功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简报等。 


第五个任务：内容更新 


如果网站的成功取决于用户是否经常来访，那么主页应该有一些经常更新的内容。即使是不需要固定访问者的网站也需要有一些活跃的迹象，哪怕只是一个到最新的新闻链接，告诉用户这里并不是一潭死水。 


第六个任务：登陆注册 


如果网站使用会员制，主页应该为新用户注册和老用户登陆提供链接或者直接登陆框，免得用户四处寻找，至于是提供链接还是直接的登陆框，需要设计师来衡量，是黏性较强还是较弱，是老用户多还是新用户多，页面位置该不该腾出一个地方出来放置登陆框，用户的习惯会是怎样的，关于登陆框的问题，思域以后说。 


第七个任务：快捷方式 


最常访问的内容片断，如软件升级等，值得在主页上放置链接，免得用户四处寻找。现在很多网站的快捷方式是网站一厢情愿的，不是用户经常访问哪些内容网站就把这部分内容以快捷方式的形式体现在首页，而是网站方面最近新推出了什么业务，网站有什么新的动向，把这些内容作为快捷方式，思域认为最好是根据网站特点来考虑，看看是为用户多考虑合适还是为自己多考虑合适。 


第八个任务：友情链接 


需要在主页上预留空间，用来放置广告、交叉推广、合作品牌的友情链接等等，这里思域不多说了，有很多人问思域，一个新的网站如何与别人交换链接？如何交换到质量较好的链接？交换链接的质量好坏如何评定？一篇文章咱说不完。思域会专门来说这个问题。 


第九个任务：让用户看到他正在寻找的东西 


主页应该让用户想要的任何东西显而易见，如果这些内容在站内某个角落的话。当然，不是把网站的所有东西都罗列出来，弄得一个主页十几屏，用脑子嘛！ 


第十个任务：告诉用户还有他没有寻找到的 


主页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，就算用户并没有寻找他们。 


第十一个任务：告诉用户从哪里开始 


用户第一次到一个网站还无从下手，感觉就像和女生睡觉，都把她衣服脱光了，她还呆若木鸡，面无表情。网站首页应该如何安排才能完成这个任务，其实方法有很多，这里不多说，思域后面会详细的说。（写道这里思域好像累计了好几篇文章啦，找个时间向各位看官慢慢解答） 


第十二个任务：建立可信度和信任感 


对于一些访问者来说，主页将是你的网站给他们留下好印象的唯一机会。 


好了，主页的十二个任务，思域草草的罗列了一下，具体如何运用还需要大家根据自身的特点，站在网站自身的角度，站在用户的角度，站在行业的角度，十二个任务是纵向的，三个角度是横向的，各位看官用心的取舍，细细的考究吧！ 


下面还是用阿里巴巴的页面作为例子来结束此文！



]]></description>
		</item>
		<item>
			<title>ASP用Server.Transfer实现博客永久链接</title>
			<link>http://www.kingmx.com/article.php?id=14815</link>
			<pubDate>2006-12-20</pubDate>
			<description><![CDATA[在许多博客日志阅读页面里的尾部都能看到一个永久链接，这个链接一般是持久在在的，即使博客程序换了，也可以用这个链接来访问原来的日志，而不会出现找不到页面的情况，这对于一个博客的确是一个比较实用的功能。
　　在修改blog程序时，也考虑了这个问题，决定也给博客日志加上永久链接功能。

　　IIS6中如果请求一个目录后面跟上参数时，会把这个参数传给默认文档，即如果请求我的博客首页http://www.xujiwei.cn/blog/?id=500，那么id=500将会传递给默认文档default.asp。利用这点就可以实现博客日志的永久链接了。当然了，这个永久链接是建立在博客目录不改变的情况下，如果目录改了，就需要另外处理了。

　　在ASP中可以利用Response.Redirect，其原理是服务器向客户端发送一个302&nbsp;Object&nbsp;Moved的响应，然后客户端根据响应进行转向，但这个会增加额外的带宽开销，并且不利用搜索引擎收录，所以推荐使用Server.Transfer来转向。Server.Transfer则是直接停止当前脚本的执行，转而执行指定的脚本，并且当前的一些变量如会话等均可在新脚本里直接使用，而毋须再重新进行参数传递了，而Response.Redirect则不可以。

　　两种方法的另外一个比较明显的区别就是使用Response.Redirect客户端显示的URL会改变，而Server.Transfer则不会，使用Server.Transfer时客户端不会感到当前URL其实已经改变。其实这个区别也可以通过两种方法的调用方法来看出来，一个是Response.Redirect由客户端做出改变，而Server.Transfer则是由服务端做出改变。

　　了解了这些就可以开始做了，打开博客的默认文档，一般就是博客程序的首页，如default.asp、index.asp等，然后在其有输出内容之前加上以下代码：

　　&lt;%IF&nbsp;Request.QueryString("id")&nbsp;Then&nbsp;Server.Transfer("article.asp")%&gt;

　　当然了，article.asp是要根据博客程序来做相应改变的，id即为要做为永久链接时的参数，需要注意这个参数必须为article.asp所能识别的，即article.asp可以根据这个参数来显示日志，如果不行的话就要做相应的改变，即把article.asp中的参数名称改为id，或者把id改成其他名称。

　　ok，完成！其实这个东西是很简单的，这么大篇幅大都是废话，真正有用的就那么一句代码。
]]></description>
		</item>
		<item>
			<title>随浏览器滚动条移动的DIV层</title>
			<link>http://www.kingmx.com/article.php?id=14797</link>
			<pubDate>2006-12-17</pubDate>
			<description><![CDATA[

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;随滚动条移动的层 - webjx.com&lt;/TITLE&gt;
&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312"&gt;
&lt;META NAME="Author" CONTENT="flasher"&gt;
&lt;META NAME="homepage" CONTENT="www.webjx.com"&gt;
&lt;/HEAD&gt;
&lt;style&gt;
&lt;!--
.div{
&nbsp;position: absolute;
&nbsp;border: 2px solid red;
&nbsp;background-color: #EFEFEF;
&nbsp;line-height:90px;
&nbsp;font-size:12px;
&nbsp;z-index:1000;
}
--&gt;
&lt;/style&gt;
&lt;BODY&gt;
&lt;div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center"&gt;正中...&lt;/div&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
function sc1(){
&nbsp;document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
&nbsp;document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
&lt;/SCRIPT&gt;

&lt;div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center"&gt;左上...&lt;/div&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
function sc2(){
&nbsp;document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
&nbsp;document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
&lt;/SCRIPT&gt;

&lt;div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center"&gt;左下...&lt;/div&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
function sc3(){
&nbsp;document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
&nbsp;document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
&lt;/SCRIPT&gt;

&lt;div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center"&gt;右上...&lt;/div&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
function sc4(){
&nbsp;document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
&nbsp;document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
&lt;/SCRIPT&gt;

&lt;div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center"&gt;右下...&lt;/div&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
function sc5(){
&nbsp;document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
&nbsp;document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
&lt;/SCRIPT&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!--
function scall(){
&nbsp;sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//--&gt;
&lt;/SCRIPT&gt;
&lt;div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"&gt;&lt;/div&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
]]></description>
		</item>
		<item>
			<title>网页布局的四种基本型与十二种混合型</title>
			<link>http://www.kingmx.com/article.php?id=14782</link>
			<pubDate>2006-12-16</pubDate>
			<description><![CDATA[
上次在“《网页布局的位置重心与位置间的对比关系》”中只大概说了一下布网页局的相关知识，本文我们从实际的应用角度来说说布局。
　　上一篇文章中曾经提到网页的布局有一些基本型如上下、上中下、左右、左中右等，通过基本型可以扩展出更多的布局形式。下图就是网页布局的四种基本型与十二种简单混合布局。 


　　通过上面的十六个布局我们可以扩展出更多的布局形式。比如通过增加区块、通过不同的区块比例关系，来产生不同的布局应用。
　　布局绝对影响网站的整体效果，其中最重要的因素就在于布局这些区块的比例上。我在上次的文章中谈到“黄金分割比”、“九宫格”，通常黄金分割计算起来比较麻烦，我个人是比较喜欢用九宫格，因为只要基本符合九宫的四个核心点就可以了，不必要深究。
　　上图的左右布局如果是平分的话很显然就不明重心，而我们通常的做法是一边大一边小，而这个大小的比例一般是不超过1:3的，一般是在1:1.5以上与1:3之间。在内容页的布局中比例一般都比较大，为的就是让内容阅读更容易，但是内容的宽度也应该有一个度，不能很宽，一般在25~30个汉字或是40~45个字母为比较合适。过宽或是过过窄都会让阅读者产生视觉疲劳。（关于文本排版的细节可以参见《网页设计技巧系列 之 文本排版》)　　
　　如果是左中右的结构，那么这个比例关系就更为有意思，在大布局中一般不会采用三等份的布局，而在于小布局中会常常使用，用等宽来表示内容是同级的或是相似的。那么在大布局中，随着1024分辨率的普及，左中右结构也可以扩展成为四栏甚至是五栏。在多栏的布局中，可以使用一个大栏二到三个同宽小栏的布局方式，这里的同宽小栏的总宽要可以比大栏的宽度大一点或是小一点，或是等宽。当然也会有一些其它的布局比例，大家可以在具体的形式可以在实践中自行的调整看一下感觉。

　　上下或是上中下的比例就比较特别，与左右或是左中右的有很大的不同。
　　上下的比例需要考虑到第一屏的显示效果问题，现在1024分辨率的普及使得网站的高度显示被拉长。原来800下的显示高度大约在450PX左右，而现在已经可以达到620PX左右。所以我们需要在第一屏显示什么样的内容?一般最重要，最想要浏览者注意的当然要在第一屏显示出来。而一般来讲上中下的比例就是在这么长的屏中的比例。在大布局中的下面基本上是版权信息之类的，而上面主要是标志与导航或是BANNER所以上下的所占的比重不应很大，而重点是在页面的中间。

　　布局并不单是在图纸上画上几条线分出几个区这么简单，需要充分考虑每个区的内容形式，比如上面所提到的文本的宽度是否适合阅读等问题就会直接影响到布局的形式。而在首页的布局上，也会有很多不同的内容来影响布局。比如图片的分布是否过于集中，或是过于松散。还有就是上面所提到的通过等比的方式来表示内容是同级或是相似。
]]></description>
		</item>
		<item>
			<title>网页设计技巧系列 之 文本排版</title>
			<link>http://www.kingmx.com/article.php?id=14781</link>
			<pubDate>2006-12-16</pubDate>
			<description><![CDATA[

　　太长时间没写文章了，主要是工作太忙。今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助，同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们。

　　我们在做网页的时候会发现：自己画的图也不错，自己做的布局也很精致，做的图标也很漂亮，第一眼看起来都觉得很漂亮，但是看看就觉得不舒服，也不清楚为什么……
　　这里我告诉你，也许就是你的排版出现问题了。页面排版不合理产生的视觉效果会让读者的眼睛产生的疲劳感，基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。大家可以从下面的图示和讲解内容中看出差别，同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥，我所提供的都是一般性的提议，不同网站不同对待，不要过于拘泥我所给大家的一些参数。
　　下面我们用图例来说明。大家仔细看下面第一张图，前三个图是行距的问题，后两个是字数的问题。
　　行距的问题

　　第一个太挤了，都粘在一起了，这样眼睛在看这个文本的时候会需要花点时间去分辨，这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了，如果是那就改一下吧!
　　第二个是比较适中的，由于每行分得很清楚，这样看起来有很强的识别性。
　　第三个是比较宽的，松了一点，这样看起来也很清楚，但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节，一般排版不会越过两个字体高度(2em)。
　　字数的问题

　　下面两个图是字数的问题。第四个每行文字太长，这样看起来头要摇来摇去，这样读者更容易显得很累。因为要不断的转动头，或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完，不然从行末到下一行行首也会形成断裂感。
　　而下面的又太扁了，这样看起来也不是很舒服。由于在不断的换行阅读，眼球也会觉得不舒服。推荐的最好字数是： 不大于45个字母，不大于30个汉字。

　　

　　下面我们再看一幅图，聊聊段落的距离问题。
　　段落的距离

　　下面这幅图是关于段距的。
　　上面一个是比较合适的，这样的把段落分开了，让读者觉得文章并不是很多很难读。
　　如果不把段落当一回事，任其自然那么就会如下面一样，两段成为一段。
　　大家可以看出哪种更好，如果是几十段合在一起，那么这个文章就很少有人能读下去了!

　　

&nbsp;

　　现在经典论坛中的行距已经重新设定过了，现在发布长篇的文章就不会觉得糊在一起了，并且在链接上加了下划钱，对于色盲或色弱的朋友也容易识别，更为人性化了!
]]></description>
		</item>
		<item>
			<title>网页布局的位置重心与位置间的对比关系</title>
			<link>http://www.kingmx.com/article.php?id=14780</link>
			<pubDate>2006-12-16</pubDate>
			<description><![CDATA[网页的布局也许是大家最不放在眼里的地方，其实布局地位如同文字的排版一样，随便可布，布即随便。但是看过我上篇《网页设计技巧系列 之 文本排版》的朋友也许就会清楚，文字排版是一种不起眼但却非常重要的细节。做好了会让作品更为精细漂亮，做不好也许就成为作品失败的重要原因。
　　布局也是一样，需要我们足够的重视。下面我要讲的不是网页布置成“左中右”、“左右”、“上中下”之类的问题，而是位置的重心与位置之间的对比关系。
　　黄金分割率的概念大家都知道。下面我引用一段非常专业的解释：“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比，即把一根线段分为长短不等的a、b两段，使其中长线段的比(即a+b)等于短线段b对长线段a的比，列式即为a:(a+b)=b:a，其比值为0.6180339……这种比例在造型上比较悦目，因此，0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。
　　我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了，这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。

　　　　图示:九宫格

　　我们为什么要讲这两个概念呢?是因为这两个概念是设计的决窍之所在。我们很多时间喜欢把重要的东西放在正中心，表示重视想吸引目光注意。但是我要告诉大家。正中心属于盲点区。也就是说按人的视觉习惯来讲正中心是常常被忽视的。并且放在正中心也不会引起视觉刺激。用句玩笑话来侃一下:两眼中间是看不清楚的。不信拿你的手指指着鼻尖看你的手。那什么地方是视觉中心点呢，这就要用到上面的概念了。不过什么a:(a+b)=b:a都太麻烦了谁会那么细致的去算呢。这里用中国的九宫格原理就清楚得多了。四个视觉中心点很显然大家也清楚是什么位置了。

　　那么在实际应用中我们要怎么用呢。这点很重要，实战意义要比空谈概念重要得多。下面我们就来说一下实战中的应用，这里虽说是“网页设计技巧”，同样可以应用在平面设计与摄影或是其它的设计中，但是必竟是讲网页设计，所以主要还是举网页例。我们先从大布局来谈，然后再讲小布局，最后讲设计图片的布局。

　　大布局
　　基本上网页的布局分为，上中下、左中右、左右、上下、与上下左右之混合几类。同时我们还要思考的是分辨率与网页大小的关系。现在大部分的机器都是1024以上的分辨率了，那我们的宽度是不是一定也要顺应变得宽一点呢。个人观点是大可不必。因为网页本身也会与浏览器产生视觉对比。如果塞得太满势必也不是很好看。如果留下空隙网面与留出来的空白也可形成一定的对比，其比例也较接近黄金分割率。所以我觉得还是不要塞满浏览器为好，给网页一个可以呼吸的空间。那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我们不能把上下或是左右平分，而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分，我们我们要注意三者之间的关系，比如上中下结构，我们很清楚中间是主要内容需要大一点的空间，那么中空间的部分会尽量的点有大比例，一般来讲我们会让中间占大约百分之六十。而上面占百分之三十，下面占百分之十。那也就是说，下面是上面的三分之一，上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。

　　小布局
　　也可以说是细节上的布局。我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置，有些人喜欢排位，并且会把最重要的放在最上面，其实不然啊，放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置，是不是没有放在最顶部的?当然由于分辨率的问题目，这些头条可能位置也会有所变化。在800下头条是偏下的，而1024是居中一点，1600就偏上一点。但是从浏览器的大角度来看，这些头条也都是处于视觉中心点的。

　　图片布局
　　我们在处理图片的时候也会用到布局，比如我们的文字放在什么地方，标志放在什么地方这些都是布局的范畴。这里也要应用上述的概念，重要的要核心不要放在正中或是过于偏向角落。当然也会遇到重心的东西很大，基本上都占满了画面，下面让大家来看一张招贴画。

　　

　　大家看上面这张图，画面重点是那个MP4，但是这个对象很大。没关系，把这个MP4的图做得有透视性，左右的重量就不一样了。这样向左去一点，那么重心就向左去了，再加上MP4偏上，这个MP4就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。

　　好了，关于布局就说这么多，这里总觉得这里还少些东西，细想可能是视觉平衡方面的问题。这里讲得很多了，视觉平衡方面的问题目就再想想过些日子再整理出来。
]]></description>
		</item>
		<item>
			<title>网页UI讨论：网站信息的可用性设计</title>
			<link>http://www.kingmx.com/article.php?id=14779</link>
			<pubDate>2006-12-16</pubDate>
			<description><![CDATA[在一个以信息为主要内容的站点，其页面中的信息组织形式、版式、分类等将直接关系到用户在这个页面的浏览体验。
　　目前网站的信息排列方式主要有以下几种方式：

　　1．文字列表形式



　　此种形式在网站中使用率最高，优点是在“寸土寸金”的有限空间内尽可能地放更多的内容。缺点比较明显：单一的文字列表重复使得用户的眼睛找信息找到眼花，浏览体验大大下降，重点不突出。尤其在中文的显示方式下这些缺点则更加突出。

　　目前设计师的解决办法一般是在每一行文字前加一个修饰点，用以引导用户的浏览；加分割线将每一行都分割开来；控制行间距等等。

　　当然在某一个区域内进行这样的补偿设计是很有效果的。但是，如果整个页面大量的采用这种方式，则还是会影响用户的阅读。

　　2．图片形式



　　以往的用户研究中，网站上的图片被关注程度往往要高于文字信息。图片传达给用户的是具象的信息，用户不需要动脑筋就知道这是什么东西。这些信息会让用户在大脑里迅速地搜索出相关的信息链。

　　所以，用图片显示的不失为一个好的方式。但是占用空间大，有些图片内容令人费解的问题也还是存在的。
3．图片加文字内容形式 


　　单从用户体验的角度上讲，这种形式算是最佳的浏览方式。图片在用户的脑中形成的是具象的信息，文字、语言在用户的脑中形成的则是抽象的信息。而这种形式对用户在“行”和“意”上都做了考虑。也就是说，用户看图片和文字的时候，大脑的工作区域是不同的，最终会达到一个“图文并茂”效果。

　　优点是会提供给用户良好的浏览体验，让用户不用抽象的思考，大大减少了用户思考的时间，提高了网站的可读性。

　　缺点是这种形式需要太大的空间（一般一条文字加图片的信息可以放10条左右的纯文字信息）。导致无法放入更多的信息资源，不能在一个页面大量的使用。

　　4．迷你块





　　那说到这里，到底有没有一种两全齐美的方法呢？答案是肯定的，“迷你块”就比较好的解决了这个问题。

　　迷你块的设计是把一条信息的图片和文字以列表的形式展现出来，每一条信息都由一张很小的图片和一条文字标题组成，达到了图文并茂的效果。接着，利用本身所占区域很小的特性，可以组成一个重复的列表，这样以上所说的问题都迎刃而解了。

　　不过，作为这种折衷的做法，其效果也是折衷的：单位空间内不会比只有文字列表那么丰富；图片的大小限制，不会特别的清晰明了等等

　　总之，如何让用户在获取网站信息的时候不用思考，是我们UI设计师的设计宗旨。而方法的选取也视用户群体、网站类型等各方面因素所决定。
]]></description>
		</item>
	</channel>
 </rss>
