20个网页设计师必备的工具网站

对于网页设计 师（这里泛指前端和设计）来说经常会处理许多网页问题，比如配色，字体，CSS浏览器兼容性等。基本上每天我们都会为这些问题而消磨大量的时间，有时候我 们为了提高效率就会需要一些辅助类的工具，以下这20个网站就是整理出来转为网页设计师提供的，他们每个都能为您解决一个问题。相信可以为你轻松的制作和 设计网页提供帮助。

Typetester

Typetester是一个在线生成文本排版样式。如何比较不同的字体和字体属性将出现在一组给定的文本中的不同视觉效果。我们把调整好文本排版样式，生成可用的CSS样式代码。
其主要作用是使web前端设计师生活更轻松，使他们能够快速，方便地在同一页面上比较不同的字体视觉，太方便了。

pForm

创建一个PHP的Form 只需几秒钟内。只需3步，第一步：选择颜色，第二步：设计您的Form ,第三步：下载HTML 。这是一个自由和易于使用的工具。
如果您觉的免费版的功能不能满足您，那就付费吧！

ColourLoversColourLovers 中文版

创造性的启发性的颜色爱好者网站。您可以根据你搜索的网站进行调色。你可以使用的网站上现有的项目或创建新的调色板并与同行交流和评价。伟大的灵感或批判的设计理念。

Firebug

Firebug 和 firefox 整合在一起，使你浏览网页时手边有了一套强大的网页开发工具。Firebug从各个不同的角度剖析web页面内部的细节层面,给web开发者带来很大的便 利。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。这可能是一个使用最广泛web开发工具。

HTML Entity Character Lookup

在您的网页上如何显示特殊的符号，并且是HTML Entity 形式的，我们只需搜索就能找到相匹配的的HTML实体。例如，
在字母“ C ”将匹配 © 和￠实体，正如你所看到的一样。

960 Grid System

The 960 Grid System is 960网格系统是为了简化web开发工作流程，之所以叫960，就是说模板的宽度是960像素。而之所以用960像素来做为标 准，是因为960像素宽具有高度的灵活性，它可以按2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320和480来进行划分。请看实例
Watch an in depth screencast on this framework.

Em Calculator

Em calculator is 一个用JavaScript编写的字高（EM）和像素(PX)换算的小工具，它可以让您输入一个像素大小并显示相应的字高大小。这个工具非常易于使用和便捷的快速参考。

Browser Shots

浏览器快照，您可以查看您网站中的约100名不同的浏览器的4种不同的平台上的支持情况，以确定最终的跨浏览器的支持情况。鉴于今天有许多不同类型的操作系统的存在，重要的是要确保您的网站能被更多最好的的平台所支持成为可能。

Icon Finder

Icon Finder图标搜索为您提供高质量的图标，为web设计者和开发者在短的时间内提供一个合适的Icon，是一种简单而有效的方式。您只需键入一个关键字到搜索框中，就能找到您所需要的美丽图标，您可以自由使用。

WhatTheFont

想知道你最喜欢的字体应该什么的样的吗，只要上载带有字的图片，此工具将尽最大努力实现与之匹敌的字型。

MeasureIt

MeasureIt – 网页元素尺寸随意量，伟大的Firefox的插件，可以让您抽出一把尺子在任何内容网页上，获得像素的宽度和高度。

ColorZilla

利用ColorZilla您可以从浏览器中的任一点读取色彩值,快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。内建的调色板浏览器允许您从预定义的颜色集中选择颜色或将最常用颜色保存到自定义调色板。

Pingdom

Pingdom tools，是一项免费的线上服务，可让让测试你的网站加载速度，你只需要输入你的网址，就可以轻松得到一份有关你的网站加载的详细资料，包括图片, CSS, Javascripts, Flash和RSS等。

Test Everything

Test Everything是一个功能超级强大的在线站长工具箱,将100多种(准确的说是128种)在线检验服务整合到了一起。
测试项目非常全面,包括 CSS / HTML 验证,SEO 工具,社会化服务,web 代理等等,似乎除了网页开发者的性别,都包含在内了。网页设计和开发者们可以去看看,视觉效果不错。

CSS Sprite Generator

CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数. 多个图片将以一定间距合并为一个大图片文件. 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置。

这一技术可有效提升网站性能, 尤其是网页上有众多小图片时, 如许多菜单栏图标. Yahoo! 首页是使用此技术的一个实例。

Web Developer Toolbar

一个非常有用的Firefox插件提供了很多工具，网页开发人员使用的日常。大快速验证XHTML或检查HTTP头信息。
想了解更多请看
Web Developer Toolbar 10個鮮為人知的功能

Domainr

如果你认为Del.icio.us这种域名很有美感，而且你正在域名上寻找创意，那好，Domainr绝对适合你。

这个网站会把我们的输入变成非.com非.net非.org的域名，或者把其中的一部分变成目录名称，这些后缀一般都是不常见的国别TLD，总之目的就是把地址变的非常极客。

Font Burner

字体燃烧器是一个免费的在线工具，让您可以搜索超过1000字体我们所拥有。一旦你找到了你喜欢的字体，该工具会为您提供了一小段代码，让您使用的字体在您的网站上，免费的。 字体然后将每部电脑上显示，无论如果用户已经安装的字体或没有。

Smush.It

Smush.It 这是一个在线批量压缩图片工具，支持批量压缩图片，在无损图片质量的前提下达到图片大小的最优化压缩。用户可以从本地上传图片，也可以输入图片所在的URL地址进行压缩，压缩完毕之后下载zip格式压缩包，解压后便可以使用图片了。

Load Impact

Load Impact 是一个免费的工具，测试您的网站在不同负荷水平，然后将结果生成不难理解的图表。只需要输入网址进行测试，其便可以统计出加载网站的一些详细载入数据。包 括整体加载和站内图片，javascript, CSS等代码载入。可以在右侧列表选择不同文件来同时对比最多三个对象的加载数据，并生成图表显示，方便网站设计者来分析。

The End!

希望你发现一些更有用的清单。这绝不是一份详尽的清单，但只是一份工具清单。但我希望它能帮助你减轻繁重的web前端技术开发。