智立甫 王春寫

關鍵詞：網(wǎng)頁設計 圖像處理

圖像在網(wǎng)頁中，相比純文本對象，信息承載能力強，良好的頁面設計能給瀏覽者留下深刻的印象。所以網(wǎng)頁設計中的圖像處理技術得到了設計者的重視。

1 常見處理技術

網(wǎng)頁中的圖像，按照存儲格式不同可以分為矢量圖和位圖，按照使用用途的不同，大致可以分為地址欄圖像，網(wǎng)站Logo，網(wǎng)頁內(nèi)容圖像等。地址欄圖像類似一個圖標，顯示在地址欄網(wǎng)址前邊，一般經(jīng)過精心設計，能夠傳遞公司專業(yè)與精細的形象。內(nèi)容圖像是指嵌在網(wǎng)頁中或者作為網(wǎng)頁背景的圖像。伴隨網(wǎng)絡技術和軟件技術的進步，用于圖像處理設計的軟件有了很大的發(fā)展。網(wǎng)頁三劍客中的Dreamweaver在進行網(wǎng)頁設計的同時，可以對一些圖片進行簡單的變化處理，fireworks能滿足對網(wǎng)頁圖片處理的大部分功能要求。對于一些有特殊要求的圖像，可以使用Adobe公司的Photoshop軟件進行處理；在進行Logo等設計時，一般使用CorelDraw或Illustrator等軟件來完成。

在進行圖像的設計、選擇和處理中，掌握專業(yè)軟件的基本使用技巧是必需的，圖像在網(wǎng)頁設計中的功能主要可以分為視覺吸引、信息引導兩方面。[1]要達到這樣的目的，需要對圖像進行合理的處理。使用動畫圖片，以及適當?shù)纳蕦Ρ龋纬砂媸降淖兓秊g覽者的注意，引導其對網(wǎng)站內(nèi)容的閱讀。

根據(jù)公司對網(wǎng)站的功能定位，其所承載的任務與指向有所不同，對瀏覽者所作設定亦有差異。比如騰訊公司的騰訊網(wǎng)（qq.com）和騰訊（tecent.com），一個作為門戶內(nèi)容網(wǎng)站，一個作為公司形象網(wǎng)站是兩個獨立的網(wǎng)站，設計風格，內(nèi)容和要求差異很大。

2 新技術

網(wǎng)絡作為第四媒體，其顯示終端可能是計算機，平板，電視或智能手機，為了頁面兼容等原因，前端設計出現(xiàn)了很多新技術，如div+css技術，Javascript技術等，為了方便管理，一般采用對象的結構、表現(xiàn)和行為分開。結構是對象的內(nèi)容，表現(xiàn)是其外觀，而行為是與瀏覽者的交互，或者說是瀏覽者進行鼠標點擊或輸入內(nèi)容等操作時，頁面的反應。在進行網(wǎng)頁設計過程中，圖像對象也是如此，利用代碼可以對圖像進行一些效果的處理，起到資源占用少，頁面維護容易等目的，還可以達到一些用基本圖像處理技術不易實現(xiàn)的效果。用div+css結合Javascript技術可以實現(xiàn)在網(wǎng)頁前端一些設計效果和邏輯處理功能，比如圖像輪播和驗證碼校驗功能[2]。

在一個存在后臺管理的網(wǎng)站中，網(wǎng)頁的很多內(nèi)容來自于后臺數(shù)據(jù)庫，一些圖片也不例外，內(nèi)容需要和后臺交互，根據(jù)數(shù)據(jù)庫的內(nèi)容和頁面的特定邏輯，決定圖像的外觀。這是基本圖像處理技術無法實現(xiàn)的，需要設計者了解動態(tài)頁面設計技術，常見的技術有asp.net，php和jsp技術等。這里以php技術為例：

用php函數(shù)創(chuàng)建圖片：

switch（$SIZE[2]）{

case 1：

$this->PICTURE_CREATE=imagecreatefromgif（$PICTURE_URL）；

$this->PICTURE_TYPE="imagejpeg"；

$this->PICTURE_EXT="jpg"；

break；

case 2：

$this->PICTURE_CREATE=imagecreatefromjpeg（$PICTURE_URL）；

$this->PICTURE_TYPE="imagegif"；

$this->PICTURE_EXT="gif"；

break；

case 3：

$this->PICTURE_CREATE=imagecreatefrompng（$PICTURE_URL）；

$this->PICTURE_TYPE="imagepng"；

$this->PICTURE_EXT="png"；

break；

}

在圖片上放文字或圖片水印文字：

function _mark_text（）{

$this->TRUE_COLOR=imagecreatetruecolor（$this->PICTURE_WIDTH，$this->PICTURE_HEIGHT）；

$this->WORD=mb_convert_encoding（$this->FONT_WORD，'utf-8'，'gb2312'）；

除此之外，還有連接數(shù)據(jù)庫，縮放、剪切、相框、銳化、旋轉、翻轉、透明度、反色等對網(wǎng)頁圖片的處理。不再一一舉例。

3 結論

傳統(tǒng)網(wǎng)頁設計技術一般分為前臺和后臺技術，前臺主要負責頁面的版式和效果設計，在設計過程中，需要對圖像處理有較好的理解，隨著技術的進步和觀念的變化，一般認為，網(wǎng)站的功能是第一位的，在此基礎上，需要有良好的顯示效果。

技術是手段，是媒介，不能一味追求技術的先進與絢麗，設計要同公司網(wǎng)站的定位緊密相關，綜合運用多種技術實現(xiàn)。網(wǎng)站的視覺吸引、信息引導兩方面的功能并沒有變，但是如何達到這一目的，是設計者關注并努力的方向。在功能完成的基礎上，使瀏覽者獲得良好的體驗，簡潔明快的設計往往會給用戶留下較深的印象。頁面圖像設計者要對相關技術有較好的理解，頁面前臺效果不是孤立的，任務進行過程中，美工需要和后臺設計人員進行溝通，反復修改，共同完成設計。

參考文獻：

[1]韋燕.網(wǎng)頁設計中計算機圖像處理技術的應用[J].現(xiàn)代商貿(mào)工業(yè)，2013（22）.

[2]胡雯.JavaScript在網(wǎng)頁圖像動態(tài)效果中的新應用[J].科技信息，2009（35）.

[3]劉利華.網(wǎng)頁設計中視覺元素的運用研究[D].湖南師范大學， 2009.