什么是面包屑(breadcrumb)?

“面包屑(breadcrumb)”是二级导航计划的一种形式，可以清楚的标明当前用户所在的网站或网络应用的位置。该术语源自《奇幻森林历险记》（Hansel and Gretel） 这篇童话故事，两个小孩子通过丢面包屑来标记回家的踪迹。和童话故事中一样，面包屑(breadcrumb)在现实应用中可以提供给用户追踪原始登陆点的方式。

Delicious.com上的面包屑(breadcrumb)

通常你可以在一些内容量极大，并且使用分级结构的网站上看到面包屑(breadcrumb)。你也可以在一些具有多重步骤的应用程序上看到它们。面包屑(breadcrumb)的结构非常简单，水平排放了一些文本链接，并且用大于号隔开(>)；这个符号标明了当前页面与相邻页面之间的层级关系。

本文，我们将探讨面包屑(breadcrumb)在网站中的使用方法以及提供一些好的案例供参考。

什么时候需要使用面包屑(breadcrumb)?

大型网站或者具有层级结构页面的网站需要使用面包屑导航(breadcrumb navigation)。最好的例子就是一个电子商务网站，这种网站的产品都会根据逻辑分类进行归组。

对于一些仅有一级结构的网站你不需要使用面包屑(breadcrumb)。一个决定是否需要使用面包屑(breadcrumb)最好的办法就是建立一个网站地图或者用图表画出网站导航结构，并且分析一下使用面包屑(breadcrumb)是否可以改善用户在分类之间的导引动作。

面包屑导航（Breadcrumb navigation）只能作为一个网站附属的特性而不能代替主导航。它是一个方便的功能，一个二级导航计划可以让用户确认他的当前位置，并且是你的网站导航的另一种表现方式。

面包屑(breadcrumb)的形式

下面介三种主要的面包屑(breadcrumb)形式。

基于位置的(Location-based)

基于位置的面包屑(breadcrumb)可以告诉用户他们当前所在的网站层级。最具代表性的就是用在具有多级别（通常大于两级）的导航中。下面的示例 (SitePoint)中，每一个文本链接的层级都大于各自右侧的文本链接。

基于属性的(Attribute-based)

基于属性的面包屑(breadcrumb)路径显示了特定页面的属性。例如，在Newegg网站中，面包屑(breadcrumb)路径显示了特定页面上项目的属性。

该页面显示了所有具有制造者为“Lian Li”这个属性的计算机，同时他们还具有“MicroATX Mini Tower”这个表单元素。

基于路径的(Path-based)

基于路径的面包屑(breadcrumb)像用户提示了他们达到特定页面的步骤。这种形式的面包屑(breadcrumb)是动态的，因为它们显示的页面是用户在到达当前页面之前已经访问过的页面。

使用面包屑(breadcrumb)的好处

使用面包屑(breadcrumb)有以下几点好处：

为用户带来方便

使用面包屑(breadcrumb)主要是为用户提供站内导航的另一种方式。通过在多级结构的网站上为所有页面提供面包屑(breadcrumb)路径，用户可以更容易的定位到高级别的页面。

减少返回高级别页面的点击数量或动作

代替使用浏览器的返回按钮或者网站的主导航返回到高级别页面，用户现在可以通过面包屑(breadcrumb)使用更少的点击到达目的地。

通常不占用屏幕空间

因为通常都是使用水平方向且不进行格式化，面包屑(breadcrumb)路径不需要占用页面很多空间。这样的好处就是他们对于内容的加载没有任何负面影响，并且如果使用得得当的话将化解其他负载。

减少跳出率

面包屑(breadcrumb)路径对于吸引首次访问者进入当前加载页面以后继续查看网站其他内容是一个非常棒的方式。例如，当一个用户通过google搜索进入到一个页面，看到一个面包屑(breadcrumb)路径的时候可能会试图点击更高级别的页面来查看相关感兴趣的文章。这样依赖，就可以减少整个网站的跳出率。

使用面包屑(breadcrumb)的常见错误

使用面包屑(breadcrumb)是意见十分简单的事情，在决定是否需要使用他们之前仅仅需要考虑几点建议。下面让我们看看需要避免的一些错误使用情况。

在不要使用的时候而使用了面包屑(breadcrumb)

最易发生的错误就是面包屑(breadcrumb)对于网站没有任何益处的时候而使用了它。

在上面的例子中，Slicethepie为使用者提供了太多的导航选择。 (1) 主导航， (2) 面包屑(breadcrumb)路径以及 (3)二级导航的位置都十分接近。面包屑(breadcrumb)在这里并没有为用户提供什么方便之处，因为二级导航已经直接显示出了下级页面。而且，点击面包屑(breadcrumb)上的二级链接 (”Music”)将把你代回到一级标签 (”Listen”)，这将错误的向你提示第一个标签会比第二个标签(”Search” 和 “Artist hall of fame”)级别高。

将面包屑(breadcrumb)作为主导航

正如前所属，使用面包屑(breadcrumb)仅仅是一种可选的导航方案。

在上面的例子中，mefeedia并没有提供主要的查看视频的导航菜单。尽管这里在页脚部分有一个文字链接导航，但是在页面主体上并没有一个导航菜单，从而使得网站其他部分的定位非常困难。

假设你通过Google直接到达了视频页面，那么可供你使用的导航仅有面包屑(breadcrumb)。也就是说如果你已经浏览了网站的其他页面并且到达了一个没有主导航菜单的页面，那么你不得不使用浏览器的“返回”按钮访问主菜单。

当页面具有多种分类的时候使用面包屑(breadcrumb)

面包屑(breadcrumb)具有一个线性结构，因此当你的页面分类种类较多的时候使用它会比较困难。决定是否需要使用面包屑(breadcrumb)通常都很大的依赖于你的网站结构设计。当一个低级别的页面具有一个以上的父级分类，那么使用面包屑(breadcrumb)是无效的，不精确的，而且会让用户非常迷糊。

面包屑(breadcrumb)导航设计考虑因素

当设计面包屑(breadcrumb)导航计划的时候，需要在大脑中牢记几点。让我们一起来看看当你设计面包屑(breadcrumb)的时候可能会遇到的问题。

应该用什么区分开链接项目？

通常被接受并且广泛认知的区分面包屑(breadcrumb)超级链接的符号就是大于号(>)。最具代表性的说，大于号用来表示层级结构，像这样的结构主分类>子分类。

Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).

