百度權(quán)重查詢 詞庫(kù)網(wǎng) 網(wǎng)站監(jiān)控 服務(wù)器監(jiān)控 SEO監(jiān)控 手機(jī)游戲 iPhone游戲

簡(jiǎn)介：在制作網(wǎng)站中，特別是在網(wǎng)頁的版面設(shè)計(jì)時(shí)，應(yīng)呈現(xiàn)出獨(dú)特設(shè)計(jì)風(fēng)格。網(wǎng)頁的版面設(shè)計(jì)要有統(tǒng)一的風(fēng)格，形成整體，從更深層次、更為廣闊的視野中來定位自己的版面樣式，從而達(dá)到別人所沒有做到的效果。希望本文能給網(wǎng)站建設(shè)朋友們一點(diǎn)小小的幫助，當(dāng)然本文主要談的就是網(wǎng)站制作中網(wǎng)頁的版面構(gòu)造、元素、圖片......最后能夠形成統(tǒng)一的視覺識(shí)別。

1、課題研究背景

在網(wǎng)絡(luò)高速發(fā)展的今天，網(wǎng)站成為信息的一種主要傳播媒介。那么網(wǎng)站建設(shè)不僅要把握好網(wǎng)站整體界面設(shè)計(jì)，網(wǎng)站框架設(shè)計(jì)，網(wǎng)站優(yōu)化技巧，更重要的是一種綜合運(yùn)營(yíng)能力，包括審美，用戶體驗(yàn)，創(chuàng)新，管理。那么怎樣才能把網(wǎng)站建設(shè)好呢？首先，在制作網(wǎng)站前要對(duì)所制作的網(wǎng)站有一個(gè)整體的構(gòu)造，包括文字的排版、圖片的規(guī)劃、表格的布局......。其次，就是對(duì)每個(gè)頁面要合理編排和布局，也就是這里所說的版面設(shè)計(jì)，版面結(jié)構(gòu)是指一種能夠讓瀏覽者清楚、容易地理解作品傳達(dá)的信息的東西，一種將不同介質(zhì)上的不同元素巧妙的排列方式。再次，就是要正確看待建設(shè)網(wǎng)站的內(nèi)容，不能把所有的網(wǎng)站都以一種固定樣式進(jìn)行制作，而是要根據(jù)具體的內(nèi)容來安排所制作的網(wǎng)頁版面格式。比如說：娛樂性的網(wǎng)站要求格式千變?nèi)f化，而教育類網(wǎng)站總體上要求要單調(diào)一點(diǎn)較好。

做好這些工作以后，就要對(duì)網(wǎng)站的頁面進(jìn)行排版，也就是所說網(wǎng)頁的版面設(shè)計(jì)。所謂的網(wǎng)頁版面設(shè)計(jì)是指將網(wǎng)站的一個(gè)頁面看著報(bào)紙、雜志或者說是某個(gè)門面進(jìn)行布局、整理和排版。雖然今天的網(wǎng)站布局是千變?nèi)f化的，但萬變不離其中。所以固定的網(wǎng)頁版面設(shè)計(jì)基礎(chǔ)依然是必須學(xué)習(xí)和掌握的。在上網(wǎng)時(shí)，你會(huì)發(fā)現(xiàn)有些頁面是很吸引人的、而有的呢卻無法讓人們停留他們的眼球，那就是網(wǎng)頁的版面是否遵從讀者的心理。這里網(wǎng)頁版面設(shè)計(jì)包括網(wǎng)頁的版面布局、版面的設(shè)計(jì)原則、版面設(shè)計(jì)的美化......。

2、網(wǎng)頁的版面布局

布局，就是以最適合瀏覽的方式將圖片、文字和表格有條理的排放在頁面的不同位置。

在眾多的網(wǎng)站版面布局中，主要有以下幾種布局步驟：

2.1、草案

在新建的頁面中，什么也沒有，就像一張白紙，需要進(jìn)行規(guī)劃。當(dāng)然最好是在紙畫出大致的輪廓，這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個(gè)滿意的作為繼續(xù)創(chuàng)作的腳本。

2.2、粗略布局

就是在草案的基礎(chǔ)上進(jìn)行更一步的修改，然后確定進(jìn)行連接等一系列的操作（包括新聞、flash動(dòng)畫……）。在這里必須遵循突出重點(diǎn)、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。

2.3、定案

所謂的定案是將將粗略布局的頁面做最后的修改，然后定下方案。

