38. 页首、页脚、列和模板

详细资料: 发布于 2012年9月18日; 点击数：4794

引言

迄今为止，本教程中每篇文章只关注单一的主题，涉及的话题从诸如排版和颜色之类的简单概念，到关于 CSS2.1 子集的艰深技术说明。本篇文章所关注的范围要更广泛一些；本文的目的在于向读者展示如何运用之前的文章所涵盖的知识，并将其用来建立一个完整的网站模板。

阅读本文的重要前提，是你已经熟悉了 CSS 的 float、display 和 position 属性。

我勉强建议那些希望接触 CSS 核心内容的自主的学习者直接跳到本文的第四部分，即“单列布局的实现”——但是他们应当注意，如果这么做的话，就会遗漏掉关于优秀的项目规划是如何引导一个网站的布局和实施的讨论。

对于那些同样急切的，无视前一段落中给出的警示说明的读者来说，他们也会想要下载本文中提供的单列, 双列和三列式布局模板，这些模板在各自的结论部分会再次给出链接。

本文结构如下：

样式设计师的关键性处理步骤
对需求，分类和命名空间进行更详细地论述
单列式布局的实现
- 布局的居中对齐
- 全文档范围的容器是绝对必需的吗？
双列式布局的实现
- 单列式布局和双列式布局的构图问题之比较
三列式布局的实现
- 三列式布局设计中最易犯的错误，以及该问题的简单解决办法
博览页眉和页脚
列数不固定的网站：通过 class 和 display 来走捷径
总结
练习题
参考书目

注：你可以方便地下载所有示例代码的压缩包，以便在你的本地主机上进行实验。

即使网站的开发者是一个或两个人，而不是一整个专业团队，一个合理创建的网站也通常是源于一个深思熟虑的，大部分连续的过程。我们在图1中画出了对这种过程的一个相当详尽的阐释，在该图描述的这十个步骤中，本文尤其关注其中的四个步骤：

基于业务目标以及随之而来的访客目标的需求采集
内容分类
协作草图与复合创意
建立将要运用在该网站上的文档结构

这四个步骤一经完成，设计师就拥有了创建那种通常为单列，双列或三列式网站布局的绝大部分资料。不管布局的通式是什么，一个网站的某部分与另一部分之间都会有差异，这些差异反过来也会影响到特定元素和样式选择符是如何成为整个网站设计的一部分的。

即使在设计和构架上的选择已经做出之后，还是会面对这样的问题，就是如果该网站要建立在 Wordpress 和 Drupal 这样的内容管理系统（CMS）之上的话，该创建过程应如何进行处理。

本文强调了上面所提到的这四个步骤的重要性；为内容分类提供了一个简单的框架；还阐述了如何对一个具有完整的页眉，页脚和列的网站进行布局。

样式设计师的关键性处理步骤

接下来的两个章节旨在为本教程中的其它文章提供补充，这两个部分注重的是规划和工序，而不是实现。这两部分的核心思想是“三思而后行”——换言之，就是在你开始编写标记，样式表和代码之前，要对你到底要实现什么有个清楚的理解！

A diagram of ten common steps of the sitebuilding process

图1：网站建设过程的十个常见步骤。与本文关系特别紧密的步骤用反色标出。

目标采集

良好的CSS有赖于一系列的依赖关系：

CSS依赖于工作结构；
结构是由页面内容反映的；
页面内容又需要有适用范围；
页面内容适用范围最终是由预期的访客目标来界定的；而
访客目标又是与业务目标密切相关的。

该必要条件链的核心是，你网站的访客的需求将直接决定你应该为该网站创建什么样的结构，从而决定了你的样式代码中的选择符和技巧的使用。

如果需求采集过程处理不好的话，样式设计师可能就得面对一些艰巨的任务了，这些问题可能会包括：

长处丢失
在布局的表现和窗体的几何性质之间的关系上缺乏指导
平台支持等级的定义缺失
由于在实施过程之中才仓促筹集需求，导致了要求频频改变
缺少流行的工具

