77个前端设计利器-优快云博客

<<div class="content"><BIG><BIG>有了这 77 个工具，还怕什么？</BIG></BIG><BIG><BIG>配色工具</BIG></BIG>配色最痛苦了。（= =）更多配色工具请参考：<A href="<a href=" _fcksavedurl="<a href=" _fcksavedurl="http://www.vandelaydesign.com/blog/design/find-the-perfect-colors-for-your-website/" target="_blank">为你的网页组合出一个完美的配色方案</A> <UL><LI><A href="http://www.colorschemer.com/schemes/" _fcksavedurl="http://www.colorschemer.com/schemes/" target="_blank">Color Schemer Gallery：配色展览馆</A> <LI><A href="http://www.colourlovers.com/" _fcksavedurl="http://www.colourlovers.com/" target="_blank">COLOURlovers</A> <LI>
<A href="http://www.digitdesigns.com/colrPick/framePic.htm" _fcksavedurl="http://www.digitdesigns.com/colrPick/framePic.htm" target="_blank">Website Color Picker</A> <LI><A href="http://redalt.com/Tools/I+Like+Your+Colors" _fcksavedurl="http://redalt.com/Tools/I+Like+Your+Colors" target="_blank">I Like Your Colors：喜欢某个网站的配色？就用这个工具。</A> </LI></UL><BIG><BIG>免费的 CSS 导航栏菜单</BIG></BIG>导航栏的重要性不用多说，尤其是一个动感十足有易用的。网上已经有大把的模板，稍稍修改一下就可以用啦。<UL><LI><A href="http://css.maxdesign.com.au/listamatic/" _fcksavedurl="http://css.maxdesign.com.au/listamatic/" target="_blank">Listamatic</A> <LI><A href="http://exploding-boy.com/images/cssmenus/menus.html" _fcksavedurl="http://exploding-boy.com/images/cssmenus/menus.html" target="_blank">Exploding Boy</A> <LI><A href="http://www.alvit.de/web-dev/tabs-and-pure-css-navigation-menus.html" _fcksavedurl="http://www.alvit.de/web-dev/tabs-and-pure-css-navigation-menus.html" target="_blank">Alvit.de</A> <LI><A href="http://www.dynamicdrive.com/dynamicindex1/indexb.html" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex1/indexb.html" target="_blank">Dynamic Drive</A> <LI><A href="http://www.vandelaydesign.com/cssmenus/lists.htm" _fcksavedurl="http://www.vandelaydesign.com/cssmenus/lists.htm" target="_blank">Our own collection of CSS Menus</A> </LI></UL><BIG>制作 DHTML 导航栏软件</BIG><A href="http://www.xtreeme.com/dhtml/" _fcksavedurl="http://www.xtreeme.com/dhtml/" target="_blank">Xtreeme DHTML Menu Studio</A>（要 49 刀，#sfufoet：类似的一款软件：Sothink DHTML Menu，也是收费软件。）<BIG><BIG>找呀找照片</BIG></BIG>照片拿来做什么？这个我就不懂了。有谁懂？麻烦留言。谢啦。<UL><LI><A href="http://www.sxc.hu/index.phtml" _fcksavedurl="http://www.sxc.hu/index.phtml" target="_blank">Stock.Xchng</A> – 大量免费照片 <LI><A href="http://www.stockxpert.com/" _fcksavedurl="http://www.stockxpert.com/" target="_blank">Stock Expert</A> – 要付出一些些钱的照片。 <LI><A href="http://www.istockphoto.com/index.php" _fcksavedurl="http://www.istockphoto.com/index.php" target="_blank">iStockphoto</A> - 同上 <LI><A href="http://www.bigstockphoto.com/" _fcksavedurl="http://www.bigstockphoto.com/" target="_blank">Big Stock Photo</A> - 同上 </LI></UL><BIG><BIG>图标</BIG></BIG>好图标绝对很抢眼。<UL><LI><A href="http://www.iconfinder.net/" _fcksavedurl="http://www.iconfinder.net/" target="_blank">IconFinder.net</A> – 图标搜索引擎，煎蛋介绍过。 <LI><A href="http://www.vandelaydesign.com/blog/design/free-icons/" _fcksavedurl="http://www.vandelaydesign.com/blog/design/free-icons/" target="_blank">31 Sources of Quality, Free Icons</A> - 图标嘛，<A href="http://jandan.net/" _fcksavedurl="http://jandan.net/" target="_blank">煎蛋</A>介绍过很多。请自行搜索。 </LI></UL><BIG><BIG>空白的 WordPress 模板</BIG></BIG>想做个 WP 主题？看看这些<A href="http://www.tomorrows-laundry.com/" _fcksavedurl="http://www.tomorrows-laundry.com/" target="_blank">空白模板</A>吧。<BIG><BIG>CSS 的模板</BIG></BIG>用表格定位和用 CSS 定位差多远啊。<UL><LI><A href="http://www.inknoise.com/experimental/layoutomatic.php" _fcksavedurl="http://www.inknoise.com/experimental/layoutomatic.php" target="_blank">Layout-O-Matic</A> - 一个方便你创建 CSS 基本模板的工具 <LI><A href="http://csscreator.com/?q=tools/layout" _fcksavedurl="http://csscreator.com/?q=tools/layout" target="_blank">CSS Creator</A> - CSS 布局生成器 <LI><A href="http://blog.html.it/layoutgala/" _fcksavedurl="http://blog.html.it/layoutgala/" target="_blank">Layout Gala</A> - 模板聚集地 <LI><A href="http://www.opendesigns.org/" _fcksavedurl="http://www.opendesigns.org/" target="_blank">Open Designs</A> - 开源模板。这年头什么都可以开源 <LI><A href="http://www.opensourcetemplates.org/" _fcksavedurl="http://www.opensourcetemplates.org/" target="_blank">Open Source Templates</A> </LI></UL><BIG><BIG>Eric Meyer’s CSS Sculptor</BIG></BIG>CSS 布局生成软件，要 149 刀，贵est。<BIG><BIG>思恋检查器，哦不，打错，死链检查器</BIG></BIG>死链？就是点击后出现 404 的链接。<UL><LI><A href="http://www.dead-links.com/" _fcksavedurl="http://www.dead-links.com/" target="_blank">DeadLinks.com</A> <LI><A href="http://www.affiliateprogramslocator.com/tools/link_validation.php" _fcksavedurl="http://www.affiliateprogramslocator.com/tools/link_validation.php" target="_blank">Online Link</A><A href="http://www.affiliateprogramslocator.com/tools/link_validation.php" _fcksavedurl="http://www.affiliateprogramslocator.com/tools/link_validation.php" target="_blank"> Validation Tool</A> </LI></UL><BIG><BIG>在多个浏览器里面测试</BIG></BIG>只兼容 IE 的网页不是好网页。<UL><LI><A href="http://browsershots.org/" _fcksavedurl="http://browsershots.org/" target="_blank">Browser Shots</A> <LI><A href="http://www.browsercam.com/" _fcksavedurl="http://www.browsercam.com/" target="_blank">Browsercam</A> <LI><A href="http://www.netmechanic.com/products/browser-index.shtml" _fcksavedurl="http://www.netmechanic.com/products/browser-index.shtml" target="_blank">NetMechanic</A> </LI></UL><A href="http://www.vandelaydesign.com/blog/design/effectively-testing-your-website-in-multiple-browsers/" _fcksavedurl="http://www.vandelaydesign.com/blog/design/effectively-testing-your-website-in-multiple-browsers/" target="_blank">更多类似工具</A>。<BIG><BIG>检查代码有效性</BIG></BIG>换句话说，是不是符合国际标准。<UL><LI><A href="http://validator.w3.org/" _fcksavedurl="http://validator.w3.org/" target="_blank">HTML</A> <LI><A href="http://jigsaw.w3.org/css-validator/" _fcksavedurl="http://jigsaw.w3.org/css-validator/" target="_blank">CSS</A> <LI><A href="http://validator.w3.org/" _fcksavedurl="http://validator.w3.org/" target="_blank">RSS and Atom</A> <LI><A href="http://feedvalidator.org/" _fcksavedurl="http://feedvalidator.org/" target="_blank">RSS, Atom, and KML</A> </LI></UL><BIG><BIG>脚本</BIG></BIG>这个世界有太多的脚本，你无需再去重复发明。<UL><LI><A title=JavaFile.com href="http://www.javafile.com/" _fcksavedurl="http://www.javafile.com/" target="_blank">JavaFile</A> <LI><A title=PHPFreaks.com href="http://www.phpfreaks.com/" _fcksavedurl="http://www.phpfreaks.com/" target="_blank">PHP Freaks</A> <LI><A title=DynamicDrive href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/" target="_blank">DynamicDrive</A> <LI><A title=Javascript href="http://%20.internet.com/" _fcksavedurl="http://%20.internet.com/" target="_blank">The JavaScript Source</A> <LI><A title=PowerfulScripts.com href="http://www.powerfulscripts.com/" _fcksavedurl="http://www.powerfulscripts.com/" target="_blank">PowerfulScripts</A> <LI><A title=DHTMLGoodies.com href="http://www.dhtmlgoodies.com/" _fcksavedurl="http://www.dhtmlgoodies.com/" target="_blank">DHTMLGoodies.com</A> <LI><A title="Open Source PHP" href="http://www.opensourcescripts.com/dir/PHP/" _fcksavedurl="http://www.opensourcescripts.com/dir/PHP/" target="_blank">PHP Open Source Scripts</A> </LI></UL><BIG><BIG>Favicons 生成器</BIG></BIG>Favicons，那是 16 × 16 像素的艺术品。<UL><LI><A href="http://tools.dynamicdrive.com/favicon/" _fcksavedurl="http://tools.dynamicdrive.com/favicon/" target="_blank">Dynamic Drive</A> <LI><A href="http://www.htmlkit.com/services/favicon/" _fcksavedurl="http://www.htmlkit.com/services/favicon/" target="_blank">Favicon from Pictures</A> <LI><A href="http://www.favicongenerator.com/" _fcksavedurl="http://www.favicongenerator.com/" target="_blank">FaviconGenerator.com</A> <LI><A href="http://antifavicon.com/" _fcksavedurl="http://antifavicon.com/" target="_blank">Favicons with text instead of images</A> <LI><A href="http://www.graphicsguru.com/favicon.php" _fcksavedurl="http://www.graphicsguru.com/favicon.php" target="_blank">Graphics Guru</A> </LI></UL><BIG><BIG>字体</BIG></BIG>字体，这两个字你我都认识。<UL><LI><A href="http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/" _fcksavedurl="http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/" target="_blank">80 Beautiful Typefaces for Professional Design</A> (Smashing Magazine) <LI><A href="http://www.dafont.com/" _fcksavedurl="http://www.dafont.com/" target="_blank">dafont.com</A> <LI><A href="http://www.urbanfonts.com/" _fcksavedurl="http://www.urbanfonts.com/" target="_blank">Urban Fonts</A> <LI><A href="http://www.1001freefonts.com/" _fcksavedurl="http://www.1001freefonts.com/" target="_blank">1001 Free Fonts</A> </LI></UL><BIG><BIG>Web 2.0 工具</BIG></BIG>Web 2.0，这个世界本没有 Web 2.0 ，人想多了，就有了 Web 2.0。什么斜纹背景啊、Beta 徽章啊、倒影啊，用用下面的工具就搞定了。<UL><LI><A href="http://www.stripegenerator.com/" _fcksavedurl="http://www.stripegenerator.com/" target="_blank">Stripe Generator</A> <LI><A href="http://www.web20badges.com/" _fcksavedurl="http://www.web20badges.com/" target="_blank">Web 2.0 Badges</A> <LI><A href="http://www.dezinerfolio.com/2007/04/23/web-20-badges-free-download/" _fcksavedurl="http://www.dezinerfolio.com/2007/04/23/web-20-badges-free-download/" target="_blank">More Web 2.0 Badges</A> <LI><A href="http://utombox.com/my-works/" _fcksavedurl="http://utombox.com/my-works/" target="_blank">Web 2.0 Icons</A> <LI><A href="http://h-master.net/web2.0/" _fcksavedurl="http://h-master.net/web2.0/" target="_blank">Web 2.0 Logo Creator</A> </LI></UL><BIG><BIG>弄个按钮</BIG></BIG>按钮，就是红色的，按下去会自爆的那种。<UL><LI><A href="http://tools.dynamicdrive.com/button/" _fcksavedurl="http://tools.dynamicdrive.com/button/" target="_blank">Dynamic Drive</A> <LI><A href="http://kalsey.com/tools/buttonmaker/" _fcksavedurl="http://kalsey.com/tools/buttonmaker/" target="_blank">Kalsey.com</A> <LI><A href="http://www.lucazappa.com/brilliantMaker/buttonImage.php" _fcksavedurl="http://www.lucazappa.com/brilliantMaker/buttonImage.php" target="_blank">Lucazappa.com</A> <LI><A href="http://tools.blogflux.com/buttonmaker/" _fcksavedurl="http://tools.blogflux.com/buttonmaker/" target="_blank">Blog Flux</A> <LI><A href="http://www.yugatech.com/make.php" _fcksavedurl="http://www.yugatech.com/make.php" target="_blank">Yugatech.com</A> <LI><A href="http://www.mycoolbutton.com/" _fcksavedurl="http://www.mycoolbutton.com/" target="_blank">MyCoolButton</A> <LI><A href="http://www.buttonator.com/" _fcksavedurl="http://www.buttonator.com/" target="_blank">Buttonator</A> </LI></UL><BIG><BIG>渐变工具 谁都会渐渐改变。</BIG></BIG><UL><LI><A href="http://tools.dynamicdrive.com/gradient/" _fcksavedurl="http://tools.dynamicdrive.com/gradient/" target="_blank">Dynamic Drive</A> <LI><A href="http://www.guestbook.4u2ges.com/gradient-image-maker.asp" _fcksavedurl="http://www.guestbook.4u2ges.com/gradient-image-maker.asp" target="_blank">4u2ges.com</A> </LI></UL><BIG><BIG>圆角框框</BIG></BIG>这个世界流行圆角。<UL><LI><A href="http://www.neuroticweb.com/recursos/css-rounded-box/" _fcksavedurl="http://www.neuroticweb.com/recursos/css-rounded-box/" target="_blank">CSS Rounded Box Generator</A> <LI><A href="http://www.spiffycorners.com/" _fcksavedurl="http://www.spiffycorners.com/" target="_blank">Spiffy Corners</A> </LI></UL><BIG><BIG>CSS 气泡对话框</BIG></BIG>评论和引用一定要用气泡对话框。<UL><LI><A href="http://www.willmayo.com/2007/02/10/css-speech-bubbles/" _fcksavedurl="http://www.willmayo.com/2007/02/10/css-speech-bubbles/" target="_blank">WillMayo.com</A> <LI><A href="http://www.cssplay.co.uk/menu/bubbles" _fcksavedurl="http://www.cssplay.co.uk/menu/bubbles" target="_blank">CSS Play</A> </LI></UL><BIG><BIG>CSS 工具</BIG></BIG>这个世界流行减肥，所以 CSS 一定要减肥。<UL><LI><A href="http://csstidy.sourceforge.net/" _fcksavedurl="http://csstidy.sourceforge.net/" target="_blank">CSS Tidy</A> - CSS 优化工具 <LI><A href="http://www.cleancss.com/about.php" _fcksavedurl="http://www.cleancss.com/about.php" target="_blank">Clean CSS</A> <LI><A href="http://www.cssoptimiser.com/" _fcksavedurl="http://www.cssoptimiser.com/" target="_blank">CSS Optimizer</A> <LI><A href="http://juicystudio.com/services/csstest.php" _fcksavedurl="http://juicystudio.com/services/csstest.php" target="_blank">CSS Analyzer</A> - 检查 CSS 语法 <LI><A href="http://cssmate.com/csseditor.htm" _fcksavedurl="http://cssmate.com/csseditor.htm" target="_blank">CSS Mate</A> - 在线 CSS 编辑器 <LI><A href="http://www.cssdrive.com/index.php/main/csscompressor/" _fcksavedurl="http://www.cssdrive.com/index.php/main/csscompressor/" target="_blank">CSS Compressor</A> </LI></UL><BIG><BIG>其他</BIG></BIG><UL><LI><A href="http://www.sharewareconnection.com/web-host-uploader.htm" _fcksavedurl="http://www.sharewareconnection.com/web-host-uploader.htm" target="_blank">Web Host Uploader</A> - 一个简单的 FTP 工具 <LI><A href="http://www.maxdesign.com.au/presentation/checklist.htm" _fcksavedurl="http://www.maxdesign.com.au/presentation/checklist.htm" target="_blank">Web Standards Checklist</A> <LI><A href="https://addons.mozilla.org/en-US/firefox/addon/1843" _fcksavedurl="https://addons.mozilla.org/en-US/firefox/addon/1843" target="_blank">Firebug Add-On for Firefox</A> - 编辑、除错和监视 CSS、HTML、JavaScript 的火狐扩展 <LI><A href="https://addons.mozilla.org/en-US/firefox/addon/60" _fcksavedurl="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer Firefox Add-On</A> - 这个火狐插件太经典了 </LI></UL></div>	 </div>
</UL></div>	 </div>

77个网页设计必备资源