《21天学通HTML+CSS+JavaScript Web开发（第7版）》——2.5 绘制网站线框图

本节书摘来自异步社区《21天学通HTML+CSS+JavaScript Web开发（第7版）》一书中的第2章，第2.5节，作者：【美】Laura Lemay（劳拉·莱梅） , Rafe Colburn（雷夫·科尔本） , Jennifer Kyrnin（珍妮弗·凯瑞恩）著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.5 绘制网站线框图

网站规划的下一步是确定如何在网页之间分配内容，并制定在网页之间导航的方案。如果有很多需要以复杂的方式链接起来的内容，请坐下来制定具体的内容分配计划，这对您以后开发和链接网页大有裨益。

2.5.1 线框图是什么，为何需要绘制线框图
线框图是网站完成后的大致轮廓，指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的。有了线框图后，开发每个网页时就无须牢记它在整个网站所处的准确位置，也无须牢记它与其他网页之间的复杂关系。

在网站特别大的情况下，如果有线框图，就可将网站不同部分的开发工作分配给不同的人去完成。清晰的线框图让您能够最大限度地避免重复工作，减少每个人都必须牢记的上下文信息。

如果网站较小，或者网站是使用提供了具体结构的内容管理应用程序创建的，也许不需要线框图。然而，对于复杂的大型网站，线框图可节省大量的时间，避免众多的弯路。如果您无法牢记内容的各个部分以及它们之间的关系，就应考虑绘制线框图。

线框图什么样呢？一般而言，它们是成组的文档或图像，每组表示网站中一种特定类型的网页。文档包含网页的粗略示意图，指出了网页各个部分处于什么位置、占据多大空间以及将发挥的作用。例如，报纸网站的线框图包括主页示意图、各个版面的主页以及文章页面的线框图。线框图还可能包括网站的注册表单以及购买广告版面的页面。图2.8是一个使用工具Balsamiq创建的线框图。

线框图并非必须非常漂亮，也并非一定要使用线框图绘制软件来创建。绘制线框图的关键在于，将网页以适合您的方式组织起来。如果您喜欢索引卡和细绳，使用这些工具就是了；如果在纸上或计算机中绘制简单的草图更佳，这样做就是了。

2.5.2 线框图绘制小贴士
绘制线框图时，需要考虑如下几点。

• 如何在网页之间分配主题？

确定一个网页包含多少信息可能比较棘手。有些网站将所有内容都放在一个设计巧妙的冗长网页中，有些网站将内容分配到大量不同的网页中，还有些网站使用新技术按需动态地加载网页的各个部分，用户根本不需要从一个网页切换到另一个网页。为避免过于花哨，最佳的做法是这样组织内容，即让每个页面都包含一个主题的信息。如果页面有好几屏长，也许该将相应的主题按逻辑分成多个子主题。

• 在网页之间导航的主要方式是什么？

为了让访客能够在页面之间导航，您需要哪些链接。这些是文档中的主链接，让访客能够实现您确定的目标。向前、向后、向上、向下的链接以及到主页的链接都属于主要的导航方式。

• 要提供其他哪些导航方式？

除简单的导航链接外，有些网站还包含与主要Web内容平行的额外信息，如术语表、按字母顺序排列的概念索引、版权信息或职员页面。制定计划时一定要考虑这些额外的信息，想想要如何将它们链接到主要内容。

• 要在主页上放置哪些内容？

鉴于主页是访问网站其他信息的入口，需要考虑要将哪些信息放在主页上。一篇博客？即将推出的产品摘要？一系列到其他主题的链接？无论您决定将哪些内容放在主页上，都必须确保它们有足够的吸引力，让目标受众留下来。

• 如何让访问内部网页的用户知道他身处何方？

除非您的网站要求访客注册才能访问，否则访客很可能是通过搜索引擎进入网页的。务必要让访客能够知道他访问的是哪个网站，并指出该网站还有更多他可能感兴趣的信息。通常，您可通过设计和导航实现这个目标。

• 您的目标是什么？

设计网站的框架时，别忘了您要达成的目标，并避免您的目标因额外的信息或内容而变得模糊不清。