内容分类

在你确定了自己网站内容的范围之后，就需要定义其对于网站整体的重要性，并决定要为访客提供什么样的导航系统以对其进行查找。

此外，如何处理像广告，链接列表，图表以及注释之类的东西也是个问题。

分类之后，页面内容就可以跟网站导航联系起来，并被赋以权重。内容加权在此处我们将以主要/次级/三级内容的形式来进行探讨，以便强调说明绝大多数用例都会偏向于使用那些对某些类型的内容赋以比其它类型的内容更高的优先级的设计决策。

协作草图与复合创意

如果你所做的项目的平面造型设计和样式实现是由不同的人来完成的话——商业项目通常都是这样的——平面设计师就有必要依靠一些线框图（如果能得到的话）来开始对该网站的观感的设计了。对于界定诸如网站的整体主题，其一贯的特色，以及可能会使标记或class和id 的赋值复杂化的细节之类的东西来说，从简单的草图开始入手是个不错的办法。

对草图进行商定之后，平面造型设计师就可以着手完成最终复合图了，这种最终复合图应该是与网站投入使用后开发浏览器可能生成的屏幕截图相似的。

本文接下来的部分将不再关注平面造型设计，因为这个话题在本系列教程中的关于线框图和复合图/实体模型的文章中已经讨论过了。

文档之间和文档内部结构的建立

拿到复合图之后，设计师就可以开始编写标记和CSS了。这项工作的第一步是对那些要用在网站成品中的内容顺序，元素嵌套，class以及id做出决定——只有在设计师对该网站将要展现的内容以及这些内容的布局方式有透彻的理解的情况下，这项工作的完成才能达到最优。

对需求，分类，以及命名空间进行更详细地论述

如果一个网站在进行设计和开发决策时遵循最新的最优方法，并采用以用户为中心的设计（UCD）范式的话，那么访客目标就会告知我们设计过程的每一步。

然而，网站的主办方（或发布方）的目标实际上比设计团队的观点更重要，因为如果对那些目标没有了解的话，设计团队是无法对访客目标进行预计的。

业务目标定义

一个网站的“业务”目标可以归入下述的一个或一个以上的一般定义：

直接产生收益（电子商务）
通过Web界面提供发布，消息传递，和/或存储服务（例如，博客，网络相簿，文件分享，大文件传送服务网站，项目协作）
对某种产品或服务进行营销
提供信息
为访客提供娱乐

确定了一般目标之后，还要进行更进一步的细化，这种改良是基于任意数量的因素的，比如人口分布，转换目标，以及受限于项目预算或内容本身的性质（因为有可能是类似Flash视频这样的东西）的设计约束。

到目前为止，在涉及到对需求采集过程的这一部分进行指导时，经验是最好的老师。

访客目标的定义与满足

业务目标确定之后——“这就是我们想让我们的访客看到和做到的”——接下来就是将访客吸引和引导到那些目标网站以及最适合他们的功能类型了。

设计过程的这一部分中，最重要的假定就是“访客们不喜欢阻碍”。满足这个要求的最佳办法有：

定义并设计最适合于最有可能的那种访客路径搜寻策略的导航。

这些策略可包括全文搜索，传统的分类学驱动的链接列表，或“加注标记”（不管是一般的还是用户自定义的）。注意，一个网站可以满足的路径搜寻策略不止一种。
总是提供可以表明访客在整个网站内所处位置的提示。

用于实现这种效果的常见方法包括“浏览路径记录”，连接到相关内容的链接，以及诸如上下文相关的导航链接设计之类的视觉提示。
尽可能严格地实施视觉样式和书写样式，但不要严格遵循那种呆板的一致性。

这项工作密切相关的是为访客提供一致的位置提示的需要；二者之间的不同之处在于，在这种办法中为用户提供其在整个网站内的方向的是颜色和导航栏布局，为了在单个页面内提供方向提示，跨页面的一致的外观是必要的。
总是用简明的语言来提示跟踪某个链接或提交一份表单的结果。

