Web开发/设计人员应当知道的15个网站

悠悠 2022-09-30 06:17 209阅读 0赞

建个好网站绝非易事，工欲善其事必先利其器。本文编译了15个极其有用的网站，任何一位网站开发者或设计人员都应该收藏起来。

**ColorCombos**

![94_110412131833_1.png][]

在进行网站设计的时候，开始步骤的其中一项（也是最重要）的内容是选择出一个配色方案。

Color Combos让你可以浏览上千个不同的颜色组合，以便从中为你即将开始的设计汲取灵感。其配色方案可按颜色浏览。

[点此浏览colorcombos.com][colorcombos.com]

**LIpsum**

![94_110412131956_1.png][]

风靡之至的Lorem Ipsum文字，其大名谁人不知？哪个不晓？（译注：汗一个，查了才知道，这是指一篇用于测试排版设计的拉丁文文章，从15世纪开始就被广泛使用，文章因以Lorem Ipsum开头而得名）该段文字被全球各地的网站设计者用来在设计中对其真正的文字的呈现效果进行仿真。

Lipsum.com让你可以创建所需数量的*Lorem Ipsum*自然段，快速又简便。

[点此访问LIpsum.com][LIpsum.com]

What the font?

![94_110412132057_1.png][]

你刚看到一个标志或网站使用了一种特别的字体，你很喜欢它。很想在自己的设计中也使用同样的字体......但是你不知道字体的名字。在这个问题上你只有两种解决方案：花数小时寻找该字体，或者利用*What the font*的服务*。*

“是什么字体”这项服务让你可以上传一个含有字体的标志或图像，然后告诉你该字体是什么。结果令人惊叹。

[点此访问 What the font][What the font]

**ConvertIcon**

![94_110412132202_1.png][]

对任何何网站来说，收藏夹图标都是必不可缺的，其主要原因是在现代浏览器如火狐上，它会随着网站名字出现tab栏上。书签也用到它。

收藏夹图标可以有多种不同的文件格式，包括流行的.png。唯一的问题是使用png作为你网站的收藏夹图标文件格式的话在IE浏览器上不起作用。令人欣慰的是，有一个免费的在线图标转换服务*ConvertIcon*，这项服务允许你上传图片然后返回一个.ico文件给你，这样就可以解决跟微软IE浏览器的兼容性问题了。

[点此访问ConvertIcon][ConvertIcon]

**BgPatterns**

![94_110412132308_1.png][]

背景花纹图案无疑是当今网站设计的趋势之一。

在*BgPatterns.com*，你可以浏览花样繁多的花纹并可以免费用到你的网站上。

[点此访问BgPatterns][BgPatterns]

**HTML Encoder**

![94_110412132357_1.png][]

你需要在自己的网站上显示代码吗？如果需要的话，你也许就会明白那有多烦。实际上你就不得不敲*<* to display *<。*如果你要显示50行的代码的话，手工转换HTML符号有可能就要花上一些时间了。

让你只需提供代码就可为你返回转换后的HTML实体。我每天都要用它来在自己的博客上展示代码。

**HTML Converter**

注：相应还有一个[HTML Decoder][]。

[点此访问HTML Encoder][HTML Encoder]

**Xenocode Browsers**

![94_110412132443_1.png][]

依我之见，*Xenocode*浏览器乃测试网站在不同浏览器显示效果的终极浏览器。*Xenocode*允许你从网上直接加载IE6、IE7、IE8、Firefox 2、Firefox 3、Google Chrome以及Opera。唯一的弱点是：对于允许Macs和GNU/Linux的PC来说其服务不可用。

[点此访问Xenocode浏览器][Xenocode]

**Test Everything**

![94_110412132526_1.png][]

除了想在许多浏览器中测试设计以外，你是不是还期望能在同一个地方测试页面的页面排名（PageRank）甚至验证自己的代码对标准的兼容性？

如是，则*Test Everything* 是你不容错过的网站。此站聚集了超过100种不同的工具，让你几乎可以测试网页上的任何东西。

[点此访问Test Everything][Test Everything]

**Sprite Generator**

![94_110412133318_1.jpg][]

毫无疑问，样式表贴图定位（CSS Sprite）是可供使用的一项伟大技术，主要是因为它减少了HTTP请求的数量。不过，样式表贴图定位需要时间和特定技术，这使得这项技术优点难以使用，尤其是对新手而言。

令人惊艳的*Sprite generator*让你可以发送一个含有图像的zip压缩文件。然后它把你的图片结合进贴图定位中返回给你，更妙的是，还可以把CSS代码页生成出来，你只需粘贴到主CSS文件中去即可。

[点此访问Sprite Generator][Sprite Generator]

**Buttonator**

![132F46015-8.png][]

