曾经本人非常不重视页面工作,而将精力放在系统的业务实现上,做出的界面不尽人意。06年我负责的一个产品,在全国有近30家客户,每个客户的项目,一般
仅在首页上不同,登录后,功能界面完相同,用户操作及界面的可用性,现在想想,可以说是非常的差,很多操作都是从程序员角度去设计的(软件产品销售得还是
很不错,当时的老板还是非常有眼光的,虽然很久没联系过了,但至今对他比较敬佩)。
我们当时每谈成一家客户,都会请外面的美工,用ps做一张首页(当时价格2000元左右),经过客户多次确认后,再由我们对html页面熟悉些的开发人员
照界面切图,实现设计效果。当然这块工作不是我做的,我对html元素了解甚少。近两年,带娃娃们做的一些项目,让我深刻认识到,页面这块的学问还非常的
深,怪不得大公司都有UI工程师这一角色呢。页面的规范,页面的批量批生产与维护等方面,我着实还有些想法。下面主要谈谈一个css框架在项目中的应用。
做过互联网项目的人应该都知道,前端页面的的效果、用户体验及后期维护在当的重要,这往往会决定一个互联网项目的成败。那么,做为美工人员,做好页面效果
图后,页面实现人员如何才能照葫芦画瓢,实现最初的设计效果呢?美工和页面实现人员之间是否有某种约定或规范以协调二者顺畅地工作?对,960
css框架可以解决这个问题。
到网上搜一下,你会找到很多960相关的文章,记得有一篇 960的秘密,推荐大家去看看。960 css框架下载地址在:http://960.gs/,很小的一个压缩包,解压后,就可以开始工作了:
1、代码包中的code目录。该目录中存放的是演示源代码,有12栅格与24栅格的两种示例(我一般用24栅格的,有利于精细控制),有默认从左到右布局排列的,也有从右到左排列的示例,请大家结合界面显示及网页源代码,很快就知道怎么用的了。
2、该框架有如下几个css文件,使用时需要引入到你的页面中:templates
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960_24_col.css" />
前两个css文件不是必须引入的,它们的作用是为很多html元素设计默认的样式,如果你的站点中英文据多,建议你使用。
960_24_col.css是24栅格,从左到右排版的文件,当然,你也可以选择其它的几种(我相信阿拉伯国家的人会选择从右至左的css文件),12或24栅,请根据你的站点类型选择,个人主面,12足够,门户站,24可能都少了。
3、960框架中的的css样式:
container_x, 顶层大容器样式,x是栅格数。
grid_x, x是数据栅格数,你可以向小孩做算术一样来决定某个版块的宽度。
prefix_x, 从什么格处开始显示。
alpha 取消栅格间左间距,一般是5px
omega取消栅格间右间距
4、templates目录中的模板文件。
该文件由美工人员使用,有ps、corel_draw、flash等多种设计工具的模板文件,美工在设计时,将这些文件设置为底图,在进行模块定位时,与底图上的栅格对齐,这样,就可以和页面实现人员达到设计与实现的统一。
最后一个思考?960 css只定义了宽度的栅格,为什么没有高度呢?本人也想了很长时间,经过实践发现,网站项目的版块高度一般都是根据内容自动适应的,所以,定义高度的意义不是很大,呵呵。
960框架很适合网站类产品,可以实现页面批量化、工业化生产与维护,但它对mis类型的管理系统,个人觉得用处不大,如果你有什么不同想法,欢迎给我留言。
分享到:
相关推荐
走煤炭新型工业化道路若干思考.ppt
信息化带动工业化的思考.docx
信息化工业化融合思考实践.ppt
工业化大生产发酵生产过程计算机控制技术.docx工业化大生产发酵生产过程计算机控制技术.docx工业化大生产发酵生产过程计算机控制技术.docx工业化大生产发酵生产过程计算机控制技术.docx工业化大生产发酵生产过程...
信息化与工业化融合的思考与实践PPT学习教案.pptx
2019年咨询工程师继续教育考试之信息化和工业化融合新形势及创新发展路径探2019年咨询工程师继续教育考试之信息化和工业化融合新形势及创新发展路径探2019年咨询工程师继续教育考试之信息化和工业化融合新形势及创新...
新材料行业周报:特种工程塑料系列一,聚醚醚酮性能优异,国产工业化生产待加速.pdf
工业化(Industrialization)是利用机械化手段,以物质资料为原料,以资本和劳动为生产要素,进行大规模的物质产品的生产和消费,推动人类社会从农业社会迈向工业社会,实现以机器大生产为特征的工业部门在国内生产...
海藻肥工业化生产.doc
二氧化硅的工业化生产.docx
工业化大生产发酵生产过程计算机控制技术.pdf工业化大生产发酵生产过程计算机控制技术.pdf工业化大生产发酵生产过程计算机控制技术.pdf工业化大生产发酵生产过程计算机控制技术.pdf工业化大生产发酵生产过程计算机...
信息化带动工业化的思考-4页.pdf
工业化生产与信息化施工整理.pdf
云计算时代电影工业化体系构建策略与工程设计思考.pdf
信息化工业化融合工业大数据建设方案 信息化工业化融合工厂大数据建设方案
第二章:工业化生产预测
关于建设事业信息化与新型工业化的思考.docx
大数据背景下工业企业信息化应用思考.pdf
手工制作与工业化生产服装.pptx
信息化和工业化融合管理体系 新型能力分级要求.pdf