Lee's Blog - 技术文章

Google font api web font与中文

a@b.com (admin) — Tue, 08 Jun 2010 16:47:54 +0800

　　Google昨天在Google I/O大会上发布了一个新的服务 Font API，这是一个很酷的东东，可以让我们很方便的使用网络字体，而且这些字体都是免费的，你无需担心版权的问题。

　　Google Font API使用起来也非常方便，从下面的例子中可见一斑：

@font-face {font-family: 'Tangerine'; font-style: normal; font-weight: normal; src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA') format('truetype');}

　　嗯，看起来与普通的web-font定义并无二样，只是url资源使用Google Font API库中的字体。

相对于其它的网络字体服务，Font API有以下优势(与Ajax API类似)：

节省自己的流量；
快速，稳定。

欲了解更多，可以查看这个快速指南。

其实关于网络字体，我们之前也有简单的讨论，感兴趣的同学可以阅读下面两篇文章：

——————————–分割线——————————–

中文网络字体

使用网络字体的好处是不言而喻的，它可以让我们更方便的实现更丰富的页面效果。国外的技术人员，一直在不断的为让web-font变为现实而努力，从sIFR到typeface再到typeselect，以及cufon和fontue，不同的尝试和解决方案不断涌现，各大浏览器纷纷开始支持@web-font属性，同时类似typekit之类的收费和免费网络字体也开始不断出现。这让我们对此充满的希望。

但是反观国内，我们却只能望洋兴叹，汉字的网络应用一直没有进展。

其实道理很简单，中文网络字体的实现有很多难以跨越的瓶颈：

字体太大，在当前国内的网络带宽环境下，使用中文网络字体不太现实；
版权问题，绝大部分优秀的中文字体，都不是免费的；
商业模式陈旧，没有与时俱进。

国内的商业字体厂商的思维还是停留在平面和印刷上，他们并没有重视或者发现网络这块市场，以至于多年来，除了开源的文泉驿，我们没有见到有太多字体创新，更没有看到各大字体厂商有向网络字体方面的任何努力。

希望

嗯，除了希望，我没有任何办法促进中文字体的网络应用……

博大精深的中华文化，很大一部分是体现在汉字上的，而在互联网对社会生活影响越来越深刻的今天，汉字在网络上的应用却依然那么困难和苍白。

Google之所以令人尊敬，不仅仅是因为它在创新，更是因为它也在普及创新。

希望国内的字体厂商和浏览器厂商，能够真正的为中文字体的网络应用做出些努力和创新，不要固步自封，固守已经过时的商业模式。

不过，或许他们也无能为力，或许我们只有等待——等待网速普及到100MB以上、等待国外出现先进的技术、等待….——到时候，或许字体厂商会沦为坚强的维权者….

2010年最新的100个免费HTML模板

a@b.com (admin) — Mon, 07 Jun 2010 18:23:49 +0800

译自：100 Fresh And Free xHTML Templates Of Year 2010
中文原文：2010年最新的100个免费HTML模板
请尊重版权，转载请注明来源，多谢！

CSS使用技巧20则

a@b.com (admin) — Fri, 07 Aug 2009 13:24:22 +0800

1. CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

...

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

这样调用它：

...

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

这样调用：

...

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

如果想定位到距左30点，距上5悖梢哉庋?BR>
#navigation
{
position: absolute;
left: 30px;
top: 5px
}

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation
{
background: blue;
width: 150px
}

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

11. Block和inline元素对比
所有的HTML元素都属于block和inline之一。block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

,
,
和
是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
, , , , , 和是inline元素的例子。

用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；

让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

12. 再来一个box黑客方法

之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：

padding: 2em;
border: 1em solid green;
width: 20em;
width//:// 14em;

第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。

13. 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个类：

}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度：

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}

14. IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。

5. 字体变形命令

text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。

16. IE中图片文字消失的问题

有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。

17. 不可见文字

不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。

18. 为手持设备设计专门的CSS

也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：

也可以阅读专门的手持设备可用性。

19. 3D效果的按钮

以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：

a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

至于效果，还可以自己调整了。

20. 在不同页面上使用同样的导航代码

许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。

首先，在导航代码中使用CSS类：

Home

About us

Contact us

然后分别为每一页的Body指定一个id，和上面类同名。如。

然后设计CSS如下：