3、網(wǎng)站頁面設(shè)計(jì)的原則

在今天網(wǎng)站頁面的設(shè)計(jì)同樣遵循一定的原則，就像一些綜合期刊一樣它也有一定的原則。俗話說：“不以規(guī)矩?zé)o以成方圓”，所以網(wǎng)站版面設(shè)計(jì)的原則有：有序性原則、平衡性原則、裝飾性原則。

3.1、有序性原則

有序性是指在網(wǎng)站的頁面編輯中要遵循一定的規(guī)范。比如說是按照左右型結(jié)構(gòu)、左中右型結(jié)構(gòu)、右左型結(jié)構(gòu)、用表格（<table>……</table>和CSS系統(tǒng)來定位網(wǎng)頁中版面的規(guī)劃。在網(wǎng)頁編排中應(yīng)正確使用文字、標(biāo)點(diǎn)符號(hào)、計(jì)量單位、規(guī)范使用術(shù)語、圖片和Flash動(dòng)畫等。

3.2、平衡性原則

雖然網(wǎng)頁不像圖書、雜志那么復(fù)雜，不像他們的頁面那么大。不過在讀者的眼里一樣要有視覺的均衡性，也就是所謂的平衡性原則。

版面構(gòu)圖的基本元素是點(diǎn)、線、面,其中單個(gè)的字符是點(diǎn),由字符組成的行是線,由行組成的段落是面。線和面的運(yùn)動(dòng)方向可以歸納為水平、垂直和傾斜三種形式。水平和垂直給人以安靜和固定的感覺,傾斜則具有運(yùn)動(dòng)感。水平、垂直和傾斜組合起來使用會(huì)給版面帶來豐富和生動(dòng)的效果,從而使版面在整體上保持平衡的前提下具有動(dòng)感和變化。如有的期刊把文章的篇名、作者、摘要、關(guān)鍵詞等前置部分采用右頂格排(而不是習(xí)慣上居中排) ,這種構(gòu)圖上的適度傾斜可以給讀者在視覺上產(chǎn)生“順勢(shì)而下”的流暢感覺。

3.3、裝飾性原則

這里最重要的是“虛”與“實(shí)”的對(duì)比以及巧妙的運(yùn)用空白的裝飾性原則。在版面設(shè)計(jì)中還要注意立體的裝飾效果,比如“前景”標(biāo)題可以用加大加黑的辦法強(qiáng)化明暗對(duì)比,“中景” 正文突出文字與空白的黑白對(duì)比“, 背景”頁碼和注釋、參考文獻(xiàn)用縮小字號(hào)的辦法使色調(diào)顯得柔和輕淡一些。從而使版面在整體上體現(xiàn)出層次感。

4、營(yíng)造網(wǎng)頁版面的藝術(shù)美

任何東西都有它特定意識(shí)美，網(wǎng)站也不例外。網(wǎng)頁版面不是單純化裝的臉，而是要把藝術(shù)形式和內(nèi)容完美的結(jié)合起來，從而給讀者一張生動(dòng)、內(nèi)容豐富的臉。網(wǎng)頁版面以網(wǎng)站的每個(gè)頁面為對(duì)象。對(duì)其進(jìn)行美的視覺上的設(shè)計(jì)。所以有人把這種設(shè)計(jì)叫做：“美的視覺上的傳達(dá)性”。

4.1、網(wǎng)頁版面設(shè)計(jì)的統(tǒng)一性

統(tǒng)一是指事物的相繼出現(xiàn)，并帶有聯(lián)屬關(guān)系的屬性。這里所講的統(tǒng)一是指網(wǎng)頁中應(yīng)該出現(xiàn)的文字、圖片等按照一定的規(guī)律有機(jī)的結(jié)合。網(wǎng)站頁面的版面設(shè)計(jì)要求有統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)、統(tǒng)一的色彩和統(tǒng)一的風(fēng)格，由此加深別人對(duì)此風(fēng)格的認(rèn)同。網(wǎng)頁版面的統(tǒng)一有：

4.1.1、圖片與版式的統(tǒng)一，

4.1.2、標(biāo)題一版式的統(tǒng)一，

4.1.3、內(nèi)容與版式的統(tǒng)一，

4.1.4、內(nèi)容與版式的統(tǒng)一。

4.2、網(wǎng)頁版面設(shè)計(jì)的廣告性

