網(wǎng)頁設(shè)計(jì)圖像處理

1、 在網(wǎng)頁中，若能適時(shí)在網(wǎng)頁中，若能適時(shí)地插入一些、影像或是將地插入一些、影像或是將某些文字?jǐn)⑹龈臑閳D片來某些文字?jǐn)⑹龈臑閳D片來表示，不但使得該網(wǎng)頁一表示，不但使得該網(wǎng)頁一目了然，而且生動活潑。目了然，而且生動活潑。學(xué)習(xí)目標(biāo)理解矢量圖和位圖的區(qū)別，了解常用理解矢量圖和位圖的區(qū)別，了解常用的的Web圖像格式。圖像格式。理解理解Web圖像的處理流程，初步掌圖像的處理流程，初步掌握基本的握基本的Web圖像處理操作。圖像處理操作。掌握在網(wǎng)頁中插入圖像的方法，理解掌握在網(wǎng)頁中插入圖像的方法，理解圖像在網(wǎng)頁中的作用和圖像在網(wǎng)頁中的作用和Web圖像的基圖像的基本使用原則。本使用原則。4.1 圖的基本概念圖的基

2、本概念位圖位圖是指用位圖是指用像素一點(diǎn)一點(diǎn)像素一點(diǎn)一點(diǎn)地描述圖地描述圖像的一種圖像類型。像的一種圖像類型。常用的位圖編輯軟件有常用的位圖編輯軟件有 Fireworks、Photoshop、ImageReady、PhotoImpact 等等矢量圖矢量圖形是指用線條和填充色等矢量圖形是指用線條和填充色等數(shù)學(xué)信數(shù)學(xué)信息息來描述圖像的一種圖像類型。來描述圖像的一種圖像類型。制作矢量格式圖像的軟件有制作矢量格式圖像的軟件有 Freehand、Illustrator、CorelDraw、AutoCAD 。常用Web圖像格式 GIF JPEG PNGGIFGIF（Graphics Interchange F

3、ormat，圖，圖形交換格式）格式的特點(diǎn)：形交換格式）格式的特點(diǎn)：無損壓縮無損壓縮最多最多256色色能夠使用透明色能夠使用透明色有所占存儲空間小、下載速度快、支持有所占存儲空間小、下載速度快、支持動畫等特點(diǎn)動畫等特點(diǎn)JPEGJPEG（Joint Photographic Expert Group，聯(lián)合圖形專家組）格式的特點(diǎn)：聯(lián)合圖形專家組）格式的特點(diǎn)：有損壓縮有損壓縮24位顏色位顏色可以控制壓縮比可以控制壓縮比圖像質(zhì)量好，對具有連續(xù)色調(diào)的圖像有圖像質(zhì)量好，對具有連續(xù)色調(diào)的圖像有最佳效果最佳效果PNGPNG（Portable Network Graphics，可，可移植的網(wǎng)絡(luò)圖形）格式的特點(diǎn)：移

4、植的網(wǎng)絡(luò)圖形）格式的特點(diǎn)：無損壓縮無損壓縮24位顏色位顏色支持透明度支持透明度BMP圖像文件因?yàn)榇鎯臻g大，傳輸不夠圖像文件因?yàn)榇鎯臻g大，傳輸不夠快，所以并不常用快，所以并不常用,常用的是常用的是jpg文件和文件和gif文文件。件。對于徽標(biāo)、公司廠標(biāo)等在每一主頁顯示，對于徽標(biāo)、公司廠標(biāo)等在每一主頁顯示，要求能快速下載并能在低配置的系統(tǒng)中查要求能快速下載并能在低配置的系統(tǒng)中查詢的圖像詢的圖像,應(yīng)采用應(yīng)采用GIF格式格式而對于掃描圖片、藝術(shù)作品這種而對于掃描圖片、藝術(shù)作品這種對顯示質(zhì)對顯示質(zhì)量要求很高的圖像則應(yīng)采用量要求很高的圖像則應(yīng)采用JPEG格式格式。圖像使用說明圖像使用說明4.2 HTML