#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}

这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

本文作者是：Trenton Moss。

Web设计中的拉洋片效果【多图】

a@b.com (admin) — Tue, 10 Mar 2009 15:25:40 +0800

　　幻灯效果是 Web 设计中的新风潮，新的白宫网站也未能免俗，幻灯效果（拉洋片）特别适合在站点的首要位置展示一些核心的，展示性的内容。最早的幻灯效果多基于 Flash，随着 JavaScript 在 Web 设计师与开发者眼中地位的提升，基于 JavaScript 的幻灯效果开始取代 Flash。本文介绍了一些非常出色的 Web 幻灯设计实例。
Micro

一个非常干净简单的幻灯片效果。

Paramore
漂亮的轮播效果，边界处理也很出色。

Obox Design
简单干净的图片幻灯效果。

SpaceCollective
使用了一些很好的手工操作的图片幻灯。

Josh Smith
非常简单的图片混等，少即是美。

Benjamin David
很好的幻灯图片库，使用了垂直平滑转换效果。

Design By Humans
这个站点使用大型幻灯图片展示自己的产品，背景幕也随着图片而改变，非常漂亮。

Lucas Hirata
这个富有创意的作品展示站点使用幻灯效果展示大量作品。

Designsensory
一个标准的图片幻灯，可以通过数字控制当前显示的图片，也有对应的文字显示。

Banjax
很棒的幻灯布局，可以通过漂亮的缩略图控制显示。

Qlear
手动操控式幻灯片，用来展示作品项目。

Dean Oakley
另一个功能简单的幻灯效果，带当前页码显示。

Rob Young
这是一个富有创意的，独特的作品展示站点，点击具体项目，还会以 Lightbox 的形式显示该项目的更详细信息。

HelloThemes
这个站点使用一个简单的手动幻灯展示信息，按钮很大，水平变换很平滑。

MacAllan
这个幻灯中每个图片都会显示一定的时间，图片变换前，还会在边角显示一个示意图。

Global Oneness Project
使用了简单明了的幻灯片效果展示推荐的视频。

Behance
使用了方便的按钮和渐入渐出效果。

Ricoverdo
拥有漂亮风格的水平幻灯。

Scrap Blog
包含多种功能和 Cooliris 图片效果。

Deluge Studios
使用了做旧背景加炫目的色彩。

Daniel Stenberg
这是一个出色的作品展示幻灯效果，使用水平转换。

Piotr Kulczycji
这个幻灯效果出众，非常值得一看。

World Concern
这个基于 Flash 的幻灯效果包含一些很酷的页码控制按钮。

delicious
这个我们熟悉的 Delicious 首页幻灯非常简单。

Household
这个设计精良的幻灯使用非常平滑的转换效果和干净的布局。

Volkswagen UK
英国大众公司的网站的可用性很强，幻灯既支持按钮控制，又可以使用鼠标的滚动论控制。

Cream Scoop
另一个干净简单的图片幻灯。

Cade Martin
一个很简单的图片幻灯，使用干净的字体和基本效果。

Barack Obama
最新的白宫网站，基于 Java 的幻灯效果。

Thomas Prior
这个作品展示幻灯使用按钮和指示标志告诉用户现在处于什么位置。

Viktor Jarnheimer
这个幻灯使用 iMac 电脑屏幕作为图片框架，布局很干净。

MVB Web Design
一个简单网站上的简单幻灯。

James Lai Creative
位于做旧背景上的幻灯，拥有微妙的导航按钮。

Trevor Saint
该幻灯使用了非常漂亮的垂直转换效果。

Creative State
这个幻灯视觉效果出众，导航按钮在鼠标盘旋的时候显示缩略图。

K4 Laboratory
这个巨大的幻灯使用很出色的布局展示项目。

Threadless Kids
将鼠标放到导航按钮上，显示对应的幻灯图片。

Phunk’n Creative
暗背景上的漂亮展示效果。

网站成功的26条定律

a@b.com (admin) — Wed, 25 Feb 2009 10:05:40 +0800

1.250定律
拉德认为：每一位顾客身后，大体有250名亲朋好友。如果您赢得了一位顾客的好感，就意味着赢得了250个人的好感；反之，如果你得罪了一名顾客，也就意味着得罪了250 名顾客。在你的网站访客中，一个访客可能可以带来一群访客，任何网站都有起步和发展的过程，这个过程中此定律尤其重要。