網(wǎng)頁版面的廣告性就是該網(wǎng)頁版面設(shè)計(jì)的醒目程度，它是表現(xiàn)網(wǎng)頁內(nèi)容的重要手段之一，被視為一種促銷手段、一種說服藝術(shù)。在目前，網(wǎng)頁的廣告大致有三種表現(xiàn)形式：

4.2.1、內(nèi)容直接展示型，

4.2.2、醒目展示型，

4.2.3、注重版面文字的潛在力。

4.3、網(wǎng)頁版面設(shè)計(jì)的工藝性

網(wǎng)頁的版面設(shè)計(jì)要求有一定的工藝性。不管是商業(yè)網(wǎng)站還是政府網(wǎng)站，甚至學(xué)校類網(wǎng)站都要求有一定的美感和藝術(shù)形式。特別是在今天人民瘋狂的追求現(xiàn)實(shí)美和空間美，所以在設(shè)計(jì)中要體現(xiàn)這種美感。以求得到人們的認(rèn)可。

5、網(wǎng)頁版面設(shè)計(jì)要遵從讀者的閱讀心理

網(wǎng)站制作中網(wǎng)站設(shè)計(jì)者的思想、意圖、網(wǎng)站的內(nèi)容都是通過版面的設(shè)計(jì)來影響讀者的心情。一個(gè)賞心悅目的版面能使網(wǎng)頁增添色彩，也能使讀者帶著愉快的心情來看整個(gè)網(wǎng)站，大大增加了網(wǎng)站的閱讀次數(shù)。相反一個(gè)糟糕的網(wǎng)站會(huì)使讀者大大的打折扣。

6、用DIV和CSS設(shè)計(jì)網(wǎng)站的頁面和易改變WEB信息

CSS主要是將網(wǎng)頁上的內(nèi)容與格式分開控制，也就是說當(dāng)你把某個(gè)頁面編輯好以后覺得不好的話可以利用CSS在后臺(tái)進(jìn)行再次排版。但是現(xiàn)在的網(wǎng)頁在一般情況下都是用表格、層等，CSS多是潛入到HTML語言中，不能很隨便的改變網(wǎng)頁的版面布局，也不能很好的發(fā)揮CSS在版面布局中的作用。在這樣的情況下，DIV誕生了。通過使用HTML的DIV和CSS一起就很容易而方便的改變網(wǎng)頁的版面布局。CSS是網(wǎng)頁制作技術(shù), 能簡(jiǎn)化網(wǎng)頁的格式代碼。目前網(wǎng)頁布局多用表格、層等, CSS排版功能得不到充分利用。和DIV的共同使用就把CSS的功能發(fā)揮的淋漓盡致。

CSS是跨平臺(tái)瀏覽器之間的國(guó)際標(biāo)準(zhǔn)W9C中的一部分, 是一種對(duì)WEB文檔添加樣式的簡(jiǎn)單機(jī)制,屬于表現(xiàn)層的布局語言，在CSS 標(biāo)準(zhǔn)里, 不僅重新定義了HTML 原來的樣式, 使CSS 在格式定義方面具有特殊優(yōu)勢(shì)。更加入了區(qū)塊設(shè)置、隨意位置擺放等頁面布局樣式設(shè)定, 使CSS可以提供精確定位功能以及各種特殊效果。從而為網(wǎng)頁布局和頁面效果的制作提供一種新途徑。

CSS元素的排版格式, 可以通過“#Classname標(biāo)記{CSS代碼}”放在任何HTML 標(biāo)記上使用整個(gè)頁面的排版, 借助于HTML“空元素”DIV 與CSS 來充分發(fā)揮CSS 布局功能, 使網(wǎng)頁布局可以有很大的自由度。

6.1、用DIV與CSS技術(shù)設(shè)計(jì)網(wǎng)頁

DIV 是HTML 的一個(gè)標(biāo)記，用于定義內(nèi)容塊，并不顯示任何內(nèi)容, 通過對(duì)一個(gè)DIV 標(biāo)記創(chuàng)建一個(gè)樣式規(guī)則，可以將樣式應(yīng)用到所有包含在<IV>……</DIV>之間的不同標(biāo)記上以及包含在DIV 標(biāo)記之內(nèi)的內(nèi)容上, 不需要為每個(gè)個(gè)別的元素指定其自己的樣式規(guī)則。

