網頁設計與圖像處理分析

前言：本站為你精心整理了網頁設計與圖像處理分析范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

JPEG格式缺點是不支持透明效果的處理以及動畫效果的應用。JPEG通常不使用在數據傳輸的環(huán)境，網絡中傳輸時用的少，常用于對圖像進行數字化處理方面，或者用于圖像掃描應用。（3）PNG格式：其英文名稱為PortableNetworkGraphics，譯為可移植網絡圖形，是網絡技術發(fā)展相伴出現的新的圖像文件格式。PNG優(yōu)于前2種格式，有前2種格式的優(yōu)點，既能用于高清晰度的圖像如真彩24位，真彩色可包含1000多萬種色彩。也能出來普通256色的圖像，另外圖像文件也使用了壓縮算法，在網絡通信方面也適用，現在互聯網使用非常廣泛。隨著應用的廣泛PNG格式也變?yōu)楫斍暗膱D像流行文件格式。

1網頁中插入圖像

在設計網頁時加入適當的圖像，是網頁設計者經常地操作步驟。Dreamwaver是網站設計三劍客之一，是制作網站較為常用的工具軟件，在Dreamwa－ver文檔窗口中添加圖像的方法是：（1）考慮好在什么位置插入圖像；（2）在菜單欄通過點擊“插入”菜單欄中的“圖像”按鈕加入圖像。（3）在打開的對話框頁面上點擊“選擇文件”對話框，在設置對話框相應位置設置參數項。（4）設置完參數后再回到“插入圖像”對話框界面，單擊“確定”按鈕。圖像就被導入，圖像的特性通過屬性檢查器設置，圖像屬性很多，用戶需要關注的是源文件、替換和鏈接3項。通過HTML的語言代碼可以實現上述步驟同樣的插入圖像功能：熟練的設計者對代碼特熟悉，使用代碼插入更方便快捷。IMG標簽是圖像標簽，寫法是：<imgsrc=“圖片位置”>圖片的位置一般我們采用相對路徑，這個標簽比較特殊，它只有開始標簽，不像其它標簽都是成對出現的。

2網頁設計中的2種特殊應用

（1）由鼠標移動觸發(fā)圖像變換處理：移動鼠標時，把鼠標焦點放到網頁上的一個圖片上，此刻顯示了另一幅圖片，當鼠標焦點離開這幅圖片時，圖片恢復為最先顯示的圖片，這2幅圖片的切換通過加入到鼠標移動功能函數時就可以實現，前提是準備好要切換的2幅圖片，而且圖片大小一致，通常設計者使用Photoshop技術處理圖像。

（2）在互聯網上制作相冊：博客通常使用好多的相冊，這就是多幅圖片在按照一定的設定條件進行有序切換，瀏覽者使用鼠標點擊其中一幅圖片時，通過點擊小圖，能馬上將對應的大圖調出，這里的實現原理就是事先將要顯示的圖片存放在指定文件夾中，在程序代碼中設定定時或按其他方式來觸發(fā)圖片的切換。通常設計者使用Fireworks技術處理圖像。

3圖像處理在網頁設計中的應用解析

3.1網頁設計中使用圖像的意義

（1）做設計網站的標志（LOGO）。任何網站的誕生都有其目的性，網頁的LOGO是網站的點睛之筆，非常關鍵。我們一說到LOGO,馬上就能想到一些在人們心中有認可度的品牌形象，這就是品牌的意義，LOGO有同樣的功效。像SINA的LOGO,不用看到字就可以認出是新浪網。LOGO一般是經過設計師精心設計制作，藝術性和功能性并存的網站品牌形象，好的LOGO可以讓人們喜聞樂見，如今優(yōu)秀的LO－GO憑借其獨特的文化理念、獨特創(chuàng)新的藝術特色給瀏覽者以美的沖擊，帶給人們高度的享受和信賴。（2）網頁背景圖。網頁基本形式是背景烘托主題，背景都是有象征和內涵的圖像，背景圖像與網頁文字互相映襯，烘托主題并從另一層面突出主題，如今沒有圖像的網頁是不成功的網頁設計，缺乏感染力。（3）關鍵圖。有些網頁用醒目的圖像來宣傳該網站的主題，這些圖像的目的是讓瀏覽者看到圖片就知道該網站的宣傳內容，這種關鍵圖像是整個頁面最突出的內容，不用文字信息而是通過大圖來把文字要闡述的內容映射到圖像上，這種傳達信息的方式更原始，更有感官沖擊力，而且直觀。

3.2網頁圖像處理的技巧

3.2.1圖像的尺寸圖像的尺寸與網頁設計目的相關，尺寸大的圖像涵蓋的內容豐富，能夠更加細的傳達圖像信息，讓瀏覽者注意圖像中醒目的內容元素。尺寸小的圖像簡單，有個性，對于主題表達起到襯托的作用。網頁設計中大小圖像結合文字共同把設計主題展示出來，設計者根據設計需求分析網頁設計的主標題和副標題，讓主標題更突出，更惹眼，讓附屬圖像與主圖內容相得益彰，共同達到設計效果。

3.2.2圖像的外形圖像設計向多元化方向發(fā)展，不同類型的圖像都有各自的特色，我們看到圓形的圖像時就覺得不呆板、親切可人；而不規(guī)則的圖像動態(tài)十足，有活力；方型圖像則給人中規(guī)中矩的感覺。網頁設計目的不同，對各種類型的網站需要多種形狀的圖像烘托。（1）方形圖像。方型是最常見的，也是我們生活中使用最多的形狀。在一些嚴肅的網站比如政務網等官方，適宜利用方型的圖像或主圖像來傳遞給瀏覽者正規(guī)、嚴肅的信息內容。方型的穩(wěn)重帶給瀏覽者可信度高、理性的思考，能把整體網頁的風格襯托出來。（2）菱形圖像。菱形是方型的靈動，沒有方型的凝重、嚴肅，使網頁的美感增加。（3）圓形圖像。圓形圖像有柔和曲線，讓瀏覽者產生充實的感覺，圓滿的外型把自由和隨意傳遞給瀏覽者。（4）三角形圖像。三角形圖像在網頁中能夠把動感有個性的內涵闡釋給瀏覽者，網頁變得生命力十足。（5）個性化圖像。此類圖像不是自然界的常規(guī)圖型，經過創(chuàng)造者技術加工和個性化處理，把圖像加工成自由靈活的創(chuàng)意圖像，圖像沒有規(guī)則的形狀，沒有統一的配色，自然而又隨性。圖像與文字自然規(guī)整的結合在網頁頁面上，將主題效果突出的顯示出來。

4結語

互聯網如今是一個龐大的體系結構，網頁是這個體系的基本單元。怎么樣將互聯網的頁面設計得越來越漂亮，網頁設計藝術性越來越高，設計時需要考慮的圖像因素很多，不僅包括圖像色調，圖像格式，圖像效果，還要掌握對圖像處理工具的運用技巧。計算機圖像處理技術是網頁設計技術的重要部分，最終網頁設計的質量直接與其相關，設計者在設計之初就要考慮頁面的整體圖片效果，把將要展示的圖像作為網站設計的開始，這樣網站設計才能很好的起步，最終設計出讓用戶滿意的作品。

作者：仇樂單位：淄博職業(yè)學院