6. 模式窗口（LightBox技术）

模式窗口技术，作为第二代弹出内容技术。模式窗口（LightBox技术介绍）能够很好的代替原来的Javascript弹出窗口，提供更加友好的用户体验，并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发，类似于传统的桌面应用。多数情况下，这些弹出窗口都带有深色半透明的背景和一个关闭按钮。

7. 多媒体模块

随着宽带的普及，现在的用户已经能够接受更多的内容，所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容（比如视频和屏幕录像）。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤，不再需要多次点击，搜索，或者学习如何导航。通常这些视频长度都不会太长，但是内容要保持完整。

注意，绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分，毕竟不是所有的用户拥有良好的网络条件，抑或是有些用户并不希望这种形式，有可能他正在机器上收听音乐或其他视频。

8. 杂志风格样式

在博客类网站设计中，我们发现一个有趣的现象是很多技巧都是取自于传统（印刷）媒体设计。包括文章的组织，页面的排版，插图甚至于文字的对齐方式都和传统印刷媒体越来越接近。Grid-Based（网格化）设计方式在产品网站，博客以及个人工作室网站得到了广泛的应用，但是在企业站点或者在线商店中还未有出现。

9. 幻灯片形式

Carousel，也就是幻灯片导航形式，内容水平或者垂直滚动。通常有两个导航元素来控制滚动方向，以及滚动内容。

这种形式的好处是，用户可以不用多次点击来搜寻他们感兴趣的内容，可以快速的通过滚动幻灯片来浏览希望他们注意的内容。这种形式多用于娱乐站点，或者是一些大型博客。是一种非常吸引眼球的展示方式。

10. 内容介绍模块

页面的左上角是网页上最重要的一块地方，因为最吸引用户的眼球。所以我们可以将最重要的信息放在那里展示，用户也能在第一时间获取这些信息。

对于很多个人工作室网站，或者是产品类的网站，都很好的使用了这个区域来展示内容介绍，相反在博客或者是在线商店类网站上几乎看不到这种方式。

您可能也喜欢：
2009年网页设计趋势前瞻 (上)	高效率网页设计的十大军规	导航菜单设计趋势与实例 (Navigation Menus)	设计十八般兵器之 “经典字体”速查
无觅

网页设计师是一群非常善变最新的人，总是希望尝试更新的设计理念。让我们来预测一下2009年的网页设计趋势。

1. Letterpress 凸版效果

在我们的观察中，一个意料之外的趋势是，凸版效果(Letterpress，也就是我们的篆刻中的阴文效果)。这样的趋势，可能是因为一个简单的原因，因为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上，多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜，现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中，这些基于网页的应用有了惊人的进步，这些交互式用户界面越来越像传统的桌面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目，强大的网页应用。

更看到一些特别之处，这些年我们发现网页上有了更多的空白空间，页面元素间的间距也变得越来越大。我们也观察到，越来越多的站点开始在页面上提供直观的用户动作响应。比如，页面上的按钮会根据用户的动作，比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。所以我们断言，自适应用户界面将会在2009年流行起来。

3. PNG透明图片

PNG透明图片效果，尽管不被古老的IE6支持，但似乎在去年变得流行起来。但是这种半透明的背景效果却是设计师们一直希望拥有的特性。

这种背景通常被用在头部和页脚处，但是有一些设计却跳出了这种窠臼。

4. 大尺寸的文字排版

在过去的文章中我们介绍过很多出色的大尺寸文字排版例子。在2009年，这样的潮流将继续流行下去，尤其是设计师网站，个人Portfolio网站以及在线服务类网站，将会采用这样的方式传递给用户最重要的信息。

这样的效果一般会将字号控制在36px以下，设计师们投入了更多的精力在文字排版的细节上，由此可见，网页将会变得更加漂亮，更加一致以及看上去更加让人可信。

5. 字体替换技术

设计师花了非常多的精力在页面排版上，同样的也花了很多精力在字体选择上，除了传统的那些经典字体，（译注：也是我们仅有的安全选择）很多设计师开始采用字体替换技术，也就是我们之前有提到的（sIFR）。

这些字体能大大提供网页的视觉效果，但是在中文世界中，这项技术遇到了前所未有的难题，汉字不是拼音文字，一个字体就可能有几兆，根本无法简单的使用这些技术来替换，也许文字图片替换法是目前中文的唯一选择。

您可能也喜欢：
2009年网页设计趋势前瞻 (下)	高效率网页设计的十大军规	导航菜单设计趋势与实例 (Navigation Menus)	测试驱动之于网页设计开发
无觅

1 moneyio

钱包网 网络账本

个人理财系统，当然肯定是不太适合国内用户，推荐几个国内的记账类系统，开心网里就有这个功能。

http://www.qian8ao.com/

账本网 网络账本

http://www.zhangben.com/

2  Clikboard

最快捷的在线公告板

的确非常方便，如果有什么需要展示给朋友们的，不需要复杂的配置，当然也没有强大的功能，一切都是为了快捷。

3 Lighthouse

免费项目管理系统 ticket system

这个要重点推荐一下，像我这样“有经验”的IT民工，用过大多数tracking系统，大牌的JIRA，RationalClear系列，恶心到死的Notes，轻量的Redmine，trac等等，的确是工作项目中不可或缺的一个组成部分。LightHouse是一个风格很清新的管理系统，而且功能也不错。值得试试看。

P.S. 我恨Notes，特别是DB在大洋彼岸的Notes！

4   Senduit

免费文件在线存储分享

一个好用在线上传分享文件的站点，类似的可能很多，Senduit 的最大文件上传可达100MB，无需注册！用户可以自己选择文件的存储期限，从30分钟 到 1周 存储期限可供选择，所以Senduit只适合文件的临时存储，而不宜于永久存放。关键是没有满眼的广告，站长做广告无可厚非，关键是别像mofile那么恶心。

5   Web Valuer

算算你的网站值多少钱

这个很多人都推荐过了，算算你的网站值多少钱，算是个小widget，可以丰富下你的网站。可惜不能兑现。。。

6  Manymoon

任务关系系统

一个Task管理系统，可以和朋友share任务，并且一起合作，这个里面貌似有了Remember Milk，其他很难望其项背，而且本地还有更加强大的Outlook，可以试一下，说不定讨你喜欢。而且最近Gmail也支持Task了。
7  Nicetranslator