將網(wǎng)頁內(nèi)容規(guī)劃成DIV塊， 然后把每塊內(nèi)容定義好樣式表，將多個(gè)樣式定義匯集到一個(gè)樣式表文件中, 應(yīng)用Class=””或Id=””來應(yīng)用CSS樣式表項(xiàng),其屬性和值就可以格式化這個(gè)塊內(nèi)內(nèi)容。

6.2、CSS與DIV共同應(yīng)用的優(yōu)點(diǎn)與缺點(diǎn)

6.2.1、DIV 塊方便塊間移動(dòng)，版面格式容易更新，與CSS 配合方便網(wǎng)站改版，改變網(wǎng)頁的布局、網(wǎng)頁的外觀。

6.2.2、使用CSS排版，由于內(nèi)容和格式分離，可以每次只更改網(wǎng)頁內(nèi)容，或只更改樣式以改變網(wǎng)頁外觀，從而滿足于頻繁更新的信息網(wǎng)站。

6.2.3、5.2.3、塊內(nèi)背景圖片過多，網(wǎng)頁加載量大，會(huì)導(dǎo)致網(wǎng)頁下載速度慢。

7、網(wǎng)站版面的設(shè)計(jì)對(duì)營(yíng)銷的重要性

網(wǎng)站版面設(shè)計(jì)對(duì)網(wǎng)站營(yíng)銷的重要點(diǎn)是什么？這個(gè)可能是很多人都要問的問題，企業(yè)網(wǎng)站版面不就是一件漂亮的衣服嗎？俗話說：貨賣一張皮。網(wǎng)站版面就是企業(yè)網(wǎng)絡(luò)宣傳的一張皮。

7.1、網(wǎng)站版面要突出主題

想要突出什么，那么就要在網(wǎng)站的首頁就要去體現(xiàn)，如何讓客戶更容易找到和理解，不要把網(wǎng)站的優(yōu)勢(shì)放在角落里面。在醒目的位置盡情展示。如要突出產(chǎn)品。那么就把所要放的產(chǎn)品放在最顯眼的位置。

7.2、網(wǎng)站版面顏色基本上要和網(wǎng)站內(nèi)容的行業(yè)相配合

設(shè)計(jì)風(fēng)格和樣式是跟據(jù)個(gè)人的審美觀不同，而有所不同，沒有統(tǒng)一的標(biāo)準(zhǔn)去衡量美，但顏色基調(diào)就可以大體一致。如美食行業(yè)和機(jī)械行業(yè)的顏色就完全要不樣。不能是自已喜歡哪種顏色，就偏用哪一種。

8、用表格<Table>……</Table>來設(shè)計(jì)網(wǎng)頁的版面

網(wǎng)頁設(shè)計(jì)隨著網(wǎng)絡(luò)的高速發(fā)展地位變得越來越重要, 如何制作一個(gè)讓人賞心悅目的網(wǎng)頁已經(jīng)成為許多人的追求。其中表格在網(wǎng)頁設(shè)計(jì)中占有重要的作用, 可以作為頁面的布局, 除此之外還有其他許多特殊的應(yīng)用。跟數(shù)據(jù)庫(kù)的連接就是表格在網(wǎng)頁制作中的一個(gè)特殊作用，將代碼預(yù)先設(shè)置好，然后運(yùn)用超連接將數(shù)據(jù)庫(kù)連接起來。這樣可以方便讀者的查詢和網(wǎng)站管理員從事后臺(tái)的操作。

一個(gè)好的網(wǎng)頁往往版面規(guī)整, 內(nèi)容擺放井井有條, 讓人看了賞心悅目, 而這樣的版式經(jīng)常是由表格控制的, 只不過不顯示表格的邊框而已。在上網(wǎng)的時(shí)候，大家不難發(fā)現(xiàn)在很多網(wǎng)站中，表格的應(yīng)用非常平凡。這些網(wǎng)站的大部分頁面都是用表格布局的。那么表格到底是怎樣在網(wǎng)站的版面設(shè)計(jì)中發(fā)揮作用呢？

表格由行和列構(gòu)成, 所以常用的表格標(biāo)記有：

〈table〉……〈/table〉表示表格的開始和結(jié)束，

〈tr〉……〈/tr〉表示表格的行, 有一行就有一對(duì)〈tr〉標(biāo)志，

〈td〉〈/td〉表示表格的單元格, 一行中有多少單元格就有多少對(duì)〈td〉標(biāo)志。

