CSS3 Please!

CSS3 Please!是我师傅推荐给我的，是一个CSS3规则生成器。它允许你在线调正CSS属性，同时右侧的一个大大的CSS3,please圆角框内即展示了当前你所处的样式状态，即时预览，非常方便。接着，你就可以拷贝样式到自己的文件里了。

CSS3 Selectors Test

这是一个选择器的测试，它能自动运行一堆CSS选择器进行测试，以检查你的浏览器是否兼容这些样式。它将以绿色表示兼容的样式。你能点击查看每个CSS选择器的检测结果，它将以一个简单的样例来呈现。

CSS3 Transforms

你能在CSS3 Transforms里通过左侧的按钮来设置一堆不同的属性，比如位置，旋转，渐变程度等等。设置好之后就能迅速产生相应的代码。

CSS3 Gradient Generator

一款在线生成CSS渐变的工具。无论设计师还是开发者都能通过这个工具来生产相对CSS渐变代码。

CSS3 Button Maker

这个工具提供了很多按钮以及颜色选择器来帮你制作CSS3按钮。生成之后你能获取相应的CSS代码来用在自己的网站上。

CSSDesk – Dynamic CSS Sandbox

CSS desk是最新开发的一款工具，它对于测试你的CSS和HTML将会非常有帮助。

The HTML5 test – How well does your browser support HTML5?

这个网站可以测试你当前的浏览器能对于HTML的支持及运行情况并给出评分。它通过测试一些HTML5的新特性来给出相应的分数。某些情况下，测试可能会超出正常的标准。

iPad Peek

可以让你查看你的网站在iPad下的显示情况哦！点击上面的黑边框，可以进行大小缩放，相当直观！

Elastic WordPress Theme Editor

一款为WordPress设计的虚拟主题编辑器，能给你的主题开发带来不少方便！

那我们该怎样选择适合自己的框架呢？

首先，你要确保你所要用的框架已经建立了并有了能准确描述细节方面的文档。这一步对于你下一步的实施以及使用你准备好的框架，都是至关重要的。然后，你就应该分析你所选择的框架能够解决怎样的问题。不过，当你碰上几个你自认为是最适合这个项目的框架的时候，你应该明智的对它们进行筛选并仔细衡量是否真正符合你的需求。

同样，你可以大胆的去请教其他开发人员或是同事，哪个框架更加合适，为什么选择这个框架。这样可以帮助你在其他有经验者的基础上获取更多有价值的见解。另外一点，要提的就是，你在这次框架选择的过程中扮演怎样的角色.是主要人物？或只是一个乐于帮忙的普通成员而已？它是否能给你带来价值？每个问题都会帮助你决定是否使用所选的框架。

下面让我们看看同时适合开发人员和设计人员的8个最好的框架

Blueprint CSS

Blueprint CSS 框架使用了栅格化系统来预先构建了字体样式并包含多款插件，内建表单样式等等。同时，你还会发现Blueprint具有良好的文档，Wiki,以及活跃的社区组，以及一些使用Blutprint框架的网站例子。

Elements CSS Framework

总体上来说，Elements 框架使编写CSS代码变得更加简单而又高效。它是能使你的文件安排的有条理 收集当前类这个功能，将使你的开发过程变得更加友好，而且它能给外链自动增加各种icon图标，这样用户就能快速找到并定位到它们。

Content with Style

Content with Style也是一款能帮助你通过一些不可思议的设计和排版元素来设计并构造你的网站的CSS框架。它有6种不同的布局供你选择，包括垂直导航，两个内容栏，两栏式的水平导航及一个内容栏。总之，Content with Style是一种高效的方式来排序你网站的内容并且能顾及到头部、主题部分、及子部分。

Emastic

一款轻量级的CSS框架，它使用了px,em,或是%为单位来标志页面的宽度，而且它同样是基于弹性布局的。Emastic为你的字体排版预先定义了多种样式。主要一点，它的栅格化是由5到75em大小的区块组成。默认的尺寸大小也能随时改变，而且框架的设计选项也是基于栅格设计的。

960 Grid System

960 Grid System是一款非常强大的CSS框架，它能帮助我们迅速开发网站的原型。它是基于12-16栏布局的并且布局模板同样支持Illustrator, Photoshop, Expression Design, Fireworks 等工具。而且，你能用纸笔构造出最适合你自己的一款模板。

Yui Grids

基本的Yui Grids CSS 提供了四种预先定义的页面宽度，六种模板，而且这些都可以再细分成两栏、三栏或者四栏。仅4kb的文件却整合了超过1000中的页面布局样式。支持流式宽度，简单的用户定制化，灵活的模板栏等多种特性。

YAML

YAML（Yet Another Multicolumn Layout)另一款适合创建新式和灵活布局的Xhtml/CSS框架。使用它能编写通用性极强的结构，而且用户的可访问性也很强。YAML专注于Web标准及可访问性，包含了众多扩展的轻量级框架核心，完整的多语言文档，强健灵活的布局思想。

SenCSs

SenCSs(Sensible Standards CSS baseline，发音“sense”).它为你CSS重复的部分提供了合理的样式，这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样，它不包含各种杂乱的布局样式或是预定义的栅格系统，那SenCSs能刚什么呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的。

Firebug

Firebug能够调试所有网站语言,如Html,Css以及javascript调试等功能，而且它能在各种浏览器下都能使用包括（IE,Firefox,Opera, Safari等）。除此之外，还有一些很强大的功能，如html,css,dom的察看与调试，网站整体分析等等。总之，对于开发者来说它就相当一把瑞士军刀啊。

FireRainbow

为Firebug设计的一款Javascript高亮工具，支持firebug1.3以上的版本。

Pixel Perfect

一款Firebug的扩展工具，它能让开发者或是设计师直接覆盖某一元素在开发的页面上。

FireShot

FireShot能创建网页的整体或是可见部分的截图。不同与其他插件，这个插件它提供哦你过了一系列能让用户更加方面的插入文本注释或者是图片注释的编辑和标注工具。这些对于网页设计师或者是测试者来说可是非常有用的。

Coral IE Tab

一个能让你的网页通过IE核心显示的工具，而且可以迅速切换回Firefox下。

Measure It

一个非常方便而又小巧的工具，你能使用它来测试页面上任何地方的高和宽。我觉得以后再也没必要使用任何图形编辑工具来获取某个图形区域的高和宽了。

ColorZilla

一款非常cool的颜色获取工具。同时你还可以通过它来快速调节颜色并粘贴到其他应用程序里面。而且它还可以缩放页面。

Web Developer

同样也是一款非常强大的工具，你可以通过它来禁用JS,CSS图片等等来模仿出不同情况下的页面加载情况。而且你还能获取cookies,禁用缓存等等一些开发时所要用的功能。

YSlow

来自Yahoo的一款插件，它能帮助我们分析网站的加载速度，同时为你提供一些推荐的用户参数优化方法。

HTML Validator

HTML的检验工具，它能查找并且标志出HTML页面上的错误。它主要以Tidy为基础，而Tidy最初是W3C为了验证HTML代码开发的一个工具。

Add-in-one Sidebar

全方位多功能侧边栏，包括了书签、插件、历史等等，其方便性不言而喻啊。

当某一事件被触发时需要执行某个函数，在IE下可用 attachEvent，在FF下则要用addEventListener。
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数；
addEventListener()有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带”on”,比如”onsubmit”在这里应为”submit”，第二个是需执行的函数，第三个参数为布尔值；

例如：(可以在IE和FF下分别测试)：

<input type=”button” id=”ie” value=” IE ” />
<input type=”button” id=”ff” value=” FF ” />
<script type=”text/javascript”>
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;
if(isIE)
{
document.getElementById(‘ie’).attachEvent(“onclick”, Fun);
}
else
{
document.getElementById(‘ff’).addEventListener(“click”, Fun, false);
}
function Fun()
{
if(isIE)
{
alert(‘I\’m IE’);
}
else
{
alert(‘I\’m Not IE’);
}

}
</script>

所以我们可以直接这样编写：
if (document.all){
window.attachEvent(‘onload’,调用函数名)//对于IE
}
else{
window.addEventListener(‘load’, 调用函数名,false);//对于FireFox
}

发现用它的好处多多啊：
1.IE中没有讨厌的虚框问题了。
2. 提供了完善的版本检测功能，如果版本不够则显示其他东西，比如图片或文字。
3.易于使用，只要在页面头加载一个 .js 文件，然后 HTML 写一个容器，里面放普通的文本或图片（用于无法显示 Flash 时显示），最后用脚本来替换这个元素里面的内容为 Flash。
4.使得插入 Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。
5.能够避免HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。