选择使用什么样子的分隔符依赖于整个网站的美观设计以及所使用的面包屑(breadcrumb)形式。比如，基于路径的面包屑(breadcrumb)就不需要在每个链接文本之间提供层级关系，使用大于号并不能精确的传递他们之间的关系。

面包屑(breadcrumb)应该多大？

你无需让面包屑(breadcrumb)占据网页的主导位置。一个面包屑(breadcrumb)仅仅扮演用户使用助手的功能。它的尺寸只需可以传到足够的信息给用户足以，因此可以很小，或者比主导航小一些。

上图像我们显示了一个非常好的原则就是面包屑(breadcrumb)不能作为用户到达页面的时候被第一眼吸引的东西。

面包屑(breadcrumb)应该放在什么位置？

面包屑(breadcrumb)通常显示也页面的上半部分，如果导航菜单使用的是水平方向的话就在主导航菜单下方即可。

面包屑(breadcrumb)展示

我们已经讨论过了面包屑(breadcrumb)的6W(who, what, when, where, why以及how)，下面来看看一些实例。以下部分你将看到一些非常棒的网站上使用面包屑(breadcrumb)的例子。

1. 经典的基于文本的面包屑(breadcrumb)

TypePad Design Assistant

NASA

Nestle 使用的面包屑(breadcrumb)文本是页面上最小的文本，有效的体现了面包屑(breadcrumb)的谦逊而不唐突。

Marchand de Trucs

Bridge 55

Overstock.com 在它基于属性的面包屑(breadcrumb)上使用了标准的大于号，并且为产品属性使用了选择框，这样用户就无需再对它们进行筛选。

2. 使用其他符号代替 “>”

TechRadar UK 和 BP 使用向右的三角。

PSDTUTS 和 Martique 使用了破折号。

Mouse to Minx 使用了向右的箭头来表示页面的层级关系。

Jakob Nielsen’s Alertbox 使用了右箭头。

Target 使用了半角冒号 (:) 。

3. 超越简单的文字链接

现在的面包屑(breadcrumb)设计趋势用简单的一句话来说就是“面包屑(breadcrumb)不一定是普通的”。在下面的示例中，你将看到一些与整个网站设计风格完美结合的漂亮的面包屑(breadcrumb)样式。

Grooveshark

Yahoo! TV

IDEO

Apple Store

Coolspotters

Devlounge

LottaNZB

Pixelpoodle

guardian.co.uk

4. 多步过程的面包屑(breadcrumb)

Statement Tracker 使用了面包屑(breadcrumb)路径来标示帐号注册的步骤。

Flickr 使用面包屑(breadcrumb)来标示Flickr使用方法的单元数字。

5. 带有子导航的面包屑(breadcrumb)

下面将向你展示一些这样的面包屑(breadcrumb)样式，当用鼠标点击或者悬浮在链接上的时候会打开一个子导航面板列出一些附加属性或者位置。

MarketWatch

Profoto 具有一个独特的面包屑(breadcrumb)：点击面包屑(breadcrumb)上的链接将会在下方打开一个区块向用户显示附加的属性以供选择。

Cranfield University

Lonely Planet 同样具有一个fly-out样式的面包屑(breadcrumb)供你改变属性。

点击一个面包屑(breadcrumb)链接将会打开相应项目的页面，同时点击向下的那个按钮会打开附加的选项。

MSDN 的面包屑(breadcrumb)具有一个可以打开二级导航列表的滚动面板。

Wowhead 的面包屑(breadcrumb)具有一个多级别的二级导航

6. 具有交互功能的面包屑(breadcrumb)

Delicious 可以让你移除面包屑(breadcrumb)上面的项目来帮你快速定位书签。

7. 具有实验性的示例

Booreiland 使用了一个面包屑(breadcrumb)风格的导航计划作为主菜单，允许用户快速理解他们当前所浏览的内容。

用户交互设计师，AEN UI的Aen Tan发明了一种称为 “Tabcrumbs”的设计方式，即一个将标签和面包屑(breadcrumb)组合在一起的导航计划。

关于本文作者

Jacob Gube

是一名网页开发和设计人员，也是 Six Revisions的一名作者。如果你想和他联系的话，可以加入他的Twitter。

[原文链接]

我们大多数人都知道 <blockquote>标签，但是你是否知道它的兄弟 <cite>呢？<cite>允许你定义元素内的引用。典型的情况就是浏览器会将<cite>标签的内容选染成斜体，但是如果你设置了CSS样式的话，那么还是会以CSS样式为准的。

<cite>对于书目和其他网站索引是非常有用的。请看下面这个例子：

David Allen’s breakthrough organization book Getting Things Done has taken the web by storm.

2. <optgroup>

<optgroup>对于在选择菜单下的选择组中添加小定义是非常有用的。比如你想按照时间分类定义一组电影列表，那么你可以这样做：

<label for="showtimes">Showtimes</label>

<select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>

效果预览:

Showtimes

这样做允许选择列表使用视觉效果将电影清单分开。

3. <acronym>

<acronym>标签可以用来定义或者进一步解释一组文字。当你将鼠标悬浮在使用了<acronym>标签的文字上的时候，将会在其下方出现一个带有文字的方框。看看下面的例子：

The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.

效果预览:

SEO is full of trickery and magic.

4. <address>

<address>是一个非常不起眼的小标签，但是它并非没有可用之地。顾名思义，<address>允许你对HTML中的地址添加语义代码。这个代码可以将标记内的文字斜体化。当然，你也可以通过CSS改变样式。

<address>Glen Stansberry </address>

1234 Web Dev Lane

Anywhere, USA

5. <ins>和<del>

如果你想使用标记来显示编辑修订效果，<ins>和<del>正式你所要的。正如名字所暗示的，<ins>使用下划线突出显示添加的，<del>使用删除线显示被去除的。

John <del>likes</del> <ins>LOVES</ins> his new iPod.

效果预览:

John likes LOVES his new iPod.

6. <label>

当写代码的时候表单元素很容易被忽略。而其中一个最容易被忽略的就是<label>标签。<label>标签不仅可以快速注解你的标签文字，而且可以使用”for”语句定义哪个元素被赋予到了该标签。这些<label>标签不仅可以用来定义样式，而且可以让你为关联元素设置标题点击。

<label for="username">Username</label>

<input id="username" type="text" />

7. <fieldset>