不管是FrontPage還是Dreamweaver中都可以直接插入表格，而在代碼中將會(huì)自動(dòng)生成。當(dāng)然在設(shè)計(jì)表格時(shí)，可以在表格屬性里面進(jìn)行設(shè)置，當(dāng)不喜歡表格邊框時(shí)，在一般情況下是將邊框象素設(shè)置為0。單元格間距指的是單元格和單元格之間的距離, 單元格邊距指的是單元格和其中的內(nèi)容之間的距離。如果想通過表格布局的話, 我們應(yīng)該先對(duì)頁面進(jìn)行整體的規(guī)劃, 分清整個(gè)頁面的結(jié)構(gòu), 然后插入相應(yīng)行數(shù)列數(shù)的表格, 有時(shí)還需通過合并單元格來實(shí)現(xiàn), 接著對(duì)每個(gè)局部進(jìn)行劃分, 通過在單元格中嵌套表格來實(shí)現(xiàn)整個(gè)頁面的布局。除這些之外表格還有許多特殊的作用：

8.1、單元格的合并

網(wǎng)頁中單元格的合并是指將兩個(gè)或者更多的表格合成一個(gè)表格。這就需要用Rowspan及Colspan屬性。Rowspan屬性用于向下延伸合并垂直單元格, 而Colspan屬性用于向右延伸合并水平單元格。如:

   〈td colspan=2〉合并兩個(gè)水平單元格〈/td〉，

〈td rowspan=2〉合并兩個(gè)垂直單元格〈/td〉。

8.2、表格的邊框變細(xì)

一般我們制作的表格邊框要不就不顯示, 要不就很粗, 如何可以制作一個(gè)邊框非常細(xì)的表格呢? 做法其實(shí)很簡(jiǎn)單: 第一步插入一個(gè)表格, 設(shè)置表格的間距和邊距都為1象素, 邊框粗細(xì)也為1象素; 第二步設(shè)置表格的背景色為黑色; 第三步設(shè)置單元格的背景色為白色; 第四步設(shè)置表格的邊框的顏色也為白色。這樣做出的表格邊框就非常細(xì)了。

8.3、制作虛線表格

先在Photoshop里新建一個(gè)尺寸寬高為2PX的圖片, 在左上角畫1象素的小點(diǎn), 保存為web格式, 然后再在表格中設(shè)置其為背景圖片再把表格中的cellspacing和cellpadding的值分別設(shè)為2( 開始背景圖片的尺寸) 保存即可。代碼如下:

在制作網(wǎng)頁的過程中, 用到表格的地方非常多, 如果大家可以靈活運(yùn)用這些技巧, 一定可以為我們的網(wǎng)頁增色不少, 做出風(fēng)格獨(dú)特的頁面。

9、網(wǎng)頁版面設(shè)計(jì)的虛擬空間

一個(gè)好的網(wǎng)站必須講求虛實(shí)得當(dāng)，否則會(huì)給讀者枯燥的感覺。虛實(shí)結(jié)合是制作網(wǎng)站的一項(xiàng)基本前提，它包括了圖象、文字和圖片等的重要藝術(shù)性和美學(xué)特點(diǎn)。

版式設(shè)計(jì)是一種藝術(shù)創(chuàng)作過程，也要講究虛實(shí)相宜。在版面編輯中，編排的內(nèi)容是實(shí)體，當(dāng)每個(gè)實(shí)空間占據(jù)一定位置后，一定要有若干的虛空間來調(diào)節(jié)視覺強(qiáng)度，使其張力、動(dòng)勢(shì)得以釋放和延伸，這個(gè)虛空間就是“留白”。？留白可以用來突出文字內(nèi)容，起到引導(dǎo)讀者閱讀注意力轉(zhuǎn)換的效果，空白的巧妙使用，使主體得到充分的發(fā)揮。所謂留白就是讓網(wǎng)站充滿虛擬和現(xiàn)實(shí)的一種比較。

把這些運(yùn)用到網(wǎng)站的版面布局中，效果就大不一樣了。比如，網(wǎng)頁的白色背景太虛，則可以加些色快；版面零散，可以用線條和符號(hào)串聯(lián)；左面文字過多，右面則可以插一張圖片保持平衡；表格太規(guī)矩，可以改用導(dǎo)角試試?？傊婷嬖O(shè)計(jì)關(guān)鍵還在于你的創(chuàng)意和設(shè)計(jì)，希望經(jīng)過不斷的嘗試和推敲，這樣的網(wǎng)頁會(huì)更加亮麗起來。