前往顾页

网页的栅格体系设想

时候:2010-07-28 16:05来源:知行网www.zhixing123.cn 编辑:麦田守望者

More...

栅格体系英文为“grid systems”,也有人翻译为“网格体系”,实际上是一回事。不过从定义上说,栅格更加精确些,从维基百科查到栅格的定义为:栅格设想体系(又称网格设想体系、标准尺寸体系、法度版面设想、瑞士平面设想气势、国际主义平面设想气势),是一种平面设想的体例与气势。应用牢固的格子设想版面布局,其气势工致简练,在二战后年夜受欢迎,已成为本日出版物设想的主流气势之一

网页设想中的栅格体系
       我给网页栅格体系下的定义为:以法则的网格阵列来指导和标准网页中的版面布局和信息漫衍。
网页栅格体系是从平面栅格体系中生长而来。对网页设想来讲,栅格体系的利用,不但可让网页的信息闪现更加美妙易读,更具可用性。并且,对前端开辟来讲,网页将更加的矫捷与标准。

栅格体系的设想道理及利用
那么若何设想一个栅格体系?接上去我们将经由过程实例,详细的介绍一下网页栅格体系的道理与利用:

在网页设想中,我们把宽度为“W”的页面豆割成n个网格单位“a”,每个单位与单位之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系以下:
W =(a×n)+(n-1)i
因为a+i=A,
可得:(A×n) – i = W
这个公式表述了网页的布局与网页“面前”的栅格体系之间的某种关系。我们拿yahoo作例,来看一下栅格体系的利用:

yahoo的网站页面宽度为W=950px,每个区块与区块的间隔为i=10px;如果利用下面的公式,可以推出A=40px,既yahoo首页横向版式设想采取的栅格体系为:
(40×n)- 10 = W
下面我们列出当n即是不合数值时W转变的数值表格 :

从表格可以看出:yahoo首页的布局美满是遵循栅格体系进行设想的,每个区块的宽度对应的n值别离为:4,11,9。在这里我们看到一个很成心思 的事情:只需包管一个横向维度的各个区块的n值相加即是24,则便可包管页面的宽度必然是950px。但是,950px的宽度也刚好就是当n=24的时 候,W的宽度值。由此我们得出以下的利用形式:

在栅格体系中,设想师按照需求制定不合的版式或分别区块,他们的根据将是下面的那张对应表进行设想。如许,一个栅格体系的利用就今后开端了。我们 看到,利用栅格体系的网页设想,非常的有层次性;看上去也很舒畅。最首要的是,它给全部网站的页面布局定义了一个标准。对视觉设想师来讲,他们不消再为 设想一个网站每个页面都要想一个宽度或高度而烦恼了。对前端开辟工程师来讲,页面的布局设想将美满是标准的和可重用的,这将年夜年夜节俭了开辟本钱。对内 容编辑或告白发卖来讲,所有的告白都是法则的,通用的,他们不再消做出一套N张不合尺寸的告白图了……

当然只需你愿意,我们可以衍生出任何一种栅格体系,只需改变A和i的值,这个按照网站的实际环境来制定。那么若何挑选适合栅格体系,首要经由过程“构成 要素与法度、限定与挑选、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法例、圆与构成、程度构成这些设想元素打算,来实现比例调和的平 面设想”。比较通俗,我们在这里就不详细阐述了。

------分开线----------------------------
标签(Tag):平面设想
------分开线----------------------------
保举内容
猜你感兴趣