但是HTML5是个非常新的标准，各个主流的浏览器对它的兼容程度不一，这一点上Flash有非常大的优势。为了让开发者了解到各个浏览器对HTML5的兼容状况有个了解，这个HTML5的浏览器兼容图表就非常有帮助。

希望这3张图表对于需要的童鞋们能起到帮助。

网页设计师在完成自己的作品后一般都需要进行各种测试，其中之一就是测试制作完成的网页在不同设备中的显示效果。网页有可能在电脑上显示，也有可能会在手机上显示，也有可能在现在非常受欢迎的平板电脑比如iPad上显示。不同的设备都有大小不同的分辨率，不同的分辨率又可能会影响网页的现实效果，所以设计师在把作品展示给用户看之前需要进行各种测试，以保证能够正常显示。Screenfly就是这样一个模拟不同设备不同分辨率的网页工具，简化了自己挨个模拟的步骤。

Screenfly

Screenfly使用起来很简单，只要输入需要测试的网址，然后Screenfly就会自动加载页面，接着在窗口中显示。Screenfly可以模拟桌面电脑，平板电脑，手机和电视这四种不同的设备，而且每种设备可以以不同的分辨显示，挺方便的。这年头越来越多的人用手机上网，手机的分辨率不如电脑，所以为了保证页面的浏览质量，有必要测试在手机上显示的效果。对于网页设计师来说的确是个很方便的工具。

设计中经常会需要纸质的一些素材，这些素材在关键时候会感觉相当的难找，更难的是还要找风格统一的纸质素材。我在工作过程中收集了若干高质量的纸质素材，更为难得的是这些还是矢量素材，这意味着不用受到素材尺寸的限制了。我特意将这些文件打包，提供下载。

打包下载

字体的选择对于设计的重要性不言而喻，一款字体甚至能够决定一幅作品的成败。为设计稿中的文字选择一款合适的高质量的字体能够使整个作品更上一个台阶。合适的字体能够让设计看起来更协调更美观。这里推荐11款高质量的免费字体，是我花费了大量时间收集，整体，精选出来的字体。对于设计来说，正确的选择这些字体能够让设计更上一个台阶。

AkaDora

AkaDora是款手写体风格的字体，虽然不太适合作为正文字体来使用，但是作为标题效果却非常的好，很有活泼灵动的感觉，看起来很轻松惬意。

Cicle

Cicle字体如同他的名字一样，字体很圆润，线条很细，很有现代的感觉。Cicle字体的x高度比较大，小写字母看起来有点偏瘦。

Colaborte

Colaborate字体显得很特别，尤其是字母t的字尾部分，往下拖到了x高度以下。作为正文使用挺合适，另类的小写字母t看起来反而更有感觉。

Comfortaa

Comfortaa字体非常的圆滑，善用Comfortaa字体会让设计看起来更时尚。但是作为正文字体来说，Comfortaa字体的易读性不是很好。

Delicious

Delicious字体就如他的名字，让人感觉的确很美味。Delicious字体并不是非常的个性化，也不张扬，但是却非常的好搭配使用。瘦长的字形看起来更具有典雅风格。

Eurostile

Eurostile字体算是一个非常经典非常老牌的字体了。这款诞生于欧洲并以欧洲命名的字体诞生于上个世纪中期，经历了数十载却依旧好不落伍。Eurostile字体外形呈现为近似圆角矩形的外观，具有科幻电影里电脑屏幕上的代码的感觉。

Fontin

Fontin字体是一款Serif字体，整体外观看起来如同流水一般，作为正文使用易读性很好。Fontin字体具有Serif字体的特征，但又不完全遵从于Serif字体的全部特征，尤其是截线的部分，非常的收敛。

Gentium Plus

Gentium Plus是款典型的Serif字体，相比Fontin字体，Gentium Plus字体的截线更为明显，显得更为正式一些。

GeoSans Light

GeoSans Light字体也是一款小写字母字形圆润的字体，但是x的高度却并不高，而个别字母却又非常有特点。比如小写字母t，直接去掉了字尾。

Mank Sans

Mank Sans字体也是一款细体字体，而别字母显得非常规，比如小写字母l，Mank Sans字体中拖出了一个很长的字尾。

Vegur

