- CSS3+DIV網(wǎng)頁樣式與布局案例課堂(第2版)
- 劉春茂
- 1040字
- 2020-06-29 18:06:42
1.5 網(wǎng)站的種類與網(wǎng)頁布局方式
當(dāng)用戶在網(wǎng)絡(luò)中遨游時(shí),一個(gè)個(gè)精彩的網(wǎng)頁會(huì)呈現(xiàn)在我們面前。網(wǎng)頁的精彩因素有哪些呢?色彩的搭配、文字的變化、圖片的處理等,這些當(dāng)然是不可忽略的因素,除了這些,還有一個(gè)重要的因素,那就是網(wǎng)頁的布局設(shè)計(jì)。
1.5.1 網(wǎng)站的種類
按照內(nèi)容形式的不同,網(wǎng)站可以分為門戶網(wǎng)站、職能網(wǎng)站、專業(yè)網(wǎng)站和個(gè)人網(wǎng)站4大類。
1. 門戶網(wǎng)站
門戶網(wǎng)站是指涉及領(lǐng)域非常廣泛的綜合性網(wǎng)站,如國內(nèi)著名的3大門戶網(wǎng)站:網(wǎng)易、搜狐和新浪。如圖1-19所示為網(wǎng)易網(wǎng)站的首頁。

圖1-19 門戶網(wǎng)站
2. 職能網(wǎng)站
職能網(wǎng)站是指一些公司為展示其產(chǎn)品或?qū)ζ渌峁┑氖酆蠓?wù)進(jìn)行說明而建立的網(wǎng)站。如圖1-20所示為聯(lián)想集團(tuán)的中文官方網(wǎng)站。

圖1-20 職能網(wǎng)站
3. 專業(yè)網(wǎng)站
專業(yè)網(wǎng)站指的是專門以某個(gè)主題為內(nèi)容而建立的網(wǎng)站,這種網(wǎng)站都是以某一題材作為網(wǎng)站內(nèi)容的。如圖1-21所示為趕集網(wǎng)站,該網(wǎng)站主要為用戶提供租房、二手貨交易等同城相關(guān)服務(wù)。

圖1-21 專業(yè)網(wǎng)站
4. 個(gè)人網(wǎng)站
個(gè)人網(wǎng)站是由個(gè)人開發(fā)建立的網(wǎng)站,在內(nèi)容和形式上具有很強(qiáng)的個(gè)性化,通常用來宣傳自己或展示個(gè)人的興趣愛好。如現(xiàn)在比較流行的淘寶網(wǎng),在淘寶網(wǎng)上注冊(cè)一個(gè)賬戶,開一家自己的小店,在一定程度上就宣傳了自己和展示了個(gè)人興趣與愛好,如圖1-22所示。

圖1-22 個(gè)人網(wǎng)站
1.5.2 網(wǎng)頁布局方式
常見的網(wǎng)頁布局有“同”字型、“廠”字型、標(biāo)題正文型、分欄型、封面型和Flash型等。
1. “同”字型
“同”字型是大型網(wǎng)站常用的頁面布局,特點(diǎn)是內(nèi)容豐富、鏈接多、信息量大。網(wǎng)頁的上部分是徽標(biāo)和導(dǎo)航欄,下部分為3列,兩邊區(qū)域是圖片或文字鏈接和小圖片廣告,中間是網(wǎng)站的主要內(nèi)容,最下面是版權(quán)信息等,如圖1-23所示。

圖1-23 “同”字型網(wǎng)站
2. “廠”字型
“廠”字型網(wǎng)頁布局的特點(diǎn)是內(nèi)容清晰、一目了然,網(wǎng)頁頂端是徽標(biāo)和導(dǎo)航欄,左側(cè)是文本和圖片鏈接,右邊是正文信息區(qū),如圖1-24所示。

圖1-24 “廠”字型網(wǎng)站
3. 標(biāo)題正文型
標(biāo)題正文型網(wǎng)頁布局的特點(diǎn)是內(nèi)容簡單,網(wǎng)頁上部是網(wǎng)站徽標(biāo)和標(biāo)題,下部是網(wǎng)頁正文,如圖1-25所示。

圖1-25 標(biāo)題正文型網(wǎng)站
4. 分欄型
分欄型網(wǎng)頁布局一般分為左右(或上下)兩欄或多欄。一欄是導(dǎo)航鏈接,另一欄是正文信息,如圖1-26所示。

圖1-26 分欄型布局網(wǎng)站
5. 封面型
封面型網(wǎng)頁布局更接近于平面設(shè)計(jì)藝術(shù),主要應(yīng)用在首頁上,一般為設(shè)計(jì)精美的圖片或動(dòng)畫,多用于個(gè)人網(wǎng)頁,如果處理得好,會(huì)給人帶來賞心悅目的感覺,如圖1-27所示。

圖1-27 封面型布局網(wǎng)站
6. Flash型
Flash型網(wǎng)頁布局采用Flash技術(shù)完成,頁面所表達(dá)的信息極富感染力,其視覺效果和聽覺效果與傳統(tǒng)頁面不同,能給瀏覽者以很大的沖擊。Flash網(wǎng)頁很受年輕人的喜愛,如圖1-28所示。

圖1-28 Flash型布局網(wǎng)站
- Windows 8實(shí)戰(zhàn)從入門到精通
- WebGIS之Element前端組件開發(fā)
- 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用(第2版)
- CSS網(wǎng)頁布局與瀏覽器兼容
- 計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ):基于案例與實(shí)訓(xùn) 第2版
- 計(jì)算機(jī)網(wǎng)絡(luò)
- 劍指Vue3:從入門到實(shí)踐
- INSTANT Migration to HTML5 and CSS3 How-to
- 萬億級(jí)流量轉(zhuǎn)發(fā):BFE核心技術(shù)與實(shí)現(xiàn)
- 信息安全技術(shù)
- 系統(tǒng)工程的藝術(shù):用基于模型的系統(tǒng)工程方法構(gòu)建復(fù)雜系統(tǒng)(原書第2版)
- Bootstrap響應(yīng)式Web前端開發(fā)
- 阿里云運(yùn)維架構(gòu)實(shí)踐秘籍
- 矛與盾:黑客攻防命令大曝光
- Axure RP8實(shí)戰(zhàn)手冊(cè):網(wǎng)站和APP原型制作案例精粹