<fieldset>是一个很少用的属性，他可以添加到你的表单上为表单元素创建一个逻辑组。一旦应用了<fieldset>标签，所有表单元素将会被一个方框缩包围。你可以在<fieldset>标签内使用<label>来定义该组的标题。

<form><fieldset></fieldset></form>

Are You Smarter Than a 5th Grader?

Yes
<input name="yes" type="radio" value="yes" />

No
<input name="no" type="radio" value="no" />

效果预览:

8. <abbr>

<abbr>和<acronym>是同类标签，不过<abbr>仅仅用来定义缩写单词。和<acronym>一样，当你在缩写字符元素上使用鼠标悬浮的时候，该缩写的完整定义将会出现在下方。<abbr>极少被使用，但是对于多数屏幕阅读者，语法检查者和搜索引擎来说非常有用处。

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

效果预览:

Sgt. Pepper’s Lonely Hearts Club is my favorite album.

9. rel

Rel可能是一款超级有用的属性，任何HTML元素都可以应用它。它对于读取那些没有被特别定义的额外的变量非常有帮助。当你在HTML中使用Javascript的时候非常有用。如果你有一个链接，并想进行行内编辑，你可以这样做：

<a rel="clickable" href="page.html">This link is editable</a>

Javascript可以寻找带有”clickable”属性的链接，然后应用Ajax技术使该链接可以被进行行内编辑。而这仅仅是rel属性众多技术中的一个。

10. <wbr>

<wbr>是一个非常偏僻的标签。说实话，我怀疑你们是否有人接触过它。从本质上讲，这个标签允许你在指定的地方进行切断换行。不过这个标签非常独特，它需要依赖浏览器的分辨能力。这个标签对于想要避免出现垂直滚动条的情况非常有用。

如果你想使用这个效果，你可以试试看这个标签。不过需要注意的是，它并不被所有浏览器支持，具体的技术指标情参看这篇文章。

<span>How do you say Supercalifragilisticexpialidocious?</span>

[原文链接]

一些基本且简单的步骤

1. 升级到最新版本

WordPress 2.7相对之前的版本有很多性能上的提高，所以你最好升级到到最新的版本。

2. 移除不必要的插件，并更新现有的插件

移除任何你不使用的插件。禁用并且直接从你的服务器上将他们删除。禁用插件将会影响到网站的速度因为Wordpress会自动检测这些插件是启用了还是未启用。另外，你必须将你正在使用的插件升级到最新版本。开发人员之所以发布新的版本是因为他们修改了一些代码从而使插件能够更好的运行。

3. 最小化PHP以及数据库读取

我阅读了 Wpcandy’s simple ways to speed up WordPress 这篇非常好的技巧。它提供了许多建议来降低PHP和数据库读取。每当你的网站页面加载的时候，如果你的浏览器不得不执行任何PHP读取，它将增加页面的加载时间。如果你使用静态的HTML代替PHP读取，每次网页加载的时候，浏览器只读取HTML。

4. 从myPhpAdmin优化和修复你的数据库

每周或者定期你应该登录到你的myPhpAdmin对数据进行优化。打开你的Wordpress数据库图表，将所有选项全部选取，然后在选择框中选择“优化图表(Optimise Tables)”和“修复图表(Repair Tables)” 选项。你会惊奇的发现这个建议是多么的好，它将对现有数据库优化10%。

整理你的图片

5. 使用值得信赖的图片存储服务商

试着将网站上的图片，CSS，JavaScript和其他静态文件存放在Amazon S3存储空间上 ，你会发现你的服务器的CPU及内存的平均消耗数量会减少很多。具体请参考这里。

你也可以试试这个WordPress插件，WP-Offload将通过卸载你的静态内容如图片，文件以及多媒体等加速你的博客性能。这将大大降低你的宽带消耗以及HTTP请求数据。

6. 使用Shrink O’Matic优化你的图片

Shrink O’Matic是一款AIR软件可以轻松的批量修改你的图片大小。它可以处理JPGs, GIFs以及PNGs格式的图片。简单的拖拽图片，然后按照你的意思修改图片大小。你还以选择输出的大小，文件名称和格式。

提高性能的好建议

7.安装WP Super Cache插件

我猜你们大多数人都知道为什么我会坚持使用该插件。该插件可以从你的动态Wordpress博客上生成静态的html文件。当一个静态的html文件生成以后，你的服务器将不用再去读取那些极占资源的PHP脚本，并且不会去加载数据库中的任何内容，这样你的文章将会被加载的更快速。

8.PHP Speedy WP

PHP Speedy WP可以迅速且轻松的加速你的WordPress网站并且改善你的博客响应时间。CSS背景图片可以自动的转化为Data URI，这就十分有效的降低了HTTP请求的数量。另外更重要的是，它和IE浏览器器兼容，即使后者不支持Data URI。不幸的是，PHP speedy 存在一些漏洞需要修复：合并后的JavaScrip被放置在了页面头部，这样它就不能在WP Super Cache中工作。为了解决这个问题，你必须查看Prelovac提供的这篇文章，对这两个插件进行一些修改。

9.WP CSS

该插件可以备份压缩（GZIP）以及去除CSS文件中的空格。它可以让你自信的在CSS文件内使用@import而无需顾虑客户端的情况。它将查看你的style.css文件并且将任何@import文件置入其中。同时还会提供一个缓存修改时间。你还可以在指定的页面添加CSS文件或者将他们都放置在一个文件里面。

10.DB Cache

这个插件可以定期缓存你的每一个数据库。他的速度非常快而且仅使用了很少的空间。

11.通过使用AJAX Libraries API 加速访问你的常用架构

AJAX Libraries API可以加速开发人员制作网页应用的速度，它仅仅是通过将一些非常流行的javascript库全都存放在了一起，这些库包括：

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

你可以直接添加这些链接：

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"><!--mce:0--></script>

或者可以使用Google’s API:

<script src="http://www.google.com/jsapi" type="text/javascript"><!--mce:1--></script>

<script type="text/javascript"><!--mce:2--></script>

通过使用 google.load()方式，你的应用程序速度将会提升很多。

12.显示页面加载时间和读取数量

这里有一个非常简单的代码可以插入到你的模板中来显示你的页面加载时间，或者有多少sql数据被执行了。这个技巧对于判定WordPress优化效果非常有用。

 queries in   seconds.

13.优化数据库

MySQL是一个非常棒的数据库，但是他自身不会进行清理工作。该插件运行一个优化表的命令，有效的清楚了数据碎片。这是一个非常有用的数据表插件并且更新非常块。界面非常简单：仅有一个按钮：立刻优化（Optimize Now）。