有时这种办法非常简单，就像将一个提交按钮标记为“搜索”那样轻而易举，但有时你可能得提供一个注释，来给予网站的访客更多的操作指南。
在那些用来对用户交互做出响应的设计元素和其它东西之间，要规定出明确的界线。

使得链接与一般的正文，不一致的按钮设计，以及非典型的cursor样式几乎没有任何差别的样式是非常常见，而且非常令人迷惑的。高对比度的色彩，对padding的细心使用（以扩大交互式设计元素的封装），以及提供信息的title通常会更有效些。
把那些用于达成一般目的的用户交互减少到最低程度（尤其是链接的数量或按钮的点击次数），比如说一次购买，或者一般的资源之类的。

实际上，这个方案通常会需要角色扮演和访客选择分析。除非这些任务都完成了，对KISS准则的核心精神的遵照才能成为遵从此项指南的捷径。

在涉及到标记和样式表的时候，可以采用一些简单的技巧，以便使这些规则易于遵循：

在草拟你的样式表的时候，在规则中用简单的元素选择符为尽可能多的属性进行赋值。

按照定义来说，id的值是唯一的，而class也最好是专供特殊情况使用（或者是用于离开它们老式浏览器就不能正确地支持外观要求的情况下）。这项建议意在说明，一个细心的样式设计师可以指出在哪些地方平面造型设计师对于严格控制的执着已经过度了，从而可能导致交货过晚，用户不满，或者二者皆有。
对每个页面的body赋一个id。

如果每个文档（而不仅仅是网站的某些部分）都被指定了样式表标记，那些少见的外观个案就会变得容易处理得多。给每个页面的body赋一个id的另一个好处就是，在跟具有相同权重的导航元素一起使用的时候，样式设计师就可以在主导航条中为诸如当前浏览部分或网站之类的东西提供视觉提示，而不用编写冗长的服务器端逻辑。
避免那些对访客的运动控制能力要求太高的设计。

对于这项指南，更为严格的描述是“避免那些类似于用Suckerfish技术（点击此处查看另一类suckerfish技术），同时也叫下拉菜单，创建的东西的浮动菜单”。这一类的设计具有明确的用例，而这些用例都涉及到采用单列或双列式布局的大型网站，但它们通常是可以避开的。另一方面，不熟练的用户以及有运动控制障碍的用户常常会觉得下拉菜单的使用很成问题：
- 为了讲究效果，这些元素通常都需要将其所包涵的链接变得比正文字体的基础字号更小——这种异于直觉的视觉提示会使菜单项看起来比周围其它的页面元素更不像是链接。
- 为了使用这些元素所需要的运动控制的良好程度容易使那些不熟练的访客，碰巧来光顾的访客，以及运动控制受损的访客感到沮丧。
- 除非访客与这种元素进行交互，在该网站内某个特定部分中的可获得的潜在链接目标的范围是难以发现的；这就限制了访客们在该网站中维持方位感的能力，直到他们熟悉了该网站的使用为止。

内容分类

在制订出该网站所要呈现的内容的范围之后，你就可以对它进行架构了。一个网站的架构可以通过许多种方式来解决（具体示例请参见前面的一篇文章）

一般来讲，你可以为你的页面内容赋以优先级，而优先级会告知我们合适的布局：

主要内容，每个目标文档都是围绕着主要内容，比如文章，相册，或数据库，而创建的。
次级内容包括与主要内容相关的可读的元数据，以及侧边栏内容（比如，说明文字；评论节选；连接到该网站上的相关文章的链接；图表列表，贴图，或表格）。
三级内容包含了连接到相关资料（比如某个博客链接）的导出链接，从其它来源，比如从社交网络站点或评论信息源，以及广告而来的页面内容的永久快照。

除了内容之外，你的布局差不多一定会包括另外两个部分：