免费翻译网站

非常不错的翻译网站，可以同时翻译多国语言。

为了展示下他的实力，该段介绍完全由它自己翻译成中文。

NiceTranslator is a fast, easy to use online translator designed with simplicity and functionality in mind.

Chinese

NiceTranslator是一种快速，易于使用的在线翻译设计简洁，功能一点。

Dutch

NiceTranslator is een snel, eenvoudig te gebruiken online vertaler ontworpen met eenvoud en functionaliteit in het achterhoofd.

（唉，我最近2周都沉浸在无比恶心的程序多语言调试中）

8   Grapevine

在线语音分享

葡萄网，用你的声音去结实更多的朋友，英语好的同学可以去试试看。

9  LucidChart

在线Visio 流程图绘制

虽然国内的Office普及率是100%，但是Visio就不那么普及了，需要的时候可以派上用场，在线免费Visio绘图工具。

10 Panels

一款让你的Blog增色不少的widget，看上去蛮好用的，不知道适不适合国内的网络情况，明天要研究一下。

11 Typealyzer

通过你的Blog文字来判断作者的性格，不过显然中文不在被支持的语言里面。

12  Pixelpipe

分享你的音乐等内容，似乎最近的虾米网更适合我们。

13  Sitonomy

这是个挺有用的东西，能通过URL来分析这个网站的一些有用的信息，比如是采用什么开发语言啊，使用了那些网络服务，比如AdSense啊，使用哪家的网络统计。有点看人家身上装备的感觉。试试看吧。

您可能也喜欢：
20个帮助你更好的掌握CSS的网站	高效率网页设计的十大军规	在线合成马赛克拼图	2009年2月份壁纸推荐
无觅

闲言少叙，让我们开始惊艳之旅，要先说明一下，”Firebug” 和 “WebDeveloper” 两位同学将缺席本次颁奖活动，因为他们实在太出名了。

CSS and Typography

Hyphenator Hyphenator.js解决了西方语言断词的问题，给行尾换行的单词加上了“-”连字符。相信很多程序员都被QA报过这样的defect，新建一条数据，有个column是afsafdsafsadfsafsafafsafasfsa，然后说页面被撑破。总是被我无情的Won’t Fix。实在不行了word-break一把。中文不会遇到这个问题。有兴趣的你去看一下。

CSS Type Set 貌似被墙了，有兴趣的翻出去看看

Typechart 快速浏览，比较各种不同的文字排版样式，（如果可以通过上传css文件来快速预览，倒也是个不错的idea）

CSS-Typoset Matrix and code generator

快速生成最常用的一些Tag的字体大小设定，由Px转换到Em尺寸上，可以比较完美的做到文字缩放。