[原文链接]

本文我们将列举读者们建议的30款网页设计师和开发人员必备的mac应用程序，这些程序或能节省网页或程序开发的时间，或能帮助他们有效实施工作计划。

1. Transmit

功能丰富的FTP / SFTP / WebDAV客户端软件：获取iDisk, FTP, SFTP, 或者TLS/SSL上的文件。可以使用各种程序编辑远程文件，甚至是图形文件。具有拖拽功能和自动同步功能。

2. TextMate

无论你是一名程序开发人员还是设计师，编写代码都是一件非常辛苦的事情，TextMate可以让你工作起来游刃有余，降低脑力负荷，并让常规的手写工作交由电脑来完成。TextMate被我们的读者评选为最有用的和极具扩展功能的文本编辑器，特别是使用Subversion的用户。TextMate产品贴士，是一篇非常有用的文章，提供了12个技巧帮助你更有效的使用TextMate。

3. Anxiety

Anxiety是Mac OS X Leopard下的一款轻量级的To-do工具，可以和iCal以及Mail同步。Anxiety提供了一个简介而紧凑的界面，可以添加和查看你的任务清单，并且可以以各种方式集合在桌面背景上。

4. BBEdit

BBEdit是一款专业的Mac平台下的HTML及文本编辑工具，提供了对文本进行编辑，查找和管理的各种高性能。智能界面可以让你轻松使用BBEdit的各种特性，包括检索目标模式匹配，多文件查找替换（甚至是没有打开的文件以远程服务器上的文件），项目定义工具，功能导览以及针对不同代码语言的语法颜色标识，代码折叠，FTP和SFTP模式打开、保存文件，AppleScript，Mac OS X Unix脚本支持，文本和代码自动完成，当然还有一系列的HTML工具。

5. HyperEdit

Tumult HyperEdit 是一款轻量级的HTML编辑器，它提供了一个预览窗口来实时显示页面。HyperEdit打破了冗长乏味的代码书写模式：写html，保存，在浏览器中加载及预览。它实现了撰写，修改与预览的同步进行，加快了整个页面设计的进程。W3C验证会将错误的语法用红色的下划线标记出来。它内嵌了与Safari相同的渲染引擎，因此不仅符合标准而且速度还非常快。

6. Versions

Versions提供了在mac上用Subversion工作的一个非常好的方式。无论你是一个Subversion高手，还是新手，Versions都会帮你优化你的工作流程。

7. Skitch

skitch不仅允许你快速创建并编辑截屏，而且还提供给你一个服务器空间和平台来储存这些图片方面你在skitch页面上进行浏览。skitch特性包括：网页快照，捕捉对话瞬间，应用程序截屏，iSight捕捉，快速建立想法草图，连接到iPhoto库。

8. LaunchBar

LaunchBar是一款获奖的工具软件，提供了快速接口进入你的应用程序，文件，联系人以及书签，iTunes资源库，以及搜索引擎等，所有这些仅需输入你要查找的项目名称的缩写即可。

9. Quicksilver

当打开Quicksilver的时候，它会创建一个经常使用的文件夹和文件的目录。激活它以后，你可以快速查找和打开目录中的任意一项。Quicksilver可以基于先前的经验来查找哪个项目是你正在查找的。他也支持缩写功能，因此你可以输入整个字符或者片段即可。

10. Littlesnapper

LittleSnapper是一款截屏和网页快照应用程序。特性包括：完整页面捕捉，元素捕捉（意味着你将不再需要使用十字线），突出显示指定区域，内建文本标注，与客户共享快照等。

11. Aptana

Aptana Studio是一款完整的网页开发环境，整合了一系列强大的写作工具以及协作服务帮助你和你的团队实现轻松的工作。创建，调试，测试以及配置可扩展的PHP解决方案。支持jQuery, prototype, dojo, YUI, ExtJS, MooTools及其他 Ajax库。停放和扩展你的PHP及Jaxer 应用，使用Aptana RadRails快速开发Ruby及Rails应用。使用你的Ajax和JavaScript技巧创建服务器端应用等。

12. ForkLift

强大而快速的FTP应用程序。

13. journler

Journler是一款日记及信息记录软件。与iLife整合，语音和视频接口，文件导入和即时搜索与过滤，不仅集成Mail, iWeb以及Address Book，而且还支持博客，AppleScript以及Spotlight 。

14. Evernote

Evernote允许你在任何环境下使用任何工具或平台来捕获信息，并且在任何时候任何地点均可查看这些信息。

15. TimeLog

跟踪项目时间，界面类似iTunes™，任何一个Mac使用者都会对TimeLog感觉非常熟悉。TimeLog可以跟踪你正在使用的软件，并且显示时间线。这对于跟踪你的工作非常容易，甚至是你忘记了开始的时间。

16. Intaglio

Intaglio是Macintosh下的一款传统的绘画绘图软件。仿照原始的Macintosh绘图工具，Intaglio更倾向于初级使用者以及传统的Macintosh使用者。Intaglio创建2D图形，文字，颜色和适用于Mac OS X的脚本来提供作为一款廉价的绘图软件创建出的前所未有的力量和灵活性。Intaglio并不适用于Mac OS X，它起初的目的就是为了探索该平台为绘图工作实现理想化的能力。

17. Code Collector Pro

Code Collector Pro提供了组织，实用以及共享代码 片段的最好解决方案。

18. Rapidweaver

RapidWeaver是Mac OS X下的一款强大的网页设计应用程序。它基于标准的代码，并且能发不到任何ftp服务器上或是.Mac及MobileMe。

19. Paparazzi

Paparazzi是一款小型的Mac OS X工具用来制作网页快照。

20. Growl

Growl是Mac上的一款通知系统。它提供你正在使用的软件的一些提示信息，而无需进行程序切换。

21. Filezilla

另一款免费的FTP应用程序。

22. Mamp

MAMP可以在你的Mac OS X电脑上安装一个服务器环境。只需点几下鼠标，你就可以为Mac OS X安装Apache, PHP以及MySQL。

23. Billings

Billings可以在任何地方生成专业模式的发票，并且它还内建了30款模板供选择。

24. ColorSchemer

ColorSchemer是一款针对爱好者或者高级人士的专业配色程序。通过使用一个动态视觉色轮，可以即可观察各匹配颜色之间的关系，甚至可以让ColorSchemer智能提供给你一些配色建议。