Vegur字体较为正式，看起来与经典的Helvetica字体有几分神似，但是字间距却要大不少，这样就增加了文字的易读性。

这11款字体包含了Sans Serif字体与Serif字体，以及特殊的手写体风格的字体。这11个字体都是高质量的免费字体，但是至于在设计中的效果的好坏取决于设计师对字体的选择以及搭配。打包下载

近些年以Facebook和Twitter为首的SNS网络越来越流行，做设计也需要融入这些SNS的元素，让用户可以更方便分享好东西。最近收集了一套非常漂亮的SNS社会化网络书签图标，一共有17枚。

这套图标中包含Facebook，Twitter，YouTube三大最受欢迎的网站，另外还包括MySpace，Google等图标。这17个图标都很漂亮，放在网页中效果很不错。如果喜欢的话就下载吧。

下载地址：17 SNS Social Bookmarks

一年一度的西方万圣节就快要到了，微软最近也发布了Windows 7的万圣节主题与壁纸。什么不知道万圣节是哪一天？我告诉你，是10月31号，可要记好了。万圣节也称为鬼节，所以Windows 7万圣节主题与壁纸也充满了诡异的气氛。

整个主题包含Windows 7主题配色，系统声音，壁纸，一共有10M左右。

下载地址：Windows 7万圣节主题

2008年9月，Google发布了自己的浏览器Chrome，在两年不到的时间里，Google Chrome成为了位于IE和Firefox之后市场占有率第3高的浏览器。另外，不到两年的时间里，Google Chrome浏览器的版本已经升级到了6.0（Dev版本），堪称地球上升级速度最快的浏览器。自从4.0的版本开始支持插件后，Google Chrome发展的更快，插件越来越多。其中包括不少能够帮助Web设计师提高工作效率的插件，为此我特意挑选了8个作为推荐。

IE Tab

如果你用过Firefox，那么你肯定对IE Tab再熟悉不过了。同Firefox版本的IE Tab一样，Chrome版的IE Tab也是显示IE下的效果，但是功能上要比Firefox版的少了不少，但是最核心的功能还是保留下来了。

Web Developer

熟悉吧，这个也是Firefox上的版本移植过来的，功能基本和Firefox版本的没有差别。同样可以修改HTML，CSS等信息。

Firebug Lite

大名鼎鼎的Firebug也出Chrome版本了，注意这里是Lite版本，也就是说相比Firefox中的Firebug，Chrome里的Firebug是精简版的，保留了大部分功能但是还是少部分功能没有实现。有总比没有好，再说功能也基本足够用了。

Pendule

这个插件类似于Web developer，同样都是修改页面的，功能上没有Web Developer全面，但是也还有一些自己独特的功能，比如在GET与POST方式中转换。

jQuery Shell

顾名思义，这是个jQuery的命令行工具，可以通过编写jQuery代码来对页面进行调试，相当的方便！jQuery是世界上使用率最高也是最受欢迎的JavaScript库。

Eye Dropper

这是个拾色器插件，可以直接在调色板中选取颜色。光有这样还不够，如果只能这样的话还不如在Photoshop中调色。Eye Dropper可以从网页中拾取颜色，这样就很方便的从网页中获取到颜色值。

Chrome Sniffer

这其实是个探测器，用于测试网站使用了那些平台或者库。这里我打开了jQuery的官方网站，于是地址栏中的图标就显示了这里采用了jQuery库和Google Analytics。

Webpage Screenshot

顾名思义，这是个截取网页截图的工具。可以选择截取可见区域或者是网页的全部区域，功能类似于Firefox中的Screengrab扩展。

以上都是我个人的经验总结。相比Firefox的扩展，Google Chrome的扩展数量和质量都有所欠缺，不过这不是问题，凭借Google的号召力，这些问题很快就能解决。但是Chrome的优势在于安装插件迅速，而且不用重新启动浏览器。

作为网页设计师，如果只和Dreamweaver，Eclipse这些IDE打交道是不够的，这些软件只是开发平台，并不包含强大的调试工具，或者说调试工具功能平平。如果你使用的是Firefox浏览器的话，那么大量的扩展支持可以丰富Firefox的应用范围，其中包含了大量方便Web设计师的工具。因此，我选择了9个较为常用或者重要的扩展作为推荐。

