Sugar98蜜糖设计之家

交流发布关于网络设计，制作，学习的信息，经验交流。
建站资源，设计技巧，项目推介。
Cascading Style Sheets and Page Design-Web2.0-CSS-Design-PHP5+Mysql+Apache-Appserv -...

31 个用来测试你网站各项性能的免费在线工具
网站代码验证

没人可以细致到保证自己的网站代码都是正确的，你可以通过以下测试来验证网站代码是否正确。

1 . WDG HTML Validator
http://www.htmlhelp.com/tools/validator/
一个很好的工具，能找出网站语法错误的地方，并标注出来，也可选择对网站上单独的每一页进行单页分析。（ 强烈推荐 ）

2 . W3C Markup Validation Service
http://validator.w3.org/
对 HTML 和 XHTML 都能进行代码测试，自称是互联网络上第一个（也是使用者最多的）的 HTML 验证工具。

3 . W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/
用于验证 css 源代码，能够标注出不好的 css 代码设计。例如：“Same colors for color and background-color in two contexts”。

4 . RUWF XML Syntax Checker
http://www.xml.com/pub/a/tools/ruwf/check.html
用于查找 XML 文件的错误。

5 . W3C Feed Validation Service
http://validator.w3.org/feed/
用于查找 Atom 和 RSS feed 中的错误语法。（ 这个我经常用到 ）

6 . W3C Link Checker
http://validator.w3.org/checklink
用于搜寻查明你网站内的所有链接里是否有断链。（ 强烈推荐 ）

7 . Juicy Studio Link Analyser
http://juicystudio.com/services/linktest.php
测试网站内的链接的 URL 是否存在死链，与 W3C Link Checker 很类似。

网站的使用性

我们常常看到网站设计者把重点放在怎网站的吸引力上，而完全不考虑会不会影响来访者的使用，一个浏览难度很大的网页是注定要失败，要让你的来访者方便的得到他要的信息（从而成为重复访客），你的网站应当遵循 WCAG section 508 易用性规则。

8 . Watchfire WebXACT
http://webxact.watchfire.com/
所有严谨的设计师和开发者都必须使用的工具，它会生成一个非常详尽的报告书，包括：网站质量，易用性和隐私等。（ 强烈推荐 ）

9 . ATRC Web Accessibility Checker
http://checker.atrc.utoronto.ca/index.html
测试网站的 WCAG 2.0 Level2 兼容性，它会生成一份报告，提出一系列建议，如：如何提升页头，链接，数据，图表和文字的访问速度。

10 . WAVE 3.0 Web Accessibility Tool
http://www.wave.webaim.org/wave/index.jsp
高度可定制的工具，它采用了图形化模型展示网站兼容性问题（ WCAG 1.0 and section 508 ）。（ 强烈推荐 ）

11 . TAW Web Accessibility Test
http://www.tawdis.net/taw3/cms/en
测试网页是否存在冲突（ WCAG 1.0 兼容性 ），通过图形模式生成一份依据 wcag 优先模式为基础的网站修改建议。

12 . HiSoftware CynthiaSays portal
http://www.cynthiasays.com/
采用了非常严格的规则来测试网页（ 根据 section 508 和 WCAG 1.0 规则 ），生成的报告也极为详细（ 详细到很难看懂 ）。

13 . HERA Accessibility testing with Style
http://www.sidar.org/hera/index.php.en
使用一种极为复杂但容易理解方式指出网页的 wcag1.0 兼容性问题。

14 . Juicy Studio CSS Analyser
http://juicystudio.com/services/csstest.php
进行了色彩对比测试，以确保你的网站的色调会符合 WCAG 1.0 的要求。

15 . Juiciy Studio Readability Test
http://juicystudio.com/services/readability.php
分析你网站上的文字是否有语法错误或拼写错误等问题，容易让人理解不（ 根据 the Flesch Reading Ease 和 Flesch-Kincaid grade level algorithms 规则 ）。（ 适合英文网站使用 ）
网站的速度

打开你的网站的速度快慢，是来访者会不会再次访问网站的关键因素，在一般情况下，一个网络不是很快的来访者是不愿意访问一个充满着图片、flash 动画、多媒体文件的网站。为了使你的网站覆盖人群的范围最大化，你必须优化你的网站，使它的打开速度尽可能的快。

16 . Web Page Analyzer from Website Optimization
http://www.websiteoptimization.com/services/analyze/
一个很好的工具，它在分析完一个网页后，会为减少加载时间提出优化建议，着重优化物体的数目，图片和网站的总体大小。（ 强烈推荐 ）

