77个网页设计必备资源

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