使用960网格系统(960 Grid System)作为设计框架

960 Grid System 已经存在了一段时间......但它主要用于项目的编码方面，作为 html/ css f ram ework。今天，我们将讨论在项目开始时使用 960GS 等网格系统的优势，甚至在您打开 photoshop 或 Fireworks 之前。如果您以前没有使用过框架，或者您只是想好好复习一下，那么这是一个很好的起点！

一点背景知识：我们的姊妹网站 Nettuts发布了 许多关于使用 CSS 框架作为编码工具的精彩文章。它们都与这个讨论有关，所以有机会时去看看。然而，本文将着眼于 专门为 Web 设计师使用框架的优势。我们不会深入研究编码，相反，我们将讨论如何在设计阶段使用框架成为一个强大的工具，甚至在编码开始之前。好吧，让我们潜入吧！

深入框架

您很有可能已经听说过或已经使用过某种 CSS 框架……但以防万一，让我们回顾一下在任何 Web 项目中使用 CSS 框架（又称网格系统）的主要好处：

• 提供一个“框架”，旨在在所有显示器上看起来都不错。

• 通过定义精确的测量来简化设计过程。

• 通过提供预编码的 HTML/CSS 来减少开发时间。

• 在一个完美的世界里，它可以帮助设计师和开发人员更好地沟通——平滑从设计到编码的过程。

最终，CSS 框架应该有助于为内容列建立一些基本准则，同时仍为设计人员提供对其设计的完全控制权。

在这篇文章中：我将解释什么是 CSS 框架，以及为什么选择 960。然后，我将介绍如何应用 960 Grid 的基础知识。为了结束我们的讨论，我将向您展示一些使用 960 网格的站点，以及它们的结构。

CSS 框架：简要概述

CSS 框架是为使 Web 开发人员的生活更轻松而创建的一系列样式表。它们解释了浏览器的各种怪癖，易于适应，并应用基本的设计原则（例如在元素之间建立视觉上令人愉悦的边距）。

通常，这些框架也有排版样式表，它可以作为开始处理网站排版的好地方（有关排版的更多信息，请查看这篇文章）。

目前有两个主要的 CSS 框架：Blueprint和960。两者都是功能完善的框架，具有强大的功能和易用性。它只是归结为您最喜欢使用哪个框架的偏好问题。

在开始项目的设计阶段之前，与将要编写网站代码的人讨论框架的选择非常重要。通常，开发人员会对特定的 CSS 框架有偏好，作为我们在设计阶段使用框架的主要原因之一是为了平滑从设计到编码的过渡，这是一个重大决定。如果您自己编写项目，只需确保您对所选的网格框架感到满意 - 没有什么比基于您最终不喜欢的框架设计整个网站更糟糕的了。

960 GS：坚韧不拔的细节

就个人而言，我发现 960 Grid 更适合我的需求，所以这就是我所采用的，也是我们将在本文中讨论的内容。但是，我们将讨论的总体原则将适用于任何框架，包括蓝图。

960.gs 是基于将您网站的所有元素放在一个 960 像素宽（聪明的女孩）容器中，并将该容器分成 12、16 或 24 个相同大小的列。它们提供了一种使用交替宽度的工具，但 960 是整个系统的开发目标，而且它恰好看起来非常清晰

960GS的 CSS 生成器

为什么是 960 像素？因为 960px 是一个适合我们浏览网页的众多平台的宽度。它本质上允许一个 1024 像素宽的显示器准确地显示网站，而无需水平滚动，考虑到浏览器镶边的宽度、滚动条和一些用于易读性的填充。主内容列的左右两侧总是有 10 像素的边距，这意味着较小的浏览器将始终能够阅读最左侧的内容，而文本不会与浏览器窗口对接。

此外，960GS 中的所有数字都是基于黄金比例的整数 - 没有小数点或时髦的间距问题。如果您阅读过我们关于数学和网页设计的文章，您就会知道正确计算这些数字的重要性。

960 处理（或不处理）排版的方式是一个明显的遗漏或不错的功能，具体取决于您如何看待它。包含一个 text.css 文件，但这主要是为了确保至少有一个东西到位，以便在您进行 r api d 原型设计时，标题、段落和列表等常见元素具有基本样式。

蓝图有何不同？