页眉包括网站标题（通常链接到该网站的首页），主导航栏，连接到用户账户元数据的链接（在某个实际应用中），最后还有主内容搜索表单（如果部署得有的话）
最低限度的页脚包括版权声明。连接到由元数据（比如RSS信息源，网站地图，以及与联系信息分开的网站元内容）组成的文档的链接也放在一个网站的次级导航之中，该导航通常也是页脚的一部分。

在视觉环境中，网站的主导航和标题差不多总是其页眉的一部分；在标记级别上，主导航和标题是不是该网站的页眉的一部分，就完全由实施人员决定了。

源顺序：可访问性和其它考虑

网站模板设计的第一步就是对其内容的源顺序做出决定，该顺序应当在整个网站中保持一致。

由于可访问性和跨媒体支持的原因，即使没有样式表也易于阅读的文档源顺序是必要的。对前者而言，视力损害的用户可以使用一种叫做屏幕阅读器的技术：屏幕阅读器是一种用来将页面内容读给用户听的软件，如果为了外观效果而将内容排列得乱七八糟的话，这样的内容对视力损害的用户是没有多大意义或者没有任何意义的。

…就像按照屏幕显示的最优顺序来排列的源代码在读出来的时候可能会缺乏清晰性一样，针对诸如打印或手机显示之类的其它媒体进行样式化也许是不可能的。在那种情况下的输出通常是重复内容，而重复内容会呈现出许多缺点：

至少，由于单个数据库记录的输出结果应该是可以以一种以上的方式展现的，为了解决这一点，必须实施额外的表现层逻辑。
在更糟的情况下，页面内容不仅在面向访客的环境中，也在数据库或计算机文件系统中都是重复的。这种情况会导致对某些维护的需求加倍。

因此，最常见的做法是将最外层的部分按照下面顺序来排列：

页眉
- 标题[更适合链接回首页/主页/登录页面]
- 主导航栏
主要内容
- 文档标题
- 正文
次级内容
三级内容
页脚
- 次级导航
- 附加信息（例如，版权标志）

这些部分的嵌套方式取决于许多变化的条件，其中最常见的是网站布局中静态列的数量。

命名空间创建

撇开分类学的问题不谈，我们可以假设任意给定的网站都会在某个理解范围之内涵盖一系列相关主题——该理解范围可以是某个公司的运营和产品，特定类型的事件，也可以是特定种类的休闲娱乐，用以对某些实例进行命名，这些实例通常可以用来提高对那些非技术性的受众的吸引力。

因此，样式设计师很可能会发现自己正在将样式表标记与网站内容的结构性元素——比如，导航信息，页眉，正文——和内容范围关联起来，不管该范围是窄是宽。

具体的做法是多种多样的，不过作者通常都会将下面的布局标记用在自己的模板中，本文中我们也会看到这样的模板：

#main: 页面内容画布
h1（这个是唯一的）: 网站标题
ul#nav: 网站导航代码
#breadcrumb: 浏览路径记录（如果采用了的话）
#bodyCopy: 主题专文
#bodyCopy>h2(这个是唯一的): 主要文档标题
#sidebar: 次级内容
#footer: 页脚代码
ul#secondaryNav: 次级导航

除了上述标记之外——而且比这些标记更加重要的是，每个页面的body都添加了一个id（就如前面所提到过的那样），从而对与整个文档相关的主要内容的范围给出了一些说明。此外一些项目还会要求对body元素的class进行赋值。

单列式布局的实现

A visual description of the principal container elements in a single column layout

图1：一个单列式布局中的元素；单列式布局的标记可能会以如图所示的形式进行嵌套。

图1展示的是#main紧接在body之内，并依次包涵所有的#header, #bodyCopy和#footer。

布局的居中对齐

将内容画布居中对齐就是将#main { width: 960px; margin: auto; }插入（在本例中是这样）到你的样式表中（width属性值的选择是随意的）。

全文档范围的容器是绝对必需的吗？