Web Developer

Web Developer是个相当强大的调试工具，可以针对HTML，CSS，图片，JS，Cookie做调试。Web Developer可以对网页上的每一类或者具体到每一个元素做出调试，比如显示DIV顺序，显示图片alt属性。可以说Web Developer是最为重要的一个调试与测试工具。

Firebug

大名鼎鼎的Firebug几乎每个人都知道，他的强项在于它调试功能非常强，不管是查看HTML或者CSS结构，还是JavaScript都能很好的胜任。在Firebug中可以直接以CSS的盒子模型来查看元素的属性等等。

IE Tab / Coral IE Tab

顾名思义，IE Tab就是在Firefox中模拟IE下显示效果的扩展。众所周知，微软的IE系列对于W3C的标准支持相当的糟糕，而且还喜欢自己树立一套标准，这对开发人员来说简直就是灾难。由于IE市场占有的高居不下，开发人员有必要保证让使用IE的用户也能看到正常的页面，所以需要在IE中测试效果。而IE Tab可以直接在Firefox中模拟IE中显示的效果，而不需要打开IE再测试，相当的方便。另外IE Tab对于非开发者来说也很有用，因为中国的网络银行比较恶心，很多只能在IE中运行，甚至包括IE6-only的，因为IE Tab可以帮助用户直接在Firefoz中操作网银。Coral IE Tab是IE Tab的增强版，支持Cookies等特性。

User Agent Switcher

很好理解，User Agent Switcher就是在不同的User Agent中切换的，方便查看在不同的User Agent下的显示效果。不明白什么是User Agent？这里有解释（英文）

QuickJava

名字中只包含Java，但是QuickJava能干的事情不只是与Java有关。QuickJava其实是迅速的打开/关闭Java，JavaScript等特性的开关，测试在未开启这些特性的浏览器上的显示效果。包括JavaScript，Java，Flash，SilverLight，图像，CSS。

HTML Validator

这是个HTML验证器，检测制作出来的HTML页面是否符合W3C的标准，包含3种测试算法。其实只要做出来的页面没有错误的话，在大多数浏览器上都能够正常显示。

View Source Chart

此扩展能够将源代码格式化为结构性强的视图，就像上图中的这样，一眼就能看出来源代码的结构，检查起来比较方便。

Screengrab

其实这个是用来截取页面内容的插件，看似和设计关系不到，但是截取整个页面的内容，作为成果展示，这样的插件还是不错的。

FireFTP

顾名思义，这是个FTP扩展。设计出来的东西总归要上传到服务器上的，使用单独的FTP软件比较麻烦，而使用FireFTP的话直接可以在Firefox的标签中上传，相当的方面。

以上扩展是我个人的归纳与总结，如果你有什么推荐的话可以告诉我。

纵使非常有经验的网页设计师也不可能有能力把所有的CSS选择器和属性全部记住。这个CSS帮助手册就是用来查询用的，分为CSS 2.1和CSS 3，内容不多，都是最主要的东西。如果可以打印下来放在桌上或者挂在墙上什么地方，想不起来的时候看一下就OK了。

CSS 2.1的帮助手册包含语法，字体，外边距，内边距，边框，位置，背景，列表，媒体类型和关键字。CSS 3帮助手册包括圆角边框的小段代码，阴影，多列，文字阴影，包含透明度的RGB值等等。帮助手册分为PDF和JPEG格式。

下载

CSS 2.1 Help Sheet.jpg
CSS 2.1 Help Sheet.pdf
CSS 3 Help Sheet.jpg
CSS 3 Help Sheet.pdf

网页的设计对于网站来说非常重要，但是设计UI并不是容易的事，要么是设计的不太好看，要么是不太好让多个元素的风格保持一致。为此，提供一套国外高手已经做好的免费的UI设计模板，内含一个PSD源文件，直接使用这个文件切图就可以了。

以下是这套UI的预览，可以事先预览一下效果，满意的话再下载。如果你觉得太小看不清的话可以下载下来看，里面有一张JPEG格式的预览图。顺便说一句，解压出来的源文件有18M多，但是我压缩成7z格式就只有212K，压缩率达到了1%。

下载这套UI