垂直栅格系统与渐进式行距研究

专著于富媒体技术~
本站某些作品来源于互联网，如果侵犯了您的利益，请留言说明！

垂直栅格系统与渐进式行距研究

Oct

2009

准备工作
我们知道网页的栅格系统是运用固定的格子设计版面布局，使其风格工整简洁。视觉上来说。栅格系统能够将大块区域分割成小区域，清楚地展示页面的布局，并能够引导视觉线在各个板块之间扫描、阅读。从信息上来说，栅格系统让信息的呈现方式更加直观，从而有效提高易读性。

但是大部分栅格系统是在水平方向上的布局，其实，我们的垂直方向也是有栅格系统的——也就是我们的“垂直韵律”。
垂直韵律的就像好比我们手上拿着的线格本子，有着一行行的网格线，安排着垂直方向上的文字排版。“排版中的空间就像是音乐里的节拍. ”音乐的节拍虽然有许多变化,但是几乎每首歌都会有一个固定的节拍来掌握整个歌曲的节奏. 这就是为什么栅格系统一般用固定宽度的网格阵列来指导和规范网页中的版面布局以及信息分布。

其实，那么，在网页里，垂直韵律应由三个因素控制：
•  字体大小(font-size)
•  行距(line-height)
•  间距(margin,padding)

认真考量这三个因素的值，才能实现垂直韵律。

开工
基础行距
在垂直韵律中，基本的单位是行距。在整个页面上设定一个合适的行距是垂直韵律之所以能够成为韵律的必要条件。这个行距，我们将应用于整个页面的所有文字上，包括正文、标题、侧边栏等。例如，我们现在设定我们的字体大小(css font-size)为12px，行距(css line-height)为18px。(对于中文宋体来说，12px是能够清晰显示的最小字号。为了保证可读性，12px的1.5倍行距就是18px。同时12px/18px也是中文互联网上最常用的字号和行距。)我们在空白页面的垂直方向上以18px为单位做垂直网格，就像我们线格本子上的线条，每条网格线也就是基线的对齐线。接着，我们放上三个段落(12px/18px)作为例子讲解。

以上效果代码如下（保存成HTML即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo 1 正文</title>
<style type="text/css">
body{
  font-size:12px;
  line-height:18px;
  background-color:#f0f0f0
}
.shortcut{  
  width:500px;
  margin:5px auto;
  text-align:right;
}
.gridOn .turnOn{
  display:none;
}
.gridOff .turnOff{
  display:none;
}
#container{
  background-color:#fff;
  border:1px solid #ccc;
  width:500px;
  padding:10px;
  margin:10px auto;
}
.gridOn #container{
  background:#fff url(18px_bg.png) repeat left 8px;  
}
p{
  font-size:12px;
  line-height:18px;
  margin:0;
}
</style>
</head>
<body    id="bodyWrap" class="gridOn">
<div class="shortcut">
<a href="javascript:void(0)" onclick="document.getElementById('bodyWrap').className='gridOff'" class="turnOff">关闭网格</a>
<a href="javascript:void(0)" onclick="document.getElementById('bodyWrap').className='gridOn'" class="turnOn">显示网格</a>
</div>
<div id="container">
<div class="main"><p>去年的时候，青云发表过关于栅格系统的文章 。我们知道网页的栅格系统是运用固定的格子设计版面布局，使其风格工整简洁。视觉上来说，栅格系统能够将大块区域分割成小区域，清楚地展示页面的布局，并能够引导视觉线在各个板块之间扫描、阅读。从信息上来说，栅格系统让信息的呈现方式更加直观，从而有效提高易读性。</p>
<p>但是大部分栅格系统是在水平方向上的布局，其实，我们的垂直方向也是有栅格系统的。</p>
<p>排版学家Robert Bringhurst说：“排版中的空间就像是音乐里的节拍。”音乐的节拍虽然有许多变化，但是几乎每首歌都会有一个固定的节拍来掌握整个歌曲的节奏。这就是为什么栅格系统一般用固定宽度的网格阵列来指导和规范网页中的版面布局以及信息分布。</p>
</div>
</div>
</body>
</html>

内文分页： [1] [2] [3] [4] [5] [6] [7]

牛C网

垂直栅格系统与渐进式行距研究

分类

其他

统计

链接

发表评论
表情打开HTML 打开UBB 打开表情隐藏	昵称密码游客无需密码网址电邮 [注册] 验证码不区分大小写