25. ExpanDrive

ExpanDrive提供给你完全透明的打开，编辑，保存你的喜爱程序的方式，甚至是这些文件存在于世界各地的服务器上。透明的意思是说你甚至都不会感觉到你是在操作一个远程服务器上的文件，它就像是在你的电脑上直接使用USB驱动一样。

26. info.xhead

你的生活中总是会存在一些你不想忘掉的信息。不论它是密码，帐号，愿望列表或是让你挣脱乏味工作的百万美元想法，info.xhead 可以储存所有的这一切，并且将他们归类放置。

27. Vector Designer

VectorDesigner是一款使用简单，直观并且功能强大的适量绘图软件。它可以让你创造出各种极具想象力的适量图，如海报，手册，招贴画，logo，网页图形，t-shirt等等。它有丰富的工具和智能图形：轻松创建矩形，椭圆，多边形，五角星，贝尔曲线，甚至还可以将位图转化成矢量图形。

28. Cuppa

Cuppa是Mac OS X上一款小巧的饮茶时间工具，它会告诉你什么时候你的茶可以喝了。

29. PlainView

Plainview是一款全屏幕的浏览器。

30. Silverback

Silverback是一款为设计师和开发人员设计的并不抢眼的实用测试工具。它可以捕捉屏幕动作，录制参与者的动作、声音，轻而易举的添加段落标记，用遥控器控制录制，导出到Quicktime。

[原文链接]

当我们使用photoshop“存储成网页格式”的选项时，我们可以将图片文件压缩的小一些。但是，你是否知道这些图片大小可以被压缩的更多而不降低图片质量呢？有个名叫Smush.It 的网站可以帮助你实现这一点。

学会擅用Snippets

许多的IDE是都提供”code snippet” 控制面板允许你存储一些代码以备后用。你是否发现自己经常会去lipsum.com获取一些常用本文呢？那为什么不试试使用snippet？在Dreamweaver中，按下”Shift+F9″键即可打开snippet标签。你可以将需要的snippet托拽到任何你需要的地方。这个方法将节省你的大量时间。

利用Console.log()进行调试

你或许下载了一个jQuery库，并且在试图掌握它的语法结构。同样，你可能遇到了一些困难并且意识到你无法确认变量的对应值。没关系，你可以这样做：

键入命令：

console.log($someVariable);

现在，打开Firefox（请确认你已安装了FireBug），然后点击F12。你将会看到你正在查找的变量所对应的值。

下载网页开发工具

这是一款由Chris Pederick 开发的，非常实用的Firefox扩展插件，具有很多选项。或许你们大多数看过我视频教程的人都会发现我非常喜欢使用”Edit CSS” 这个选项来实时调整我的样式表。该工具的其他功能包括：

• 轻松禁用Javascript
• 轻松禁用CSS
• 快速HTML/CSS验证链接
• 标尺
• 禁用cookies
• 还有其他一系列很多伟大的功能

Web Developer Toolbar

将Script标签放置到页面最底端

我们似乎很少这样做。虽然它并非总是适宜，但是你的确可以通过把script标签放到<body>标签后来提高网站速度很多倍。

....

大多数现代浏览器在同一台服务器上最多同时加载两个内容。但是，当你加载脚本文件的时候，其他的都不会被同时加载。因此，只要情况允许的话，最好将你的脚本文件移动到文件最底端，以便让服务器先加载其他内容（如图片，css等）。

压缩CSS和Javascript文件

如果网站的性能最你来说最重要的话，我强烈建议你考虑在展开之前压缩CSS和Javascript文件。在开发之前不要嫌它麻烦，这会对你非常有帮助的。

Javascript压缩服务

• Javascript Compressor
• JS Compressor

CSS压缩服务

• CSS Optimiser
• CSS Compressor
• Clean CSS

另外两个有用的JavaScript压缩工具是 YUI Compressor, 和 JSMin.

jQuery贴士集

不久前，tvidesign.co.uk的Jon Hobbs-Smith发表了一篇非常棒的文章详述了jQuery的25个实用技巧。请确保将该页面收藏了。这里列举了我非常喜欢用的一些技巧。

检查元素是否已经存在？

