130+个 Web设计工具，让你成为更优秀的设计师

无论你是Web设计的初学者还是游刃有余的资深设计师，可能一些合适的设计工具总能给你带来很多意外的收获，虽然它们功能单一，也并不是那么的光鲜耀眼，但在Web设计过程中，你总需要它们及时的帮助，减少不必要时间上的浪费。这是 Mashable 搜集的130+个 Web设计工具，涵盖了从初学者到高级Web设计人员需要的各种工具和资源，让你的工作更快更好更从容。

初学者资源

YAML Builder - 简单易用的 YAML （Yet Another Multicolumn Layout - 做栏布局）XHTML/CSS 站点布局

Sky CSS Tool - JavaScript CSS 工具

The Box Office - 文字围绕图片的 CSS 格式工具

CSSTXT - 在线 CSS 文字式样生成器

izzyMenu.com - 免费 CSS 菜单
pForm - HTML 表单生成工具
Roxer - 拖放式网站设计工具
Wirenode - 创建移动站点
doodlekit - 在线网站设计及 CMS 系统，含表单生成器，Paypal 构物车，可互换的布局与图片，内置图片库

dotemplate - 可定制的网站模板
templatr - 创建网站模板的在线工具
Agency of Record - 面向创意设计者的网站设计与托管平台。
Typechart - 字样与 CSS 式样
CSS Type Set - 创建个性化 CSS 字体式样

CSSType - 试验各种 Web 安全的排版风格并获得相应 CSS
CSS Builder - 快速生成 CSS
Firdamatic - 不使用 table 设计2或3栏博客版面
PsycHo - 博客模板设计

folionow - 简单易用用便宜的网站设计工具
CSStxt - 自定义 CSS 文字式样
Viviti - 易用的网站设计工具
ComfyPage - 简单易用的免费网站设计工具，可定制模板，并添加任意多页面
LetsEat.at - Free website builder and hosting for restaurants that includes customizable menus, daily specials, printable coupons, and more.用于酒店宾馆的免费网站设计工具。包含可定制的菜单，每日特价，优惠券等。

webon - 免费的，不含广告的网站设计工具，可用来设计博客，像册，视频站
infogami - 快速设计网站，含可定制的模板。
edicy - 创建网站，并使用你自己的域名上线
Jimdo - 网站创建工具，集成了各种图片，视频等
Webnode - 免费创建个人或公司网站，拖放式操作，标签，免费托管

iompi - 创建电子商务网站
easysite.com - 网站创建工具，含照片，视频，博客，免费电话支持
myfamily.com - 免费的，不限空间的家庭网站创建
MomentVille - 免费婚礼网站创建工具
SeeYouThen! - 婚礼网站创建工具，含高分辨率照片交换，私人消息，客人资料等

GoHoster - 支持子域名的免费网站创建工具
BlinkWeb - 免费的拖放式网站设计工具，含电子商务选项
Macrocasa - 房地产行业网站创建工具，包含中介消息系统及客户管理系统
Pixie - 免费的，开源网站创建工具，含直观的界面，容易安装部署

Squarespace - 一个强大网站创建工具，含 XHTML 验证，所见即所得编辑器，博客平台。
NicEdit - 跨平台内容编辑器，可以在浏览器中直接编辑网站内容
WordPress Theme Generator - 使用该工具你可以创建完全定制化的 WordPress 主题

高级专业设计者资源

CSS Superdouche - 净化 CSS 以降低其复杂性
Code Beautifier - CSS 代码格式与优化
CSSFly - 在浏览器中编辑 CSS 和 XHTML
CSS Drive CSS Compressor - CSS 压缩工具

Clean CSS - CSS 净化与优化工具
EM Calculator - 将基于 px 的尺寸转换为 em
CSS Redundancy Checker - 清除未使用 CSS 选择器，检查 CSS 中多余代码
GrayBit - 将彩色网站转换成灰度级以测试其可访问性
ProtoShare - 创建网站模型，从团队获取反馈，创意与建议

Most Sliced - 图片切片服务列表，含评测与用户评分
Inserit - 一个用于 Web 设计师的 CMS 系统
LightCMS -  CMS 系统
clickbooq - 网站创建与管理工具
jumpchart - 网站规划程序，可输出干净的 CSS/XHTML

inblogit - 博客工具，可以集成到任何网站
Reflect - 网站设计与托管平台
Carbonmade - 让设计者们在线展示自己的作品
ThemesPress - 将 Template 文件转换成 WordPress 主题