在完全是单列布局的网站中，并不是绝对要带有的；你也可以轻易地将上面提到过的那些布局属性/值对应用于#header, #bodyCopy和#footer的组合上。不过，带有#main也不是什么语义学上的错误，并且在涉及到规则，缝隙，背景图像，以及建立某些元素在该模板结构中的突出性时，包含#main还可以为样式设计师提供更多的灵活性。

双列式布局的实现

A visual description of the principal container elements in a single column layout

图2：双列式布局中的元素；该布局可能会以如图所示的方式进行嵌套，不过要理解的是，实际上在源顺序中#sidebar是跟在#bodyCopy后面的。

单列式布局和双列式布局之间的差别在于双列式布局增加了另一个容器元素，用来容纳次级内容（#sidebar，在源顺序中它实际上是跟在#bodyCopy后面的），并且双列式布局在单列式布局所使用的样式表的基础上也进行了一些改动。

单列式和双列式布局在构图方面的比较

要将一个单列式模板转化为双列式模板所需的标记改动是很简单的，但在许多情况下所需的新样式规则却不那么简单。

不管其源顺序如何，将`#sidebar`放在页面左边

有两个办法可以实现这种效果；其中一个方法不管两个列的长度如何都能奏效，而另一个则要求#bodyCopy比#sidebar更长。

第一个办法，而且也是最常见的办法就是使用float：

为#bodyCopy赋一个width值。
在这条规则中添加一个float属性，其值为right
为#sidebar指定一个适当的width值。
为#bodyCopy和/或#footer赋以所需的margin和padding值，以确保在这两个元素之间留有我们想要的缝隙。
给#footer赋clear: both;值。

两个列均指定了width值，故此，这两个列都具有一致的边距。

在#sidebar位于布局的右边缘的情况下，除了将#bodyCopy的float值设为之外，仍然可以遵循上面所描述的步骤来操作。赋给#sidebar的width值应当用大小适当的margin-left值来替换。

也可以对未赋float的元素设置一个比较大margin-left或margin-right值（如果需要的话），来代替width值；关于这项做法的可行性在本系列教程的其它地方有简单的讨论。

第二种方法在IE6中引发漏洞的可能性较小，这种方法是酌情对#bodyCopy赋一个较大的margin-left或margin-right值，并将#sidebar设为绝对定位。然而，这种方法的灵活性较差，在比更长的情况下会导致前一个元素溢出到中去#footer。

伪列布局：利用背景图片来使内容长度不同的列长度相等

对利用float属性来实施列式布局进行更深入的研究之后发现，在列之间需要不同的背景颜色或垂直线条时，如果和background-color或border属性一起使用的话，就不能靠着这些背景颜色和线条来占据主要内容区域的长度了。

对于这个问题最简单的解决办法是在这些列的某个祖先元素中创建并指定一幅背景图像（通常高度为1像素）——因为该祖先元素中引入了这个背景图像的缘故——该图片将按照最长的相关列的高度从顶部一直平铺到底部。因此：

#main {
  background-image: url(images/bg_2column.gif);
  background-repeat: repeat-y;
}

如果bg_2column.gif是由两种对比度很高的颜色构成，而且每种颜色的宽度几乎精确地等于你给内容列所赋的宽度值，那么最终结果就是两列的高度会显得一模一样…但实际上它们的高度并不一样，如果其中一列接下来插入下面的规则的话，可能就会被发现：

#bodyCopy {
  background-color: #ccc;
}

#sidebar {
  background-color: #999;
}

采用伪列布局的同时并不是一定不能对某个给定的列使用color或background-color属性的，如果默认的文本颜色相对于某个或两个列来说难以认清的话，其背景和前景颜色就应当在样式表中进行显式指定，从而作为一种自动防故障装置来避免浏览器无法加载背景图像的潜在风险。

保持源顺序不变，将主导航栏移到第二个列中去

在布局中添加第二个列之后，将主导航栏放在该列的顶部可能会看起来自然一些…但是如果该导航栏位于该模板结构中的另一个部分的话，我们该怎么做呢？

这个问题的答案就在于定位：