17 . WebSitePulse Test Tools
http://www.websitepulse.com/help/tools.php
有一系列的工具来确定网站的加载速度和主机信息。

18 . Internet Supervision Url Check
http://internetsupervision.com/scripts/urlcheck/check.aspx
从世界各地不同的服务器来测试你的网站的加载时间，用于确定是不是各地的来访者都能顺利快速的打开你得网站。
浏览器模拟工具

这是一个普遍的问题，因为现在有着很多的操作系统和浏览器，你得网站必须得兼容它们，但这绝不是一件容易的事。通过下列工具，你可以了解你得网站在各种浏览器上的显示效果。

19 . Browsershots
http://browsershots.org/
能给出你的网站在不同浏览器下显示效果的截图，包括：Firefox 和 Internet Explorer （ Windows ）、Firefox 和 Safari （ Mac OS X ）、Iceweasal 和 Konqueror （ Linux ），但是结果要在 1 - 3 小时后才能出来。

20 . IE NetRenderer
http://ipinfo.info/netrenderer/
实时生成你的网站在 Internet Explorer 5.5 、6.0 和 7.0 下的截图。

21 . MobiReady Report
http://ready.mobi/launch.jsp?locale=en_EN
分析使用手机访问网页的兼
容性问题，会生成一份详细的报告，并提供了在两种不同类型的手机浏览器上你得网站可能显示的样子。
搜索引擎优化 (SEO)

一个网站，如果对搜索引擎有着比较好的友好度，一定会比较有竞争力。

22 . UrlTrends
http://www.urltrends.com/
会显示网站的访客是如何通过搜索引擎来到你的网站，还有各个流量是多少。这些数据是包括 Google, Yahoo, MSN, Alexa, AlltheWeb, AltaVista 和其他一些网站。（ 强烈推荐 ）

23 . iWEBTOOL Backlink Checker
http://www.iwebtool.com/backlink_checker
一个很好的工具，它能找出有什么站点链接到你的站点，那些站点是什么类型的站点。

24 . iWEBTOOL Multi-Rank Checker
http://www.iwebtool.com/multirank
显示你网站的 Alexa 和 Google PageRank 数值。

25 . Microsoft adCenter Labs: Advertising and Keyword Research Tools
http://adlab.microsoft.com/default.aspx
一个极好的工具，用于分析和预测你网站的来访者和市场。（ 强烈推荐 ）

26 . Domain Tools Whois lookup
http://whois.domaintools.com
一个 WHOIS 网络工具。

27 . SEO-Browser
http://www.seo-browser.com/
可以让你看到在搜索引擎眼里一样的网站（ 去掉所有的”美丽”配件 ）。

28 . SEO Workers SEO Analysis Tool
http://www.seoworkers.com/tool/analyzer.html
非常有用的工具，分析了网站上的各种分类特征，包括 meta 标签、关键字密度及加载时间。（ 强烈推荐 ）

29 . Seekport Seekbot
http://www.seekport.co.uk/seekbot/
可以分析网站的数据和内容，以得出搜索引擎会如何有效的解释分析的网站。

30 . SEO Chat SEO Tools
http://www.seochat.com/seo-tools/
用以分析网站 Google adsense 盈利潜力，关键字密度，Meta tag 等等……

31 . Marketleap Search Engine Marketing Tools
http://www.marketleap.com/publinkpop/
用来分析网页，让你知道你的网站检索、设定的关键字好不好。

原文：avivadirectory.com
译者：peterzsk
译文原地址：http://zsk.akaka.com.cn/2007/06/31-free-tests-online/
采用CC创作共用协议,转载可保留以上信息并<署名、非商业和保持一致>。


350个实用Photoshop动作免费下载
来自于站酷（超级好的素材库）：http://www.zcool.com.cn/easy/20081027/easy_102M2U2008.html

http://www.lanrentuku.com/lanren/code/
懒人图库【代码，矢量素材，网站底纹，FLASH模板停工很丰富】
http://www.zcool.com.cn/
【站酷(ZCOOL),素材分享与设计交流,为您提供矢量素材,psd,png,gif,icon,psd分层素材,酷站等素材资源】
设计素材太丰富了，下载速度一流，自己去看看吧

--------------------------------------------------
http://web.rdxx.com/CSS
CSS样式

http://www.clippinjam.com/
日本的CSS设计

http://www.lrxz.com/
绿软下载基地


http://intensivstation.ch/en/templates/
CSS版式模板
http://www.mister-wong.cn/user/elviscai/css/
elviscai, 637 书签

