論網(wǎng)頁設(shè)計中的技術(shù)應(yīng)用

李玉婷

摘 要：網(wǎng)絡(luò)在人們的生活中扮演著越來越重要的角色，網(wǎng)頁瀏覽成為了人們每天生活中的一部分，網(wǎng)頁設(shè)計的好壞直接影響著網(wǎng)頁的瀏覽量。就網(wǎng)頁設(shè)計中需要注意的技術(shù)進(jìn)行了簡要的分析，首先就網(wǎng)頁設(shè)計的基本流程進(jìn)行了分析，然后分別論述了Photoshop技術(shù)、計算機(jī)圖像處理技術(shù)以及CSS+DIV技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用，具有一定的實際意義。

關(guān)鍵詞：網(wǎng)頁設(shè)計；圖像處理技術(shù)；CSS+DIV技術(shù)

中圖分類號：F49

文獻(xiàn)標(biāo)識碼：A

文章編號：1672-3198（2014）09-0168-01

1 引言

網(wǎng)頁瀏覽已經(jīng)成為了人們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?，人們在評價網(wǎng)頁好壞時，往往是通過第一印象來判定的，可見網(wǎng)頁設(shè)計質(zhì)量的重要性。以下就網(wǎng)頁設(shè)計的基本流程進(jìn)行分析：（1）內(nèi)容分析：設(shè)計者分析該網(wǎng)頁需要展現(xiàn)的內(nèi)容，并梳理這些內(nèi)容的內(nèi)在邏輯性，以便分析內(nèi)容的層次、重要程度等；（2）結(jié)構(gòu)設(shè)計：在確定好內(nèi)容只會，則需要搭建出合理的HTML結(jié)構(gòu)，保證內(nèi)容的可讀性；（3）原型設(shè)計：首先初步設(shè)計出一定的構(gòu)，繪制出原型線框圖，便于對內(nèi)容進(jìn)行合理的布局；（4）方案設(shè)計：在初步的線框圖基礎(chǔ)上，利用相關(guān)的設(shè)計軟件進(jìn)行更深入的設(shè)計，主要是設(shè)計頁面的視覺效果；（5）布局和視覺設(shè)計：利用相關(guān)軟件對頁面進(jìn)行最后的布局和視覺設(shè)計，比如HTML和CSS；（6）交互設(shè)計：好的網(wǎng)頁必須要了一定的交互效果，比如最為常見的：鼠標(biāo)指針經(jīng)過時的一些特效等。

2 Photoshop技術(shù)的相關(guān)應(yīng)用

2.1 頁面頂部圖片的制作

就網(wǎng)頁中的圖片而言，其頂部圖片包含的內(nèi)容主要有網(wǎng)站的圖標(biāo)、網(wǎng)站名稱、主題等，可見對頂部圖片的設(shè)計顯得尤為重要。以下就如何利用Photoshop技術(shù)來制作頂部圖片進(jìn)行簡要的分析：

（1）首先復(fù)制網(wǎng)站的圖標(biāo)文件到頂部圖片文件上，并對其進(jìn)行一定的調(diào)整，即調(diào)整到背景層的上方；

（2）選擇“添加圖層蒙版”功能，即添加該圖層的圖層蒙版；

（3）對添加的圖層進(jìn)行一定的處理，可以通過選擇“畫筆”或者“漸變工具”來進(jìn)行圖片間的“無縫”操作；

（4）最后對圖片文件進(jìn)行文字添加操作，并將其保存為JPG格式，需要注意的是為了保留備份，則需要將圖片文件另存為PSD格式。

2.2 網(wǎng)頁底紋處理

處理網(wǎng)頁底紋的一般方法有兩種，分別是：將固定的背景作為網(wǎng)頁的底色和將圖像作為背景的底紋。如果利用Photoshop技術(shù)進(jìn)行處理，則處理的效果會很好，具體的處理流程如下所示：

（1）選擇將會用作網(wǎng)頁底紋的圖片文件，并將其作為全圖；

（2）對圖像進(jìn)行移動，具體操作是利用offset濾鏡工具將圖像向左上移動；

（3）不改變原圖片的環(huán)繞方式，使其與新圖之間形成兩條明顯的水平和垂直分隔線，便于后期的處理；

（4）進(jìn)行“圖章”操作，即利用圖像對分割線進(jìn)行覆蓋，需要注意的是不要破壞新圖片的邊界。

2.3 WEB頁面的制作