body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; }
html>body { font-size: 14px; }
p { margin: 1.5em  0; font-size: 1em; line-height: 1.5em; }
h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; }
h2 { margin: 1.1667em 0; font-size: 1.2857em; line-height: 1.1667em; }
h3 { margin: 1.3125em 0; font-size: 1.1429em; line-height: 1.3125em; }
h4 { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h5 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
h6 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
类似这样

Em Calculator 楼上那个的图文加强版

真的是很好很强大，不单是觉得挺有用的，整个App的UI设计也非常让人满意，值得学习。

Facelift Image Replacement (FLIR) 快速创建图片替换的代码，FLIR技术，读作Fleer。

Vertical rhythm calculator 好多计算器，不得不说，欧美的设计师们更加注重这些细节。

typeface.js 总是感叹网页上文字能够使用的字体很有限，羡慕在PS或者Flash中可以随意挑选。typeface.js能帮你实现内嵌字体技术。

看到上面也许你会兴奋，但是对于老外的52个字母来说，这是很梦幻的效果，对于中文来说，没戏了，把几千个汉字打包到js中实在太可怕了，无论是可用性还是性能都不会让人接受。不过适当的将一些常用字做进去，可能会有不错的效果，好像是perl的build脚本，上次打包过一次，败了。

CSS Online Tools

PSD2CSS Online 在线的PSD文件到CSS的服务，没用过，也不想用，都有这个了，民工吃什么。

Conditional-CSS 根据你上传的CSS文件，检查其中一些css hack，用条件注释来保证浏览器兼容性。

说实话这是维护代码的噩梦开端。

MoreCSS CSS的js扩展，利用js来实现很多CSS中没有的特性，类似于那个著名的IE7.js，不过这种工具也算是双刃剑，怎么用看自己了。

px to em  速查表，我看到em都汗了。。

CSS Frame Generator 请看我以前的介绍文章 http://www.1x3x.net/blog/web-design/2008/04/css-frame-generator.html

CSS Redundancy Checker  检查你的CSS文件中那些是冗余的代码

CleverCSS

DSL编码风格的css扩展，又一个类似于MoreCSS的js类库，能让你用非常时髦的DSL风格去编写样式文件，我觉得更酷的是去看看这个js本身。

WordOff 被墙

Postable 帮你快速的escape一下内容

Kotatsu

Table HTML生成器，个人感觉没什么用，而且生成的TAG还是大写的，不喜欢。

htmldevelopertools

这是一个挺有意思的东西，太晚了，没有细看，说明是说可以在线更新CSS文件，但是依赖于IISserver，本身也是用.NET写的，有待进一步更新。

Deploy 这是一个开源的WebApp，能够一键帮你生成包含项目名称，DocType，各种JS类库的热部署方案。真的很是诱人的一个服务。不过好像也被墙了，不过大家不用担心，元旦前，我来提供一个墙内开花版。

CSS Evolve  通过对一个网站的各种属性重新设置，来看看各种不同的效果。不支持中文，效果没有说的那么大。不过这种测试方式可以借鉴。

Lorem 2

Lorem可能只有专业的设计师才会接触到的名词，看一下wiki上的解释

Lorem ipsum是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。

Lorem ipsum從西元15世紀開始就被廣泛地使用在西方的印刷、設計領域中，在電腦排版盛行之後，這段被傳統印刷產業使用幾百年的無意義文字又再度流行。由於這段文字以「Lorem ipsum」起頭，並且常被用於標題的測試中，所以一般稱為Lorem ipsum，簡稱為Lipsum。

SelectORacle CSS3 selector 英文 西班牙文转换

JS Bin  一个非常酷的在线JS编辑器，能够动态查看结果，调试代码，还能直接分享url供其他人查看。算是比较典型的web2.0 App了。

CSS Text Wrapper  在线小工具，能够创建很漂亮的文字围绕图形。

Writing Tests Against CSS  CSS开发中，自动化Mock测试是件比较困难的事情，作者提供了一个不错的解决方案，是python的测试脚本，有兴趣的同学可以看一下。

CSS Sprite Generator  现代网站开发调优经验中，排在前面的很重要一条就是尽可能的减少页面的Request数量，（唉，我的首页连接数就挺大的，不是最理想，好像负载不大），CSS sprite技术因此变得流行，如果不明白的，看看网易邮箱的登陆页上的图片就知道了。

Sky CSS Tool  在线编写CSS样式，类似于Dreamweaver的可视化操作，不喜欢手写代码的可以试试看。

CSS Tidy Online  非常酷的CSS代码排版压缩工具，我以前也推介过。一定要加到收藏哦。

Web-Based Tools for Optimizing, Formatting and Checking CSS  一堆好用的CSS在线工具，这文章还真是环中环。

Grid Designer 2.4  随着类似于960grid这样的CSS框架的诞生，Grid排版设计愈发成为一种非常流行的设计方式，这个在线工具的创意非常好，如果能够再人性化一点就完美了。

Yahoo’s Secret Text-Sprite Generator  雅虎的神秘API，能够提供Text-Sprite生成，当然仅支持西方字符。可怜的双字节文字啊。

Replace CSS Colors – Editor 替换你的CSS文件中的颜色设置，如果你Vi玩的转一点，估计就不需要了。

The Box Office  很棒的图文围绕效果代码生成，虽然为了实现这个效果，会带来一堆挺丑漏的代码，建议用js修缮一下。

MinifyMe  css js 文件压缩器，不同于之前的在线工具，这是一个flash。

cssdoc  程序员可能更熟悉这个概念， 类似于Javadoc，能够更好的帮助你汇总小结你手上那些可能已经很长的CSS文件。

CSS Menu Generator  帮你生成很多非常漂亮的CSS菜单，效果如下

sheetUp – DOM Stylesheet Library  CSS的JS扩展，和之前介绍的几款各有千秋，值得一看

CSS SuperScrub  帮你做CSS代码的codereview，（偷偷说一句，我的大老板就喜欢走到你后面说，我要codereview，不改当年的码农本色啊）

DrawAble Markup Language  挺酷的在线可视化HTML编辑器，试试看，我倒是对他的制作本身有点兴趣。

Handy Kits For Designing With CSS

Regex Patterns for Single Line CSS

神器Textmate的css格式化bundle，无福使用这等神器。

21 Excellent Dreamweaver Extensions for CSS Productivity and Standards

相信还有很多朋友喜欢使用Dreamweaver的，那这21款Dreamweaver插件你不容错过。

Graph Paper 太棒了，这是真是不亚于米字簿的好东西啊，方格子现代版。

Starter Kit For Developers (PSD)  让你快速开始你的工作，是个不错的东西。

CSSHttpRequest  好吧，奇技淫巧，通过CSS请求来避开同源检测限制，慎用。

// TODO ==== 明日继续更新。

您可能也喜欢：
CSS Float 基本概念汇总	测试驱动之于网页设计开发	Microsoft IE8 CSS3扩展支持	CSS代码优化压缩工具
无觅

非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。

简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些：

源文件:

• blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。
• blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。
• blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。
• blueprint/src/forms.css: 包含了一些表单样式。
• blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。
• blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。

再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子：

<div class="container showgrid">
    <div class="span-24">
        头部页眉
    </div>
    <div class="span-4">
        左边侧栏
    </div>

    <div class="span-16">
        <div class="span-8">
            居中行1-1
        </div>
        <div class="span-4">
            居中行1-2
        </div>
        <div class="span-4 last">
            居中行1-3
        </div>
        <div class="span-16 last">
            正文内容
        </div>
    </div>

    <div class="span-4 last">
        右边侧栏
    </div>
    <div class="span-24">
        页脚
    </div>
</div>

效果图：

通过这些预置的class，能够很快的排版，我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。

如果感兴趣的话，去下载使用吧 http://blueprintcss.org/

您可能也喜欢：
CSS Framework，让你事半功倍	CSS代码生成器(CSS Frame Generator)	CSS代码优化压缩工具	50个超级有用的CSS开发工具
无觅

萬聖夜（Halloween）在每年的10月31日，是西方世界的傳統節日，主要流行於北美、不列顛群島、澳洲和紐西蘭。當晚小孩會穿上化妝服，戴上面具，挨家挨戶收集榶果。華語地區常將萬聖夜誤稱為萬聖節。萬聖夜英文稱之「Halloween」，為「All Hallow Eve」的縮寫，是指萬聖節（All Hallow’s Day）的前夜，類似於聖誕夜被稱為「Christmas Eve」。「Hallow」來源於中古英語halwen，與holy詞源很接近，在蘇格蘭和加拿大的某些區域，萬聖節仍然被稱為「All Hallow Mas」，意思是在紀念所有的聖人（Hallow）那一天，要舉行的彌撒儀式（Mass）。

萬聖夜通常與靈異的事物聯繫起來。歐洲傳統上認為萬聖節是鬼魂世界最接近人間的時間，這傳說與中國的盂蘭節類似。美國明尼蘇達州的阿諾卡（Anoka）號稱是「世界萬聖節之都」，每年都舉行大型的巡遊慶祝。

摘自wiki http://zh.wikipedia.org/wiki/%E8%90%AC%E8%81%96%E5%A4%9C

 //—–

//——-

//—–

//——

想更加原汁原味的领略万圣节的氛围，请移步：

http://www.smashingmagazine.com/2008/10/27/halloween-desktop-wallpapers-and-diy-tutorials/

祝各位小南瓜节日快乐，让我想到了本。

您可能也喜欢：
六月壁纸赏	七月SmashingMagazine壁纸赏	雨神眷顾的早春三月 – 三月壁纸推荐	2009新年第一波，一月壁纸推荐
无觅

问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

还是换个方式解读一下这几个选项吧。

Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。
Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : static;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。

1点需要提及的，z-index，仅仅作用与position为relative absolute的元素上。

Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top ， bottom 属性中的至少一个，而作为参照的顶点是什么呢？默认情况下是HTML元素，也就是页面的左上角，如果该元素具有一个relative的父节点，那顶点则变为该relative父节点。如果合并一下这句比较晦涩的话就是，包含在relative元素里的偏移值由relative元素左上角开始计算，否则都将以页面左上角计算。

关于absolute元素最重要的一点，就是设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。这点和float元素有些类似。

//==============================================

节译自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

有些重新演绎之过，但也是为了能够更加适应中文的表达方式。

您可能也喜欢：
50个超级有用的CSS开发工具	CSS Float 基本概念汇总	测试驱动之于网页设计开发	Microsoft IE8 CSS3扩展支持
无觅

Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。

这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。

那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。

兼容性测试

不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。

function boxmodel(){
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);
  newDiv.style.width = '20px';
  newDiv.style.padding = '10px';
  var divWidth = newDiv.offsetWidth;
  document.body.removeChild(newDiv);
  return divWidth == 40;
}