------------------------------------------------------
http://www.jluvip.com/blog/article.asp?id=151
探索CSS实现三行三列等高布局
http://www.bloghuman.com/post/243/
SEO参考：DIV+CSS三行两列经典布局
http://tech.ddvip.com/2007-12/119854896739380.html
CSS布局实例:上中下三行,中间自适应



http://cssrss.com/
中文的CSS聚合
http://www.liberatutti.it/
一个好的商业站样式
----------------------------------------------------------

Pro
CSS and HTML
Design Patterns在线阅读，做的很好
http://www.cssdesignpatterns.com/
-----------------------------------------------------

http://wufoo.com/gallery/
很多有用的页面板子
http://www.ex-designz.net/template/tempdetail.asp?temp_id=671
有好的free板子

---------------------------------------------

http://www.cabedge.com/
胡罗卜
http://www.30elm.com/
30
http://veerle.duoh.com/#content
veerle

----------------------------------------------


http://dannyblackman.com/
http://www.bootb.com/en/
http://www.collegeprowler.com/
很隔路的网站

http://www.bramn.com/
http://www.fluidbook.com/
http://www.bdthreads.com/
两个装饰商业站

-------------------------------------------------------------



像聪明女孩穿衣服那样设计网页文字
http://www.aodoe.com/bencandy.php?fid=7&amp;amp;aid=923


http://kuler.adobe.com/
http://pourpre.com/colordb/?l=eng
http://wellstyled.com/tools/colorscheme2/index-en.html
http://www.colorschemer.com/
http://www.colourlovers.com/
配色网站
http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette
http://www.colorhunter.com/


div+css布局实例淘宝分析(一)
http://www.dayanmei.com/blog.php/ID_536.htm
菜鸟瞬间入门复杂div+css布局，抛弃float！[兼容IE6，IE7，FireFox]
http://bbs.cfanclub.net/read.php?tid-161871.html
三列自由式布局 770-1024自适应宽度！
http://www.52divcss.cn/divcss/f8/932.html

http://www.veryebooks.com/computer/web/css/index_2.html
电子书下载
http://veerle.duoh.com/
颜色配的很精彩


http://www.cssbeauty.com/
优秀网站设计聚合
(可以搜集到经典CSS，JS，PHP等的设计方案)

http://www.wishtree.org/
没试过这么帅的网站

http://css.maxdesign.com.au/index.htm
http://www.maxdesign.com.au/presentation/page_layouts/
提供很好的布局


http://www.w3cn.org/article/layout/2004/55.html
CSS基本布局16例
http://www.w3.org/TR/REC-CSS1
Cascading Style Sheets, level 1
W3C Recommendation 17 Dec 1996, revised 11 Jan 1999


http://www.cssbeauty.com/
靓

At the Beginning:http://www.design-css.com里面的小教程很好的
Best of CSS Design 2007:http://www.webdesignerwall.com/trends/best-of-css-design-2007
07年精选的CSS设计作品，经典。
http://www.smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006/
50 Beautiful CSS-Based Web-Designs in 2006

http://www.smashingmagazine.com/
http://www.cssheaven.com
http://www.unmatchedstyle.com/
http://www.aodoe.com/bencandy.php?fid=10&aid=894


53個CSS技術 你不能排除在使用之外：
53 CSS-Techniques You Couldn’t Live Without
53个CSS-不可或缺的技巧
Quote:
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is.

CSS是重要的，它正在越来越广泛的被运用。层叠样式表拥有很多表格布局所没有的优势，首先从布局或者页面的设计与出现在页面中的信息中作严格的分离，从而让页面的设计能够很容易被改变，仅用一个CSS文件更换另一个。难道它不够强大吗？恩，是的，其实它很强大。
Quote:
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.

在过去的几年里，网站开发者写了很多关于CSS的文章和开发了很多实用的技巧，这些能帮你节省很多时间。当然，如果你有足够时间也可能发现它们。在下面，你将会发现我们作为网站架构师真正不可或缺的技巧目录。它们确实是必要的，它们使我们的生活更简单。让我们看一看这53个基于CSS的技巧，如果你做网站开发，应该永远都愿意掌握它们。
Quote:
Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks!

感谢所有的在过去几年里在易用和可用的基于CSS设计方面作出贡献的开发者们，我们真的很感谢他们！谢谢你们！

