|
网页制作 设计师的框架(2) border: none;
background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);
}
列表左浮动，并且将链接以块的形式置于列表当中，链接也左浮动，字体居中，象烦人的广告一样的这些工作，框架以帮你完成，在你的网站设计工作中，只需集中精力处理特别的、有趣的网站细节，而不是写已经写过百万次的CSS代码。
如何构建一个CSS框架?
构建一个框架有几种可能的方式，但最常见，可以说是最有用的，抽象通用的CSS放到一个独立样式表文件，该样式表文件只包含整体的一个特有部分。例如,你可以，一个样式处理排版，另一个处理大量重置。这种好的方法能使你选择性引入你需要的样式，在你框架里可能有六七个不同的样式文件，但不需要其中的一两个，只要不引入即可。我们团队创建的框架包含5个样式文件：
- reset.css —处理重置
- type.css —处理排版
- grid.css —处理布局
- widgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮
- base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架
然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充。
忠告
这种方法不错,但也带来新的问题：增加了每一个页面的http链接数。对于大流量和中等流量的网站，每个页面增加5个以上HTTP连接数，系统管理员可能就麻烦大了。两个可能解决办法：
- 把所有样式都放到一个文件里，而不是分成多个模块。这里的问题是，失去了框架只包含特定文件的灵活性，而且维护也变得麻烦。
- 有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法，但如果做好了应该是很有效率的。以我上面框架为例，当请求（Request）base.css时候，而不是请求（Request）type.css , grids.css 等的时候，这一动态处理过程触发。这样一来,单个文件仍然可用，而在平台版本上整个框架也有效的。
总之，我们目标不是尽可能的抽象，这点非常重要。相反,其目标是提供了一个快速启动和更有效率的设计过程，这是绝对有可能去做过的。如果你过于的抽象，事情会变得混乱，太多的HTTP链接数会影响你网站的性能。记住：一个好的框架不是把事情搞更难更复杂，而是一个简单的从零的开始。
总结
我们web设计师往往经常重复自己，就像我程序世界里的那些朋友，我们重置浏览器默认样式、设计布局和导航菜单写了一遍又一遍——几乎每个项目。花一点时间整理CSS 框架，可以使你快速的启动每一个网站项目，更轻松的维护网站，并帮助团队里其他的设计师理解你作品。要注意的一点，这些益处的获得必须以不影响网站的性能为前提。
|
