常見的網頁佈局包含哪些內容？

總結

我們談論網頁設計是有原因的。您從一個空白頁面開始，然後可以將其朝著許多不同的方向發展。如果您沒有太多經驗，從空白頁面開始可能會有點令人生畏。我們有超過 25 年的經驗，將為您提供一些通用的經驗法則，幫助您設計您的網站。

即使現在隨著對移動 Web 的新關注，幾乎所有主流網頁都是由這些部分構建的

頁首

出現在網站上每個頁面的頂部。包含與所有頁面相關的資訊（如網站名稱或徽標）和一個易於使用的導航系統。

主要內容

最大的區域，包含當前頁面特有的內容。

側邊內容

1) 補充主要內容的資訊；2) 在頁面子集中共享的資訊；3) 替代導航系統。實際上，是頁面主要內容不絕對需要的所有內容。

頁尾

出現在網站上每個頁面的底部。與標題一樣，包含不太顯眼的全域性資訊，如法律宣告或聯絡資訊。

這些元素在所有螢幕尺寸下都很常見，但它們的佈局方式可以不同。這裡有一些例子（1 代表標題，2 頁尾；A 主要內容；B1, B2 側邊內容）

單欄佈局。對於移動瀏覽器尤其重要，這樣可以避免擁擠小螢幕。

雙欄佈局。通常用於平板電腦，因為它們的螢幕尺寸適中。

三欄佈局。只適用於大螢幕的臺式電腦。（甚至許多臺式機使用者也更喜歡在小視窗中檢視，而不是全屏。）

當您開始將它們混合在一起時，真正的樂趣就開始了

…

這些只是示例，您可以自由地按自己想要的方式佈局。您可能會注意到，雖然內容可以在螢幕上移動，但我們始終將標題 (1) 放在頂部，頁尾 (2) 放在底部。此外，主要內容 (A) 最重要，所以要給它大部分空間。

這些是您可以借鑑的經驗法則。當然，也有複雜的佈局和例外情況。在其他文章中，我們將討論如何設計響應式網站（根據螢幕尺寸變化的網站）以及佈局在頁面之間變化的網站。現在，最好在整個網站中保持佈局的一致性。

深入探討

讓我們研究一些來自知名網站的更具體的例子。

單欄佈局

典型的單欄佈局，在一個頁面上線性提供所有資訊。

非常直接。請記住，許多人仍會從桌上型電腦瀏覽您的網站，因此請確保在那裡您的內容也是可用/可讀的。

雙欄佈局

部落格通常有兩欄，一欄較寬用於主內容，一欄較窄用於側邊內容（如小工具、二級導航級別和廣告）。

在這個例子中，看看標題正下方（B1）的圖片。它與主內容相關，但即使沒有它，主內容本身也有意義，所以您可以將圖片視為主內容或側邊內容。這並不重要。重要的是，如果您在標題下方放置了某物，它應該要麼是主內容，要麼與主內容“直接相關”。

這是一個陷阱

MICA。這個有點棘手。它看起來像一個三欄佈局

但它不是！B1 和 B2 圍繞主內容浮動。記住“浮動”這個詞——當您開始學習 CSS 時，它會引起您的注意。

您為什麼會認為它是一個三欄佈局？因為右上角的圖片是 L 形的，因為 B1 看起來像一個支撐偏移主內容的柱子，因為 MICA 徽標的“M”和“I”創造了一條垂直的視覺引導線。

這是一個支援一些設計創意的經典佈局的絕佳示例。簡單的佈局更容易實現，但也要給自己留出空間在這個領域表達您的創造力。

一個更棘手的佈局

巴黎歌劇院.

基本上是一個雙欄佈局，但您會注意到許多細微的調整，這些調整在視覺上打破了佈局。特別是，標題與主內容的影像重疊。標題選單的弧線與影像底部的弧線相結合的方式，使標題和主內容看起來像一個整體，儘管它們在技術上完全不同。巴黎歌劇院的例子看起來比 MICA 的例子更復雜，但實際上更容易實現（好吧，“容易”是一個相對的概念）。

正如您所見，即使只有基本的佈局，您也可以製作出令人驚歎的網站。看看您自己最喜歡的網站，問問自己，標題、頁尾、主內容和側邊內容在哪裡？這將激發您自己的設計靈感，併為您提供關於哪些設計有效、哪些無效的良好提示。