李玉婷

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

關鍵詞：網(wǎng)頁設計；圖像處理技術；CSS+DIV技術

中圖分類號：F49

文獻標識碼：A

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

1 引言

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

2 Photoshop技術的相關應用

2.1 頁面頂部圖片的制作

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

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

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

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

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

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

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

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

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

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

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

2.3 WEB頁面的制作

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

（1）首先設計出頁面的大概圖樣，并進行基于圖層的一些切割；

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

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

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

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

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

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

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

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

（3）中心式構圖：其特點在于能夠更好的將重點內容凸顯，且對閱讀者的視覺沖擊力強。

3.2 圖像處理技術的具體應用

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

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

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

4 CSS+DIV技術的應用

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

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

（2）具有樣式豐富的美工樣式標記等；

（3）其網(wǎng)頁頁面的結構清晰；

（4）能夠輕松地應對各種頁面效果。

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

5 結語

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

參考文獻

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

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

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