Feng GUI - Generates heatmaps for your website by simulating human vision during the first five seconds of viewing your website.
Text Generator - Generates lorem ipsum-like text.
webvanta - Free business website builder and hosting aimed at providing design professionals a quicker way to build websites.
Tuplix - Easy to use website authoring tool that works for new or existing websites.
FolioSnap - Website portfolio builder for creative professionals.
Frontfriend - CMS for designers that lets them build forms and templates and then lets their clients fill in their own information.

Graphics, Page Elements and Design Tools

ScrnShots - Host, share and tag your screenshots.
flickrSLiDR - Create and embed a flickr slideshow on your website or blog.
websnapr 2.0 - Online tool for capturing thumbnail of websites.
StyleIgnite - Design snippets (CSS, HTML, and more) for contact forms, layouts, and more that you can use on your sites.

BgPatterns - Background pattern creation tool with live preview.
The Effect Generator - Create animated slideshows, buttons, and more with this tool.
The Color Wizard - Submit a color and this tool will bring back matching colors.
ColorJack - A color scheme gallery that also explores color theory.
My cool button - Web 2.0 button creator.

[ws] Color Scheme Generator 2 - An easy to use color scheme creator.
Cornershop - Get the CSS and images to put rounded corners on your website.
CSSround - Another tool to create rounded corners on your website.
Color Hunter - A color palette creation tool that lets you pull color palettes from images.
Web Graphics Maker - A free tool to create backgrounds, lines and bullets for your website.

As Button Generator - Free Web button creator.
Picreflect - A free tool to create reflections for your photos.
Bradicon! - Create icons from any image.
TabCreatr - Create CSS tabbed navigation for your site.
List-u-Like CSS Generator - A tool to create list-based navigation bars.
text2PNG.com - Convert text headers and navigation to PNG files.

IconsPedia - Free, huge collection of icons.
Genfavicon - A free favicon generator.
QuickRibbon.com - Create custom ribbons with or without links for your site.
Glassy Buttons - Create custom glassy style buttons.
Website Ribbon Generator - Create free ribbons for your site with or without hyperlinks.

4096 Color Wheel - A color scheme generator that shows you Web-safe, Web-smart and unsafe colors.
Web 2.0 Free Logo Generator - Create your own custom Web 2.0 logo.
colordb - Another color palette generator, though this one is much more in depth than most.
colorcombos.com - A huge library of color combinations.
ColorToy 2.0 - A Flash-based color palette generator.
Accessibility Color Wheel - Check the readability of your background and text color combinations. This tool will tell you if there is enough contrast between the two.

Artypapers Buttons - Customize buttons and collect them on your website.
freshbadge - Create Web 2.0 badges for your site.
Favicon Generator Tool - Free favicon creator from Dagon Design.
Favicon Generator - Another free favicon generator.

favicon maker v1 - A free, basic favicon creator that lets you create a favicon from scratch or an existing image.
Stripe Designer - Create background stripes for your website.
Favicon Tool - A free and easy to use favicon generator.
Favicon Generator & Gallery - Create your own favicon or browse those created by others.

Web Script Lab Favicon Generator - Another free favicon generator.
Ajax Loading GIF Generator - Easy to use loading gif generator.
Loader Generator - A tool to create loading spinners.
Gradient Image Maker - A free tool to create image gradients.
Rainmaker - Tag cloud creator.

favicon.cc - Another free favicon creator.
FavIcon from Pics - Create a favicon from an image.
TagCrowd - A free tag cloud creator.
ConvertIcon - Converts ICO to PNG and vice versa.
My Timelines - Create AJAX timelines for your blog or website.

Cymbolism - A color tool that includes information on what emotions and words are associated with different colors.
Color Palette Generator - A tool that creates a color palette based on an image you upload.
Wordle - Create word or tag clouds from any text.
Screedbot - Create animated scrolling text.
Badged.net - Create badges and add them to your website.

Form Style Generator - Create your own CSS-styled Web forms.
reflectionmaker.com - Creates image reflections.
blogsticker - A social sticker directory.
Instant Eyedropper - Grab the color code of any color on the Web with a single mouse click.

Inspiration, Collaboration and Other Resources