如果为#header指定了overflow: hidden;值的话，可将#nav设为#main的直接子元素。在几乎所有的情况下，这一点都可以不用改变预定的源顺序而做到。
为#nav的直接祖先元素赋position: relative;值，并为#nav自身赋position: absolute;值。
由于绝对定位的缘故，#nav将被默认置于其祖先元素的左上角，在这种情况下可按照需要调整#nav的left和top。
对#sidebar的margin-top或padding-top值进行调整（酌情），以反映出#nav的预期高度。如果各个页面或部分的#nav的高度不同的话，就有必要编写多条规则，也许在每条规则中要用到多个选择符——因此，就可以遵照前面我们提到的那个建议，对该网站的每个文档的body指定一个内容范围指示id（也可能是class）。

三列式布局的实现

A visual description of the principal container elements in a single column layout

图3：三列式布局中的元素；注意那两个新的容器元素，以及不同的id赋值。

由第三个列的增加造成的标记的主要变化有：

一个封装了两个相邻列，通常是第一个列和第二个列的容器；以及
第三个列位于自己的容器内。

在标记拟定之后，制作期望的布局就是如何适当地调整float值的问题了。别忘了对于非浮动的容器需要进行边距调整，来使它们妥善地排成一行。

注意，在图3中，最好是对前两列和第三列的容器元素赋给id值，以对各自的内容提供一些说明，而不是赋一个像该图表中那样的一般的id。

三列式布局中每个列的float值指定
预期外观	容器内容	容器	主要	次级	第三级
2–1–3	1+2	`left`	`right`	`none`	`none`
2–3–1	2+3	`left`	`none`	`left`	`none`
3–1–2	1+2	`right`	`left`	`none`	`none`
3–2–1	1+2	`right`	`left`	`none`	`none`
1–2–3	1+2	`left`	`left`	`none`	`none`
1–3–2	2+3	`right`	`none`	`right`	`none`

表1：在三列式布局中的四个容器float元素的值，按照从左到右的显示顺序排列。

三列式设计中最容易犯的错误，以及其简单解决办法

最灵活的三列式布局引入了一个在语义学上毫无意义的容器元素；替代方案就是对内容长度或源顺序施行转化，该项转化是针对那些会造成繁重的负担的内容长度或源顺序而进行的，这种负担要么会影响维护人员（就内容长度要求而言），要么就会影响访客（就源顺序限制而言）。

这种“毫无意义”的容器的引入在涉及到网站的重新设计时也会造成问题。我们来考虑一下下面的场景：

有一个网站，初次设计时该网站的布局是这样的，其列按照外观上2-3-1的顺序来放置的，但后来进行重新设计时，它的列是按照更加传统的2-1-3的顺序来摆放的。那么就需要对双列的容器元素进行移动，以便让其封装不同的列容器。接下来又该怎么办呢？

在这种情况下，很容易就能实现我们想要的结果；如果该网站是真正的模板驱动型的话，就（可能）要对一些文件进行改动。如果——从另一方面来讲——该网站所有的文档都使用同一标记框架的话，那么就必然要用到查找替换。不过，这并不会很难。

容器的标记的大体布置可采用下面两种形式中的一种：

<div id="#container"><div id="primary">…</div><div id="secondary">…</div></div><div id="tertiary">…</div>
<div id="primary">…</div><div id="#container"><div id="secondary">…</div><div id="tertiary">…</div></div>

在这两个例子中，与查找替换有关的标记片段我用粗体标出了。由于这些id在你的文档中是唯一的，而且两个结束标记的位置是可预测的（不是与第三个结束标记相邻，就是与#tertiary相邻），编写查找替换操作来对它们进行改变是相对容易的。

页眉和页脚博览

到现在为止，我们已经讨论了应该放入页眉和页脚的内容——商标/标识语，全站范围内的搜索，连到用户账户信息的链接，网站元数据——但除了本系列教程中关于线框图和工艺创意/实体模型的文章之外，对页眉/页脚的效果和吸引力却几乎没有做任何探讨。