2.达维多定律
达维多认为，一个企业要想在市场上总是占据主导地位，那么就要做到第一个开发出新产品，又第一个淘汰自己的老产品。国内网站跟风太严重，比如前段时间的格子网，乞讨网，博客网，一个成功了，大家一拥而上。但实际效果是，第一个出名的往往最成功，所以在网站的定位上，要动自己的脑筋，不是去捡人家剩下的客户。同理，买人家出售的数据来建站效果是很糟糕的。

3.木桶定律
水桶定律是指，一只水桶能装多少水，完全取决于它最短的那块木板。这就是说任何一个组织都可能面临的一个共同问题，即构成组织的各个部分往往决定了整个组织的水平。注意审视自己的网站，是速度最糟糕？美工最糟糕？宣传最糟糕？你首先要做的，不是改进你最强的，而应该是你最薄弱的。

4.马太效应
《新约》中有这样一个故事，一个国王远行前，交给三个仆人每人一锭银子，吩咐他们：“你们去做生意，等我回来时，再来见我。”国王回来时，第一个仆人说： “主人，你交给我们的一锭银子，我已赚了10锭。”于是国王奖励他10座城邑。第二个仆人报告说：“主人，你给我的一锭银子，我已赚了5锭。” 于是国王例奖励了他5座城邑。第三个仆人报告说：“主人，你给我的一锭银子，我一直包在手巾里存着，我怕丢失，一直没有拿出来。”于是国王命令将第三个仆人的一锭银子也赏给第一个仆人，并且说：“凡是少的，就连他所有的也要夺过来。凡是多的，还要给他，叫他多多益善。”这就是马太效应。在同类网站中，马太效应是很明显的。一个出名的社区，比一个新建的社区，更容易吸引到新客户。启示是，如果你无法把网站做大，那么你要做专。作专之后再做大就更容易。

5.手表定理
手表定理是指一个人有一只表时，可以知道现在是几点钟，而当他同时拥有两只表时却无法确定。
一个网站，你只需要关注你特定的用户群需求。不要在意不相干人的看法。

6.不值得定律
不值得定律：不值得做的事情，就不值得做好不要过度seo，如果你不是想只做垃圾站。不要把时间浪费在美化再美化页面，优化再优化程序，在你网站能盈利后，这些事情可以交给技术人员完成。

7.彼得原理
劳伦斯.彼得认为：在各种组织中，由于习惯于对在某个等级上称职的人员进行晋升提拔，因而雇员总是趋向于晋升到其不称职的地位。
不要轻易改变自己网站的定位。如博客网想变门户，盛大想做娱乐，大家拭目以待吧。

8.零和游戏原理
当你看到两位对弈者时，你就可以说他们正在玩“零和游戏”。因为在大多数情况下，总会有一个赢，一个输，如果我们把获胜计算为得1分，而输棋为-1分，那么，这两人得分之和就是：1+（-1）=0 不要把目光一直盯在你的竞争网站上，不要花太多时间抢它的访客。我们把这些时间用来寻找互补的合作网站，挖掘新访客。

9.华盛顿合作规律
华盛顿合作规律说的是：一个人敷衍了事，两个人互相推诿，三个人则永无成事之日。如果你看准一个方向，你自己干，缺人手就招。不要轻易找同伴一起搞网站，否则你会发现，日子似乎越过越快了，事情越做越慢了。

10.邦尼人力定律
一个人一分钟可以挖一个洞，六十个人一秒种却挖不了一个洞。合作是一个问题，如何合作也是一个问题。
你需要有计划。

11.牛蛙效应
把一只牛蛙放在开水锅里，牛蛙会很快跳出来；但当你把它放在冷水里，它不会跳出来，然后慢慢加热，起初牛蛙出于懒惰，不会有什么动作，当水温高到它无法忍受的时候，想出来，但已经没有了力气。如果你是soho，注意关注你的财务。不要等到没钱了再想怎么挣，你会发现那时候挣钱更难。

12.蘑菇管理
蘑菇管理是许多组织对待初出茅庐者的一种管理方法，初学者被置于阴暗的角落（不受重视的部门，或打杂跑腿的工作），浇上一头大粪（无端的批评、指责、代人受过），任其自生自灭（得不到必要的指导和提携）。
做网站毕竟要遭遇这样的阶段，搜索引擎不理你，友情链接找不到，访客不上门。这是磨练。