if ($(’#myDiv).length) {

// this code will only run if the div with an id of #myDiv exists.

}

使用Context

很多人都没有意识到这一点，当访问dom元素的时候，jQuery函数会接受第二个参数 – “context”。请往下看：

var myElement = $('#someElement');

该代码将命令jQuery越过整个dom。我们可以通过使用context作为第二个参数来加速网站。

var myElement = $('#someElement', $('.someContainer'));

现在我们将告诉jQuery仅搜索.someContainer 内的元素，并且或略所有该元素以外的东西。

使用ID代替Class

当用jQuery访问ID的时候，通常会使用传统的”getElementById”方式。但是，当访问class元素的时候，jQuery必须使用他自己的方式跨越整个dom，结果这样会花费更长的时间。

产看所有25个技巧!

尽可能使用$_GET代替 $_POST

如果在编写Ajax命令的时候，你可以在$_GET 或者$_POST之间选择的话，那么请选择前者。

” Yahoo! Mail团队发现，当使用XMLHttp请求的时候，POST在浏览器中会通过两个步骤实现：首先发送header，然后再发送数据。因此最好使用GET，它仅使用一个TCP数据分组（除非你有非常多的cookies）。” – Developer.Yahoo.com

请记住：不要轻率的使用$_GET。请先弄清楚你第一步要作什么。

适时使用Library和Framework

无论你使用PHP, ASP.NET, Mootools, jQuery，或他们中的多种，请考虑适时的使用架构。

例如:

• 如果我要在网站上运行一个简单的静态页面，仅需要一个小的Javascript来实现翻转效果，那么使用jQuery的话就不太合适了。
• 如果我的静态网站的大多数特性被放在一个XML文件中，我就不需要使用架构。否则，我将会网站额外的带宽付出许多费用。

但是，如果我正在建设一个负责的网站，需要一个完整的CMS系统和复杂的数据访问，那么我将会使用一些我常用的架构。

请记住：架构仅仅是在需要的时候才会为你服务，否则请慎用。

YSlow

YSlow是一款非常棒的工具可以帮助你检查网站的有效性。

这里有一个很好的 YSlow视频教程 来讲述该款工具的实用性。我强烈推荐你有机会看一看。

学会使用键盘快捷键

大多数有经验的设计师/开发人员都会同意我的观点，如果我要实现网站或者设计的一个变化我都要去工具栏里面寻找相应的菜单，那会浪费我很多时间。我已经使用快捷键很长时间了，以至于我根本不知道这些命令的正确菜单位置。我就知道”Shift + X” 可以打开我需要的面板。

我建议你可以在Google中搜索 “X 快捷键”（X代表软件的名字，比如Photoshop）。打印这些表单放在你垂手可得的地方。在接下来的几个星期中，试着尽可能用鼠标进行操作，渐渐地你就会养成习惯了。

建立一个 “New Website”模板

让我们来看看如何建立一个网站模板。并非所有的网站都需要大型而复杂的应用。有时候，我们仅仅需要一个可以展示我们简历的网站。这时，我们为何不建立一个简单的“模板”来包含你需要的任何东西呢？

在我的模板文件夹里面，我建立了名为”JS”和”CSS”的二级文件夹。

• 前者包含了我的“DD_belatedPNG.js” 文件 (支持IE6 PNG背景透明)。
• 后者包含了一个空白的”default.css” 文件以及我自己的自定义reset文件。

除此之外，我还有一个 “index.html(php)” 文件包含了一些我常用的代码片段。这些并没有什么特别之处，不过会节约我不少时间。

正如你所看到的，我引用了我自己的CSS 和Javascript文件,链接了Google上的 jQuery文件，创建了document.ready() jQuery函数，并且打开了一个标准的”container” div。

这看上去非常简单，但却节省了不少时间。

内联Vs.外联

总的来说，你的所有CSS和Javascript文件应该从页面上移走放入其各自的外部文件中。

为什么这么做?

• 清理代码
• 简报和内容分开很重要
• 使用外部文件，数据会被缓存以备后用。这将降低HTML文件大小而不会导致多余的HTTP请求。

如果你仅有几句简单的样式结构，还是可以有例外的。把他们放在HTML页面内或许还是有益的，但仅限此种情况而已。

使用PHP判定Javascript调本是否被调用

AJAX几乎应用到了现在所有的领域，多数是因为他的用户友好性，这些都要归功于Javascript 库。在有些情况下，你需要考虑是否需要使用Javascrip来调用你的脚本。这需要几天的时间来完成这项任务。

其中一个方法就是当发送POST命令的时候使用Javascript附加上一对独特的键值。然后你可以使用PHP来决定某个特殊的值是否存在。如果存在的话，我们就会知道Javascript被调用了。

一个最好的构建方式就是使用PHP的特性”HTTP_X_REQUESTED_WITH”。

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {

// write some code and rest assured that the Javascript is enabled.

} else {

// Do something different to compensate for users that have JS turned off.

}

连接到Google的CDN

不久前，Google主机开始存放一些流行的脚本库如jQuery等。如果你正在使用类似的库，我强烈建议你将它们链接到Google的CDN，而不是使用你自己的脚本。

AJAX Libraries API

使用Firefox扩展

我是Google Chrome的忠实用户。他打开的速度非常快，并且运行Javascript的速度也比其他浏览器快很多，至少到目前为止是这样的。但是，你会发现我并不会很快放弃使用Firefox的。它的一系列非常有用的浏览器插件是令人惊叹的。下面就是我最常用的一些：

• Web Developer Toolbar
• S3 Organizer
• Clippings
• Firebug
• IE Tab
• FireFTP
• DownThemAll
• YSlow

如果有用的话，可以使用IDE

现在痛恨微软似乎变得非常流行，攻击那些在开发的时候使用IDE的人似乎非常时髦。事实上，这样看来比较愚蠢。

在很多情况，使用高级的IDE应该还是首选，特别是当你在使用OOP语言工作的时候。现在，如果你仅仅是创建一个小巧的HTML模板，Notepad++和Coda这样的程序已经非常棒了。事实上，在这种情况下我还是建议使用这样的工具的，毕竟多余的功能对你来说没有任何用处。但是，当你开发一些高级程序的时候，还是充分利用IDE的优势吧。

[原文链接]

需要说明的是，这些技术和实例不一定适合所有的浏览器，而且不一定符合设计和开发标准。其中一些技术还尚处探讨阶段。

透明CSS下拉菜单

该示例演示了如何设计一款先进的CSS透明下来菜单。该技术需要使用JavaScript技术实现IE6下PNG图片的透明效果。

返回图片地图

你将在该示例中看到一款用非常流行的方式设计的基于CSS的带有信息弹出框的图像地图。

CSS 3D迷宫

这是一款纯CSS设计的3D迷宫。如果你也想设计出这样的效果，那么你要做好充分的心里准备，因为你会为此付出很长的时间和耐心。

CSS滚动图像地图

该示例是用CSS设计一幅使用了热点技术的全景图片。点击图片的上的热点会在旁边的区域显示它的描述信息以及一幅可缩放的图片。

CSS装饰图库

Demo: CSS Decorative Gallery

Web Designer Wall 向我们展示了一款使用背景图像技术设计的图库效果。

CSS纸牌

Demo: Playing Cards

该示例使用特殊的HTML属性显示纸牌效果，并使用CSS对其进行样式和定位设置。

CSS版辛普森一家

在该示例中，Román Cortés使用HTML和CSS重新设计了辛普森一家。 你可以点此查看动画效果。

CSS房屋造型

Demo: CSS House

Design Detector通过使用DIV和CSS设计了一款房屋造型。

使用CSS定位和透明效果设计“Secret Message”

Demo: Secret Message

该示例是由CSS-tricks 的Chris Coyier设计的使用滚动效果显示”Secret Message” 。

如何设计细边阴影效果

Demo: light-weight drop shadows

该示例使用PNG图片透明效果来制作DIV边框的阴影效果。在IE6浏览器下需要使用JavaScript技术支持。

多种位置的阴影造型

这是使用另一方式设计的页面元素阴影效果。

多种透明效果

在该示例中，CSS大师Eric Meyer展示了一些使用CSS设计的透明效果

DVD遥控器

Design Detector 使用HTML和CSS技术设计了一款遥控器效果。

划线效果

CSSplay 的Stu Nicholls使用CSS设计了一款铅笔画线的效果。将鼠标放在图片上面，铅笔将画出一条水平线。

CSS文字阴影

使用纯CSS技术设计文字阴影效果。该技术涉及了文字层叠技术。不过目前css3已经提供了文字阴影的属性。

基于CSS的flash链接效果

在该示例中，将鼠标停放在导航栏的一个标题上，箭头将从做至右滑动。

地图信息提示

该示例演示了CSS在一幅地图上的图像地图效果。

纯CSS信息提示效果

该技术实现了鼠标悬停时显示隐藏DIV块的效果。

CSS页脚固定效果

这是一个固定在页面底部的页脚效果，他可以忽略页面的高度。

等比变化的五星

使用CSS画出一个简单的五星形状。当用户调整浏览器字体大小的时候，五星图形将随之进行等比例变化。I

菜单描述

在这个使用css设计的菜单中，鼠标悬停时可以显示更多的菜单信息。

CSS渐变效果

Demo: CSS Gradients Demo

该示例演示了使用CSS样式和空DIV元素以及背景颜色模仿渐变效果。

等比例变化背景图片

Demo: Scaled Background Image

该示例演示了如何设计一个可按比例变化的背景图片。(改变你的浏览器大小试试看)。

CSS垂直柱壮图

该示例演示了使用CSS生成一个垂直的柱壮图。

CSS渐变文字效果

Demo: CSS Gradient Text Effect

该技术通过使用PNG图片为文字添加渐变效果。在IE6浏览器下需要使用JavaScript来支持透明效果。

今天在Web Designer Wall上看到了这样一篇关于jQuery的文章，感觉非常实用，拿来编译一下和大家分享。当然你也可以直接查看原文。

该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。

jQuery如何运行?

首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在 <head>标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。

如何获取元素?

编写jQuery函数相对来说比较简单。你需要掌握的关键点就是如何准确的使用你所需效果的元素。

• $("#header") = 获取id为”header”的元素
• $("h3") = 获取所有标签为<h3>的元素
• $("div#content .photo") = 获取所有<div id=”content”>内类为”photo”的元素
• $("ul li") = 获取所有<ul>内的<li>元素
• $("ul li:first") = 获取<ul>内的第一个<li>元素

1.简单的滑动版

让我们从最简单的滑动版开始。你可能已经见过很多类似的效果了，当你点击一个链接的时候，一个滑动版便向上(下)展开 (view demo)

当类名为”btn-slide”的元素被点击的时候，它将向上(或下)切换(slideToggle) <div id=”panel”>元素，然后切换一个CSS类”active”到<a>元素。通过使用css样式，类名为.active的元素将会切换箭头图片的背景位置。

$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active");});

});

