網(wǎng)頁布局設(shè)計

時間：2023-10-09 00:06:02 | 來源：網(wǎng)站運營

時間：2023-10-09 00:06:02 來源：網(wǎng)站運營

網(wǎng)頁布局設(shè)計：

設(shè)置網(wǎng)頁尺寸是進行網(wǎng)頁設(shè)計的第一步。網(wǎng)頁尺寸是指網(wǎng)頁的高度和寬度。網(wǎng)頁的高度一般沒有限制，可根據(jù)網(wǎng)頁內(nèi)容來靈活設(shè)置。網(wǎng)頁寬度主要分為定寬和自適應(yīng)寬度兩種類型。其中，定寬是指網(wǎng)頁內(nèi)容區(qū)域（版心）的寬度固定；自適應(yīng)寬度是指網(wǎng)頁內(nèi)容區(qū)域的寬度自動適應(yīng)瀏覽器（顯示器）的寬度，隨瀏覽器的寬度而變化。

網(wǎng)頁美工在設(shè)計網(wǎng)頁前，應(yīng)考慮頁面是定寬還是自適應(yīng)寬度。如果是定寬，應(yīng)根據(jù)主流顯示器的分辨率來設(shè)置效果圖中的網(wǎng)頁寬度。目前，主流顯示器的分辨率如圖3-1所示，因此，可將網(wǎng)頁寬度設(shè)置為1 920、1 600、1 440、1 280、1 140、990等像素。其中，如果要讓網(wǎng)頁顯得大氣并具有現(xiàn)代感，可將其寬度設(shè)置為1 440像素以上；如果要讓網(wǎng)頁兼顧尺寸較小的顯示器，則需要將其寬度設(shè)置得小一些，如990或1 024等像素。

如果網(wǎng)頁使用自適應(yīng)寬度模式，可直接使用1 920像素或更大的寬度設(shè)計。

網(wǎng)頁常見布局類型

網(wǎng)頁布局的類型很多，下面簡要介紹一些常見布局類型。

國字型網(wǎng)頁布局通常被門戶、購物類等內(nèi)容豐富的大型網(wǎng)站所使用。其基本布局形式是將網(wǎng)站的Logo、導(dǎo)航欄及Banner等置于頂部；下方安排網(wǎng)頁的主體內(nèi)容，主題內(nèi)容的左、右兩側(cè)分別是導(dǎo)航菜單、廣告或其他欄目；最后由頁尾形成外框底部，將主體內(nèi)容包圍。

拐角型布局與國字型布局類同，網(wǎng)頁頂部都是網(wǎng)站的Logo、導(dǎo)航欄和Banner（Banner也可位于內(nèi)容區(qū)）。不同的是，拐角型布局的頁面左側(cè)或右側(cè)是縱向?qū)Ш讲藛?，對?cè)為網(wǎng)頁主體內(nèi)容，即通過橫向?qū)Ш綑谂c縱向的導(dǎo)航菜單形成拐角，包圍網(wǎng)頁主體內(nèi)容。拐角型布局同樣適合購物類、門戶類等網(wǎng)站使用。

POP引自廣告術(shù)語，是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，如圖3-4所示。POP型布局的網(wǎng)頁常用于時尚類網(wǎng)站首頁。其優(yōu)點是頁面優(yōu)美，具有視覺沖擊力，缺點是網(wǎng)頁打開速度慢。

標(biāo)題文本型布局是指頁面內(nèi)容以文本為主。這種類型的網(wǎng)頁頂部通常是標(biāo)題，下面是正文，常用于注冊、登錄、評論或文章閱讀等信息簡潔的頁面

顧名思義，對稱型網(wǎng)頁布局是指采取左右或者上下對稱的布局。對稱型布局如何應(yīng)用得到，能使頁面形成極佳的視覺沖擊感。圖3-6所示是典型的對稱型網(wǎng)頁布局，該網(wǎng)頁無論是圖像的內(nèi)容還是版塊的大小，都保持著人與馬一一對稱的關(guān)系。這樣布局使頁面極具震撼力，能給瀏覽者帶來深刻的印象。

全景型是目前十分流行的網(wǎng)頁布局形式，是指使用全景圖像或動畫作為網(wǎng)站首頁。該類型的網(wǎng)頁高度通常只有一屏大小，瀏覽者可通過導(dǎo)航切換到其他頁面。全景型布局的網(wǎng)頁不僅時尚大方，而且有很強的視覺沖擊感，多用于宣傳企業(yè)形象

組合型網(wǎng)頁布局多用于攝影網(wǎng)站或需要大量圖片說明的網(wǎng)站，是指將等大或大小不一的多張圖片組合、排列在網(wǎng)頁中。需要注意的是，在選取圖片時應(yīng)事先統(tǒng)一圖片的明度，讓組合起來的圖片具有整體感，否則密密麻麻拼在一起的圖片會讓人眼花繚亂。圖3-8所示為日本的一家旅游網(wǎng)站的網(wǎng)頁，它所選用的圖片雖然大小不一，但色調(diào)是相同的。繽紛的色彩十分符合該行業(yè)特點，同時也能吸引瀏覽者的視線。

一家律師事務(wù)所的網(wǎng)站首頁，該頁面通過大小不一，但錯落有致的矩形版塊將導(dǎo)航內(nèi)容散開分布在頁面中。頁面整體散而不亂，極具設(shè)計感。

分割型布局是當(dāng)今網(wǎng)頁布局的一種流行趨勢。常見的分割布局方式有斜線分割、塊面分割、主題分割、等距分割等。使用分割布局的網(wǎng)頁主次分明，形式感極強，能夠?qū)?nèi)容的重要性和層次性體現(xiàn)在網(wǎng)頁的結(jié)構(gòu)上，從而引導(dǎo)瀏覽者按順序進行閱讀

扁平化是目前流行的網(wǎng)頁設(shè)計趨勢之一，其特點是去掉頁面中多余的透視、紋理、漸變及3D效果等元素，讓“信息”重新作為網(wǎng)頁核心被凸顯出來。同時，在設(shè)計元素上強調(diào)極簡化和符號化，讓頁面中的內(nèi)容更容易被聚焦，從而帶給用戶更直觀的瀏覽體驗