13.奥卡姆剃刀定律
如无必要，勿增实体。
把网站做得简单，再简单，简单到非常实用，而不是花俏。google的首页为什么比雅虎好？

14.巴莱多定律(Paredo 也叫二八定律)
你所完成的工作里80%的成果，来自于你20%的付出；而80%的付出，只换来20%的成果。
随时衡量你所做的工作，哪些是最有效果的。

15.马蝇效应
林肯少年时和他的兄弟在肯塔基老家的一个农场里犁玉米地，林肯吆马，他兄弟扶犁，而那匹马很懒，慢慢腾腾，走走停停。可是有一段时间马走得飞快。林肯感到奇怪，到了地头，他发现有一只很大的马蝇叮在马身上，他就把马蝇打落了。看到马蝇被打落了，他兄弟就抱怨说："哎呀，你为什么要打掉它，正是那家伙使马跑起来的嘛！" 在你心满意足的时候，去寻找你的马蝇。没有firefox，不会有ie7，firefox就是微软的马蝇之一。马蝇不可怕，怕的是会一口吃掉你的东西，像 ie当初对网景干的那样。

16.最高气温效应
　　每天最热总是下午2 时左右，我们总认为这个时候太阳最厉害，其实这时的太阳早已偏西，不再是供给最大热量的时候了。此时气温之所以最高，不过是源于此前的热量积累。
你今天的网站流量，是你一个星期或更长时间前所做的事带来的。

17.超限效应(溢出效应)　　
刺激过多、过强和作用时间过久而引起心理极不耐烦或反抗的心理现象，称之为“超限效应”。别到别人论坛里发太多广告。别在自己网站上放太多广告。别在自己的论坛里太多地太明显地诱导话题。

18.懒蚂蚁效应
生物学家研究发现，成群的蚂蚁中，大部分蚂蚁很勤劳，寻找、搬运食物争先恐后，少数蚂蚁却东张西望不干活。当食物来源断绝或蚁窝被破坏时，那些勤快的蚂蚁一筹莫展。“懒蚂蚁”则“挺身而出”，带领众伙伴向它早已侦察到的新的食物源转移。不要把注意力仅仅放在一个网站上，即使这个网站现在为你带来一切。你要给自己一些时间寻找新的可行的方向，以备万一。

19.长尾理论
ChrisAnderson 认为，只要存储和流通的渠道足够大，需求不旺或销量不佳的产品共同占据的市场份额就可以和那些数量不多的热卖品所占据的市场份额相匹敌甚至更大。对于搜索引擎，未必你需要一个热门词排在第一位，如果有一千个冷门词排在第一位，效果不但一样，还会更稳定更长远。

20.破窗理论
栋建筑上的一块玻璃，又没有及时修好，别人就可能受到某些暗示性的纵容，去打碎更多的玻璃。管理论坛时，如果你发现第一个垃圾贴，赶紧删掉他吧。想想：落伍现在为什么那么多××贴？现在控制比最初控制难多了。

21.“羊群效应”，又称复制原则(Copy Strategy)
一个羊群(集体)是一个很散乱的组织，平时大家在一起盲目地左冲右撞。如果一头羊发现了一片肥沃的绿草地，并在那里吃到了新鲜的青草，后来的羊群就会一哄而上，争抢那里的青草，全然不顾旁边虎视眈眈的狼，或者看不到其它地方还有更好的青草。
不要轻易跟风，保持自己思考的能力。

22.墨菲定律
如果坏事情有可能发生，不管这种可能性多么小，它总会发生，并引起最大可能的损失。
除非垃圾站，否则不要作弊，对搜索引擎不要，对广告也不要。

23.光环效应
人们对人的某种品质或特点有清晰的知觉，印象比较深刻、突出，这种强烈的知觉，就像月晕形式的光环一样，向周围弥漫、扩散，掩盖了对这个人的其他品质或特点的认识。
不要轻易崇拜一个人或者公司、一个概念、一种做法。

24.蝴蝶效应
一只亚马逊河流域热带雨林中的蝴蝶，偶尔扇动几下翅膀，两周后，可能在美国德克萨斯州引起一场龙卷风。
不管你做什么，网站或者其他，你都应该关注新闻。机遇或者灾难可能就在那。

