常見的網頁佈局包含什麼？

在為你的網站設計頁面時，最好了解最常見的佈局。

先決條件 確保你已經考慮過你希望透過你的 Web 專案實現什麼。
目標 瞭解在哪裡放置網頁上的內容，以及如何放置。

摘要

我們談論網頁設計是有原因的。你從一個空白頁面開始，可以把它帶到很多方向。如果你沒有太多經驗，從一個空白頁面開始可能會有點嚇人。我們擁有超過 25 年的經驗，我們將提供一些常用的經驗法則來幫助你設計你的網站。

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

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

主要內容

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

側邊內容

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

在網站每個頁面的底部可見。與頁首一樣，包含不太突出的全域性資訊，如法律宣告或聯絡資訊。

這些元素在所有表單因子中都非常常見，但它們可以以不同的方式佈局。以下是一些示例（**1** 表示頁首，**2** 表示頁尾；**A** 表示主要內容；**B1, B2** 表示側邊內容）

**單列布局**。對於移動瀏覽器尤其重要，這樣你就不會弄亂小螢幕。

Example of a 1 column layout: Main on top and asides stacked beneath it.

**雙列布局**。通常用於針對平板電腦，因為它們具有中等大小的螢幕。

Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

**三列布局**。僅適用於具有大螢幕的桌上型電腦。（即使許多臺式機使用者也更喜歡在小視窗而不是全屏中檢視內容。）

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

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

混合佈局示例：主要內容在頂部，側邊欄並排位於其下方。 混合佈局示例：主要內容在左側列，側邊欄在右側列垂直堆疊。 混合佈局示例：一個側邊欄在左側列，主要內容在右側列，下方還有一個側邊欄。 混合佈局示例：主要內容在第一行的左側，一個側邊欄在同一行的右側，第二個側邊欄覆蓋整個第二行。…

這些僅僅是示例，你可以自由地根據自己的意願進行佈局。你可能會注意到，雖然內容可以在螢幕上移動，但我們始終將頁首 (1) 保留在頂部，將頁尾 (2) 保留在底部。此外，主要內容 (A) 最重要，因此請為其提供大部分空間。

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

主動學習

目前還沒有可用的主動學習內容。請考慮貢獻。

深入探討

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

單列布局

Invision 應用程式。一個典型的單列布局，在一個頁面上以線性方式提供所有資訊。

Example of a 1 column layout in the wild 1 column layout with header, main content, a stack of aside contents and a footer

非常簡單明瞭。請記住，許多人仍然會從桌上型電腦瀏覽你的網站，因此請確保你的內容在臺式機上也可用/可讀。

雙列布局

部落格通常有兩列，一列較寬，用於主要內容，另一列較窄，用於側邊內容（如視窗小部件、輔助導航級別和廣告）。

Example of a 2 column layout for a blog A 2 column layout with the main content on the left column

在此示例中，請檢視頁首正下方的影像 (B1)。它與主要內容相關，但主要內容在沒有它的情況下也仍然有意義，因此你可以將影像視為主要內容或側邊內容。這並不重要。重要的是，如果你將某些內容放在頁首正下方，它應該要麼是主要內容，要麼與主要內容**直接相關**。

這是一個陷阱

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

Example of a false 3 columns layout It looks like a 3 columns layout but actually, the aside content is floating around.

但它不是！B1 和 B2 圍繞主要內容浮動。請記住“浮動”這個詞——當你開始學習CSS時，它會讓你想起一些東西。

你為什麼認為它是一個三列布局？因為右上方的影像呈 L 形，因為 B1 看起來像一個支撐著偏移的主要內容的列，並且因為 MICA 徽標的“M”和“I”形成了垂直力線。

這是一個經典佈局支援一些設計創意的很好的例子。簡單的佈局更容易實現，但允許你在這個領域表達你的創造力。

一個更棘手的佈局

巴黎歌劇院.

An example of a tricky layout. This is a 2 column layout but the header is overlapping the main content.

基本上是一個雙列布局，但你會注意到這裡和那裡有很多調整，從視覺上打破了佈局。特別是，頁首與主要內容的影像重疊。頁首選單的曲線與影像底部的曲線相結合的方式，使頁首和主要內容看起來像一個整體，即使它們在技術上完全不同。歌劇院的示例看起來比 MICA 的示例更復雜，但實際上更容易實現（好吧，“容易”**是**一個相對的概念）。

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