FullSingle - A gallery of really awesome single-page websites.
We Love WP - A showcase of WordPress powered websites (not just blogs).
One Page Love - Another showcase of great one-page websites.
Screenalicio.us - A Web design gallery with more than 10,000 screenshots.
CSS Mania - A gallery of almost 12,000 CSS website designs.

The Best Designs - A huge showcase of Web designs and designers.
Pattern Tap - Design gallery of different website elements (headers, 404 pages, and the like).
eduStyle - A Web design gallery specifically featuring academic websites.

finalcrit.com - Free portfolio site for designers.
Should Redesign? - Get feedback on whether or not a redesign is needed for your site.
Designflavr - Design galleries for all sorts of artwork, including Flash and CSS websites.
View - Showcase of website that can be sorted by color or other criteria.

InspirationKing - A searchable gallery of websites for inspiration.
DesignerSource - A website design gallery that is browsable by topic or color.
BestWebGallery - Tagged website design showcase.

StyleVault - Another Web design gallery that lets you rate designs.

本文国际来源：Web Design Toolbox: 130+ New Tools to Make You a Better and Faster Designer

WordPress BBtheme V2.0主题发布

WordPress BBtheme V2.0主题是一款基于WordPress BBtheme V1.0主题的修正版本，虽然在外观上看上去，没有多大的差别，但是在很多细节处理上，都进行了较大的完善，如果你在使用这一套主题的话，建议你更新主题包。
首先，整个主题压缩包中由之前的289KB压缩为177KB，完全为你主机的加载速度考虑。其次，在发布之前主题的文章的留言中博友提到的问题都得到了解决。也是非常感谢你们，就不一一点名。
此外，在这个主题之后，将发布一个基于该模板的浅色调主题，满足更多博友的需求。还有菠萝油的主题也会在不久后发布出来。

下面罗列一下这个主题跟BBtheme V1.0的区别：

1，顶部显示分类列表

这个修改只要是为了讨好搜索引擎，让它能在抓取页面时，更容易找到整个博客的分类，更准确地判断博客涉及内容，有利于SEO；另外，显示在顶部的分类，更方便用户查看浏览。

2，顶部Social BookMark功能

除了在前一主题中，把常用的Social Bookmark书签功能写到了single.php页面中去之外，也把这些收藏书签放到了整个博客的顶部，这样用户除了单篇推荐收藏你的文章之外，还可以把你整个的博客推荐收藏到这些社会化书签网站。
考虑到该主题的更好的适用性及总体功能考虑，还是去掉了这个不太重要的功能。

3，重写博客标题、优化Logo图标

在该主题中，重新对博客标题Logo做了完善，重写了DIV+CSS代码，因为之前四四方方的Logo看起来实在是跟主题不相匹配，在这个主题中，你只要在后台填好博客标题，前台显示基本就跟菠菜博现在的圆角图片显示效果一样了。
当然如果你的博客标题如果过长的话，你需要修改style.css文件，在代码中查找“width:220px; height:89px;”代码，修改width:220px为你要的宽度即可。

4，优化订阅图标、按钮图标、背景图片

之所以能把图片压缩1/2，就是对这些包括背景图片、按钮图标、订阅图标等等做了优化，评论提交按钮、订阅按钮、搜索按钮都更漂亮直观，但文件大小却小了非常多。

5，其他细节修改

除了这些大的改动之外，还解决了有侧边栏内容溢出，文章中的无序列表、有序列表及引用的样式，评论标题右对齐等细节问题。
在发表评论表单下，增加上一篇、下一篇功能，在用户浏览至页面底部时，可以立即通过链接进入上一篇、下一篇文章继续阅读。

6，所需插件

你需要安装2个插件支持该主题：WP-PostViews（记录文章浏览次数的插件）和WP-PageNavi (文章分页插件)

7，主题预览/下载地址：

————————  菠菜画出的优雅的分割线  2008.10.29 更新  ————————
感谢Kenny童鞋的火眼金睛，给我找出了不少问题，也让我忙碌了一个晚上来修正。修正问题包括：
1，修正文章正文中，小图居左居右显示不正常；
2，修正部分背景图标定位不精确；
3，删掉了sidebar.php中backlinks的代码(之前测试时加上的，后来忘了删了)；
4，修正Logo图标在IE6下的鼠标激活样式；
如果你在主题使用过程中遇到问题，麻烦给我留言，我会尽快回复帮你解决。

WordPress BBtheme CMS主题 最终版

