設計網站的步是了解網站地圖，設計師根據網站的版面劃分來編排不同版面的空間大小和位置關系。網站的布局實際上就是把文本、圖片、多媒體等在頁面里面進行合理的組織排列。由此，網頁設計也衍生出許多種類的布局樣式。

The first step in designing a website is to understand the website map. Designers arrange the spatial size and positional relationships of different layouts based on the layout of the website. The layout of a website is actually the rational organization and arrangement of text, images, multimedia, etc. within the page. As a result, web design has also spawned many types of layout styles.

Banner式布局

Banner style layout

顧名思義，Banner(opens in a new tab or window)式布局就是指頁面上方是導航條，頂部是一個Banner，下方是其他內容。這種布局方法的優點是頁面的結構十分清晰，主次分明。無論屏幕的尺寸是什么，網頁的內容都會清晰地呈現出來。

As the name suggests, a banner (opens in a new tab or window) layout refers to a navigation bar at the top of a page, a banner at the top, and other content below. The advantage of this layout method is that the page structure is very clear, with clear priorities. No matter what the screen size is, the content of the webpage will be presented clearly.

Banner式布局是網頁設計中基本也是普遍的一種設計手法，比如說站酷、好奇心日報等。雖然有的設計師會將Banner設計成固定寬或者橫跨整個頁面的大小，但總體的布局樣式都是差不多的。

Banner style layout is a basic and common design technique in web design, such as website coolness and Curiosity Daily. Although some designers may design banners to be fixed width or span across the entire page, the overall layout style is similar.

上下型布局

Up-down layout

上下型布局指的是網頁的上下都有一個廣告條，左右兩側是超鏈接，中間放置主要內容，下面是網站的基本信息、聯系方式、版權聲明等。

The up and down layout refers to a webpage with an advertising bar on both sides, hyperlinks on the left and right, and main content placed in the middle. Below are the basic information, contact information, copyright statement, etc. of the website.

很顯然，這種布局方法的優點是可以充分利用版面，盡可能多地傳達信息量。同時，設計師需要注意板塊的內容和面積大小，不能讓頁面過分臃腫。

Obviously, the advantage of this layout method is that it can fully utilize the layout and convey as much information as possible. At the same time, designers need to pay attention to the content and size of the sections, and not make the page overly bulky.

左右型布局

Left and right layout

左右型布局是將網頁分為左右兩頁的框架結構，左面是導航鏈接，頂端是小標題，右面是主要內容。

A left and right layout is a framework structure that divides a webpage into two pages, with navigation links on the left, subheadings at the top, and main content on the right.

目前大部分的導航網站、論壇都采取了這種結構，非常清晰，一目了然。比如說科技網站36氪，左面是咨詢分類，中間是新聞和文章。

At present, most navigation websites and forums adopt this structure, which is very clear and clear at a glance. For example, on a technology website with 36 Kr, on the left is the consultation category, and in the middle are news and articles.

POP式布局

POP style layout

POP是廣告中的術語，意思是售點廣告。在網頁設計中，POP式布局是指頁面的布局設計像一張宣傳海報(opens in a new tab or window)，精致又吸睛。

POP is a term in advertising that means point of sale advertising. In web design, POP style layout refers to the layout design of a page that resembles an open in a new tab or window, exquisite and eye-catching.

通常情況下，時尚購物類網站會采取POP式布局，用一張精美的圖片作為頁面中心，在頂端或者下方放置導航條。POP式布局的缺點是由于圖片過大，渲染速度較慢。

Usually, fashion shopping websites adopt a POP style layout, with a beautiful image as the page center and a navigation bar placed at the top or bottom. The disadvantage of POP style layout is that the image is too large and the rendering speed is slow.

有時，POP式布局還加上小動畫，或者直接在圖片上放上對應的鏈接。這種設計一般會出現在企業介紹的首頁或者個人網頁，給人一種簡潔、優雅的視覺享受。

Sometimes, POP style layouts also add small animations or directly place corresponding links on the images. This type of design usually appears on the homepage of a company introduction or personal webpage, giving people a simple and elegant visual enjoyment.

標題正文型布局

Title Text Layout

這種類型的布局是網頁設計中簡單的一種樣式，通常是頂端放置標題，下方用作正文區。設計師們喜歡在咨詢文章頁面、注冊頁面等使用標題正文型的布局樣式，這樣的樣式可以小程度地打擾用戶，還給用戶一個安靜的瀏覽體驗。

This type of layout is a simple style in web design, usually with a title placed at the top and a body area used below. Designers like to use a title based layout style on consultation article pages, registration pages, etc. This style can slightly disturb users and provide them with a quiet browsing experience.

其實，無論設計師采用哪一種布局，在網頁設計中，重要的要求是主次分明和突出。只有當頁面中有一個明確的視覺中心時，網站用戶才能夠迅速找到內容，不于進入到網站后變得一頭霧水。

In fact, no matter which layout the designer adopts, the important requirement in web design is to have clear priorities and prominent emphasis. Only when there is a clear visual center on the page can website users quickly find the key points of the content, so as not to become confused after entering the website.

設計師還可以利用留白來制造視覺集中的效果，引導用戶的視線到主要內容區域。比如蘋果官網中，在產品的介紹頁面，僅保留了中間的詳情圖片和上下方的導航條，大量的留白使得用戶集中注意力在產品圖上面。

Designers can also use white space to create a visually focused effect, guiding users to the main content area. For example, on the Apple official website, only the detailed image in the middle and the navigation bar at the top and bottom are retained on the product introduction page, and a large amount of blank space makes users focus on the product image.

本文由濟南網站建設友情奉獻.更多有關的知識請點擊:http://www.44666.com.cn真誠的態度.為您提供為的服

This article is dedicated to building friendship on the Jinan website. For more information, please click: http://www.44666.com.cn Sincere attitude. We provide you with comprehensive service