來(lái)源: 江天開(kāi)發團隊 | 2020-07-14
&n₩♦÷bsp; 網頁可(kě)以說(shuō)是(shì)網站(zhàn)構成的(de)基本 ₩✔元素。當我們輕點鼠标,在網海(hǎi)中遨遊,一(yī)副副精彩的(de)網頁會(←∑♥∑huì)呈現(xiàn)在我們面前 ,那(nà)麽,網頁的(de)精彩與否的(de)因素是(s•>'hì)什(shén)麽呢(ne)?色彩的(de)搭配、♣π文(wén)字的(de)變化(huà)、圖片的(de)處理(lǐ)等,這(zhè)些 α"(xiē)當然是(shì)不(bù)可(kě)忽略的(de)因素,除了(le)這(zhè β×)些(xiē),還(hái)有(yǒu)一(yī)個(gè)非常重要(yào)的(de)因素一(y" ī)網頁的(de)布局。下(xià)面,我們就(jiù)有(yǒu)關網頁布局ε÷∑談論一(yī)下(xià)。
網頁布局類型
網頁布局大(dà)緻可®¥(kě)分(fēn)為(wèi)“國(guó)”字型、拐φ✘₹角型、标題正文(wén)型、左右框架型、上(shàng)下(xiα©à)框架型、 綜合框架型、封面型、Flash型απ☆£、 變化(huà)型,下(xià)面分(fēn)别論述。
1、“國(guó)”型:
也(yě)可(Ω≤♠kě)以稱為(wèi)“同” 字型,是(shì)一(yī)些(x≠←₩iē)大(dà)型網站(zhàn)所喜歡的(de)類型 ,即最上(shà<♦®¥ng)面是(shì)網站(zhàn)的(de)标題以及橫幅廣告條,接下(xià)來(l≤♣σ"ái)就(jiù)是(shì)網站(zhàn)的(de)主要(yào)內¥§≤α(nèi)容,左右分(fēn)列-些(xiē↑★←)兩小(xiǎo)條內(nèi)容, 中間(jiān)是(shì)主要(yào)部分(f∞≈λ♣ēn),與左右一(yī)起羅列到(dào)底,最下(xià)面是(₩ε<↑shì)網站(zhàn)的(de)一(yī)些(xiē)基本信息、聯系方式、版權聲明(míng™Ω)等。這(zhè)種結構是(shì)我們在網上(shàng)<Ω見(jiàn)到(dào)的(de)差不(bù)多(duō)最多÷♦(duō)的(de)一(yī)種結構類型。
2、拐角型:
這(zhè)種結構與上(shàβ₩♠εng)一(yī)種其實隻是(shì)形式上(shàng)的(de)區(qū) $别,其實是(shì)很(hěn)相(xiàng)近(jìn)的(de),♦♠'®上(shàng)面是(shì)标題及廣告橫幅,接下(xià)來(≥lái)的(de)左側是(shì)一(yī)窄列鏈接等 , 右列₹φ是(shì)很(hěn)寬的(de)正文(wén),下(xià)面也(yě)是(sh→"•ì)一(yī)些(xiē)網站(zhàn)的(de)輔助信息。 在這(zhè)種類型中∞∞, 一(yī)種很(hěn)常見(jiàn)的(de)類型是(shì)最上(∞™shàng)面是(shì)标題及廣告,左<δ✔側是(shì)導航鏈接。
3、标題正文(wén)型;
這(zhè)©λ種類型即最上(shàng)面是(shì)标題或類似的(de ÷↕)一(yī)些(xiē)東(dōng)西(xī),下(xià)面是(shì)文(wé≈✔↔€n),比如(rú)一(yī)些(xiē)紋章(z♦₽©hāng)頁面或注冊頁面等就(jiù)是₹ε(shì)這(zhè)種類。
4、左右框架型:
這(zh ↔è)是(shì)一(yī)種左右為(wèi)分(fē∞ ∑n)别兩頁的(de)框架結構,一(yī)般左面是(shì) 導航鏈接,✔ 有(yǒu)時(shí)最上(shàngΩ✔)面會(huì)有(yǒu)一(yī)個(gè)小(xiǎo)的( €de)标題或标緻 ,右面是(shì)正文(wén)。我們見(jiàn)÷δ到(dào)的(de)大(dà)部分(fēn)的(de)大(dà)•↕€型論壇都(dōu)是(shì)這(zhè)種結構的(d•γe),有(yǒu)一(yī)些(xiē)企業(yè'≤☆)網站(zhàn)也(yě)喜歡采用(yòng)。 這(zhδ↑è)種類型結構非常清晰,一(yī)目了(le)'♠然。
5、上(shàng)下(xià)框架型:
與γ©♠上(shàng)面類似,區(qū)别僅僅在于是(☆δφshì)一(yī)種上(shàng)下(xi &≥<à)分(fēn)為(wèi)兩頁的(de)框架。
6、綜合框架型:
上(shàng)頁兩♠™★☆種結構的(de)結合,相(xiàng)對(duì)複雜(zá)的(de)一(yī)種 ↑ 框架結構, 較為(wèi)常見(jiàn)的(de)是(shì)類似于“拐角型β•&”結構的(de),隻是(shì)采用(yòng)了(le)框架結構。
7、封面型:
&>α§δnbsp; 這(zhè)種類型基本上(shà¥✔ng)是(shì)出現(xiàn)在一(yī)些(xiē)網站(∏ zhàn)的(de)頁 ,大(dà)部分(fēn)為(wèi)一(yī)些(xiē)精'β美(měi)的(de)平面設計(jì)結合一(yī) 些(xσ•iē)小(xiǎo)的(de)動畫(huà) ,放∑≥•(fàng)幾個(gè)簡單的(de)鏈接或者僅是(shì)一(yī)個(gè)“進入” 的(α• de)鏈接甚至直接在首頁的(de)圖片上(shàng)做(zuò)鏈接而沒有(yǒu)任何提示。÷φ↕↓這(zhè)種類型大(dà)部分(fēn)出現(xφ∑iàn)在企業(yè)網站(zhàn)和(hé)個(gè)人(rén)頓,如(rú)果說(♠>shuō)處理(lǐ)的(de)好(hǎ↑÷↓o), 會(huì)給人(rén)帶來(lái)賞心悅目的(de)感☆←£™覺。
8、Flash型 :
實這(zhè)與封面型結構是(shì)♥•類似的(de),隻是(shì)這(zhè)種類型采用(↑yòng)了(le)目前非常遊戲行(xíng)的(de)F₹"lash ,與封面型不(bù)同的(de)是(sh♦←ì),由于Flash強大(dà)的(de)功能(néng),↑ ≈頁面所表達的(de)信息更豐富, 其視(shì)覺效果及聽β ≥(tīng)覺效果如(rú)果處理(lǐ)得(de)當, 絕不(bù)差于傳統的(<✔de)多(duō)媒體(tǐ)。
9、變化(huà)型:
即上(shàng)面幾種類型的§↔∏↕(de)結合與變化(huà),比如(rú)本站(zhàn)在視(shì)覺上(shàng₽ε∞')是(shì)很(hěn)接近(jìn)拐角型的(de÷ λ),但(dàn)所實現(xiàn)的(de)功能(néngδ≈)的(de)實質是(shì)那(nà)種上(shàng)、左、右結構的(de∏∞☆)綜合框架型。
關于第一(yī)屏
所謂第一(y×δī),是(shì)指我們到(dào)達一(yī)個(gè)網站(zhàn)在不(bù)拖 §動滾動條時(shí)能(néng)夠看(kàn)到(dào↓π)的(de)部分(fēn)。 那(nà)麽第一(yī)屏有(yǒu)多(duō) “γε≥÷大(dà)” 呢(ne)?其這(zhè)是(shì)未知(zhī)的(de)。一(yī)般≥₹來(lái)講 ,在800600的(de)屏蒂顯示模式(這(zhè)也(yě)是α'•(shì)最常用(yòng)的(de))下(xià),™€δ在在安裝後默認的(de)狀态(即工(gōng♠≤©)具欄地(dì)址欄等沒有(yǒu)改變)下(xià), I™>E窗(chuāng)口內(nèi)能(néng)看(kàn)到(dà→♠o)的(de)部分(fēn)為(wèi)778px*435px , 一(yī)般來(♥π&πlái)講,我們以這(zhè)個(gè)大(λ©∞dà)小(xiǎo)為(wèi)标準就(jiù)行(xíng)了(le), 畢境,在無法适γ©合所有(yǒu)人(rén)的(de)情況下(xià),我們隻能(néng)為(wèi)大(dà) ↔✘多(duō)數(shù)考慮了(le)。
&nbs ↕ &p; 說(shuō)了(le)那(nà)麽多(duō),無非是(shì)一(yī)≠★₹♥個(gè)标準的(de)問(wèn)題 ,其實接下(xià)來(lái)不(bù)用(₩yòng)我說(shuō)大(dà)家(jiā)也(yě)能(néng)想到(dào≥↔),第一(yī) 屏當然要(yào)放(fàng)最主要(yào)Ω♥ 的(de)內(nèi)容 ,關鍵要(yào)知(zhī)道(dào)的(de)是(÷shì),我們要(yào)對(duì)第一(yī)屏能(γ ∏néng)顯示的(de)面積要(yào)有(yǒu) 個(gè)估計(jì),而不(bù)要™σλ£(yào)僅僅以自(zì)己的(de)機(jī)器(qì)為(wèi)準。其實網頁制(zh•¶ì)作(zuò)的(de)一(yī)個(gè)很(hěn)麻煩的(de)地(dì)方就(ji₽αù)是(shì)浏覽者的(de)機(jī)器(qì)是(shì)未知(zhī)的(©§ de)。
有(yǒu)關導航欄的(de)位置
✘α 導航欄能(néng)讓我們在浏覽時(shí)容易的(de)到(dào↑δ)達不(bù)同的(de)頁面,是(shì)網頁元素非γ≤≤常重要(yào)的(de)部分(fēn),所以導航欄一(yī)定要(yào)清γ$晰、 醒目,一(yī)般來(lái)講, 導航欄要(yào)在 “第一(y↔σ£ī)屏” 能(néng)顯示出來(lái$∏),但(dàn)是(shì)有(yǒu)時(shí)第一(yī)屏可(kě)能≈≤(néng)會(huì)小(xiǎo)于 上(shàng)面所說(shuō)的(de)435pxΩ≈ ,積于這(zhè)點考慮,那(nà)種橫向放(fàng)置的(de)導航欄要(≈↓¥yào)優于縱向的(de)導航欄考慮,原因很(hěn)簡單:如(rú)果浏覽者的(de)第一(yī)屏很(γ↕•hěn)矮 ,橫向的(de)仍能(néng)全部看λ₽(kàn)到(dào),而縱向的(de)就(jiù)很(hěn)難說(shuō)了(le),★£±'因為(wèi)窗(chuāng)口的(de)寬度-般是(shì)不(bù)會(huì)受浏覽₹☆器(qì) 設置影(yǐng)響的(de),而縱向的(de)則 α∏不(bù)确定性要(yào)大(dà)的(de)多(duō)。
什(shén)麽樣的(de)布局是(shì)最好(hǎo)的(de)
£ ↔ 這(zhè)是(shì)初學者可(k₩βě)能(néng)會(huì)問(wèn)的(de)問(§₩×wèn)題。其實這(zhè)要(yào)具體(tǐ)情況具體(→tǐ)分(fēn)析的(de):比如(rú)如(rú)果"←"內(nèi)容非常多(duō),就(jiù)要(yào)考慮用(yò±✔ng) “國(guó)字型”或拐角型;而如(r♠§ú)果內(nèi)容不(bù)算(suàn)太• ±多(duō)而-些(xiē)說(shuō)明(mí×↕ng)性的(de)東(dōng)西(xī)比較多(du£∑ō),則可(kě)以考慮标題正文(wén)型;那(nà)幾種框架≤♠結構的(de)一(yī)個(gè)共同特點'€就(jiù)是(shì)浏覽方便,速度快(kuài),但♠¥(dàn)結構變化(huà)不(bù)靈活;而如(rú)果₩π¥&是(shì)一(yī)個(gè)企業(yè)網站(zh§≠→ àn)想展示一(yī)下(xià)企業(yè)形象或☆₩π∏個(gè)人(rén)主 頁想展示個(gè)人(ré ≠n)風(fēng)采,封面性是(shì)首選★☆; Flash型更靈活一(yī)些(xiēΩσφ€),好(hǎo)的(de)Flash大(dà)大(d®₽σ↓à)豐富了(le)網頁,但(dàn)是(shì)它不(bùλ∏)能(néng)表達過多(duō)的(de)文(wén)字信息。→β'還(hái)沒有(yǒu)提到(dào)的(de)就(≤↕♣★jiù)是(shì)變化(huà)型了(le↔₹★±), 我隻是(shì)想把這(zhè)個(gè)留給讀(dú)者了(le), 因為(wèi),隻☆€有(yǒu)不(bù)斷的(de)變化(huà)才會(huì)提高(gāo),&€才會(huì)不(bù)斷豐富我們的(de)網頁。