1.CSS Based Navigation//基于CSS的导航
http://www.nundroo.com/navigation/
2.Navigation Matrix Reloaded//导航矩块翻转
http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
3.CSS Tabs//CSS标签
http://exploding-boy.com/images/cssmenus/menus.html
4.CSS Bar Graphs (CSS For Bar Graphs)//CSS条状图表
http://www.khmerang.com/index.php?p=118
5.Collapsing Tables: An Example//压缩表格：一个实例
http://icant.co.uk/sandbox/footercollapsetables/
6.Adam’s Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法
http://www.flog.co.nz/lab/ARC/ARC.htm
7.CSS Image Replacement//CSS图像替代
http://www.mezzoblue.com/tests/revised-image-replacement/
8.CSS Shadows (CSS Shadows Roundup) //CSS阴影（CSS阴影综述）
http://web-graphics.com/mtarchive/001589.php
9.CSS Rounded Corners Roundup (Nifty Corners)//CSS圆角综述（漂亮的拐角）
http://www.smileycat.com/miaow/archives/000044.html
http://www.html.it/articoli/nifty/index.html
10.Drop Cap - Capital Letters with CSS//用CSS实现首字母下沉
http://www.mandarindesign.com/troops.html
11.Define Image Opacity with CSS //用CSS定义图像半透明
http://www.mandarindesign.com/troops.html#opacitybackgroundhard
12.How to Create a Block Hover Effect for a List of Links//如何给链接列表创建鼠标悬停的区块效果
http://www.smileycat.com/miaow/archives/000230.html
13.Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS//用CSS实现引用（用JavaScript和CSS实现自动引用）
http://www.sitepoint.com/test/pullquote.htm
http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/
14.CSS Diagrams//CSS图表
http://www.surfare.net/~toolman/temp/diagram.html
15.CSS Curves//CSS曲线
http://couchfort.net/article/59/css-curves
16.Footer Stick allows for the footer of a Web page to appear either at the bottom of thebrowser window or the bottom of the Web page content – whichever is visually lowest.//页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。
http://www.themaninblue.com/experiment/footerStickAlt/
17.CSS Image Map//CSS图像地图
http://www.frankmanno.com/ideas/css-imagemap/
18.CSS Image Pop-Up//CSS图像弹出
http://moneytreesystems.com/css/picpopup.html
19.CSS Image Preloader//CSS图像预载
http://specere.net/blogs/?p=4
20.CSS Image Replacement for Buttons//CSS按钮的图片替换
http://www.ampsoft.net/webdesign-l/image-button.html
21.Link Thumbnail//链接缩略图
http://lab.arc90.com/2006/07/link_thumbnail.php
22.CSS Map Pop//CSS地图提示
http://mikecherim.com/experiments/css_map_pop.php
23.PHP-based CSS Style Switcher//基于PHP的CSS样式改变
http://mikecherim.com/gbcms_xml/news_page.php?id=12
24.CSS Unordered List Calender (CSS Styled Calender) //CSS无序列表日历（CSS设计的日历）
http://mikecherim.com/gbcms_xml/news_page.php?id=0
http://veerle.duoh.com/blog/comments/a_css_styled_calendar/
25.CSS-Based Forms: Techniques//基于CSS的表单：技巧
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
26.CSS-Based Tables: Techniques//基于CSS的表格：技巧
http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
27.Printing Web-Documents and CSS//打印网站文档和CSS
http://css-discuss.incutio.com/?page=PrintStylesheets
28.Improved Links-Display for Print-Layouts with CSS//用CSS改良打印布局的链接显示
http://www.alistapart.com/articles/improvingprint/
29.CSS-Submit Buttons//CSS提交按钮
http://www.ukthoughts.co.uk/journal/css-submit-buttons
30.CSS Teaser Box//CSS内容摘要盒子
http://www.456bereastreet.com/lab/teaser/
http://www.aodoe.com/upload_files/6/kGlEl453css_31.gif
31.CSS Tricks for Custom Bullets/对于定义式列表的CSS窍门
http://www.macworld.com/2005/12/secrets/januarycreate/index.php
http://www.aodoe.com/upload_files/6/kGlEl453css_31.gif
32.Ticked Off Links Reloaded//用记号标出翻转的链接
http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
33.CSS Zooming//CSS缩放
http://www.deltatangobravo.com/images/zoom/
34.Creating a Star Rater using CSS //用CSS创建星型评价
http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
35.The ways to style visited Links//设计浏览过链接的方法
http://webdesign.maratz.com/lab/visited_links_styling/
36.PDF, ZIP, DOC Links Labeling//PDF,ZIP,DOC链接的标注
http://webdesign.maratz.com/lab/pdf_links_labeling/
37.Displaying Percentages with CSS//用CSS显示百分比
http://www.barenakedapp.com/the-design/displaying-percentages
38.Image Floats without the Text Wrap//没有被正文包围的浮动图片
http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
39.Let visitors decide, whether or not will they open link in a new window//让访问者决定，是否会在新窗口带开链接
http://webdesign.maratz.com/lab/new_window_link/
40.Simple accessible external links//简单易用的外部链接
http://www.maxdesign.com.au/presentation/external/
41.Zebra Table with JavaScript and CSS//用JavaScript和CSS实现多条纹的表格
http://24ways.org/2005/splintered-striper
42.Vertical Centering with CSS (Horizontal and Vertical Centering with CSS//用CSS实现垂直居中（用CSS实现水平和垂直居中）
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
http://www.456bereastreet.com/lab/centered/both/
43.Unobtrusive Sidenotes//不引人注目的旁注
http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php
44.Image Caption with CSS (Styled Images with Caption) //用CSS实现图像说明（设计给图像加上说明）
http://lab.arc90.com/2006/07/image_caption_1.php
http://www.boagworld.com/archives/2006/07/styled_images_with_caption.html
45.Dynamic Piechart with CSS //用CSS实现动态饼图
http://petewilliamsagency.com/css/examples/pie/
46.Format Footnotes with CSS//用CSS实现布局脚注
http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
47.Hierarchical Sitemap with CSS//用CSS实现分等级的网站地图
http://www.alexandersperl.de/tutorials/css/sitemap.html
48.Snook’s Resizable Underlines//史鲁克的可改变大小的下划线
http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/
49.Switchy McLayout: An Adaptive Layout Technique//马克布局改变: 一个自适应布局的技巧
http://www.alistapart.com/articles/switchymclayout
50.StyleMap: CSS+HTML Visual Sitemap//样式地图：CSS+HTML 形象化的网站地图
http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
51.Custom Reading Width//自定义阅读宽度
http://www.devlounge.net/articles/custom-reading-width-beta
52.CSS Alert Message//CSS提示信息
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
53.CSS Production Notes//CSS产品注释
http://24ways.org/2006/css-production-notes


从wordpress到精美站点的相关资源链接【主要是灵感的提供】
http://www.free-css-templates.com/css-templates/4
http://www.freecsstemplates.org/
http://www.cssdrive.com/
http://www.free-css.com/
http://www.templateworld.com/free_templates.html
http://www.solucija.com/home/css-templates/
http://azalea.ztpala.com/2008/03/17/wordpres-plugins-gamerz/
http://blogunion.org/wordpress/wordpress-themes/8-photoblog-themes.html
http://my-hou.cn/archives/416
http://graphpaperpress.com/
http://cssmania.com/
http://www.arthack.org/wp-themes
http://www.cssflavor.com/
http://cssremix.com/
http://www.csselite.com/
http://www.css-website.com/
http://www.seo-expert-blog.com/blog/css-galleries-free-web-designs-for-download
http://csscreme.com/freecsstemplates/
http://www.themelab.com/
http://wufoo.com/gallery/
http://www.webspot.net.cn/?page_id=69
http://layouts.ironmyers.com/
http://www.ex-designz.net/template/tempcat.asp?cat_id=13
http://www.churchplantmedia.com/

30家国内B2C网上购物网站
1. 图书音像B2C

* 当当网: http://www.dangdang.com/
* 卓越亚马逊: http://www.amazon.cn/
* 99网上书城: http://www.99read.com

2. 综合百货类B2C

* 百联巴士: http://www.80ebus.com
* 麦网: http://www.m18.com
* 东方CJ: http://www.ocj.com.cn
* 1号店: http://www.yihaodian.com

3. 3C数码B2C

* 京东: http://www.360buy.com
* 新蛋: http://www.newegg.com.cn
* 享购网: http://www.xgou.com
* 365数码网: http://www.365com.com/

4. 旅游票务B2C

* 携程网: http://www.ctrip.com
* 艺龙网: http://www.elong.com
* 游易航空旅行网: http://www.yoee.com

5. 美容化妆B2C

* DHC: http://www.dhc.net.cn
* NO.5时尚购物: http://www.no5.com.cn/
* 左岸女人: http://www.leftlady.com/

6. 男士服饰B2C

* VANCL: http://www.vancl.com
* PPG: http://www.ppg.cn
* 欧莱诺: http://www.olomo.com/

7. 女性服装饰品B2C

* 时尚起义: http://www.shishangqiy