您现在的位置: 网页制作教程网 >> 网页设计 >> 网站建设流程 >> 文章正文

关于网页设计制作中设计师的框架

作者:haha世界

来源:Jeff Croft

热度:

2007-7-26 23:40:42



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

ul.tabs li {   
border: none;  
  background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);  
}
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连接数,系统管理员可能就麻烦大了。两个可能解决办法:

  把所有样式都放到一个文件里,而不是分成多个模块。这里的问题是,失去了框架只包含特定文件的灵活性,而且维护也变得麻烦。

  有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法,但如果做好了应该是很有效率的。以我上面框架为例,当请求(Request)base.css时候,而不是请求(Request)type.css , grids.css 等的时候,这一动态处理过程触发。这样一来,单个文件仍然可用,而在平台版本上整个框架也有效的。

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

  总结

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

上一页  [1] [2] 


我来说两句:

1分 2分 3分 4分 5分
姓名: *


* 请各位网友遵纪守法并注意语言文明。
网站简介 | 联系方式 | 意见建议 | 版权说明
Copyright © 2007 All rights reserved
滇ICP备06006992号