2.简单的消失效果

该示例向你讲述如何设计点击图片按钮后该区域内容消失的效果 (view demo)

当图片元素<img> 被点击的时候，它会查找其父元素 <div>，并且缓慢的隐藏其透明度。

$(document).ready(function(){$(".pane .delete").click(function(){$(this).parents(".pane").animate({ opacity: "hide" }, "slow");});

});

3Chain-able过渡效果

现在让我们来看看jQuery强大的Chain-able效果。仅需几行代码就可以设计出一个按比例变化大小并且渐变消失的飞行的盒子。(view demo)

第1行和第2行: 创建<a>元素被点击时的函数

第3行: 赋予<div id=”box”>元素的.animate函数不透明度值为0.1, 左边可到达的距离为400px, 速度为1200毫秒
第4行: 赋予.animate函数不透明度值为0.4，顶部距离160px, 高20, 宽20, 速度为”slow”
第5行: 接下来赋予.animate函数不透明度值为1, 左边距离为0, 高100, 宽100, 速度为”slow”
第6行: 设置.animate函数的top值为0,速度为”fast”
第7行: 调用slideUp函数 (默认速度值为”normal”)
第8行: 调用slideDown, 速度值为”slow”

$(document).ready(function(){$(".run").click(function(){

$("#box").animate({opacity: "0.1", left: "+=400"}, 1200).animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow").animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow").animate({top: "0"}, "fast").slideUp().slideDown("slow")return false;

});

});

4a.折叠效果1

下面是一个折叠效果 (view demo)

第1行：为<div>内的第一个<H3>元素添加名为”active”的类，并应用css样式(“active”类将转换箭头图标的背景位置)。
第2行：隐藏<div>内的非第一行的所有<p>元素。

当<h3>元素被点击的时候，它将滑动并切换(slideToggle)下一个<p>元素并且向上滑动(slideUp)它的子元素,然后切换类名为”active”的元素。

$(document).ready(function(){$(".accordion h3:first").addClass("active");$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){

$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");$(this).toggleClass("active");$(this).siblings("h3").removeClass("active");

});

});

4b.折叠效果2

该示例和上面的很类似，不过可以让你自定义默认展开的面板。 (view demo)

In the CSS stylesheet,将 .accordion p设置为 display:none. 现在，假设你要将第三个面板设置为默认打开的面板。你可以这样写 $(".accordion2 p").eq(2).show(); (eq = equal)。注意起始值为0。

$(document).ready(function(){$(".accordion2 h3").eq(2).addClass("active");$(".accordion2 p").eq(2).show();

$(".accordion2 h3").click(function(){$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");$(this).toggleClass("active");$(this).siblings("h3").removeClass("active");});

});

5a.动态悬停效果1

该示例将会创建一个非常漂亮的渐入渐出的动画悬停效果 (view demo)

当鼠标悬停在菜单上的时候，将会查找下一个<em>元素，并创建animate函数，设置其不透明度和顶部位置。

$(document).ready(function(){$(".menu a").hover(function() {$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");}, function() {$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");});

});

5b.动态悬停效果2

该示例为菜单链接添加 title属性，并将它放在一个变量里面，然后附加到<em>标签上。 (view demo)

第一行附加了一个空的 <em> 标签到菜单的 <a> 元素上。

当鼠标悬停在链接上时，获取 title 属性，将其存放在”hoverText”变量中，然后将带有<em>标记的文本内容赋予变量hoverText的值。

$(document).ready(function(){$(".menu2 a").append("<em></em>");

$(".menu2 a").hover(function() {$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");var hoverText = $(this).attr("title");$(this).find("em").text(hoverText);}, function() {$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");});

});

6.整个块元素点击效果

该示例展示了如何创建整个块元素点击效果变换的方式。(view demo)

假设你有一个类名为”pane-list”的<ul>a，并让其子元素 <li> 的整个模块可以点击。你可以为”.pane-list li”创建一个点击函数，当其被点击的时候，函数会查找<a>元素，并重新定向到href属性值的地址。

$(document).ready(function(){$(".pane-list li").click(function(){window.location=$(this).find("a").attr("href"); return false;});

});

7.折叠面板