5、中圖片的設(shè)置中圖片的設(shè)置 在網(wǎng)頁中可以用圖像平鋪的方法制作背在網(wǎng)頁中可以用圖像平鋪的方法制作背景。景。定義背景圖像的語法格式如下：定義背景圖像的語法格式如下： 其中，其中，“image-URL”指圖像文件的位置。指圖像文件的位置。 1）背景圖案的設(shè)定）背景圖案的設(shè)定注意平鋪的效果注意平鋪的效果：在建立這種形式的背景之：在建立這種形式的背景之前，首先要確定所選定的圖案能否看上去前，首先要確定所選定的圖案能否看上去無無痕跡地連接在一起痕跡地連接在一起，或者能否產(chǎn)生一種較好，或者能否產(chǎn)生一種較好的背景效果。的背景效果。盡量不用盡量不用：用平鋪圖像作背景，將極明顯：用平鋪圖像作背景，將極明顯地降低網(wǎng)頁

6、的顯示速度。唯一的解決辦法就地降低網(wǎng)頁的顯示速度。唯一的解決辦法就是盡量使用小的圖像文件，如果可能的話則是盡量使用小的圖像文件，如果可能的話則不用。不用。說明說明是用于導(dǎo)入圖像文件的標(biāo)簽，使用此是用于導(dǎo)入圖像文件的標(biāo)簽，使用此標(biāo)簽可將圖像文件導(dǎo)入到標(biāo)簽可將圖像文件導(dǎo)入到HTML文件中顯示。文件中顯示。沒有結(jié)束標(biāo)簽，因?yàn)楫?dāng)瀏覽器只有讀沒有結(jié)束標(biāo)簽，因?yàn)楫?dāng)瀏覽器只有讀取到取到標(biāo)簽時(shí)，會直接顯示此標(biāo)簽所代標(biāo)簽時(shí)，會直接顯示此標(biāo)簽所代表的圖像。表的圖像。 1格式：格式： 2）網(wǎng)頁中插入圖形）網(wǎng)頁中插入圖形 src屬性是用來指出一個(gè)圖像的文件名，或是屬性是用來指出一個(gè)圖像的文件名，或是指出指出URL的路

7、徑名。的路徑名。如果圖像的顯示有問題，應(yīng)該檢查以下內(nèi)容：如果圖像的顯示有問題，應(yīng)該檢查以下內(nèi)容： 文件名是否書寫正確；文件名是否書寫正確； 圖像文件是否是圖像文件是否是BMP、GIF或或JPG格式；格式； 是否已經(jīng)打開了瀏覽器的圖像下載功能。是否已經(jīng)打開了瀏覽器的圖像下載功能。 若上述幾項(xiàng)全部正確，圖像就能夠顯示出來。若上述幾項(xiàng)全部正確，圖像就能夠顯示出來。 說明說明v圖像的取代文字圖像的取代文字v設(shè)定圖像的高度和寬度設(shè)定圖像的高度和寬度v設(shè)定圖像的邊框設(shè)定圖像的邊框v設(shè)定圖像的對齊方式設(shè)定圖像的對齊方式v設(shè)定圖像與文本之間的距離設(shè)定圖像與文本之間的距離3）img標(biāo)簽屬性的使用標(biāo)簽屬性的使用標(biāo)