将读者放在一堆理论中间真是不好意思，我们最好还是来看看三个著名的网站——它们或者是受欢迎程度很高，或者是发布方的声望很高——并来看看它们在设计方面的各种各样的特点。

个人网站：Cindy Li

header of cindyli.com

图4：此处有两个特别值得讨论的重要问题：标志和对比度。

标志

“标志”是在广告和市场营销领域内的一个具有特殊意义的术语，它指的是商标和为某个商业企业和其产品的外观所特有的其它设计元素。通过在网站页眉中放置一张她自己的面部侧貌的漫画，以及用一种不常见的字体来设置她的网站标题和主导航栏，Cindy Li从个人角度实现了标志。

我们将会在下面对企业网站上的标志实施方式进行更加详细的讨论。

对比度

在cindyli.com上，访客们一看就能明白某个内容到底是什么：标志，内容画布，并且主要内容都是放在覆盖区之内的，这些覆盖区由它们的背景颜色分离开来。此外，网站标题和导航栏采用了与它们的背景的对比度很高的颜色。

现在来看看网站页脚：

footer of cindyli.com.

Unlike the other sites presented in this article, Cindy's site doesn't offer fulltext search, probably for technical reasons. However, since the site is a blog, its design allows the assumption that most readers confine their interest to new content.

社交网络：Facebook

图6：就像许多社交网络目标站一样，Facebook通过其布局和颜色来实现自己的标志，因为这种应用程序本身就是目标站。

就像许多商业网站一样，Facebook的网站导航提供全文搜索和分类搜索两种方式。

Facebook页脚所展示的另一种习惯做法是，用户寻路的有用链接放在页眉中，而页脚则容纳所有的指向该网站自身信息以及网站操作员的链接。

企业市场营销与客户服务：BNSF铁路公司

header of bnsf.com.

图8：像大多数“企业”网站一样，该网站的发布方也喜欢在页眉特征上使用最高的对比度…而且这里唯一的色调跟商标上所用到的那种颜色一样。

再评标志

关于那些不同的商标，商标标准字，以及其它起商业标志作用的设计比喻，我们来看看下面这些图片，这些图片都是随处可见的与Opera软件公司有生意关系的企业的标志：

诺基亚
S三星集团和三星电子
谷歌
IBM

除了上述四个之外，还有其它类似的图形设计的例子也是众所周知的：耐克强风（这个名字已经在官方注册过了），美国电话电报公司的“末日星球”商标，美国联邦快递商标标准字（以及它的最后两个字母间的空白所形成的箭头），还有“UPS（联合包裹服务公司）式的褐色”，这些都是普通大众家喻户晓的公司标志（至少在美国是家喻户晓的）。

与这些属性相关的要点在于，任何一个特意要开创与众不同的视觉标志的项目主办方都应该预先想到让自己的网站来对该标志起强化作用，而不是事后才来考虑。

至于在BNSF网站的页眉中除商标之外的其它元素，最值得注意的是两种寻路模式的使用（跟Facebook上的一样）。

footer of bnsf.com.

图9：在这三个网站中，BNSF网站的页脚布局最为“传统”，因为它几乎没有通过水平线条或不同的背景颜色来对次级导航进行任何加工，以将其放在一个独特的视觉平面内。

页眉和页脚设计：初级细节

在浏览了更多页眉和页脚设计之后，下面所述的共性就很容易理解了：

企业和应用程序目标站往往将自己的主导航栏设计成浏览器画布的顶边上的一条横排。这个特质使得它们与新闻网站和电子商务网站区分开来，新闻网站和电子商务网站的主导航栏的布局更多地采用的是纵栏的方式。
就像水平式的主导航栏一样，分立的次级导航在页脚中的使用也是很常见的。此外，在本文前面的部分中描述过的目标站对网站元数据的划分也相当常见。
页眉往往包含着相当大的实体周围空间部分，但是对于页眉的构图来说，还是有一些必须遵守的规则。在Cindy Li网站上，内容画布是特意设计成窄小的，从而使页眉顶部留出了相当大的空白。
在含有全文搜索的页面上，全文搜索的输入栏往往位于页眉的右边缘处。这在很大程度上是由于设计良好的全文搜索只是一种全站导航的方式，跟传统的分类学驱动的导航链接一样是合法的——而且可能会被你网站用户中最不懂技术的部分访客所诟病。

