网页栅格化的设计学习.pptVIP

网页设计栅格化布局 2012.10.18 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 一、栅格化概念 二、栅格化的优点、缺点 三、栅格化原理与运用（公式、方法） Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 一、网页设计栅格化系统 栅格系统英文为“grid systems”，开始是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布?。 通俗点讲是一种平面设计的方法与风格，运用固定的格子设计版面布局，其风格工整简洁。 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。 ??????????????? Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 二、栅格系统的优势 能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。 栅格系统更多的是一种布局思想。对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 三、栅格系统的设计原理及应用 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =（a×n）+（n-1）i由于a+i=A，可得：(A×n) – i = W Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 三、栅格系统的设计原理及应用 Yahoo的网站页面宽度为W=950px每个区块与区块的间隔为i=10px 如果应用上面的公式，可以推出A=40px，既Yahoo首页横向版式设计采用的栅格系统为：（40×n）- 10 = W Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。 只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。 三、栅格系统的设计原理及应用 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 三、栅格系统的设计原理及应用 页面结构较复杂,门户型网站 首页宽度为950px/960px Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Yahoo! 24 x 40 淘宝商城 大的两栏布局 24 x 40 主体部分使用740的栅格划分 网易 16 x 60 三、栅格系统的设计原理及应用 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd