網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談

摘要：在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來(lái)源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來(lái)便捷的網(wǎng)頁(yè)，所以網(wǎng)頁(yè)設(shè)計(jì)尤為重要。本文從網(wǎng)頁(yè)設(shè)計(jì)的角度出發(fā)，介紹一些設(shè)計(jì)中要素和技巧，例如框架、CSS樣式的使用等等。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 要素 框架 CSS

互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。網(wǎng)頁(yè)設(shè)計(jì)伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。網(wǎng)頁(yè)講究的是排版布局，其功能主要就是提供一種形式給每個(gè)上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。

一、 網(wǎng)頁(yè)設(shè)計(jì)的要素

在一個(gè)網(wǎng)站中，最重要的頁(yè)面當(dāng)屬主頁(yè)，所以在此以主頁(yè)為例，說明在網(wǎng)頁(yè)制作中版面設(shè)計(jì)的問題。從版面設(shè)計(jì)來(lái)講,一個(gè)有特色的主頁(yè),必須包含有四個(gè)要素：文字，圖片，排列方式和主色調(diào)，這四者相輔相成，缺一不可。

1.圖片要素

要設(shè)計(jì)出漂亮的主頁(yè)，首先要成為計(jì)算機(jī)圖形高手，僅這一點(diǎn)就可以讓初學(xué)者花上一年半載的時(shí)間。圖片的要求與頁(yè)面的內(nèi)容有關(guān)，一些較隨意的主頁(yè)像股票、醫(yī)藥站點(diǎn)等，來(lái)訪者并不在乎你能否做出精彩的圖片，有些時(shí)候他們反而覺得放置圖象后影響了訪問速度，他們關(guān)心的只是頁(yè)面內(nèi)容；相反像一些需要靠圖象來(lái)吸引訪客的主頁(yè)，如游戲介紹、影視介紹、風(fēng)光名勝等站點(diǎn)，圖象是一個(gè)極為重要的要素，在這里缺少了恰當(dāng)?shù)膱D象，整個(gè)頁(yè)面就會(huì)黯然失色、就是一個(gè)不完整的主頁(yè)。這需要去學(xué)習(xí)像photoshop這樣的圖形圖像處理軟件，還要有一定的美術(shù)基礎(chǔ)，如審美觀、創(chuàng)意技巧等，

2.排列方法要素

主頁(yè)的第二個(gè)要素是排列方法，即網(wǎng)頁(yè)布局。網(wǎng)頁(yè)作為一種版面，既有文字，又有圖片；文字有大有小，還有標(biāo)題和正文之分；圖片頁(yè)有大小而且有橫豎之別。圖片和文字都需要同時(shí)展示給觀眾，不能簡(jiǎn)單地將其羅列在一個(gè)頁(yè)面上，否則會(huì)搞得雜亂無(wú)章。關(guān)于具體的網(wǎng)頁(yè)布局，常見的有“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等，關(guān)于它們，在網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)書籍中或者在網(wǎng)絡(luò)上都可以看到詳細(xì)的敘述。比如如果內(nèi)容非常多，就要考慮用“國(guó)字型”或拐角型；而如果內(nèi)容不算太多而一些說明性的東西比較多，則可以考慮標(biāo)題正文型；而如果是一個(gè)企業(yè)網(wǎng)站想展示一下企業(yè)形象或個(gè)人主頁(yè)想展示個(gè)人風(fēng)采，封面性是首選；Flash型更靈活一些，好的Flash大大豐富了網(wǎng)頁(yè)，但是它不能表達(dá)過多的文字信息。還沒有提到的就是變化型了，只有不斷的變化才會(huì)提高，才會(huì)不斷豐富我們的網(wǎng)頁(yè)。

3.色彩要素

色彩在網(wǎng)頁(yè)所占比重很大。有了合理清新的色調(diào)，會(huì)彌補(bǔ)主頁(yè)上的其它不足。頁(yè)面的色彩搭配是與網(wǎng)站的主題分不開的，一個(gè)網(wǎng)站必須有一種或兩種主題色。不至于讓瀏覽者迷失方向，也不至于單調(diào)乏味。一般來(lái)說，頁(yè)面的主體文字應(yīng)盡量使用黑色等較深的顏色，與背景對(duì)比明顯，按鈕、邊框等使用彩色。例如教育類網(wǎng)站使用藍(lán)色為主題色，再用紅色和黑色作為配色，就能表達(dá)出嚴(yán)肅、穩(wěn)重的效果。

二、 網(wǎng)頁(yè)設(shè)計(jì)技巧

一張完美的主頁(yè)設(shè)計(jì)需要積累豐富的知識(shí)以及掌握大量的技巧。在這里筆者從框架和CSS樣式的運(yùn)用兩方面來(lái)介紹網(wǎng)頁(yè)設(shè)計(jì)的技巧。

1.框架的使用

FRAME（框架）是Web上經(jīng)常會(huì)看到的頁(yè)面結(jié)構(gòu)?？蚣艿淖畛Ｒ娪猛揪褪菍?dǎo)航。一組框架通常包括一個(gè)含有導(dǎo)航條的框架和另一個(gè)要顯示主要內(nèi)容頁(yè)面的框架。

使用框架具有以下優(yōu)點(diǎn)：訪問者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形；每個(gè)框架都具有自己的滾動(dòng)條(如果內(nèi)容太大，在窗口中顯示不下)，因此訪問者可以獨(dú)立滾動(dòng)這些框架。例如，當(dāng)框架中的內(nèi)容頁(yè)面較長(zhǎng)時(shí)，如果導(dǎo)航條位于不同的框架中，那么向下滾動(dòng)到頁(yè)面底部的訪問者就不需要再滾動(dòng)回頂部來(lái)使用導(dǎo)航條。

使用框架具有以下缺點(diǎn)：可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對(duì)齊；對(duì)導(dǎo)航進(jìn)行測(cè)試可能很耗時(shí)間。

許多專業(yè) Web 設(shè)計(jì)人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾厥褂每蚣艿恼军c(diǎn)(例如，每當(dāng)訪問者單擊導(dǎo)航按鈕時(shí)就重新加載導(dǎo)航框架內(nèi)容的框架集)。如果框架使用得法(例如，在允許其他框架的內(nèi)容發(fā)生更改的同時(shí)，使一個(gè)框架中的導(dǎo)航控件保持靜態(tài))，則這些框架對(duì)于某些站點(diǎn)可能非常有用。

2. CSS樣式的使用

CSS(層疊樣式表)是一種制作網(wǎng)頁(yè)的新技術(shù),它的全稱是級(jí)聯(lián)樣式表,即Cascading StyleSheets的縮寫，又稱之為風(fēng)格樣式表單。CSS是在網(wǎng)頁(yè)制作過程中普遍用到的技術(shù)。采用了CSS技術(shù)控制的網(wǎng)頁(yè)，設(shè)計(jì)者會(huì)更輕松、有效地對(duì)頁(yè)面的整體布局、顏色、字體、鏈接、背景以及同一頁(yè)面的不同部分、不同頁(yè)面的外觀和格式等效果實(shí)現(xiàn)更加精確地控制。

三、網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談

一般的來(lái)說，絕大多數(shù)普通受眾圖形，插件，applets和其它有關(guān)的高級(jí)Web瀏覽器特性。對(duì)我們來(lái)說，頁(yè)面的實(shí)用可能比漂亮更重要，對(duì)于用戶來(lái)說，沒有什么比頁(yè)面能夠快速下載更重要了，簡(jiǎn)而言之，精簡(jiǎn)你的站點(diǎn)，這是一條最佳的捷徑。

另外還要注意，不要依賴圖形。就站點(diǎn)設(shè)計(jì)而言，的確能夠通過成功的圖形設(shè)計(jì)招徠或者丟失訪問者。并非所有的訪問者可以完全看到圖片，某些人為了加快存取網(wǎng)絡(luò)的速度已經(jīng)關(guān)閉了瀏覽器端的圖形。簡(jiǎn)而言之，圖形并不能正確的在客戶端加載。然而，圖形經(jīng)常被用來(lái)作為導(dǎo)航按鈕。

第三要注意，僅僅在需要的時(shí)候使用幀(FRAME)。 使用幀可以把一個(gè)瀏覽器分成幾個(gè)不同的窗口，對(duì)于站點(diǎn)的結(jié)構(gòu)的把握是一個(gè)不錯(cuò)的方法。但是，你還是必須知道，還是有人在使用不支持幀的瀏覽器。在你開始打算設(shè)計(jì)一個(gè)幀的時(shí)候，你該仔細(xì)的考慮考慮你是否的確真的需要。經(jīng)常，你這樣的需求可以通過表格來(lái)組織站點(diǎn)的結(jié)構(gòu)。

網(wǎng)頁(yè)設(shè)計(jì)涉及到對(duì)多種軟件、多種知識(shí)的學(xué)習(xí)和應(yīng)用，以及個(gè)人的審美觀等等。所以要想制作出漂亮的網(wǎng)頁(yè)，需要一個(gè)逐步學(xué)習(xí)和經(jīng)驗(yàn)積累的過程。網(wǎng)頁(yè)設(shè)計(jì)還有更多的技巧，有待于我們?nèi)ネ诰蚝脱芯??！?/p>

參考文獻(xiàn)：

[1] 袁自海. CSS在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].電腦知識(shí)與技術(shù), 2008

作者簡(jiǎn)介：陳應(yīng)勛（1986-），男，貴州惠水，西北民族大學(xué)計(jì)算機(jī)科學(xué)與信息工程學(xué)院（二級(jí)單位），學(xué)生，計(jì)算機(jī)科學(xué)與技術(shù)。