通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。

有了上面的这个主意，我们能类似的写出如下测试用例：

• float
• clear
• position
• overflow
• line-height

当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。

• document.createElement()
• document.getElementById()
• xmlHttpRequest()
• window.onresize()
• window.print()

通过上述测试，我们可以知道是否可以正确显示客户的应用。

我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。

利用这些测试结果

整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。

为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。

DEMO1

=== CSS增强

当目标设备通过了我们的测试代码，会对页面进行一系列的增强，默认情况下，会进行下列DOM更新：

• 样式Class enhanced 被加到[BODY]元素上。
•  (title="enhanced") 可选的样式表文件被启用。
•  (title="not_enhanced") 与之相反的，所有这些非增强样式表文件被禁用。

这样的变化给你提供好几个契机去做层进式的增强，比如BODY标记上的样式增强。来看下例子：

body div.example { 
   margin: 1em 0;
}

如果用户的浏览器通过了测试，我们可以使用float布局来实现水平排列。

body.enhanced div.example { 
  float: left; 
  width: 30%; 
  margin: 0;
} 

来看一下示意图，

这只是一个很小的变化，当你要做一些比较复杂的增强的时候，使用选择器来实现就显得不怎么合适了，所以这个时候，你应该使用可选的样式表文件来替换原来的效果。

这虽然只是简单的样式表文件替换法，但重要的地方在于我们的增强只在能够正确解释的地方被应用了。让我们再来看一下前面的Demo页面，看看现在的增强后的效果。

Demo 2

尽管我们做的只是很简单的CSS增强，但是测试目标设备是否能够正确支持依然是十分有必要性的。（译注：术抑或是道，以何治天下）

Javascript增强

很多页面增强使用了Javascript。testUserDevice.js 允许你具体指定一些script来做增强。非常简单，你只需要将你的增强方法作为参数传给我们的方法就可以了。

testUserDevice.init( function(){
/* »fancy stuff goes here */
} );

就像你看到的这样，我们将一个匿名方法传给了init方法。如果测试通过，这个方法就会被调用执行。记住一点，这些动作有可能在DOM树构建完毕前触发，所以DOM相关的方法仍然应该放在DOM树构建完毕之后，比如jQuery的ready事件或者是body.onload事件之后。

来看一下我们的最终Demo页面，有了如下增强

Demo 3

一次测试，终身受用

在完成测试之后，testUserDevice.js 会留下一个cookie记录这次的测试结果，这样也能带来性能上的好处。我们通过PHP代码也能非常方便的去处理这些增强动作：

<?php
//check for cookie (enhanced=pass), and set the »
//stylesheet rel depending on its value
$cssRel = ($_COOKIE['enhanced'] == "pass") ? »
"stylesheet" : "alternate stylesheet";

echo '<link rel="' . $cssRel . '" »
type="text/css" href="css/enhanced.css" mce_href="css/enhanced.css" »
title="enhanced" />';
?>

同样的，testUserDevice.js 支持你加入更多的自定义测试。下面就为大家介绍下，如何编写自定义的测试用例，并且加入到testUserDevice.js 中去。
（译注：此处并未全文译出，我想程序员间的交流代码足够了，代码是无国界的，说多了也没什么用处。）
1

testUserDevice.init([ 
       { testName: 'ajaxCapable',
        pass: ['ajax'],
        scripting: function(){ useAjax(); }   

       }
]);

2

testUserDevice.add( 'confirm', function(){ 
   if(window.confirm){return true;} 
   else {return false;}   

});

3

testUserDevice.add( 'confirm', function(){ 
     return (window.confirm) ? true : false;});

原文地址：http://alistapart.com/articles/testdriven
Reprinted with the permission of A List Apart and the author[s]

//====================================================
译者：
这里说的测试驱动，并不是我们平日里程序开发中的测试驱动。当然两者的理念其实某种角度上来说是一样的，只做确信正确的改动。我平日里工作中，说实话没有过这样的思考。如何适应各种不同的目标客户端，我想到的第一个是尽可能的去兼容，但是PE这种理念从另一个角度提出解决方案。给不同的人不同的，但必须是完整且正确的体验。这点值得我们进行更深一步的讨论。

您可能也喜欢：
50个超级有用的CSS开发工具	CSS Float 基本概念汇总	Microsoft IE8 CSS3扩展支持	高效率网页设计的十大军规
无觅

森林中的精灵，你知道会幻化成什么样子，是你心中哪位女神的样子。

 都说在摩天轮上能看到幸福，也许说的是幸福就在那一圈圈的轮回之中吧。

原来奔月的不只有嫦娥，还有徐静蕾

你看到了什么？

最聪明的海中精灵吧。

 想要下载这些漂亮的壁纸：http://www.smashingmagazine.com/2008/09/29/desktop-wallpaper-calendar-october-2008/

您可能也喜欢：
七月SmashingMagazine壁纸赏	万圣节墙纸 – 比较吓人的就不贴了	2009新年第一波，一月壁纸推荐	桂魄初生秋露微，轻罗已薄未更衣 – 11月壁纸赏
无觅