WordPress BBtheme CMS主题经过前面3个测试 版本的发布，在众博友齐心协力的帮助下，修复了很多的bug，完善增加了很多的基本功能，现在终于可以心有余悸地发布这个最终版了，但是，相信还是无法满 足所有主题用户的需求，毕竟是众口难调，如果你需要定制自己的效果和功能，那么你可以查找相关文档自己搞定，或是加入我们的群讨论。

较之之前的版本主要修改完善的地方包括：

1，解决随机文章显示问题，不再导致文章评论的随机；
2，首页分类文章列表添加日期功能；
3，文章作者添加链接，满足多用户博客需求，点击文章作者，进入该作者的所有文章列表页面；
4，修改了部分样式的浏览器兼容性问题；
5，进一步对部分背景图片作了美化。
详细的安装使用教程你可以参考之前的几篇文章：
WordPress BBtheme CMS主题 Beta3
WordPress BBtheme CMS主题 Beta2
WordPress BBtheme CMS主题发布

WordPress BBtheme CMS主题 最终版（含插件） 下载地址：

遇到安装使用问题，你可以加入我们的QQ群寻求帮助：23677196

Inbox.com - @inbox.com可绑米支持POP3、SMTP的2G免费邮箱

Inbox.com为广大用户提供2G存储空间（美国、加拿大、英国用户是5G存储空间）免费电子邮箱，附件限20M以内（如安装客户端软件可支持 50M附件），支持POP3、SMTP，功能不少，常用功能基本都具备，而且还可以绑定自己的域名，完全就是个免费企业邮局！另外，Inbox.com还 附带提供免费网络硬盘服务以及免费网络相册服务，单个文件限20M以内，如使用客户端软件可支持50M，网盘还可以，速度不错，但免费相册上传照片需要审 核才能显示，就没什么意思了。
网址：http://www.inbox.com
Inbox.com申请的时候需要填写手机号码，然后Inbox.com给你发送激活码，用这个激活码才能激活帐户，此过程不收费。
使用POP3、SMTP需要激活此功能：
登陆帐户后，点页面上方的“Settings”按钮，点左面的“POP3 Access”链接，再点“how to activate POP3 access”链接，最后点“Activate POP3/SMTP Access”按钮即可。
POP3和SMTP邮件收发服务器为：my.inbox.com。
另外，Inbox.com还提供绑米功能，地址是：http://email.inbox.com/md/mhost.aspx。
填上你要绑定的邮箱，如：inbox@aldsd.com，点“Continue”按钮，然后将你绑定的邮箱域名MX邮件记录解析到 “inc.inbox.com.”，勾选下面的协议，点“Continue”按钮提交申请，耐心等待Inbox.com校验你的解析，如果解析设置没问 题，大约一小时左右Inbox.com会给你发送你的域名已经被激活的通知信，你绑定的域名邮箱就可以使用了。
域名激活后可以进入：http://email.inbox.com/md/acclist.aspx添加你的域名下的邮箱帐户，每个邮箱帐户也是2G空间，不过不是太清楚总共可添加多少个邮箱。

Office Live Small Business - 500M支持ASP.net免费网站空间

Office Live Small Business是由Microsoft（微软）推出的免费自助建站服务，但可以设置为免费网站空间，500M容量，网络客户端上传管理文件，提供100 个免费邮箱帐户，支持ASP.net，提供可自定义免费域名1个，也可以绑定自己的顶级国际域名，无广告。Office Live Small Business对于美国用户免费提供国际域名一个以及100美元广告费，需要绑定信用卡。
网址：http://smallbusiness.officelive.com
点绿色“Get Started Free”按钮，如果出现国家语言选项，选择美国（United States）就行了。接着填写你的邮箱（注意：好像除了微软的Live系列邮箱以外都收不到激活信）点“Next”按钮，你的邮箱中会收到激活信，如果 之前你的邮箱帐户已经有使用过微软的在线服务，可能提示你无需激活，直接登陆即可。然后输入你的姓名点下面的按钮，再点右下角按钮接受协议，免费空间即可 开通，点蓝色大按钮登陆你的空间管理面板了。
绑米方法：点“Get a Web address”，点最下面的“Use Your Own Domain Name”绿色按钮，再点“Use your own domain name”链接，输入你要绑定的域名（只支持顶级国际域名），点旁边的按钮确认。由于偶没有富裕的顶级国际域名，故此剩下的步骤无法测试，请有兴 趣的朋友自己试试吧。