让我们结合前面的一些技术来创建一个可折叠的面板。(view demo)

第1段: 隐藏第一个面板后的所有类名为”message_body”的块

第2段: 隐藏第5个以后的所有<li>元素
第3段：当<p>被点击的时候，滑动并且换(slideToggle)到下一个<div>块。
第4段: 当<a>按钮被点击的时候，向上滑动所有的<div>块。
第5段: 当<a>被点击的时候，隐藏该元素，显示<a>元素,并且向下移动(slideDown)所有第5个以后的<li>元素
第6段: 当<a>被点击的时候, 隐藏该元素，显示<a>元素,并且向上移动(slideUp)所有第5个以后的<li>元素

$(document).ready(function(){//hide message_body after the first one$(".message_list .message_body:gt(0)").hide();

//hide message li after the 5th$(".message_list li:gt(4)").hide();

//toggle message_body$(".message_head").click(function(){$(this).next(".message_body").slideToggle(500)return false;});

//collapse all messages$(".collpase_all_message").click(function(){$(".message_body").slideUp(500)return false;});

//show all messages$(".show_all_message").click(function(){$(this).hide()$(".show_recent_only").show()$(".message_list li:gt(4)").slideDown()return false;});

//show recent messages only$(".show_recent_only").click(function(){$(this).hide()$(".show_all_message").show()$(".message_list li:gt(4)").slideUp()return false;});

});

8.模仿WordPress的评论后台

我相信大多数人都见过WordPress的Ajax评论管理后台。现在让我们用jQuery来模仿一个。为了制造背景颜色动态效果，你需要使用Color Animations 插件。(view demo)

第1段: 添加”alt”类到所有偶数行<div>块，(隔行添加灰色背景)

第2段: 当<a>被点击的时候, 出现提示信息，并变换<div>的背景颜色和不透明度
第3段: 当<a> 被点击的时候, 先将<div>的背景颜色变为黄色，然后变为白色，并添加”spam”类
第4段: 当<a>被点击的时候，先将<div>背景颜色变为绿色，然后变为白色，并移走”spam”类
第5段: 当<a> is clicked, animate the backgroundColor to red and opacity =”hide”

//don't forget to include the Color Animations plugin//<script type="text/javascript" src="jquery.color.js"></script>$(document).ready(function(){

$(".pane:even").addClass("alt");

$(".pane .btn-delete").click(function(){alert("This comment will be deleted!");

$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow")return false;});

$(".pane .btn-unapprove").click(function(){$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast").animate({ backgroundColor: "#ffffff" }, "slow").addClass("spam")return false;});

$(".pane .btn-approve").click(function(){$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast").animate({ backgroundColor: "#ffffff" }, "slow").removeClass("spam")return false;});

$(".pane .btn-spam").click(function(){$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow")return false;});

});

9.图像替换

假设你有一套个人图片集，需要在一个页面上显示多幅图像而无须切换页面，你可以加载JPG图像到目标元素上。 (viewdemo)

首先在H2元素上添加一个空的<em>。

当<p>内的链接被点击的时候：

- 将 href 属性存放在变量 “largePath”中
- 将 title 属性存放在变量 “largeAlt”中
- 替换<img id=”largeImg”>的 scr属性为变量”largePath”，并替换 alt属性为变量 “largeAlt”
- 将 em内容 (在 h2标签内的)赋予变量largeAlt

$(document).ready(function(){$("h2").append('<em></em>')

$(".thumbs a").click(function(){

var largePath = $(this).attr("href");var largeAlt = $(this).attr("title");

$("#largeImg").attr({ src: largePath, alt: largeAlt });

$("h2 em").html(" (" + largeAlt + ")"); return false;});

});

10.定义不同的链接样式

在大多数现代浏览器中，定义link选择器是非常容易的。例如，定义一个链接到.pdf文件，你可以简单的使用以下css规则： a[href $='.pdf'] { ... }。不幸的是，IE6并不支持这个语法（这是为什么我们恨IE!的另一个原因）。为了实现这样的效果，你可以使用jQuery(view demo)

前三行应该很容易理解，就是根据 href属性为 <a>元素添加CSS类样式。

第二段是来获取 href属性中不含有”http://www.webdesignerwall.com”字样或者不是以 “#”开头的 <a> 元素，然后为其添加”external”属性，并将目标浏览器开启方式设置为”_blank”。

$(document).ready(function(){$("a[@href$=pdf]").addClass("pdf");

$("a[@href$=zip]").addClass("zip");

$("a[@href$=psd]").addClass("psd");

$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]").addClass("external").attr({ target: "_blank" });

});

本篇文章将会向你介绍28款非常出色的、实用的参考表单，内容包揽pshotoshop、dreamweaver、色彩、排版、以及其他相关的网页设计工作，他们具有不同的格式，而且所有参考内容都呈现在了一个页面上，易于查看。

Photoshop
Photoshop CS3 快捷键表单

下载: PDF (Windows), PDF (Mac)

图层面板调用键 (HTML)

Photoshop 工具栏参考表 (HTML)

Photoshop 套索工具参考表

下载: PDF

Photoshop 笔刷工具参考表

下载: PDF

颜 色
RGB Hex色普

下载: PDF, PNG

色 谱 (PDF)

Web 网页设计颜色参考六角鼠标垫

下载: GIF

网页安全色表单 (HTML)

16色色谱表 (HTML)

浏 览器安全色 (HTML)

字体
VisiBone字体卡片

下载: GIF

Windows 和Mac下常用字体比对表 (HTML)

混合字体 (PDF)

单位
混合字体像素/点单位比对 (HTML)

百 万像素图

下载: GIF

CSS/CSS 框架
CSS蓝皮书

下载:PDF

YUI数据 库: CSS Reset, Base, Fonts, 以及Grids (PDF)

CSS 速记表 (PDF)

AppleCSS Widget (Mac Dashboard Widget)

HTML/XHTML
HTML & XHTML快速查找表 (PDF)

HTML/XHTML 字符对照表

XHTML 字符对照表 (HTML)

Dreamweaver
Dreamweaver 快速参考指南 (PDF)

Dreamweaver CS3苹果版快速 参考指南 (PDF)

Illustrator
Adobe Illustrator CS2 苹果版快捷键

下载: PDF

浏 览器
浏 览器 兼容性比对表 (HTML)

W3C DOM兼容性表单 (HTML)

下面就是30款令人振奋的矢量绘图网页，或许可以带给你一些启发。