下面介绍一下IE8下的这些额外扩展，当然我们的目的不是把那些IE Only的特性带入下一代的页面中，而是能够在浏览器支持的前提下，运用一些属于CSS3的特性，丰富一下创作思路。

在IE7中，没有使用这样的前缀，所以如果用户在IE8中选择兼容模式的话，这些带有前缀的属性将不被识别。不过在IE8模式中，为了向下兼容，将接受带前缀和不带前缀两种格式。

有一个要注意的地方：

#transparentDiv {
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
       opacity: .5;
}

原来的filter格式在标准中是不合法的，所以为了能够在ie7和ie8中都能达到该效果，请参考上述写法。（向下兼容真是沉重的包袱啊）

原文地址： http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

您可能也喜欢：
IE8 beta2重装上阵 无法忽视的雷蒙德巨头	50个超级有用的CSS开发工具	IE8正式版第一印象	CSS Float 基本概念汇总
无觅

相信不少人，哪怕是职业的网页设计师有的时候也不免会觉得CSS有那么点玄妙，有很多小trick并不是那么容易一下子掌握的。

三人行必有我师焉，那就从一些前辈那里学点东西吧，20个CSS和网页设计相关领域的站点，希望能给大家带来一些帮助。

1. A List Apart CSS Topics

老牌CSS站点，从1999年开始一直致力于整理收集面向标准网页开发的优秀文章。 

2. CSS Help Pile

收集整理了大量的CSS相关资源，而且归档非常清晰，查询非常方便。

3. CSS Basics

通过一系列教程讲述了CSS的基本概念和基本原理。非常不错的一篇入门教程，我当年也获益良多。

4. Holy CSS Zeldman!

CSS相关资源站点，不是《网站重构》的那个Zeldman，不要搞错咯。

5. Eric Meyer: CSS

一位有名的CSS作者的blog，值得一看。

6. 456 Berea Street – CSS category

很流行的CSS站点展示，这类的网站有非常多，多看多收获。激发一下创作灵感。

7. /* Position Is Everything */

网页很多时候困惑和苦恼都来自于Position问题，那让我们专门来看看这类问题吧。

8. HTML Dog CSS Tutorials

是不是想起了上个世界有个老派的html编辑器，这里有着适应不同程度读者的教程。

9. Learn CSS Positioning in Ten Steps

继续深入学习Position，将学习进行到底。

10. Andy Budd CSS/Web Standards Links

Andy大大的网站，如果不知道这位大大，可以看一下《CSS Mastery》这本书，相当不错的一本好书。

11. W3CSchools CSS Tutorial

权威学校来了，科班教育。不过有点乏味，我是不怎么喜欢看。

12. css Zen Garden

我最爱的禅意花园来了，有非常多很梦幻的设计在这里。细细读一下吧，这本书国内去年也出了中文版了。

13. CSS at MaxDesign

14. CSSeasy.com

提倡从经验中学习CSS，用更加现代的方式去学习理解CSS。

15. CSS-Discuss

讨论社区，如果E文不错的话，可以去学习交流一番。

16. Web Design from Scratch: CSS

作者的文章相当优秀，网站本身也做的超级酷。而且还有不少电子书可以下载，不过如果要打印就得付钱了咯。

17.CSS-Tricks

订阅他的邮件吧，每天都有新收获，而且这个网站有很多podcast，如果你有兴趣看的话。

18.CSS on Delicious

这个就不多说了。

19. SitePoint CSS Reference

这个网站的邮件也值得订阅。

20. CSSDog

有很多有用的教程，包括对于颜色的运用等。

您可能也喜欢：
[译]十三个你应该了解的免费Web应用	CSS代码生成器(CSS Frame Generator)	CSS Framework，让你事半功倍	50个超级有用的CSS开发工具
无觅

1. Notepad Chaos

 一款很绚丽的模板，非常适合比较时尚的个人blog使用，或者是给设计师类工作的用户使用，真的是非常好看，抽时间我想将其改成中文版的，让我眼前一亮的作品。

http://www.smashingmagazine.com/2008/08/20/notepad-chaos-a-free-wordpress-theme/

2. Infinity （来自中国的无限遐想） 

http://www.smashingmagazine.com/2008/08/08/infinity-a-free-wordpress-theme/

作者是个中国人，但是作品的视觉张力却有着很强的感觉。

3. Fervens

设计师的一系列作品都让人心动，心动不如马上行动吧。

http://wp-themes.designdisease.com/testrun/

4. Fun Theme

您可能也喜欢：
推荐一款很暖人心的WordPress theme – Page Style	七个让WordPress管理面板焕然一新的插件	Gmail也支持皮肤(Theme)功能了	【转】WordPress 中插入表格的方法
无觅

 预览：

更多精美墙纸：http://www.smashingmagazine.com/2008/06/30/desktop-wallpaper-calendar-july-2008/

您可能也喜欢：
SmashingMagazine 十月壁纸赏	2009新年第一波，一月壁纸推荐	雨神眷顾的早春三月 – 三月壁纸推荐	六月壁纸赏
无觅

最近有个新项目，正好也对过去的一些积累做些重构和升级。代码方面的以后静下心来抽空写一下，这两天正好有个需求，是要对原来的一个分页tag做改造，尤其是样式上的。以前tag中的样式已经非常老旧了。

感觉像上个世纪的产品了，得换个时髦一点的样式。原作者选了两个学习榜样，分别是两位web2.0大牛，Flickr 和 Digg 相信对这两个网站大家都不陌生。

 是不是很Cool，简单看一下代码吧，顺便说一下，原作者的第一个版本在IE下有问题，然后他的朋友修改了一下，我只好在巨人的肩膀上稍微把Flickr风格的hover效果加了一下。

Demo请点击

文件下载请点击 paginationss_m.zip

<ul id="pagination-digg">

<li class="previous-off">?Previous</li>

<li class="active">1</li>

<li><a href="?page=2" mce_href="?page=2">2</a></li>

<li><a href="?page=3" mce_href="?page=3">3</a></li>

<li><a href="?page=4" mce_href="?page=4">4</a></li>

<li><a href="?page=5" mce_href="?page=5">5</a></li>