列数不固定的网站：利用 `class` 和 `display` 来走捷径

有些网站的网页很可能是这样的：一些页面是单列或双列式布局的，其它的是双列和三列式布局的；灵活性是 CSS 的长处之一，同时也是美术设计员在他们执着追求对用户体验的强力控制的同时，无意中形成的缺陷之一。

一般说来，这类情况可以通过添加下面的脚本来得到部分的处理：允许在页面中程式化地添加永久代码片段，而不是只能重复拷贝代码片段的网站脚本。

然而，即使包括了这种脚本，样式设计师还是会遇到布局上的差异；如何才能最好地处理这些差异呢？

最简单的方法就是给所有可能有需要的页面的body绑定一个class。这些class可能会具有与在标志指南那一部分中所提到的某些系列的布局相对应的次序性质，或者与页面内容相结合，并导致像下面这样的多选择符规则：

.about #bodyCopy,
.contact #bodyCopy,
.privacy #bodyCopy {

    float: none; width: auto;
}

  .about #sidebar,
.contact #sidebar,
.privacy #sidebar {

    display: none;
}

仅仅使用这种方法而不使用包含语句（如果你愿意这么做的话，这是使内容消失或再现的一个不怎么样的办法）的缺点是很可能会导致搜索引擎操作策略降低这类网页的排名——或者在极其不灵活的实施的情况下，完全不列出任何使用这种方法的网站。由于这个原因（这只是多得数不过来的原因中的一个），你所得到的任何网站寄存解决办法都应该支持某种包含功能。

总结

虽然坐下来编写标记和代码——尤其是当你还是个初学者的时候——是很诱人的，但这种过程对于特别吸引人的，使用的或易于维护的网站来说并没有帮助。

然而，通过对将要发布到网站上的页面内容和应当对它进行的布局的方式加以仔细考虑，你就可以根据其要求推导出任何一个网站的框架，并将该框架在网站上实施出来。

基础模板：

练习题

假定有一个由你的指导者提供的合理的链接列表，将列表中的链接划分为主要（页眉）和次要（页脚）链接。基于本文所提供的示例，证明你的划分正确。
看看你的同学创建的布局组合，并进行识别：
1. 该设计中所要实现的布局列数；
2. 这些布局列的宽度；以及
3. 用于实现这些布局列的外观的float/width/margin方案，如果有的话。
给定一个商标标准语，一份要求清单，以及一个结构，设计一个网站页眉。
如果你不能证明上一个练习中所设计的页眉的构图符合黄金分割，对其构图进行适当的改动并主观地估计一下最终效果的吸引性有多大。
仅仅依靠搜索引擎结果，来分析为什么对结构化导航元素来说列表比一堆div（或其它元素）更好的原因。在你的答案中要涉及到屏幕阅读器软件的特性。
凭着记忆，对上面提供的某个模板文件进行修改，以使其支持另一种布局列数。另外还要更改主导航栏的构图，使其相较于原来的模板文件中的样子发生显著的改变。

参考文献

BNSF Railroad. 2006. http://www.bnsf.com/ (last accessed 13 January 2009).

Facebook. 2008. http://www.facebook.com/home.php (last accessed 13 January 2009).

Henick, Ben. 2006. Avoid edge cases by designing up front.
A List Apart. http://www.alistapart.com/articles/avoidedgecases (last accessed 13 January 2009).

Li, Cindy. 2008. The Adventures of Cindy Li.
http://www.cindyli.com/ (last accessed 13 January 2009).

Morville, Peter, and Rosenfeld, Louis. 2006. Information architecture for the world wide web, 3rd edition. Cambridge, Mass.: O’Reilly Media.