对于任何一个庄重的博客或网站来说，好看的按钮无疑都是必备之物。如果你不了解这一点，或者没时间来创建一些酷酷的按钮，别担心：*Buttonator* 是一个先进的按钮生成器，还可以免费使用。

此外，如果你对CSS按钮感兴趣的话，别忘了看看我们的[十大CSS按钮指南清单][HTML Decoder]。

[点此访问Buttonator][Buttonator]

**Load Impact**

![132F45943-9.png][]

当网站名字出现在流行网站如Digg或Stumble的首页上时，你曾有过多少次看到过那些网站是宕掉的？

免费的*Load Impact*服务允许你对自己的网站应对各种不同的流量冲击进行测试。[WpWebHost][HTML Decoder]托管的网站的结果非常出色。

[点此访问Load Impact][Load Impact]

**IconFinder**

![132F43L7-10.png][]

好看的图标在任何一个专业网站那里都是不可或缺的。网上有许多免费的图标，因此*IconFinder*那帮家伙决定创建一个免费图标集散地供你用于设计。毫无疑问，在此你可以轻易地在几秒钟时间内找到想要的东西。

[点此访问IconFinder][IconFinder]

**TypeTester**

![132F4O56-11.png][]

测试设计中的字体显示效果有时候是一件吹毛求疵的行为。令人欣慰的是，TypeTester可以让你测试字体及其属性的显示效果。绝对节省时间。

[点此访问TypeTester][TypeTester]

**CSS Tidy**

![132F4I15-12.png][]

即便是高级的开发人员经常也要去优化其CSS代码。*CSS Tidy*是免费的在线应用，可修正CSS代码的错误并对其进行优化。比如说，它可自动侦测冗余的样式，这是很常见的CSS代码错误。

里面有非常多的设定，可确保你对结果满意。

[点此访问CSS Tidy][CSS Tidy]

**Contact Forms Generators**

![132F44P7-13.png][]

对于任何一个网站来说表单都是非常重要的一部分，因为它们允许你的读者或客户跟你进行交互。通过利用*Contact Forms Generator*，可生成从网站发送电子邮件到你的邮箱去的PHP、ASP或甚至是Perl代码，你将会在创建表单方面节省下宝贵的时间。

[94_110412131833_1.png]: /images/20220708/db4c0476ec224a39b9032d49f6860293.png
[colorcombos.com]: http://www.colorcombos.com/
[94_110412131956_1.png]: /images/20220708/189caaa8cae74b78a3b471e06c0dbea8.png
[LIpsum.com]: http://lipsum.com/
[94_110412132057_1.png]: /images/20220708/ef30f19263aa4f42a9a5ea0b9d1bc530.png
[What the font]: http://new.myfonts.com/whatthefont
[94_110412132202_1.png]: /images/20220708/a437837629364688bf0bf001cdf2c215.png
[ConvertIcon]: http://www.converticon.com/
[94_110412132308_1.png]: /images/20220708/29ba4c1f743f4059827ff1e32a198be9.png
[BgPatterns]: http://www.bgpatterns.com/
[94_110412132357_1.png]: /images/20220708/14ea04274ef8473993b78567059c86a5.png
[HTML Decoder]: http://www.catswhocode.com/blog/15-sites-web-developers-and-designers-should-know
[HTML Encoder]: http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
[94_110412132443_1.png]: /images/20220708/2cf7225a8e244beba7cc0984101a2a85.png
[Xenocode]: http://www.xenocode.com/browsers/
[94_110412132526_1.png]: /images/20220708/a91e03d29fb148799dd36c6cd5e50df3.png
[Test Everything]: http://tester.jonasjohn.de/
[94_110412133318_1.jpg]: /images/20220708/dadb03a55043479d8843774a4df19e7e.png
[Sprite Generator]: http://spritegen.website-performance.org/
[132F46015-8.png]: /images/20220708/b4eeb4fdb4af466684e363f510b8c9a0.png
[Buttonator]: http://www.buttonator.com/
[132F45943-9.png]: /images/20220708/c1076c3465a64c59b1d3a29ce0d47062.png
[Load Impact]: http://loadimpact.com/
[132F43L7-10.png]: /images/20220708/8e3e6bcab49b4785bda51a9bea27c7f0.png
[IconFinder]: http://www.iconfinder.net/
[132F4O56-11.png]: /images/20220708/608921094eab4f58a13d3c8eaf74d7a4.png
[TypeTester]: http://www.typetester.org/
[132F4I15-12.png]: /images/20220708/9910b78bb69540939a9265345673b7a8.png
[CSS Tidy]: http://csstidy.sourceforge.net/index.php
[132F44P7-13.png]: /images/20220708/731d54444c7b4abdaea7c3007472a0a7.png