<li><a href="?page=6" mce_href="?page=6">6</a></li>

<li><a href="?page=7" mce_href="?page=7">7</a></li>

<li class="next"><a href="?page=2" mce_href="?page=2">Next ?</a></li>

</ul>

代码还是很简洁的，不同风格间切换也非常方便，也没什么好多解释了，决定升级到digg风格了。

您可能也喜欢：
推荐一款很暖人心的WordPress theme – Page Style	开发者得真的去用一次自己做的东西	七月SmashingMagazine壁纸赏	Godaddy 年末优惠码再次来袭 5.99美元COM域名
无觅

版权声明：本文版权归原作者所有 译介仅供国内读者参考

ActionScript

• ActionScript Cheat Sheet – 包含AS2.0 – AS3.0的所有内容.

Ajax/JavaScript Frameworks

• Prototype Cheat Sheet – Prototype1.5的方法以及属性汇总 （目前Prototype最新版本为1.6）.
• Scriptaculous Cheat Sheet – 非常个性化的速查笔记，有点大学里看室友笔记的感觉.
• MooTools Cheat Sheet – 可能不是最新的.
• jQuery Cheat Sheet – jQuery Library version 1.2.x.
• YUI Cheat Sheet - 如果希望下载zip包，请点击 here.

ASP

• ASP/VBScript Cheat Sheet – 更全面的信息可以去看Windows自己的script5.6.

CSS

• CSS Cheat Sheet - 包含很多CSS2.1中的新特性，这点上面国内流行的小雨的那个册子没有.
• CSS Property Index - 所有CSS属性索引
• CSS Shorthand Guide – 非常简短的CSS介绍

JavaScript

• JavaScript Cheat Sheet - 真的是一份非常不错的备忘笔记，我打了一张贴在书桌前了，推荐.
• JavaScript Quick Reference – Consists of the JavaScript and Browser Objects Quick Reference.
• Regular Expressions for JavaSript – Excerpts of the VisiBone JavaScript references

更多内容查看原文，补充一条：CSS2.0手册(苏沈小雨版) - 广大国内同学们需要的

您可能也喜欢：
如何编程实现向Visual Studio的Toolbox添加控件(VS 2003, VS 2005, VS 2008)	手把手教你把Vim改装成一个IDE编程环境(图文)	CSS Float 基本概念汇总	七个让WordPress管理面板焕然一新的插件
无觅

版权声明：本文版权归原作者所有 译介仅供国内读者参考

本文概要：最常用的CSS Trick，诸如圆角、首字下沉等等。

 之前有篇译介“8个一句话CSS小诀窍”介绍了8个非常使用的一句话CSS小技巧，这周再给大家带来一篇类似的文章，介绍了一些最常用的CSS Trick，或者叫做CSS小把戏。当然我相信每个设计师都会有一些个人的偏好，我个人对文中的一些小把戏就不太感冒。

1. 不使用图片的圆角效果

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

效果图：

（很多人喜欢运用这样的圆角技巧，但我个人不是很喜欢，虽然不用去做圆角的图片，但是多出的这些tag总觉得很多余）

2. 样式化列表

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

效果图：

这个效果我也是很喜欢的，可以在序号上应用不同的字体。

3.  无表格表单

4.  双引号技巧

5.  渐变字效果

6.  垂直居中

更多内容参见原文

10. 首字下沉

<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

效果图：

您可能也喜欢：
CSS Framework，让你事半功倍	CSS代码生成器(CSS Frame Generator)	CSS代码优化压缩工具	使用CSS滑动门技术编写一个灵活的Tab页
无觅

版权声明：本文版权归原作者所有 译介仅供国内读者参考

如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。

本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c

1. 不要在HTML文件中使用CSS样式定义

相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。

想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。

千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。

注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。

友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。

2. “语义学Semantics”不是猜字谜游戏

我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义：