25.阿尔巴德定理
一个企业经营成功与否，全靠对顾客的要求了解到什么程度。我赞同别人的点评：看到了别人的需要，你就成功了一半；满足了别人的需求，你就成功了全部。尤其是做网站。

26.史密斯原则
如果你不能战胜他们，你就加入到他们之中去。
不要试图做孤胆英雄。如果潮流挡不住，至少，你要去思考为什么。

CSS属性全解析

a@b.com (admin) — Sun, 22 Feb 2009 11:07:55 +0800

　　一、类型属性
“类型”属性共有九项：
“字体”(font-family)，设定时，需考虑浏览器中有无该字体。
“大小”(font-size)，注意度量单位。
“粗细”(font-weight)，除了normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)外，还有9种以像素为度量为单位的设置方式。
“样式”(font-style)，也就是字型。
“行高”(line-height)，就是行距。
“变形”(font-variant)，可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。
“大小写”(text-transform)，这项属性能轻而易举地控制字母大小写，有首字大写(capitalize)、大写(uppercase)、小写(lowercase)和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种。
“修饰”(text-decoration)，用于控制链接文本的显示形态，有下划线(underline)、无下划线(overline)、删除线(line-through)、闪烁(blink)和无（none，使上述效果均不会发生）等5种修饰方式。但IE4不支持文字闪烁。

二、背景
“背景”属性共有六项：
“背景颜色”(background-color)，设置背景颜色。
“背景图像”(background-image)，设置网页背景图像。
“重复”(background-repeat)，控制背景图像的平鋪方式，有不重复(no-repeat)、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等4种选择。
“附加”(background-attachment)，用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。
“水平位置”/“垂直位置”(background-position)，确定背景图像的水平、垂直位置。共有左对齐(left)、右对齐(right)、顶部(top)、底部(bottom)、居中(center)和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等6种选择。