我不会在这里深入探讨，但让我们简要讨论一下 960.gs 和 Blueprint 之间的主要区别。首先，Blueprint 是一个基于 950px 的 CSS 框架——它在处理基本布局的方式上与 960 非常相似（BP 使用 24 列，具有类似的填充和调整ios方法）......但这就是 Blueprint 不再存在的地方相似的。

蓝图确实允许特定于表单的样式和通知，我希望 960 能够实现。

Blueprint 是一个更复杂、更健壮和更全面的框架系统。它被构建为一个完整的样式表，适用于您能想到的几乎所有元素（单选按钮、表格等）。蓝图有一些我喜欢的地方，最值得注意的是它的表单元素样式和内置通知类。此外，它还包括一整套样式：

• 排版 - BP 为所有元素提供排版大小和间距默认值。

• 表单元素样式 - 表单和一些可用于添加到表单的类的样式（如require d 字段）。

• 打印样式 - 当冲浪者点击打印按钮时打印样式表。

• 插件 UI - 用于按钮、选项卡和 sprite 的预构建 CSS（有时是图像）。

蓝图的问题在于它在设计阶段使用起来太复杂了……从头开始创建设计意味着重新格式化他们提供的所有内容，而且通常很难跟上 BP 提供的全面性. 相比之下，960.gs 只提供了一个布局 - 非常适合让设计师在现实边界内发挥创意。

使用 960 网格系统

960 Grid 使用起来非常简单（事实上，您可能会开始问自己：“我为什么不早点使用它？”），您只需遵守一些简单的规则。

从 960.gs 下载 960 Grid

下载后，查看刚刚解压缩的目录。我想提请您注意两个文件夹： “ sketch _sheets”和“templates”。“草图”文件夹在浏览器窗口中包含各种网格大小的pdf，“模板”文件夹包含几乎所有图形程序（如 GIMP、Fireworks 和 Photoshop）的模板。

草图：让您的生活更轻松...

CSS 框架的目的是让您的生活更轻松，您应该始终寻找方法来帮助您减少创建设计所需的时间。在 Photoshop 中创建设计时使用这些模板，在与客户讨论项目的细节时打印“草图”的副本（并确保在您开始之前查看此内容！）。

打印出来的草图表的例子……上面有一些草图。

事实上，我建议您每次开始一个项目时都使用这些草图：它们可以让您在将自己锁定到任何布局之前自由地进行实验。你只需要 5 分钟的草图来实现一个设计是否可行，而如果你一直在设计和编码它，则需要 50 分钟以上。

使用 960 模板进行设计

一旦您对网站的草图概念达成基本一致，就该打开模板文件了。这可能是我喜欢使用 960 系统的主要原因……它预装了模板，适用于您能想到的任何程序。我碰巧使用 Photoshop，所以这里是提供的模板的屏幕截图：

这里的主要好处很简单：模板为所有主要内容列预先构建了指南，这些指南直接对应于编码方面的 CSS 框架。快速绘制主要内容栏并保持设计中的所有内容干净有序是很容易的。

有经验的设计师可能会将其视为“带辅助轮的设计”，但坦率地说，拥有一个简单的覆盖系统来帮助指导网页设计框架并没有错。

您仍然必须设计网站上的所有内容（当然！），但是通过使您的设计与指南保持一致，这将使事情的开发方面变得更加容易。作为额外的好处，在内容单元格之间采用统一的填充方法是使您的设计看起来更专业的好方法。在此处阅读有关“ Pixel Perfect Comps ”的更多信息。

设置它

现在您已经确定了设计，是时候讨论 960 网格语法了。正如我在介绍中提到的，您可以在Nettuts找到更多关于使用 CSS 框架和使用 CSS 框架进行原型设计的信息，因此我将在这里介绍基础知识。

首先，您需要在设计中引用适当的 CSS 文件：reset.css （解决浏览器怪癖的重置文件）、text.css（内置排版样式表）和960.css（或 960_24_col.css）。如果您使用的是 24 列网格，则为 css）。通常，我将所有特定于站点的样式放在一个单独的文件中（通常称为style.css），以确保不会破坏框架中的任何内容。

快速提示：在引用框架后引用你自己的样式表，这样你就可以在不改变框架本身的情况下调整框架的特定方面（如果你犯了错误，你不必重新下载和覆盖框架的文件）。有了这 4 个文件，您现在就可以开始设计您的网站了。

以下是从 960.gs 站点中提取的语法的快速概述：

<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>
 
        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