.l13k { color: #369; }

我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义：

.left-blue { color: #369; }

这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。

这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个：

.product-description { color: #369; }

这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。

3. 善用代码注释

善用代码注释将会给你和你的团队成员带来极大的便利，不仅仅是通常的注解，我们还能非常创造性的去使用注释来帮助我们更好的完成工作。

* 提示和标注

代码注释最基本和最常见的用处就是用来提示和标注代码，告诉别人这是用来干嘛的。

/* Turn off borders for linked images */
img { border: 0; }

* 时间戳和署名

和我们写程序代码一样，是用注释在文件头部留下时间戳，版本号以及编辑者的署名，将更好的帮助我们追踪记录文件的历史记录。

/* Sushimonster  Typography  Styles
     Updated:  Thu 10.18.07 @ 5:15 p.m.
     Author:     Jina Bolton
   —————————————————-*/

* 组织代码

将样式定义按照不同的组别来分组是一个非常好的主意，如果我希望将页首的样式定义放在一起，我会使用这样的注释来帮助我提高代码可读性：

/* HEADER
   —————————————————-*/

* 注释标帜

如果你采用了我上面提及的使用注释来分隔不同分组的样式定义代码的方法的话，那使用注释标帜将是一个非常有用的技巧来帮助你更好的查找代码，迅速准确的定位到你想要的位置。我们可以使用一个特殊的符号（比如 [=]）来作为注释标帜

/* =HEADER
   —————————————————-*/
非常酷的一个小技巧，这样你不用上下拖动，就能迅速通过查找来定位到你想要编辑的位置了，查看更多关于注释标帜。

* 参考索引

虽然不常用，但是也是非常有用的一个注释使用方式就是作为代码的参考索引，比如在文件头部留下使用到的颜色代码：

/* COLORS
   Body Background:        #2F2C22
   Main Text:                     #B3A576
   Links:                              #9C6D25
   Dark Brown Border:     #222019
   Green Headline:            #958944
*/

4. 明确什么时候使用CSS Hack 什么时候使用IE条件注释

有很多关于使用CSS Hack带来的问题，或是使用IE条件注释来解决IE兼容性问题是更佳的方法的文章，以及两者都不支持的文章。以前，我一直认为使用IE条件注释解决这个问题要比CSS Hack来的合适，但是最近通过一些例证，我发现条件注释也不是最合适的解决方案。

原因在于，使用条件注释，必然需要维护同一样式的不同IE版本的副本，这样就带来了工作量的增加，而使用CSS Hack则没有这个问题，因此要具体问题具体分析。

但是不管采用哪种方法，请注意以下两点：

a) 如果使用了条件注释，请在主代码文件中留下注释，提醒自己以及其他设计师，如果修改了此处样式，则需要同时更新其他所有IE版本的样式定义。

b) 如果使用CSS Hack，也请留下注释，标明这里使用哪些Hack，对于什么版本浏览器生效，因为在可以预见的将来，随着浏览器版本的升级，这些Hack很有可能会失效。

5. 组织好你的选择器以及属性声明

切记，切记，请将你的样式表文件组织的结构清晰，我比较倾向于以下的代码组织方式：

• reset styles  重置浏览器默认值
• typography styles  文字，版式定义
• layout styles (header, content, footer, etc.)  布局定义
• module or widget styles  模块定义
• etc.

对于上面的分组之下，我根据元素DOM位置来分组：

• any parent styles (containing elements, working outside-in)  容器元素
• block-level element styles (paragraphs, lists, etc.)  块级元素
• inline element styles (links, abbreviations, etc.)  行级元素
• etc.

再之下，我根据元素类型来分组：

• paragraphs  <p>
• blockquotes  <blockquote>
• addresses  <a>
• lists <ul> <dl>
• forms  <form>
• tables  <table>

最后对于每一个样式定义，我会将属性声明根据不同的类型分组：

• positioning (with coordinates) styles
• float/clear styles
• display/visibility styles
• spacing (margin, padding, border) styles
• dimensions (width, height) styles
• typography-related (line-height, color, etc.) styles
• miscellaneous (list-style, cursors, etc.) styles

很多人喜欢将属性声明按照字母排序，这个就是看个人喜好，但是我喜欢这样的分组方式。

6. 创建CSS Framework

如果你发现你经常创建类似的样式表的话，那你可以创建属于自己的CSS Framework来积累大量的基础样式表，这样在将来可以大大简化你的工作。

• screen.css – A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
  • reset.css – A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.  （我的重置样式表 undohtml.css）
  • typography.css – A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
  • grid.css – A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
• print.css – A print CSS file would include your styles you want to be used when the page is printed.

Blueprint framework 就是一个非常不错的CSS Framework，大家可以看一下。

7. 平衡可读性和代码优化

是将代码优化到极致（比如，没有注释，没有换行，压缩到体积最小），还是保留文档非常好的可读性。这个问题，每个人可以去找属于自己的平衡点。当然最理想的做法是，发布网站的时候再去压缩CSS样式表文件。

8. 熟练掌握你的文本编辑器

不管你是使用textmate，dreamweaver，vim，还是什么，请一定要熟练掌握他们。工欲善其事，必先利其器。

9. 使用版本控制

使用例如SVN或者CVS等版本控制程序来辅助我们更好的维护样式表。（对于我们程序员来说，可能这个再熟悉不过了，推荐使用SVN iloveit）

10. 创建并维护样式表文件指南

如果你想成为一名出色的设计师，坚持这点吧。

//————————————————————— 

当我在0:31分时候译完整篇文章并排版好的时候，保存时出了问题，打好的东西都没了，唉，大家记得发布前要Ctrl+C。

您可能也喜欢：
20个帮助你更好的掌握CSS的网站	最常用的CSS小把戏(Most used CSS tricks)	CSS代码优化压缩工具	50个超级有用的CSS开发工具
无觅

版权声明：本文版权归原作者所有 译介仅供国内读者参考

BANG421388A95514C2DCE6B44914XIANGUO

对于一个网站来说，导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西，所以全站一致的导航栏就成了少数可以给用户带来方向，引导他们浏览整个网站的元素之一。用户很依赖它，所以设计师绝对不能在这个地方马虎了事。

还是那句老话，最好的往往是最简单的，当然简单的东西绝对不代表就是乏味的。去年，我们就曾经就导航栏写过一篇文章  modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。

下面就让我们来看看，最新的导航栏设计趋势，实例和一些非常炫的设计。

1.会“说话”的导航栏 （Speaking navigation）

对于导航栏来说，最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说，很难用1-2个关键字来准确描述这个模块的具体内容和功能，特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项（“沉默”导航栏 silent navigation），设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。

过去的几个月里，我们发现这种趋势越来越流行。

为了让信息变得更加容易接受，通常使用相同高度宽度的块状显示，大图标的使用也越来越普遍，当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用，能让你的网页变得更加亲切。

这样的形式同样可以应用在垂直导航栏上

2. 苹果风格越来越流行

不知道苹果风格是web2.0设计风格大进攻的幸存者，还是一个完全独立的设计风格，又或者只是一个暂时的潮流趋势，恐怕没人能说明白。（看来老外的设计师对苹果风格也有着不同见解）

但毋庸置疑的，越来越多的网站采用了苹果风格

更多示例请参考原文

3. 图标的应用越来越多

为了更好的和用户沟通，设计师越来越多的使用非常具有感染力的图标（appealing icon），当然这个的前提是你的图标必须非常易于辨认和理解你的意思。

  （这个是我觉得非常出色的设计）

4. 垂直的Tab导航栏

5. 手写体的大量应用

6. 实验性解决方案

当然还有许许多多不拘一格的新奇设计，有兴趣的朋友可以去仔细看看 原文

您可能也喜欢：
2009年网页设计趋势前瞻 (下)	2009年网页设计趋势前瞻 (上)	高效率网页设计的十大军规	测试驱动之于网页设计开发
无觅

原文地址：http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/

本译介仅供国内用户参考

 Bagg & Box Telecharger Icon Pack

Mammoth Icons

 Dino Icons

Cemagraphics Icons

sizes 512px, 256px, 128px, 64px and 32px

Wifun Icons

更多选择更多欢乐，详见

http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/

您可能也喜欢：
一组免费的(FREE)的超炫WordPress Theme	介绍几家免费的Git托管服务	2009年2月份壁纸推荐	2009新年第一波，一月壁纸推荐
无觅

版权声明：本文版权归原作者所有 译文仅供国内读者参考

    决定一个网站成败有时候并不是样式设计，而是可用性和易用性。对于一个页面的访问者来说，他所做的只是点击然后决定下一步要做的事情，因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然，如果没有任何提供给用户的功能，这个标准也不复存在了。

    我们不打算深入探讨关于可用性的实践细节（比如搜索框应该放置在页面的什么位置）因为已经有相当多的文章就此做了深入的阐述，我们将重点介绍一些核心法则、启示，合理的使用这些法则，能使你的网站更加成熟，展示的内容更容易让用户理解。

请注意：

• 你可能对这两篇我们之前的文章感兴趣 10 Usability Nightmares 和 30 Usability Issues 。
• 我们会在后续的文章中继续讨论关于可用性的问题，您可以订阅我们的网站  subscribe to our RSS-feed 。

    为了能够正确的使用这些法则，首先我们需要知道用户是如何和页面进行交互的，用户是如何思考的以及用户的常见行为是怎样的。

用户如何思考？

• 用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容，用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高，但是设计的很糟糕，依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。
• 用户并不会细读，他们是浏览 分析一个站点，用户始终在寻找一些锚记（译注 fixed point 内容节点）来作为页面内容的导航员。 

                      （图1 图上的热点标示了用户的阅读集中在句子的前半部分）

• 网站用户是急切并强烈要求迅速满足需求的 非常简单的法则：如果一个站点不能满足用户的期望，那这个网站的设计师就是不称职，这个公司也将失去很多挣钱的机会。认知负载越高，直观导向越少，用户越是会放弃该站点来选择另一个网站来代替。
• 用户并不会做最佳的选择  用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接，他们就会在第一时间点击。所以，从全部内容中找出最优的链接耗时太多，也太累，寻找满足需求的看上去更有效率。[video]  

                    (图2 图3  这两幅图片展示了线性阅读在网页浏览中是不适用的)

• 用户跟从的是他们的直觉 大多数情况下，用户不会认真去看设计师提供的内容，根据Steve Krug(Don’t make me think 作者)的说法，主要原因是用户根本不在乎这些。
• 用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器，并且信赖从始至终提供一直内容展现形式的网站。比如，他们不希望自动弹出的窗口，和随时能够通过“后退”按钮回到他们先前浏览过的网页，所以，一个非常重要的准则就是“不要在新窗口打开网页”。（译注：这点上，中国的用户的操作习惯恰恰相反，比如谷歌就不得不改成在新窗口打开，另外，在web标准中<a>标记的target属性是被废弃的，也是基于这个原因。）

1. 别让我思考

    让我们来看一个例子 Beyondis.co.uk 的口号是”beyond channels, beyond products, beyond distribution”。 这是什么意思呢？因为用户多数情况下采用“F”-pattern 来浏览一个网页，这3句话将是用户在这个页面上第一眼看到的内容。尽管该设计本身非常的简洁而且直观，但是这个页面的主题是什么，用户必须去网页中寻找答案。这是一个完全没有必要的“问号”。对于设计师来说，必须让这样的问号数量为0。将左右页面的内容互换一下，将大大提高可用性。   

     ExpressionEngine 这个网站使用了和Beyondis类似的页面结构，但是避免了前者存在的“问号”。而且，网站的标语本身具备了功能性，用户可以直接在这里尝试提供的服务和下载试用版本。    通过让用户很容易就能理解系统提供的内容，将有效降低用户的认知负载。当你有过一次成功经历后，你可以和用户沟通，看看系统给用户提供了什么，是什么让他们受益。如果用户不能在你的网站找到他们想要的内容，他们是不会使用你的网站的。

2. 不要浪费用户的耐心

3. 设法集中用户的注意力

Humanized.com 完美的使用了吸引眼球的法则。用户第一眼唯一能看到的东西就是大大的 FREE ，这是非常具有吸引力的，但仍然保持了一种“安静”的感觉，只是纯粹的传递信息。其下的具体信息告诉用户如何去了解更多关于免费产品的信息。通过适当地使用一些可视化元素让用户的注意力集中在网页的某些区域，可以非常有效地是用户从A点走向B点，并且不会让他们觉得是有意这么做的。更少的问号，更好的方向感，会让用户更加信任该网站所展现的关于公司的形象。换句话说，在屏幕背后更少的思考，更好的用户体验是可用性的第一准则。

4. 努力展现特点

Dibusoft.com 将清晰的网站结构和可视化吸引力结合的非常好，这个网站第一眼看去就能发现有9个主要的导航链接。当然，颜色的选取可能有些过淡了。让用户看清楚提供有哪些功能是用户界面设计中一条非常基本的准则。这并不是说我们要关心这些功能是如何实现的，而是重点关心内容是否易理解，用户是否对和系统的交互方式觉得舒服。

5. 让文字更加简练

Eleven2.com 做的相当出色，没有任何修饰性文字，也没有任何夸张的文字，只有价格，也就是用户唯一想知道的东西。一些关于写作的建议：

• 尽量使用简短的语句（一步出答案，男生选C，女生凭直觉）
• 使用可快速浏览的写作方式，增加标题，分类，使用列表，分隔图片等方式来划分不同的段落
• 使用简明扼要的词句，例如褒奖的文字不需要写的像广告一样，直接了当的告诉客户选择自己产品的理由就可以了

6.努力让网站变得简单

7. 不要害怕空白

8. 通过使用“可视化语言”来有效沟通

•  Organize 提供用户清晰且一致的结构。一致性，屏幕布局，关联和导航都是组织形式的重要概念。对于所有元素必须应用同样的规则。
• Economize 使用最少的可视化元素来完成最多的事情，考虑以下四个重要方面，简单：仅使用最重要的元素；明确：所有的元素设计必须是含义清晰，不会有歧义或者晦涩难懂；区别：所有的元素必须非常容易被区别；强调：最重要的元素必须非常明显。
• Communicate 不要让文字超过3种字体，或者超过3种大小，每行18个单词，5-80个字符比较合适（这里翻译的较为简略，毕竟指导意义一般，我认为他这段话就挺晦涩的 ）

9. Convention —— 我们的好朋友

10. 尽早测试，更多测试

您可能也喜欢：
2009年网页设计趋势前瞻 (下)	2009年网页设计趋势前瞻 (上)	设计十八般兵器之 “经典字体”速查	测试驱动之于网页设计开发
无觅