当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 栅格就是你对页面版式的规划

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 栅格就是你对页面版式的规划


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 42 ::
收藏到网摘: n/a

英文原文:http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm

栅格就是你对页面版式的规划

你日常所见的许多页面都有栅格存在。你可能注意不到,但它确实存在,并且支撑着设计内容,建立整体的架构,引导着页面的元素。

栅格是隐形的架构,用于指导你页面上各种元素的放置。栅格不会在印刷成品上出现,但却影响巨大,它控制着文本栏的宽度、照片周围空白的一致、杂志上每页重复出现元素的固定位置。栅格是一系列的辅助线,决定着印刷品的边距,页面元素(大标题、正文、照片等)之间的间距,让你知道如何在空白的页面上放置它们。

在决定是否使用或怎样使用栅格之前,你应该了解栅格的一些基础知识以及创建方法。虽然在印刷成品中看不到栅格,但在构建页面的过程中你还是需要能看见它。

在你的页面版式中可能会设置有“Margin”(页边距)。在屏幕上这些边线可能会显示为浅色的实线或虚线。上、下、左、右的边线在你的页面中部形成了一个盒子。你将以此为基点,建立单元格。通过把页面均分为几个等份,来创建多个单元格。你可以创建可见的网格来辅助页面排版:你的页面排版软件有辅助线的功能,或者你可以在非打印层绘制边线或方块。通常你可以从页面旁的标尺上“拖拽”出一条辅助线,然后放置在需要的地方。

  • 栅格与边距
    边距决定页面的外部边界。它们象一个画框一样包围着你的页面内容。四周边距不一定是均等的,但在(同一个出版物内)每一页之间或每一版之间边距通常是保持一致的。在大部分程序中,你在设置页面格式(尺寸规格)的时候就可以设置页边距。在某些程序中,你甚至可以“实时的”在屏幕上拖动边线来调整边距。
  • 栅格与栏空
    当你将页面的内部空间(版心)分割为几个均等部分后,每个单元之间的白空间就称为"Alley" (栏空)。栏空的方向是水平的、垂直的、或是两个方向兼有,取决于你的栅格设置。在某些设计软件中,也称之为白空间或文本栏的"gutter"(内边距)。
  • 栅格与内边距
    两页或两版展开时,内部的边距就称为"gutter"(内边距),即中缝两边的边距。在某些排版软件中,两个文本栏之间的间隙也叫做"gutter"。
  • 栅格单元
    栅格单元是你在页面上放置文本和图片的基本坐标。它决定的是“放置”而非“尺寸”。就是说,假如你有一幅比栅格单元大的图片,你一样可以使用它。你可以用栅格单元来帮助你缩放图片尺寸,缩放匹配1、2、3或更多个栅格单元大小,然后将它放置在页面上。
  • 栅格提供了视觉上的条理性
    栅格有着不同的应用,但并非适用于任何设计、任何人。杂志和简报之类的出版物几乎都离不开栅格。栅格增添了页面之间的一种连贯性,并且大大加速了设计的进程,设计师不需要每一页都“从草图开始”规划版式和设计。

在一系列独立而有关联的印刷品(如系列海报,或是为某个广告活动或某产品线设计的一系列传单)中,一个共同的栅格有助于统一这系列独立印刷品的整体形象。

在一件印刷品中往往有多个独立元素(本文块、大标题,照片,图表),栅格会帮助你把这些页面元素组织得井井有条。