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

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

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

下面让我们看看同时适合开发人员和设计人员的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所能办到的。

另一类是几个很有用的几个css文件，一个是css page grids，用它可以很方便的布局你的网页。另外两个是standard css fonts和standard css reset,利用这两个css可以对字体等在不同浏览器中获得一致的效果.

yahoo的ajax设计模式是在目前的Web2.0网站中常用的一些改善用户体验,增强交互效果的文章,格式和design pattern类似.有时会提供一些例子网站或网页,当然都是yahoo自己的几个网站,上面的javascript可能还没有整理到yui里面去,但是 也都是格式化很好的javascript,也没有混淆.

yui utilities(connection manager)

Yahoo的javascript文件都有一个注释的很好的，格式化很好的版本和一个去掉注释和空格的版本，学习看源代码当然用前者，而最后在网页上使用的时候就可以选用后者。

1. connection manager
这个工具包用来管理xmlhttprequest,通过这个工具包可以查询正在执行的请求的状态，可以注册正确返回的回调函数，错误处理的回调函数，还可以根据提供的表单id方便的收集和发送表单字段。下面给出的代码是基本调用形式

var callback =
{
success: function(res) {/*success handler code*/}, //正常返回处理函数
failure: function(res) {/*failure handler code*/}, //出错返回处理函数
argument: [argument1, argument2, argument3] //可以在success函数和failure函数中访问的变量
}
var transaction = yahoo.util.connect.asyncrequest(’get’, surl, callback, null);

下面的表给出的是通过正确返回时res参数可以获得的属性值。
属性明 描述 tid 该http请求的事务表示 status 返回的http状态码 statustext 对应状态码的字符串表示 getresponseheader[label] 返回label名称标识的http头的值 getallresponseheader 所有的http头的字符串表示，用”\n”分隔 responsetext 返回内容的字符串表示 responsexml 返回内容的xml表示 argument 回调函数中传入的变量

错误返回时可以通过res返回的属性
属性明 描述 tid 该http请求的事务表示 status 0 statustext “communication failure” argument 回调函数中传入的变量

如果想发送的是表单数据，那么使用下面的代码就可以了：

yahoo.util.connect.setform(formid);
var cobj = yahoo.util.connect.asyncrequest(’post’, ‘http://www.yahoo.com’, callback);

查看请求是否已经处理完

var cobj = yahoo.util.connect.asyncrequest(’get’,’http://www.yahoo.com’,callback);
var callstatus = yahoo.util.connect.iscallinprogress(cobj);

超时取消请求

var cobj = yahoo.util.connect.asyncrequest(’get’, surl, callback);
settimeout(”yahoo.util.connect.abort(cobj)”,10000);

yui utilities(event)

使用event工具包可以简化浏览器端的事件驱动程序的开发，通过使用简单的接口就可以订制响应dom事件的代码，同时获得浏览器event对象的各种属性也很方便。通过event工具包我们还可以订制自己的事件，这样页面组件可以接收这些事件并做出响应。

基本的事件代码

var oelement = document.getelementbyid(”elementid”);//获得事件源
function fncallback(e) { alert(”click”); }//定义回调函数

yahoo.util.event.addlistener(oelement, “click”, fncallback);//注册回调函数，当oelement的click事件发生的时候，fncallback函数将被调用。
//或者更简单的直接传递id yahoo.util.event.addlistener(”elementid”, “click”, fncallback);

注册响应多个页面元素的事件

var ids = [”el1′, “el2′, “el3′];//该数组中可以包括元素id，元素的引用，或者两者混合的情况。
function fncallback(e) { alert(this.id); }
yahoo.util.event.addlistener(ids, “click”, fncallback);

yui的event包解决了一些比较实际的问题，第一页面元素通常在javacript注册事件代码后载入，这个时候yui会正确延迟注册，直到指 定id的元素可以访问。第二微软的ｉｅ浏览器在事件处理函数中的this指向的是window对象，而不是发生事件的那个元素，yui也会正确的传递事件 发生的源元素。第三可以把任意的对象传递给事件处理函数。

创建和使用自定义的事件

1.使用customerevent对象创建自己的事件

function testobj(name) {
this.name = name;
this.event1 = new yahoo.util.customevent(”event1′, this);
}

yahoo.util.customevent = function(type, oscope);
type 表示事件类型的字符串

2。注册对自定义事件的响应函数

function consumer(name, testobj) {
this.name = name;
this.testobj = testobj;
this.testobj.event1.subscribe(this.onevent1, this);
}

3。响应函数

consumer.prototype.onevent1 = function(type, args, me) {
alert(” this: ” + this +
“\n this.name: ” + this.name +
“\n type: ” + type +
“\n args[0].data: ” + args[0].data +
“\n me.name: ” + me.name);
}

4。触发自定义事件

function testdata(data) {
this.data = data;
}
var t1 = new testobj(”mytestobj1′);
var c1 = new consumer(”mytestconsumer1′, t1);
var d1 = new testdata(”mydata1′);
t1.event1.fire(d1);

yui(dom collection)

yui的dom工具包屏蔽了各种浏览器的差别，使用dom工具包可以方便的的操作页面元素，包括控制元素的坐标，以及改变元素的css风格。

获得和设置元素坐标
var pos = yahoo.util.dom.getxy(’test’);
yahoo.util.dom.setxy(’target’, pos);

设置元素的css属性
yahoo.util.dom.setstyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = yahoo.util.dom.getstyle(’test2′, ‘opacity’);

获得显示当前文档的窗口的大小。
var viewport = [
yahoo.util.dom.getviewportwidth(),
yahoo.util.dom.getviewportheight()
];

获取和设置与css相关的属性
getelementbyclassname(classname,tagname,rootnode)
hasclass(element,classname)
addclass(element,classname)
removeclass(element,classname)
replaceclass(element,oldclassname,newclassname)