網(wǎng)頁(yè)布局的常見(jiàn)8種類型：1、“國(guó)”字型布局；2、拐角型布局；3、標(biāo)題正文型布局；4、封面型布局；5、“T”結(jié)構(gòu)布局；6、“口”型布局；7、對(duì)稱對(duì)比布局；8、POP布局。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

網(wǎng)站的風(fēng)格大部分是各不相同，但是布局都有一定的規(guī)律，常見(jiàn)的網(wǎng)站布局形式有八種，分別是“國(guó)”字型布局、拐角型布局、標(biāo)題正文型布局、封面型布局、“T”結(jié)構(gòu)布局、“口”型布局、對(duì)稱對(duì)比布局、POP布局。下來(lái)逐一給大家介紹這八種網(wǎng)頁(yè)布局的常見(jiàn)類型。

1、“國(guó)”字型布局

這種布局是普通也是常見(jiàn)的，一些大型網(wǎng)站經(jīng)常使用這種類型。它的特點(diǎn)就是規(guī)范，內(nèi)容主次由上到下，網(wǎng)頁(yè)上面是標(biāo)題條幅、導(dǎo)航欄，下面就是網(wǎng)站相關(guān)內(nèi)容信息等，例如chinaren、163、sina等網(wǎng)站。

2、拐角型布局

該布局特點(diǎn)就是把相關(guān)內(nèi)容的鏈接放到網(wǎng)頁(yè)的左面或右面，另一面就是相關(guān)的文字信息，網(wǎng)站的上面是標(biāo)題條幅或是主要內(nèi)容導(dǎo)航欄，例如校園網(wǎng)站等。

3、標(biāo)題正文型布局

它的特點(diǎn)就是利用文字來(lái)布局，除了標(biāo)題，下面就是文章，像一些專門的文章、小說(shuō)頁(yè)面或注冊(cè)頁(yè)面就屬于這種類型。

4、封面型布局

它的特點(diǎn)是網(wǎng)站的首頁(yè)是一些精美有創(chuàng)意的圖案結(jié)合一些小的動(dòng)畫組成，在頁(yè)面當(dāng)中，沒(méi)有什么導(dǎo)航欄指示，只是有簡(jiǎn)單的“進(jìn)人”等鏈接，這種布局一般設(shè)計(jì)性網(wǎng)站用的比較多，像設(shè)計(jì)論壇、設(shè)計(jì)公司、個(gè)人網(wǎng)站等，因?yàn)檫@種布局需要精心設(shè)計(jì)，給人的視覺(jué)感覺(jué)也很美妙。

5、“T”結(jié)構(gòu)布局

所謂“T”結(jié)構(gòu)布局，就是指網(wǎng)頁(yè)上邊和左邊相結(jié)合，頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條，左下方為主菜單，右面顯示內(nèi)容，這是網(wǎng)頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。在實(shí)際設(shè)計(jì)中還可以改變“T”結(jié)構(gòu)布局的形式。

如左右兩欄式布局，一半是正文，另一半是形象的圖片、導(dǎo)航?；蛘牟坏葍蓹谑讲贾茫ㄟ^(guò)背景色區(qū)分，分別放置圖片和文字等。

這樣的布局有其固有的優(yōu)點(diǎn)，因?yàn)槿说淖⒁饬χ饕谟蚁陆?，所以企業(yè)想要發(fā)布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁(yè)面結(jié)構(gòu)清晰，主次分明、易于使用。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人“看之無(wú)味”。

6、“口”型布局

這是一個(gè)形象的說(shuō)法，指頁(yè)面上下各有一個(gè)廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內(nèi)容。

這種布局的優(yōu)點(diǎn)是頁(yè)面充實(shí)、內(nèi)容豐富、信息量大，是綜合性網(wǎng)站常用的版式，特別之處是頂部中央的一排小圖標(biāo)起到了活躍氣氛的作用。

缺點(diǎn)是頁(yè)面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計(jì)，例如網(wǎng)易壁紙站使用多幀形式，只有頁(yè)面中央部分可以滾動(dòng)，界面類似游戲界面。使用此類版式的有多維游戲娛樂(lè)性網(wǎng)站。

7、對(duì)稱對(duì)比布局

顧名思義，它指采取左右或者上下對(duì)稱的布局，一半深色，一半淺色，一般用于設(shè)計(jì)型網(wǎng)站。其優(yōu)點(diǎn)是視覺(jué)沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)地結(jié)合比較困難。

8、POP布局

POP源自廣告術(shù)語(yǔ)，指頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。常用于時(shí)尚類網(wǎng)站，優(yōu)點(diǎn)顯而易見(jiàn)：漂亮吸引人，缺點(diǎn)是速度慢。