8、簽中的標(biāo)簽中的alt屬性：屬性：當(dāng)瀏覽器不能顯示當(dāng)瀏覽器不能顯示圖像或找不到圖像時(shí)，它可以將圖像或找不到圖像時(shí)，它可以將alt引導(dǎo)的文引導(dǎo)的文本顯示在屏幕上，從而替代看不到的圖像。本顯示在屏幕上，從而替代看不到的圖像。 圖像的取代文字圖像的取代文字alt標(biāo)簽中還提供了兩個(gè)屬性：標(biāo)簽中還提供了兩個(gè)屬性：height和和width，用來設(shè)定圖像的高度和寬度，二者可，用來設(shè)定圖像的高度和寬度，二者可取像素值或百分比（相對窗口）。取像素值或百分比（相對窗口）。示例：示例：設(shè)定圖像的高度和寬度設(shè)定圖像的高度和寬度 標(biāo)簽的標(biāo)簽的border屬性可以給圖像屬性可以給圖像加一個(gè)邊框。若加一個(gè)邊框。若borde

9、r項(xiàng)默認(rèn)或取值為項(xiàng)默認(rèn)或取值為0時(shí)，圖像沒有邊框。時(shí)，圖像沒有邊框。設(shè)定圖像的邊框設(shè)定圖像的邊框border 在在標(biāo)簽中使用標(biāo)簽中使用align屬性，可控制圖屬性，可控制圖像相對于文字基準(zhǔn)線（文字中線）的水平像相對于文字基準(zhǔn)線（文字中線）的水平對齊方式，其語法如下：對齊方式，其語法如下： 各屬性的設(shè)置值意義如下表所示：各屬性的設(shè)置值意義如下表所示： 設(shè)定圖像的對齊方式設(shè)定圖像的對齊方式align圖像居右圖像居右right 圖像居左圖像居左left 下對齊下對齊 bottom 居中對齊居中對齊 middle 上對齊上對齊 top 對齊方式對齊方式 設(shè)設(shè) 置置 值值 align屬性的設(shè)置值屬性的設(shè)

10、置值標(biāo)簽中的標(biāo)簽中的vspacr和和hspace屬性能夠?qū)傩阅軌蛘{(diào)整圖像與其他文本之間的距離，兩者均調(diào)整圖像與其他文本之間的距離，兩者均取像素值。設(shè)定語法如下：取像素值。設(shè)定語法如下： n，m為數(shù)值，單位為像素。為數(shù)值，單位為像素。vspace 調(diào)整圖像與上下文本的距離調(diào)整圖像與上下文本的距離hspace 調(diào)整圖像與左右文本的距離調(diào)整圖像與左右文本的距離設(shè)定圖像與文本之間的距離設(shè)定圖像與文本之間的距離示例：示例：My Face!It is alwayssmiling.Hahaha.設(shè)定圖像與文本之間的距離設(shè)定圖像與文本之間的距離把文本排到圖像下面 如果文本還沒有填滿圖像周圍的空間時(shí)，就如果文本

11、還沒有填滿圖像周圍的空間時(shí)，就希望從圖像下面重新開始另一行文本，這時(shí)，希望從圖像下面重新開始另一行文本，這時(shí)，普通的換行標(biāo)簽普通的換行標(biāo)簽就不起作用了，它只能在就不起作用了，它只能在圖像旁邊另起一行，而不能把文本排到圖像下圖像旁邊另起一行，而不能把文本排到圖像下面去，這就需要在面去，這就需要在標(biāo)簽中使用標(biāo)簽中使用clear屬性屬性來滿足這一要求來滿足這一要求：My Face!It is always smiling. Hahaha. 文本在圖像下面另起行處一行文本在圖像下面另起行處一行4）圖像與超鏈接）圖像與超鏈接圖像既可以作為超鏈接的源，也可以作圖像既可以作為超鏈接的源，也可以作為超鏈接的目

12、標(biāo)。例如，為超鏈接的目標(biāo)。例如，Web相冊。相冊。圖像映射（熱點(diǎn)）圖像映射（熱點(diǎn)）：是指在同一幅圖中：是指在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的超定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的超鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。v圖像鏈接的建立：圖像鏈接的建立：將將標(biāo)簽放在標(biāo)簽放在和和的中間，這個(gè)圖像將成為一個(gè)可點(diǎn)擊的圖的中間，這個(gè)圖像將成為一個(gè)可點(diǎn)擊的圖像，產(chǎn)生一個(gè)鏈接。如：像，產(chǎn)生一個(gè)鏈接。如：v圖像鏈接提示：圖像鏈接提示：利用利用alt屬性，加入提示信息，屬性，加入提示信息，當(dāng)瀏覽者的鼠標(biāo)移到圖像時(shí)，顯示提示信息。當(dāng)瀏覽者的鼠標(biāo)移到圖像時(shí)，顯示提示信息。 超

13、鏈接與圖形超鏈接與圖形5）圖像映射）圖像映射什么是圖像映射什么是圖像映射在同一幅圖中定義若干區(qū)在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的域，不同區(qū)域?qū)?yīng)不同的超鏈接，單擊不同區(qū)域可超鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。跳轉(zhuǎn)到相應(yīng)頁面。右圖中的汽車圖像映射包右圖中的汽車圖像映射包括三個(gè)熱點(diǎn)，每個(gè)熱點(diǎn)均括三個(gè)熱點(diǎn)，每個(gè)熱點(diǎn)均鏈接到一個(gè)單獨(dú)的頁面，鏈接到一個(gè)單獨(dú)的頁面，該頁面提供有關(guān)此特定功該頁面提供有關(guān)此特定功能（如擋風(fēng)玻璃、前燈、能（如擋風(fēng)玻璃、前燈、或車輪和輪胎）的更多信或車輪和輪胎）的更多信息。息。圖像映射圖像映射的使用圖像映射的使用（1）定義映射圖定義映射圖（2）使用映射圖）使用映射圖定