只需要包含 swfobject.js这个js文件，然后在DOM中插入一些简单的JS代码，就能嵌入Flash媒体资源了。 下面是一个最简单的范例：

<script type=”text/javascript” src=”swfobject.js”></script>

<div id=”flashcontent”>
This text is replaced by the Flash movie.
</div>

<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.write(“flashcontent”);
</script>让我们看看这些代码是如何工作的

<div id=”flashcontent”>[...]</div>首先，我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换，当客户端没有安装Flash播放器的时候，这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);创建一个新的SWFObject实例，并且传入一下参数:

swf – SWF文件路径
id – 您为这个SWF文件分配的id值，它将用于给embed与object标签设定name属性，以便于可以支持swliveconnect的功能，如动态传入变量
width – 宽度
height – 高度
version – FlashPlayer需要的版本号，它可以详细到 ‘主版本号.小版本号.细节’，例如：”6.0.65″。一般地，我们只需传入主版本即可，例如：”6″。
background-color – Flash资源的背景色，16进制格式
此外，还有如下可选参数:

quality – 画面质量，默认为”high”。
xiRedirectUrl – 详见ExpressInstall相关
redirectUrl – 没有安装相应版本的播放器后自动跳转的目标地址
detectKey – 这是当忽略检测时，SWFObject将去url地址中查找的变量，默认值为“detectflash”，后续有详细介绍
so.write(“flashcontent”);将 Flash资源应用到DOM里，在浏览器显示出来。

SWFObject在

<script type=”text/javascript”>
</script>

之间加入多个参数来实现各个效果，参数很多，但是实际只要一点点。我们可以看下这样的代码：

<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “400″, “100%”, “8″, “#336699″);
so.addParam(“quality”, “low”);
so.addParam(“wmode”, “transparent”);
so.addParam(“salign”, “t”);
so.addVariable(“variable1″, “value1″);
so.addVariable(“variable2″, “value2″);
so.addVariable(“variable3″, “value3″);
so.addVariable(“variable1″, getQueryParamValue(“variable1″));
so.addVariable(“variable2″, getQueryParamValue(“variable2″));
so.write(“flashcontent”);
</script>

这段代码给出了SWFObject的常用参数：

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);
so.addParam(“Param1″, “Param2″);
so.addParam(“Param3″, “Param4″);
so.addParam(“Param5″, “Param6″);
so.addVariable(“variable1″, “value1″);
so.addVariable(“variable2″, “value2″);
so.addVariable(“variable3″, “value3″);
so.addVariable(“variable1″, getQueryParamValue(“variable1″));
so.addVariable(“variable2″, getQueryParamValue(“variable2″));
so.write(“content”);

解释一下这些参数的作用：

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);         //这段是SWFObject必须的基本参数，所有SWFObject都必须包含的。
so.addParam(“Param1″, “Param2″);   //这里是给Flash添加内联参数，可以实现诸如背景透明之类的效果。依照需求添加就可以了，参数和emded/object标签是一样的代码，下同。
so.addParam(“Param3″, “Param4″);
so.addParam(“Param5″, “Param6″);
so.addVariable(“variable1″, “value1″);    //这里是给Flash添加FlashVar，这是以FlashVar的方式给Flash的Root添加变量，对于Number型变量在Flash端需要做类型转换。
so.addVariable(“variable2″, “value2″);
so.addVariable(“variable3″, “value3″);
so.addVariable(“variable1″, getQueryParamValue(“variable1″));   //Flash获取URL变量对于url?arg1=test1&arg2=test2这样用GET方式传递变量的URL，我们可以用 getQueryParamValue方法来获取变量。
so.addVariable(“variable2″, getQueryParamValue(“variable2″));
so.write(“content”);    //这里是至关重要的一个地方，他是用一段特定内容取代Flash无法显示时的内容。可以事先在CSS里定义好样式，在文档里使用div标签写出来。这里在调用过来。

不过本人发现这个东西目前还有一些未解决的问题，比如：我在网页中多次使用SWFObject时就存在只显示其中一个，而另一个未能显示的问题。经多次调试未能成功，望日后能解决这个问题，若有高手发现问题所在，还望提点～～～