三、区块
“区块”属性共有六项：
“单词间距”(word-spacing)，主要用于控制文字间相隔的距离。有正常(normal)和值（自定义间隔值）两种选择方式。当选择值时，可用的单位有英寸(in)、厘米(cm)、毫米(mm)、点数(pt)、12pt字(pc)、字体高(em)、字体x有高(ex)像素(px)。
“字母间距”(letter-spacing)，其作用与字符间距类似，也有正常(normal)和值（自定义间隔值）两种选择方式。
“垂直对齐”(vertical-align)，控制文字或图像相对于其母体元素的垂直位置。如将一个2×3像素的GIF图像同其母体元素文字的顶部垂直对齐，则该GIF图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显示），上标（super，将元素以上标的形式显示）、顶部（top，将元素顶部同最高的母体元素对齐）、文本顶对齐（text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（自定义）等9种选择。
“文本对齐”(text-align)，设置块的水平对齐方式。共有左对齐(left)、右对齐(right)、居中(center)和均分(justify）等4种选择。
“文字缩进”(text-indent)，控制块的缩进程度。
“空白间距”(white-space)，在HTML中，空格是被省略的；在CSS中则使用属性(white-space)控制空格的输入。共有正常(normal)、保留(pre)和不换行(nowrap)等3种选择。

四、盒子
“盒子”属性共有6项：
“宽”(width)，确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。
“高”(height)，确定盒子本身的高度。
“浮动”(float)，设置块元素的浮动效果。
“清除”(clear)，用于清除设置的浮动效果。
“边距”(margin)，控制围绕边框　的边距大小。其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。
“边界”(padding)，确定围绕块元素的空格填充数量，其中包含4个属性“padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。

五、边框
“边框”的属性有3项：
“宽”(border-width)，控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。
“颜色”(border-color)，设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如，
p{: #ff0000 #009900 #0000ff #55cc00}
浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。
“样式”(border-style)，设定边框的样式，共有无(none)、虚线(dotted)、点划线线(dotted)、点划线(dashed)、实线(solid)、双线(double)、槽状(grove)、脊状(ridge)、凹陷(inset)和凸起(outset)等9种。

六、列表
“列表”属性共有3项：
“类型”(list-style-type)，确定列表每一项前使用的符号，共有圆点(disc)、圆圈(circle)、方形(square)、数字(decimal)、小写罗马数字(lower-roman)、大写罗马数字(upper-roman)、小写字母(lower-alpha）和大写字母(upper－alpha)等8种。
“项目图像”(list-style-image)，其作用是将列表前面的符号换为图形。
“位置”(list-style-position)，用于描述列表位置，有内(outside)和外(inside)两种选择。

七、定位
“定位”属性共有6项：
“类型”(position)，用于确定定位的类型，共有绝对(absolute)、相对(relative)和静态(static)等3种选择。
“Z轴”(z-index)，用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0时，元素在最下层，适用于绝对定位或相对定位的元素。
“显示”(visibility)使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见(visible)和隐藏(hidden)等3种选择。
“溢出”(overflow)，在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（visible，扩大面积以显示所有内容）、隐藏（hidden，隐藏超出范围的内容）、滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素面积时，显示滚动条）等4种选择。
“定位”，当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4个子属性，分别是“左”（属性名为“left”，控制元素左边的起始位置）、“上”（属性名为“top”，控制元素上面的起始位置）、“宽”或“高”（与“盒子”类属性面板中“宽”或“高”的属性作用相同）。
“剪辑”(clip)，当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为rect(top right bottom left)，即：
rect(top right bottom left)，属性值的单位为任何一种长度单位。

八、扩展
“扩展”属性共有两部分：
“分页”，其中两个属性的作用是为打印的页面设置分页符。“之前”(page-break-before)；“之后”(page-break-after)。
“视觉效果”，其中两个属性的作用是为网页中的元素施加特殊效果。“光标”(cusor)，可以指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标在Windows操作系统中的各种形状。另外它还可以指定指针图标的URL地址；“滤镜”(fiter)，可以为网页中元素施加各种奇妙的滤镜效果，共包含有16种滤镜。

Web设计-实现干净代码的12条定律

a@b.com (admin) — Mon, 17 Nov 2008 17:07:14 +0800

　　漂亮的代码是漂亮网站的基础，优秀的 CSS 只存在与同样优秀的 HTML 之上，干净的，语义的 HTML 代码让一个网站更健壮。本文讲述了12个实现干净 Web 设计代码的定律，适合于任何从事 Web 设计的人。
1. Strict DOCTYPE
要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0，它们都提供 Strict 模式，使用 Strict 模式可以保证我们的代码不隐藏任何错误。

参考资料:

W3C: Recommended DTDs to use in your Web document

Fix Your Site With the Right DOCTYPE!

No more Transitional DOCTYPEs, please
2. 字符集声明，特殊字符进行编码处理
字符集声明应当放在部分的最前面，以便让浏览器知道如何显示网页中的所有内容，包括标题。另外，一些特殊字符，如 & 最好用 & 代替，这是一种最安全的方法。

参考资料:

Wikipedia: UTF-8

A tutorial on character code issues

The Extended ASCII table
3. 恰当的锁进
缩进不会影响网页的渲染，但会明显改善阅读源代码时的体验。缩进没有特定的规则，但始终保持一致是个好习惯。

参考资料:

Clean up your Web pages with HTML TIDY
4. 将 CSS 和 JavaScript 放在外部文件中
将 CSS 和 JavaScript 放在外部文件中引用，不仅减低单个网页的尺寸，而且意味着其它网页也可以共用这些代码，另外，浏览器的缓存机制可以很好地降低对相同代码的重复下载。

5. 正确地嵌套 Tag 标签
如下图，第一行代码中，
标签嵌套在标签中，尽管多数浏览器会正确渲染，但这不是好的习惯，标签是 block 对象，而是 inline 对象，inline 对象不应该容纳 block 对象。

6. 消除不必要的

常被滥用（尤其在我们现在所处的 DIV+CSS 神话中 - 译者），人们希望把任何东西都放在
中以便为它们分配 CSS 式样，这种滥用会导致的臃肿。

参考资料:

Divitis: what it is, and how to cure it.
7. 使用更好的命名规则
如下图，Cat 的 CSS 类被命名为 red italic，暗示着 Cat 使用红色斜体，如果你想将 Cat 改成兰色的粗体呢？

8. 尽量使用 CSS 控制文字的排版
如下图所示，不要直接使用大写，用 CSS 对这些文字排版方面的格式进行控制，这样会更灵活。

9. 为分配独立的 class/id
为 body Tag 分配一个独立的 class/id，可以很好地定位页面中任何对象，因为页面中所有对象都位于 body 中。

参考资料:

ID Your Body For Greater CSS Control and Specificity

Case study: Re-using styles with a body class
10. 验证
无需多言，你应当尽可能对网页的代码进行验证，尽管有些代码错误浏览器能自动更正，但有些错误是会带来不好的后果的，尤其当你位于 Strict 模式下。即使什么都不为，看到那个绿色的 W3C 验证标志至少可以让自己舒服一些。

W3C 验证是否通过并不一定要什么拘泥，Web 设计中存在更多的考量，只拘泥 W3C 验证结果，可能影响一些更重要的因素，比如，IE6 在 W3C 标准方面存在不少 BUG，如果你为了100%通过 W3C 验证而宣布自己的网站不支持 IE6，至少在国内会得不偿失的 - 译者

参考资料:

The W3C Markup Validation Service

XHTML-CSS Validator

Free Site Validator (checks entire site, not just one page)
11. 合理的结构次序
将网页结构保持一个合乎逻辑的次序。

12. 尽你所能
如果你从零开始写，保持以上的原则当然要容易的多，如果要修改旧的代码，将会很痛苦，一些 CMS 系统拙劣的编码会让你陷入泥沼，或者你的网站规模宏大要改动的东西太多，不管怎样，始终保持良好的习惯非常重要。

Css样式的继承问题

a@b.com (admin) — Thu, 13 Nov 2008 20:39:08 +0800

例如一个外联样式文件:style.css
td{     //定义表格12px 蓝色
color:#009999;
font-size:12px;
}
建立一个简单页面01.htm

样式继承问题







字体是12px

从这里看出table里面的样式没影响到td里面的样式这是因为样式的就今原则，外联的样式给所有td加了个样式，所以table影响不了td里面的样式，因为td有离他跟近的样式。
在看下面02.htm页

样式继承问题



     字体是12px




这里可以看出同一层面，内联的样式覆盖外面的td样式 ..
所以继承原则是:
不同层面:影响样式的是最小层面的样式
同一层面的:内联样式大与外接样式。

DW十三例基本技巧

a@b.com (admin) — Wed, 12 Nov 2008 19:16:58 +0800

　　熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。

　　1、灵活运用样式

　　熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。

　　2、活用Format Table命令

　　在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Table”（格式化表格）命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令，在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。

　　3、同时链接到两个网页

　　我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。

　　4、不给文件起中文名称

　　大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。

　　5、巧妙设置字体分辨率

　　我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢？原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。

　　6、巧妙隐藏标签

　　如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比如我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影响效果，但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时，就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板，在Category中选中Invisibel Elements，在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉，以后它就保证不会再出现了。

       7、善用拖放技巧

　　我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示Explorer窗口，找到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样，直接拖过来就可以了。但如果被拖动的图象上有超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链接地址。

　　8、自动设置更新时间

　　我们知道一个网页要想获得更多的回头率，一个很重要的一条就是要不断更新。但对于我们这些个人网页来说，要天天及时更新恐怕不是很容易的事情。因此，我们希望网页能自动更新，用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag，并从中选择a，然后在decoration中选中none，最后单击确定就成功了。

　　9、巧妙复制文字

　　在几个不同的应用程序中间相互复制文字，是我们在实际工作中可能要常做的事情。但是，如果我们从Dreamweaver中复制编辑区中的文字到另外一个应用程序的时候，HTML代码和文字将一起被复制过去了，那么我们该如何才能只把编辑区中的文字复制下来呢？我们知道，通常复制时都用快捷键 Ctrl - C 来操作，如果我们在复制的时候多按一个C键，那么Dreamweaver将只会复制选中的文字了。

　　10、善用快捷键

　　为了提高操作的效率，我们可以在Dreamweaver中使用快捷键，例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式，也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式：Ctrl-0: 无格式　　Ctrl-T: 段落　　Ctrl-1: 标题 1 　Ctrl-2: 标题 2 Ctrl-3: 标题 3 　　Ctrl-4: 标题 4 　　Ctrl-5: 标题 5 　　Ctrl-6: 标题 6

　　11、自动关闭网页

　　如果我们希望自己的网页在指定的时间内能自动关闭，不妨在网页源代码中的标签后面加入如下代码：

　　其中代码中的3000表示3秒钟，它是以毫秒为单位的。

　　12、巧妙设置对象名称

　　我们在用Dreamweaver来制作非常复杂的效果时，有可能需要经常重复地使用某一个或者多个对象，例如我们经常需要定位某个特定的表格、图象等，如果我们没有给某一个网页中的多个对象取名的话，那么在重复应用这些对象的时候，可能很麻烦或者容易出错。为了能够方便调用这些对象，我们应该在每创建一个新的对象时，都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时，我们可以通过对象的“属性”面板来操作就行了。

　　13、为图象链接增加动态效果

　　有时我们为了要达到一种逼真的效果，希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时，我们首先需要准备两幅图象，第一幅是原始图象，第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图，在属性面板中的链接栏中填上要链接的文件，然后单击键盘上的F8键，在弹出的Behaviors窗口中单击“+”号，随后选择“swap image”，在接着出现的窗口中选择第二幅图象，最后单击确定就可以了。

为什么使用Div+CSS网页布局？

a@b.com (admin) — Wed, 12 Nov 2008 18:35:25 +0800

　　为什么使用Div+CSS网页布局?这个是比较老的话题了，不过还是有很多人要问，除了很多特殊效果需要用到DIV，有些时候排版要比表格排版麻烦多了，为什么还是有那么多人非要用DIV+CSS的排版效果呢？下面来说说DIV+CSS网页布局对SEO的影响吧，在SEO中用DIV+CSS的4个优点：
一、代码精简
使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高蜘蛛爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛喜欢，这样对收录数量有一定好处。
二、表格的嵌套问题
很多网站如何推广的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，蜘蛛爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。从而减小了搜索效率。
使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，蜘蛛爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。
这虽然没有得到确认，但还是建议使用Table布局的朋友们，在设计时尽可能的不要使用多层表格嵌套，SEOer们在文章中说明了这一点，相信他们也不是没有依据的。
三、速度问题
DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在蜘蛛爬行时是非常有利的。过多的页面代码可能造成爬行超时，蜘蛛就会认为这个页面无法访问，影响收录及权重。
另一方面，真正的SEOer不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。
四、对排名的影响
基于XTHML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但樂思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。
我想，这样的情况可能不是排名规则，最大的可能还是蜘蛛爬行网站时，出现以上差异导致收录质量的不同。
只要把网页做好了，相信蜘蛛能更快速，简洁的扫描我们的页面，收录更多的内容。

Lee's Blog - 技术文章

Google font api web font与中文

中文网络字体

希望

2010年最新的100个免费HTML模板

1. Aquatic

2. HTML5

3. BizGroup

4. IT Website

5. Solitude

6. Inter Craft

7. Catch Info

8. Metamorph Nightsky

9. Metamorph Outerspace

10. Free xHTML & CSS3 One-Page Template

11. Liqidity Graph

12. 2 Breed

13. Green Web

14. Shape

15. Projection

16. New Rise

17. Resume

18. Studio 980

19. Classic Luxury

20. Flash Web

21. School

22. Rainbow Consultant

23. WaterColored Portfolio

24. Ntech Blog

25. Happy Print Shop

26. Intech Growth

27. Green Solutions

28. Metamorph Imaginary

29. Simple

30. Mac Style

31. Jet 30

32. Business Template

33. MyBusiness

34. Metamorph Black On Red xHTML And CSS Template

35. E16 Fashion Club

36. iPhone App

37. Metamorph Alien Sun

38. Online Education

39. Consultant

40. Book Store

41. Speaker Blog

42. Coporate Profiles

43. Ubly

44. Alexx C.

45. Turrion development

46. H Free Software

47. Pink Shop Template

48. Black Beat

49. Photo Portfolio

50. Shoe Store

51. Metal Full

52. Education

53. Black Wave

54. Grid System

55. Simple Blue

56. Our Work

57. Global Business

58. Light Gray

59. Fruit Site

60. Web Tech

61. Particle

62. Corporate

63. Xtreme

64. StudioClick

65. Magazine

66. Jeans

67. Fruit Art

68. Photographer

69. Cloudy

70. Real Estate

71. Scene

72. Fashion Blog

73. MCUBE Solutions

74. Gadget

75. Metamorph Lilium xHTML And CSS Template