第一个 div 是您的容器，您的内容将存储在其中。通过将其类定义为“container_12”，您是在说：“我希望此容器具有 12 列网格”（使用 16 列时也适用相同的做法和 24 列网格）。

现在您已将容器定义为 12 列布局，您开始以适合布局的方式构建站点。如果您查看层次结构中的下一个 div 元素（如选项卡所示），您将看到其定义的语法。“Grid_7”和“grid_3”很容易理解：你说这个 div 元素将占用 X 列。但是，7+3 = 10 < 12，这意味着容器的末尾会有 2 个空列，对吗？好吧，这就是类定义的前缀和后缀方面发挥作用的地方。使用“grid_x suffix_y”的类定义，您是在说：“我希望这个 div 占用 X 列，并且在它之后有 Y 个空列。” （这也适用于前缀）。所以，由于“

到目前为止，我知道您想知道嵌套在“Grid_7”div 中的 Div 元素。好吧，您可以将占据指定列数的 div 嵌套在另一个 div 中，只要它不超过其父网格的大小即可。此外，第一个和最后一个元素必须分别在其类定义中附加“alpha”和“omega”。因此，在我们的示例代码中：“grid_2 alpha”是嵌套在“grid_7”中的第一个 div，下一个元素“grid_3”在中间（因此不需要附加“alpha”或“omega”），最后，“grid_2_ omega”是嵌套在“grid_7”中的最后一个 div。因为 2+3+2 = 7，所以定义是正确的。

放在一起：一个简短的例子

为了说明整个过程，让我们通过一个在我个人项目的设计阶段使用 960 框架的快速示例。

设计本身非常简单，但它是向您展示框架如何在设计过程中充当工具的完美方式。

Cerberus 网站：我们将使用的示例

质量效应 2 是我过去 5 年最喜欢的游戏之一，我觉得为虚构的组织“地狱犬”创建一个网站将是一个挑战。该组织的主要方面是：专业精神和技术实力，我想通过使用整个配色方案的简洁设计来传达这一点。首先，我草拟了网站的设计（如果我不这样做，那将是虚伪的，对吧？）。

当我查看设计草图时，我看到了如何在 960 Grid 中进行设计。

下面是我网站的 HTML 框架：

<div id="container" class="container_12">
    <div id="header" class="grid_12">
        <div id="logo" class="grid_2 alpha">Logo</div>
        <div id="subHeader" class="grid_12 omega">
            <div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
            <div class="grid_8 omega">Navigation</div>
        </div>
    </div>
    <div id="content" class="grid_8">
        Content
    </div>
    <div id="sidebar" class="grid_4">
        <div class="sidebarSection">
            Sidebar
        </div>
        <div class="sidebarSection">
            Sidebar
        </div>
        <div class="sidebarSection">
            Sidebar
        </div>
    </div>
    <div id="footer" class="grid_12">Footer</div>
</div>

如果你注意到了，我的 logo 只覆盖了 2 列，而子标题占据了所有 12 个空格。由于标题 div 有 12 列长，因此任何子元素最多可以有 12 列长。这个技巧让我可以制作标题，因为徽标占据了 2 列，其余为空（图像实际上是标题 div 的背景图像）。并且由于子标题是 12 列宽，它填满了徽标下方的整个宽度（因为它无法将其所有内容都放在徽标后面留下的 10 个空格内）。

这实际上是一个重要的区别，也是您应该使用的另一种设计工具（为了安全起见，您可以使用“前缀”或“后缀”来确保保留一定数量的空间）。该网站的其余部分非常简洁：主要内容有 8 列，侧边栏有 4 列。每个侧边栏元素都是一个单独的 div 元素；它们堆叠在一起，因为它们被限制为 4 列的宽度。

960 Grid 实例

现在，我自己的例子可能不是真正激励你走出去创造一些杀手级网页设计师的最佳方式，所以这里只是 960 系统的几个例子。您可以在960.gs网站上找到更多信息。

闭幕致辞

CSS 框架最吸引人的方面之一是它们为设计师提供的便利。但是，与任何其他工具一样，您必须确保以相关且有价值的方式使用它。如果它不适合设计，请不要尝试使用它，也不要让它限制您的创造力。对于大多数项目（尤其是那些复杂的报纸或博客风格的布局），CSS 框架可以是一个很好的节省时间的工具，不仅可以快速生成 HTML/CSS，还可以用于整个设计过程。