Web 2.0网页设计DIV+CSS必备资源

<!-- Feedsky FEED发布代码开始 -->

如果您喜欢这些文章，欢迎点击此处订阅本Blog

<!-- FEED自动发现标记开始 --> <!-- FEED自动发现标记结束 -->

<!--Google 468*60横幅广告开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!--Google 468*60横幅广告结束-->

配色工具

配色最痛苦了。（= =）更多配色工具请参考： 为你的网页组合出一个完美的配色方案

• Color Schemer Gallery：配色展览馆
• COLOURlovers
• Website Color Picker
• I Like Your Colors：喜欢某个网站的配色？就用这个工具。

免费的 CSS 导航栏菜单

导航栏的重要性不用多说，尤其是一个动感十足有易用的。网上已经有大把的模板，稍稍修改一下就可以用啦。

• Listamatic
• Exploding Boy
• Alvit.de
• Dynamic Drive
• Our own collection of CSS Menus

制作 DHTML 导航栏软件

Xtreeme DHTML Menu Studio（要 49 刀，#sfufoet：类似的一款软件：Sothink DHTML Menu，也是收费软件。）

找呀找照片

照片拿来做什么？这个我就不懂了。有谁懂？麻烦留言。谢啦。

• Stock.Xchng – 大量免费照片
• Stock Expert – 要付出一些些钱的照片。
• iStockphoto - 同上
• Big Stock Photo - 同上

图标

好图标绝对很抢眼。

• IconFinder.net – 图标搜索引擎，煎蛋介绍过。
• 31 Sources of Quality, Free Icons - 图标嘛，煎蛋介绍过很多。请自行搜索。

空白的 WordPress 模板

想做个 WP 主题？看看这些空白模板吧。

CSS 的模板

用表格定位和用 CSS 定位差多远啊。

• Layout-O-Matic - 一个方便你创建 CSS 基本模板的工具
• CSS Creator - CSS 布局生成器
• Layout Gala - 模板聚集地
• Open Designs - 开源模板。这年头什么都可以开源
• Open Source Templates

Eric Meyer’s CSS Sculptor

CSS 布局生成软件，要 149 刀，贵est。

思恋检查器，哦不，打错，死链检查器

死链？就是点击后出现 404 的链接。

• DeadLinks.com
• Online Link Validation Tool

在多个浏览器里面测试

只兼容 IE 的网页不是好网页。

• Browser Shots
• Browsercam
• NetMechanic

更多类似工具。

检查代码有效性

换句话说，是不是符合国际标准。

• HTML
• CSS
• RSS and Atom
• RSS, Atom, and KML

脚本

这个世界有太多的脚本，你无需再去重复发明。

• JavaFile
• PHP Freaks
• DynamicDrive
• The JavaScript Source
• PowerfulScripts
• DHTMLGoodies.com
• PHP Open Source Scripts

Favicons 生成器

Favicons，那是 16 × 16 像素的艺术品。

• Dynamic Drive
• Favicon from Pictures
• FaviconGenerator.com
• Favicons with text instead of images
• Graphics Guru

字体

字体，这两个字你我都认识。

• 80 Beautiful Typefaces for Professional Design (Smashing Magazine)
• dafont.com
• Urban Fonts
• 1001 Free Fonts

Web 2.0 工具

Web 2.0，这个世界本没有 Web 2.0 ，人想多了，就有了 Web 2.0。什么斜纹背景啊、Beta 徽章啊、倒影啊，用用下面的工具就搞定了。

• Stripe Generator
• Web 2.0 Badges
• More Web 2.0 Badges
• Web 2.0 Icons
• Web 2.0 Logo Creator

弄个按钮

按钮，就是红色的，按下去会自爆的那种。

• Dynamic Drive
• Kalsey.com
• Lucazappa.com
• Blog Flux
• Yugatech.com
• MyCoolButton
• Buttonator

渐变工具

谁都会渐渐改变。

• Dynamic Drive
• 4u2ges.com

圆角框框

这个世界流行圆角。

• CSS Rounded Box Generator
• Spiffy Corners

CSS 气泡对话框

评论和引用一定要用气泡对话框。

• WillMayo.com
• CSS Play

CSS 工具

这个世界流行减肥，所以 CSS 一定要减肥。

• CSS Tidy - CSS 优化工具
• Clean CSS
• CSS Optimizer
• CSS Analyzer - 检查 CSS 语法
• CSS Mate - 在线 CSS 编辑器
• CSS Compressor

其他

• Web Host Uploader - 一个简单的 FTP 工具
• Web Standards Checklist
• Firebug Add-On for Firefox - 编辑、除错和监视 CSS、HTML、JavaScript 的火狐扩展
• Web Developer Firefox Add-On - 这个火狐插件太经典

<!--新Google 468*60横幅广告开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 创建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!--新Google 468*60横幅广告结束-->

<!--新Google 468x15 横链接单元开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!--新Google 468x15 横链接单元结束-->