高建芳

摘 要：隨著網(wǎng)絡(luò)的不斷發(fā)展，網(wǎng)站建設(shè)和網(wǎng)頁(yè)制作也流行起來(lái)，網(wǎng)頁(yè)的外觀及它的信息量決定了它的客流量。本文主要從網(wǎng)頁(yè)的版面布局、版面尺寸、色彩搭配幾個(gè)網(wǎng)頁(yè)制作時(shí)的核心元素出發(fā)，講述了可視化網(wǎng)頁(yè)的規(guī)劃設(shè)計(jì)。

關(guān)鍵詞：網(wǎng)頁(yè)；版面布局；版面尺寸；色彩搭配

1.網(wǎng)頁(yè)的版面布局

網(wǎng)頁(yè)的版面布局很重要，它的版面風(fēng)格與廣告設(shè)計(jì)的版面風(fēng)格是統(tǒng)一的，其目的都是為了產(chǎn)生美感、提高閱讀興趣、吸引人們的注意力。網(wǎng)頁(yè)的制作首先要考慮版面風(fēng)格的定位，任何網(wǎng)頁(yè)都要根據(jù)主題的內(nèi)容來(lái)決定其風(fēng)格與形式，因?yàn)橹挥行问脚c內(nèi)容的完美統(tǒng)一才能達(dá)到理想的效果。我們通常做網(wǎng)頁(yè)時(shí)用到的幾種比較典型的網(wǎng)頁(yè)風(fēng)格有：對(duì)稱(chēng)型、偏置型、標(biāo)題型和混合型等，如下圖所示。

2. 網(wǎng)頁(yè)排版布局的常用技術(shù)

① 表格布局

表格是網(wǎng)頁(yè)制作的一個(gè)重要組成部分。利用它可以實(shí)現(xiàn)網(wǎng)頁(yè)的精確排版和定位，也可以美化網(wǎng)頁(yè)。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響，而且表格在定位圖片和文本上比用CSS更加方便。表格布局惟一的缺點(diǎn)是，當(dāng)設(shè)計(jì)者使用了過(guò)多的表格時(shí)，會(huì)影響頁(yè)面的下載速度。利用表格布局時(shí)需要網(wǎng)頁(yè)制作者掌握表格的插入方法、表格屬性（背景色、邊框色等）的設(shè)置、會(huì)對(duì)表格中的單元格進(jìn)行拆分、合并操作，并能夠按要求對(duì)表格和單元格的大小進(jìn)行設(shè)置，會(huì)嵌套表格和單元格。

② 框架布局

在框架網(wǎng)頁(yè)中，瀏覽器窗口被劃分成了若干區(qū)域，每個(gè)區(qū)域稱(chēng)為一個(gè)框架，每個(gè)框架可顯示不同的文檔內(nèi)容，彼此之間互不干擾。框架網(wǎng)頁(yè)最明顯的特征就是當(dāng)一個(gè)框架的內(nèi)容固定不動(dòng)時(shí)，另一個(gè)框架中的內(nèi)容仍可以通過(guò)滾動(dòng)條進(jìn)行上下翻動(dòng)。從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。利用框架進(jìn)行網(wǎng)頁(yè)布局時(shí)，要求網(wǎng)頁(yè)制作者要理解框架的結(jié)構(gòu)，會(huì)對(duì)框架頁(yè)進(jìn)行保存，還要會(huì)編排框架，熟悉有關(guān)它的一些基本操作。

③ CSS（層疊樣式表）+Div布局

