網(wǎng)頁設(shè)計與圖像處理分析

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

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

1網(wǎng)頁中插入圖像

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

2網(wǎng)頁設(shè)計中的2種特殊應(yīng)用

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

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

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

3.1網(wǎng)頁設(shè)計中使用圖像的意義

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

3.2網(wǎng)頁圖像處理的技巧

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

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

4結(jié)語

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

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