對于WEB頁面的初稿，往往可以利用Photoshop技術(shù)來進(jìn)行操作，在制作的過程中，有以下一些值得借鑒的技巧：

（1）首先設(shè)計出頁面的大概圖樣，并進(jìn)行基于圖層的一些切割；

（2）有了網(wǎng)頁的大概輪廓，便可以進(jìn)行圖像的分割操作，一般利用“切片工具”和“切片選擇工具”這兩種工具進(jìn)行，分割圖像的主要原因在于下載小幅圖的速度會更快捷；

（3）為了讓瀏覽者閱讀到更多的內(nèi)容，可以讓圖像活動起來，即制作出動畫的效果，具體的操作是在ImageReady環(huán)境下進(jìn)行的；

（4）最后對一些圖片定義交互區(qū)域，并對細(xì)節(jié)進(jìn)行優(yōu)化。

3 圖像處理技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用

3.1 網(wǎng)頁中的構(gòu)圖方式

為了讓網(wǎng)頁中的內(nèi)容得到充分的展現(xiàn)，則需要對網(wǎng)頁自身的構(gòu)圖進(jìn)行設(shè)計，就其構(gòu)圖方式而言，有常見的形式有如下三種方式：

（1）水平式構(gòu)圖：常用于政府、企業(yè)或者教育類網(wǎng)站的主頁設(shè)計當(dāng)中；

（2）垂直式構(gòu)圖：該構(gòu)圖方式滿足了人們的一般視覺習(xí)慣，即從上到下，并且能夠使頁面清晰有序；

（3）中心式構(gòu)圖：其特點在于能夠更好的將重點內(nèi)容凸顯，且對閱讀者的視覺沖擊力強(qiáng)。

3.2 圖像處理技術(shù)的具體應(yīng)用

對于設(shè)計者而言，可以利用圖像處理技術(shù)來處理網(wǎng)頁中的圖片的格式、圖樣、大小以及顏色等。以下就其中的圖片格式處理，進(jìn)行簡要的分析：

圖像的格式一般都是jpeg或者是gif，其中的gif格式是能夠?qū)崿F(xiàn)動態(tài)效果?？梢娚鲜鰞煞N圖片所需要的參數(shù)和規(guī)格是不同的，所以在對圖片進(jìn)行處理時，需要對兩者進(jìn)行一定的區(qū)分。

對于圖片大小于清晰度的處理，利用計算機(jī)圖像處理技術(shù)便能很好的控制圖片的大小，并保證其清晰度和加載的速度等。

4 CSS+DIV技術(shù)的應(yīng)用

將CSS語言技術(shù)應(yīng)用到網(wǎng)頁制作中，其主要的用途在于不僅能夠很好的控制網(wǎng)頁的樣式，并且還能分離樣式信息與網(wǎng)頁內(nèi)容。該語言的主要特點有以下幾點：

（1）方便網(wǎng)站的后期修改和維護(hù)；

（2）具有樣式豐富的美工樣式標(biāo)記等；

（3）其網(wǎng)頁頁面的結(jié)構(gòu)清晰；

（4）能夠輕松地應(yīng)對各種頁面效果。

DIV作為網(wǎng)頁布局方法中的一種，具有十分廣泛的應(yīng)用，其主要的作用在于將整個網(wǎng)頁頁面分成若干個小區(qū)域，且能夠在每個DIV頁面上特定內(nèi)容，極大的方便了網(wǎng)站后期的修改和維護(hù)。

5 結(jié)語

就現(xiàn)階段的網(wǎng)絡(luò)使用者而言，其更加傾向于對圖像的瀏覽，隨著時間的推移，傳統(tǒng)的文字描述會漸漸淡出網(wǎng)頁設(shè)計的主流。所以在設(shè)計網(wǎng)頁時，需要注重如何才能讓網(wǎng)友享受更流暢的瀏覽空間，并且讓網(wǎng)頁瀏覽更加順暢、高效。

參考文獻(xiàn)

[1]唐乾林.網(wǎng)頁設(shè)計與制作案例教程[M].北京：機(jī)械工業(yè)出版社，2007.

[2]王士檢.淺談PHOTOSHIP在網(wǎng)頁制作中的應(yīng)用[J].2009，（05）.

[3]劉顯麗.淺談圖像處理技術(shù)在網(wǎng)頁制作中的應(yīng)用[J].遼寧師專學(xué)報：自然科學(xué)版，2007，（3）：35.