1.網(wǎng)頁(yè)的分欄

做網(wǎng)站的版面變化主要通過(guò)“欄”的變化來(lái)體現(xiàn)。受計(jì)算機(jī)顯示屏和網(wǎng)站制作瀏覽習(xí)慣的影響,網(wǎng)站的寬度相對(duì)固定,但高度是不定的,因此網(wǎng)站“欄”的設(shè)計(jì)主要集中在豎欄的區(qū)分和版式設(shè)計(jì)上。

欄的變化有兩種,
一種是橫欄打通.
一種是豎欄打通.

如果是網(wǎng)站的重要內(nèi)容,可以跨越好幾個(gè)欄。在網(wǎng)站制作的版面中左上方是最受矚目的地方,其次是右上方,在其次是右下與左下。重要的欄目標(biāo)題盡量放在首屏。

由于計(jì)算機(jī)顯示屏的不一致,欄寬有定寬和隨著顯示屏大小相應(yīng)調(diào)節(jié)兩種方式。做網(wǎng)站的版面設(shè)計(jì)要注意整體的形式美感。文章的安排要做到:主次、大小、長(zhǎng)短、橫豎的搭配。在一個(gè)版面中,或以大塊文章為主,配以少量小塊文章,或以小塊文章為主,配以少量大一點(diǎn)面積的文章,如各占二分之一,也會(huì)“花”在處理大塊文章時(shí),應(yīng)注意在統(tǒng)一中求變化,避免版面單調(diào)。在處理小面積文章與圖板時(shí),應(yīng)避免版面零亂,可用畫線、分組等方法使版面在變化中求統(tǒng)一,井然有序。

多數(shù)網(wǎng)站采用1一4豎欄的版式。

(1)一欄版式
一欄版式是指網(wǎng)站縱向只有一個(gè)豎版的版面結(jié)構(gòu)。這種版式最簡(jiǎn)單,用戶視覺(jué)流程就是從上到下,但如果頁(yè)面首屏要同時(shí)傳達(dá)兩相以上內(nèi)容,這種版式就很難實(shí)現(xiàn)了。因此,單欄版式較多使用在目的較單一的最終頁(yè)面中。

(2)二欄版式
二欄的版式是指網(wǎng)站制作縱向有兩個(gè)豎欄的版面結(jié)構(gòu),由于其結(jié)構(gòu)簡(jiǎn)單清晰,又能夠解決內(nèi)容并置的問(wèn)題,受到許多網(wǎng)站的歡迎。

(3)三欄版式
三欄的版式是指網(wǎng)站制作縱向有三個(gè)豎欄的版面結(jié)構(gòu),其結(jié)構(gòu)相對(duì)復(fù)雜一些,但由于能夠同時(shí)呈現(xiàn)較多內(nèi)容,因此是最常用的版式結(jié)構(gòu)。

2版面率

在版面中文字的面積與版面總面積之比,稱為版面率,版面率主要受文字、圖片和留白之間關(guān)系得影響。版面率低給人高雅感,版面率高的新聞性、通俗性強(qiáng)。網(wǎng)絡(luò)有這樣兩點(diǎn)特征:首先上網(wǎng)是付費(fèi)的,其次網(wǎng)頁(yè)每屏的顯示范圍受瀏覽器的限制,如果版面率較低的話,頁(yè)面會(huì)拉得很長(zhǎng),看一點(diǎn)內(nèi)容得換好幾屏,而每屏的內(nèi)容又很少,不方便使用;但是版面率過(guò)高又會(huì)使得頁(yè)面雜亂擁擠,既不好看,也不好用。所以,要根據(jù)網(wǎng)頁(yè)的功能、內(nèi)容和性質(zhì)確定適當(dāng)?shù)陌婷媛省?br style="margin: 0px; padding: 0px; list-style: none; color: rgb(128, 128, 128); font-family: 宋體; line-height: 25px; white-space: normal; background-color: rgb(236, 236, 236);"/>
高版面率常用于新聞頁(yè)面,信息量大,新聞性強(qiáng)。中版面率常用于娛樂(lè)信息站點(diǎn),既有內(nèi)容豐富、信息及時(shí)的特點(diǎn),又有輕松休閑的娛樂(lè)特點(diǎn)。較低版面率常用于產(chǎn)品宣傳做網(wǎng)站,比如汽車銷售網(wǎng)站,營(yíng)造了高檔和神秘感,又有必要的內(nèi)容信息。

有時(shí),當(dāng)版面中實(shí)行的分量很滿,以至于無(wú)法感受到線形存在的時(shí)候,卻仍能感受到一種空氣的流動(dòng),它們時(shí)而舒婉流暢,時(shí)而歡快雀躍,或匯攏成靜靜的一片,或分散成涓涓細(xì)流從字里行間穿行而過(guò),這就是版面中的空白。版面中的空白與建筑中的虛空間相似,在一個(gè)版面中,不能只看到圖形、文字,而注重空白;就好像不能只看到字體的筆畫,而忽略畫筆之間的空當(dāng)。正是由于空白的襯托才使視覺(jué)得以集中,從而提高了圖文的價(jià)值。