网页栅格化设计学习ppt课件.pptVIP

网页栅格设计系统;;版式设计 1919年德国著名建筑家沃尔特·格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。 1928年，朱斯特·施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。 20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。 1965年，在美国的芝加哥成立了一家新的平面设计公司——尤尼马克设计公司（Unimark），主要设计人员包括有拉尔夫·依克斯特朗姆（Ralph Eckerstrom）、詹姆斯·佛格曼（James Fogleman）、马西莫·维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传 达功能。这家公司发展很快，不久就成为一家拥有402名工作人员、在全世界设有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中 得到很大的成功，而企业的规模又使得这个风格在世界各地得到进一步推广。;网页设计中的栅格系统 网页栅格系统是从平面栅格系统中发展而来。以规则的网格阵列来指导和规范网页中的版面布局以及信息分布?。 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。 ???????????????;栅格系统的设计原理及应用;栅格系统的设计原理及应用;Yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。 只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。;栅格系统的设计原理及应用;栅格系统的设计原理及应用;神奇的960;950的来历;W的含义变为去除Margin的总宽度，公式变化为： W = N * C - g 将上面的公式实例化一下： 950 = 12 * 80 - 10 950 = 16 * 60 - 10 950 = 24 * 40 - 10 这就形成了960蛋糕的三种常见切法。;12 x 80;Yahoo! 24 x 40;栅格系统的设计原理及应用;黄金分割 黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 – x, 使得： x / 1 = (1 - x) / x 化为简单的二次方程： x^2 + x - 1 = 0 正数解为： x = (sqrt(5) - 1) / 2 ~= 0.618 这就是黄金分割。 这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧） 在平面设计领域，黄金分割点被广泛采用。比如下面这种图： ;960栅格，实际宽度是950. 对于 24 x 40 的情景， 最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15;高度方向上的栅格 高度值560 可以让高宽比接近黄金分割。 针对560, 我们采用 14 x 40 栅格;栅格系统的优势;Thank you!;Blueprint的实现 Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面： ;960.gs的实现 谈到960栅格系统，不得不提960.gs. Nathan Smith在这篇文章中，详细阐述了他的想法和设计思路。这里有个demo页面，核心代码很简单：;YUI的实现 接着来看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三个文件组成： reset.css - 样式重置 fonts.css - 版式字体控制 grids.css - 栅格系统;YUI的特点是： 依旧是采用浮动布局，槽（Gutter）宽通过margin-left来控制（Blueprint采用右边距，960.gs采用均分，这三个框架对槽的处理实在有意思） 总宽度采用em, 这样可以用在弹性布