文章搜索:
打开支付宝首页搜索“510617664”,即可领红包
  首页--> 计算机--> 设计理论
 
设计师的框架
http://www.xxqqss.com 学习轻松网 点击量:4422
 

什么是真正的益处?

框架的真正好处是能够快速启动工作,你可以创建一个新的(X)HMTL文件,引入你框架,你不用再处理重置padding 和 margins的事情,漂亮的排版,干净的表单,整齐的布局,有效的widgets,等等。很明显,很明显,虽然,你一定要来定制外观和感觉为每个站点。为实现这一目标,所有你需要做的是复写,并添加到默认的风格是必要的。

很显然,尽管你必须为每个网站定制外观,为了完成这一任务,你所需要做的就是在默认的样式上加几行代码。举个例子,如果在你的框架里,为所有的 class属性为“tabs”的UL标签设置了基本的水平导航样式,并且有一个灰色的边框,你只需要几行CSS代码,就可以定制成你的网站所符合的外观样式。

ul.tabs li {
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连接数,系统管理员可能就麻烦大了。两个可能解决办法:

  1. 把所有样式都放到一个文件里,而不是分成多个模块。这里的问题是,失去了框架只包含特定文件的灵活性,而且维护也变得麻烦。
  2. 有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法,但如果做好了应该是很有效率的。以我上面框架为例,当请求(Request)base.css时候,而不是请求(Request)type.css , grids.css 等的时候,这一动态处理过程触发。这样一来,单个文件仍然可用,而在平台版本上整个框架也有效的。

总之,我们目标不是尽可能的抽象,这点非常重要。相反,其目标是提供了一个快速启动和更有效率的设计过程,这是绝对有可能去做过的。如果你过于的抽象,事情会变得混乱,太多的HTTP链接数会影响你网站的性能。记住:一个好的框架不是把事情搞更难更复杂,而是一个简单的从零的开始。

总结

我们web设计师往往经常重复自己,就像我程序世界里的那些朋友,我们重置浏览器默认样式、设计布局和导航菜单写了一遍又一遍——几乎每个项目。花一点时间整理CSS 框架,可以使你快速的启动每一个网站项目,更轻松的维护网站,并帮助团队里其他的设计师理解你作品。要注意的一点,这些益处的获得必须以不影响网站的性能为前提。

来源:蓝色理想  作者:第一速度


上一页     下一页
打印】 【关闭
免责声明 :本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请发送fiyeadwyv@163.com
最热门点击排行
 
版权所有 2006-2021:学习轻松网 Copyright http://www.xxqqss.com All rights reserved 浙ICP备14013707号-1
广告联系电话: 13958357030 联系QQ:9792414 工具条下载