常见的网页布局包含哪些内容？
在为您的网站设计页面时，了解最常见的布局非常有益。
| 预备知识 | 请确保您已经考虑过 您想通过您的 Web 项目实现什么目标。 |
|---|---|
| 目标 | 了解如何在网页上放置内容，以及如何放置它们。 |
总结
我们谈论网页设计是有原因的。您从一个空白页面开始，然后可以将其朝着许多不同的方向发展。如果您没有太多经验，从空白页面开始可能会有点令人生畏。我们有超过 25 年的经验，将为您提供一些通用的经验法则，帮助您设计您的网站。
即使现在随着对移动 Web 的新关注，几乎所有主流网页都是由这些部分构建的
- 页眉
-
出现在网站上每个页面的顶部。包含与所有页面相关的信息（如网站名称或徽标）和一个易于使用的导航系统。
- 主要内容
-
最大的区域，包含当前页面特有的内容。
- 侧边内容
-
1) 补充主要内容的信息；2) 在页面子集中共享的信息；3) 替代导航系统。实际上，是页面主要内容不绝对需要的所有内容。
-
出现在网站上每个页面的底部。与标题一样，包含不太显眼的全局信息，如法律声明或联系信息。
这些元素在所有屏幕尺寸下都很常见，但它们的布局方式可以不同。这里有一些例子（1 代表标题，2 页脚；A 主要内容；B1, B2 侧边内容）
单栏布局。对于移动浏览器尤其重要，这样可以避免拥挤小屏幕。
双栏布局。通常用于平板电脑，因为它们的屏幕尺寸适中。
三栏布局。只适用于大屏幕的台式电脑。（甚至许多台式机用户也更喜欢在小窗口中查看，而不是全屏。）
当您开始将它们混合在一起时，真正的乐趣就开始了
…
这些只是示例，您可以自由地按自己想要的方式布局。您可能会注意到，虽然内容可以在屏幕上移动，但我们始终将标题 (1) 放在顶部，页脚 (2) 放在底部。此外，主要内容 (A) 最重要，所以要给它大部分空间。
这些是您可以借鉴的经验法则。当然，也有复杂的布局和例外情况。在其他文章中，我们将讨论如何设计响应式网站（根据屏幕尺寸变化的网站）以及布局在页面之间变化的网站。现在，最好在整个网站中保持布局的一致性。
深入探讨
让我们研究一些来自知名网站的更具体的例子。
单栏布局
典型的单栏布局，在一个页面上线性提供所有信息。
非常直接。请记住，许多人仍会从台式机浏览您的网站，因此请确保在那里您的内容也是可用/可读的。
双栏布局
博客通常有两栏，一栏较宽用于主内容，一栏较窄用于侧边内容（如小工具、二级导航级别和广告）。
在这个例子中，看看标题正下方（B1）的图片。它与主内容相关，但即使没有它，主内容本身也有意义，所以您可以将图片视为主内容或侧边内容。这并不重要。重要的是，如果您在标题下方放置了某物，它应该要么是主内容，要么与主内容“直接相关”。
这是一个陷阱
MICA。这个有点棘手。它看起来像一个三栏布局
但它不是！B1 和 B2 围绕主内容浮动。记住“浮动”这个词——当您开始学习 CSS 时，它会引起您的注意。
您为什么会认为它是一个三栏布局？因为右上角的图片是 L 形的，因为 B1 看起来像一个支撑偏移主内容的柱子，因为 MICA 徽标的“M”和“I”创造了一条垂直的视觉引导线。
这是一个支持一些设计创意的经典布局的绝佳示例。简单的布局更容易实现，但也要给自己留出空间在这个领域表达您的创造力。
一个更棘手的布局
巴黎歌剧院.
基本上是一个双栏布局，但您会注意到许多细微的调整，这些调整在视觉上打破了布局。特别是，标题与主内容的图像重叠。标题菜单的弧线与图像底部的弧线相结合的方式，使标题和主内容看起来像一个整体，尽管它们在技术上完全不同。巴黎歌剧院的例子看起来比 MICA 的例子更复杂，但实际上更容易实现（好吧，“容易”是一个相对的概念）。
正如您所见，即使只有基本的布局，您也可以制作出令人惊叹的网站。看看您自己最喜欢的网站，问问自己，标题、页脚、主内容和侧边内容在哪里？这将激发您自己的设计灵感，并为您提供关于哪些设计有效、哪些无效的良好提示。