14、義映射圖：定義映射圖：標(biāo)記符和標(biāo)記符和標(biāo)記符標(biāo)記符使用映射圖：使用映射圖：AREA標(biāo)記符Shape屬性（屬性（rect、circle、poly）Coords屬性屬性Href屬性屬性圖像映射示例：圖像映射示例圖像映射示例請單擊以下圖像中的不同區(qū)域，以便跳轉(zhuǎn)到不同請單擊以下圖像中的不同區(qū)域，以便跳轉(zhuǎn)到不同的文件的文件 在使用圖像的問題上，網(wǎng)頁的制作者可能會在使用圖像的問題上，網(wǎng)頁的制作者可能會與瀏覽者產(chǎn)生一些矛盾。比如，制作者往往希與瀏覽者產(chǎn)生一些矛盾。比如，制作者往往希望在自己的網(wǎng)頁上有一些漂亮的圖像，使網(wǎng)頁望在自己的網(wǎng)頁上有一些漂亮的圖像，使網(wǎng)頁充滿藝術(shù)的魅力；而瀏覽者常常因?yàn)榫W(wǎng)頁下載充滿藝術(shù)的魅力；而瀏覽者常常因?yàn)榫W(wǎng)頁下載時(shí)間太長而不耐煩，甚至不愿等著下載全部內(nèi)時(shí)間太長而不耐煩，甚至不愿等著下載全部內(nèi)容。因此，我們可以采用以下的方法來緩解這容。因此，我們可以采用以下的方法來緩解這個(gè)矛盾：個(gè)矛盾： 1在設(shè)計(jì)網(wǎng)頁時(shí)，應(yīng)該反復(fù)斟酌哪些圖像在設(shè)計(jì)網(wǎng)頁時(shí)，應(yīng)該反復(fù)斟酌哪些圖像必須要，哪些圖像可有可無，對于那些不是必必須要，哪些圖像可有可無，對于那些不是必需的圖像，要舍得忍痛割愛；需的圖像，要舍得忍痛割愛； 6）圖像使用原則）圖像使用原則 2把圖像盡量做得小一點(diǎn)，小圖像在網(wǎng)上把圖像盡量做得小一點(diǎn)，小圖像在網(wǎng)上的傳輸速度比較快