使用CSS+Div布局技術(shù)能完全精確地定位文本圖片，具有結(jié)構(gòu)與表現(xiàn)相分離、代碼簡(jiǎn)潔、利于搜索、方便后期維護(hù)和修改等諸多優(yōu)勢(shì)。CSS+Div布局可以理解為將許多大小不同的盒子擺放在網(wǎng)頁(yè)上，瀏覽者看到的頁(yè)面中的內(nèi)容是一堆盒子，不是文字，也不是圖像。通過(guò)各種定位方式將盒子排列成最合理的顯示效果就是CSS+Div的基本布局思想。在這種網(wǎng)頁(yè)布局中，所有頁(yè)面中的元素都可以看成是占據(jù)著一定頁(yè)面空間的盒子，利用這些“盒子”可以進(jìn)行精確的排版和布局，我們通常稱(chēng)之為“盒模型”。一般來(lái)說(shuō)這些被占據(jù)的空間往往都要比單純的內(nèi)容要大，因?yàn)楹凶涌梢杂羞吙?，盒子?nèi)外都可以有邊距，可以通過(guò)調(diào)整盒子的邊框和邊距等參數(shù)，來(lái)調(diào)節(jié)盒子的位置。一個(gè)盒子模型由content（內(nèi)容）、border（邊框）、padding（填充也叫內(nèi)邊距）和margin（外邊距）這四部分組成。元素框的最內(nèi)部是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素，如圖4所示。

CSS+Div布局對(duì)于初學(xué)者來(lái)說(shuō)顯得有點(diǎn)復(fù)雜，但它的確是一種好的布局方法。

3. 版面尺寸規(guī)范化

網(wǎng)頁(yè)頁(yè)面尺寸與顯示器的大小及分辨率有關(guān)，目前有兩種常用的尺寸：一是分辨率在800600的情況下，頁(yè)面的顯示尺寸為778像素435像素；二是分辨率在1024768的情況下，頁(yè)面的顯示尺寸為1003像素600像素。以上的尺寸主要是考慮到了滾動(dòng)條及瀏覽器的工具欄，可以看出分辨率越高，頁(yè)面的顯示尺寸就越大。

4.網(wǎng)頁(yè)的色彩搭配

網(wǎng)頁(yè)的色彩是網(wǎng)站形象的關(guān)鍵因素之一，色彩的搭配、運(yùn)用是網(wǎng)頁(yè)制作中很重要的一個(gè)環(huán)節(jié)，如何將不同的色彩組合、搭配構(gòu)成美麗的頁(yè)面，是需要網(wǎng)頁(yè)制作者對(duì)色彩搭配技巧和原則進(jìn)行深一步研究的。不同的主色調(diào)有著不同的象征意義，主色調(diào)的選擇，根據(jù)建設(shè)的網(wǎng)站主題來(lái)確定。同時(shí)，在網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程中，我們也需要根據(jù)和諧、均衡和重點(diǎn)突出的原則，根據(jù)色彩對(duì)人們心理的影響，合理地加以運(yùn)用。在色彩搭配環(huán)節(jié)，注意避免以下幾種情況出現(xiàn)：

（1）背景與文字內(nèi)容對(duì)比不強(qiáng)烈，這樣看上去不舒服，會(huì)給人的視覺(jué)帶來(lái)疲勞感。

（2）避免使用太強(qiáng)烈的純色，顯的缺乏內(nèi)涵。

（3）配色的搭配脫離了整體。

（4）沒(méi)有一種主色貫穿其中，網(wǎng)頁(yè)很花。主色并不是面積最大的顏色，而是最重要，最能揭示和反映主題的顏色。

（5）顏色太淺，對(duì)比過(guò)弱，顯得蒼白無(wú)力。

除了以上幾種情況外，還需要大家注意藍(lán)色忌純，綠色忌黃，紅色忌艷的原則。

5.結(jié)束語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)與制作是計(jì)算機(jī)專(zhuān)業(yè)的常規(guī)課程，也是大多數(shù)學(xué)生比較感興趣的一門(mén)課程。如何學(xué)好或者做好網(wǎng)頁(yè)，網(wǎng)頁(yè)的版面布局、尺寸的規(guī)范、顏色的選擇、搭配都是很重要，我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)要對(duì)這幾點(diǎn)進(jìn)行認(rèn)真的考慮和精心的設(shè)計(jì)。當(dāng)然，一切的設(shè)計(jì)都要以用戶(hù)的需求為導(dǎo)向。