網(wǎng)頁設(shè)計圖像處理_第1頁
網(wǎng)頁設(shè)計圖像處理_第2頁
網(wǎng)頁設(shè)計圖像處理_第3頁
網(wǎng)頁設(shè)計圖像處理_第4頁
網(wǎng)頁設(shè)計圖像處理_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第4章

圖像的處理

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

圖的基本概念位圖位圖是指用像素一點一點地描述圖像的一種圖像類型。常用的位圖編輯軟件有Fireworks、Photoshop、ImageReady、PhotoImpact等矢量圖矢量圖形是指用線條和填充色等數(shù)學(xué)信息來描述圖像的一種圖像類型。制作矢量格式圖像的軟件有Freehand、Illustrator、CorelDraw、AutoCAD。常用Web圖像格式GIFJPEGPNGGIFGIF（GraphicsInterchangeFormat，圖形交換格式）格式的特點：無損壓縮最多256色能夠使用透明色有所占存儲空間小、下載速度快、支持動畫等特點JPEGJPEG（JointPhotographicExpertGroup，聯(lián)合圖形專家組）格式的特點：有損壓縮24位顏色可以控制壓縮比圖像質(zhì)量好，對具有連續(xù)色調(diào)的圖像有最佳效果PNGPNG（PortableNetworkGraphics，可移植的網(wǎng)絡(luò)圖形）格式的特點：無損壓縮24位顏色支持透明度BMP圖像文件因為存儲空間大，傳輸不夠快，所以并不常用,常用的是jpg文件和gif文件。對于徽標(biāo)、公司廠標(biāo)等在每一主頁顯示，要求能快速下載并能在低配置的系統(tǒng)中查詢的圖像,應(yīng)采用GIF格式而對于掃描圖片、藝術(shù)作品這種對顯示質(zhì)量要求很高的圖像則應(yīng)采用JPEG格式。圖像使用說明4.2

HTML中圖片的設(shè)置

在網(wǎng)頁中可以用圖像平鋪的方法制作背景。定義背景圖像的語法格式如下：

<bodybackground="image-URL">

其中，“image-URL”指圖像文件的位置。1）背景圖案的設(shè)定注意平鋪的效果：在建立這種形式的背景之前，首先要確定所選定的圖案能否看上去無痕跡地連接在一起，或者能否產(chǎn)生一種較好的背景效果。盡量不用：用平鋪圖像作背景，將極明顯地降低網(wǎng)頁的顯示速度。唯一的解決辦法就是盡量使用小的圖像文件，如果可能的話則不用。說明<img>是用于導(dǎo)入圖像文件的標(biāo)簽，使用此標(biāo)簽可將圖像文件導(dǎo)入到HTML文件中顯示。<img>沒有結(jié)束標(biāo)簽，因為當(dāng)瀏覽器只有讀取到<img>標(biāo)簽時，會直接顯示此標(biāo)簽所代表的圖像。

1．格式：

<imgsrc="image-URL">2）網(wǎng)頁中插入圖形src屬性是用來指出一個圖像的文件名，或是指出URL的路徑名。如果圖像的顯示有問題，應(yīng)該檢查以下內(nèi)容：①文件名是否書寫正確；②圖像文件是否是BMP、GIF或JPG格式；③是否已經(jīng)打開了瀏覽器的圖像下載功能。若上述幾項全部正確，圖像就能夠顯示出來。說明圖像的取代文字設(shè)定圖像的高度和寬度設(shè)定圖像的邊框設(shè)定圖像的對齊方式設(shè)定圖像與文本之間的距離3）img標(biāo)簽屬性的使用<img>標(biāo)簽中的alt屬性：當(dāng)瀏覽器不能顯示圖像或找不到圖像時，它可以將alt引導(dǎo)的文本顯示在屏幕上，從而替代看不到的圖像。<imgsrc="face.gif"alt="MYFACE:-)">

圖像的取代文字alt<img>標(biāo)簽中還提供了兩個屬性：height和width，用來設(shè)定圖像的高度和寬度，二者可取像素值或百分比（相對窗口）。示例：<imagesrc="fh.jpg"height=60width=80>設(shè)定圖像的高度和寬度<img>標(biāo)簽的border屬性可以給圖像加一個邊框。若border項默認(rèn)或取值為0時，圖像沒有邊框。<imagesrc="fh.jpg"border=5>設(shè)定圖像的邊框border

在<img>標(biāo)簽中使用align屬性，可控制圖像相對于文字基準(zhǔn)線（文字中線）的水平對齊方式，其語法如下：

<imgalign=top、middle、bottom、left或right>各屬性的設(shè)置值意義如下表所示：設(shè)定圖像的對齊方式align圖像居右right圖像居左left下對齊bottom居中對齊middle上對齊top對齊方式設(shè)置值align屬性的設(shè)置值<img>標(biāo)簽中的vspacr和hspace屬性能夠調(diào)整圖像與其他文本之間的距離，兩者均取像素值。設(shè)定語法如下：<imgvspace=nhspave=m>n，m為數(shù)值，單位為像素。vspace調(diào)整圖像與上下文本的距離hspace調(diào)整圖像與左右文本的距離設(shè)定圖像與文本之間的距離示例：<imgsrc=fh.jpgalign=leftvspace=10hspace=20>MyFace!<br>

Itisalways<br>

smiling.<br>

Hahaha....<br>設(shè)定圖像與文本之間的距離把文本排到圖像下面

如果文本還沒有填滿圖像周圍的空間時，就希望從圖像下面重新開始另一行文本，這時，普通的換行標(biāo)簽<br>就不起作用了，它只能在圖像旁邊另起一行，而不能把文本排到圖像下面去，這就需要在<br>標(biāo)簽中使用clear屬性來滿足這一要求：<imgsrc=face.gifalign=left>MyFace!<br>

Itisalways<brclear=all>smiling.<br>

Hahaha....<br>

文本在圖像下面另起行處一行4）圖像與超鏈接圖像既可以作為超鏈接的源，也可以作為超鏈接的目標(biāo)。例如，Web相冊。圖像映射（熱點）：是指在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的超鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。圖像鏈接的建立：將<img>標(biāo)簽放在<a>和</a>的中間，這個圖像將成為一個可點擊的圖像，產(chǎn)生一個鏈接。如：

<ahref=“aaa.html”><imgsrc=“bbb.jpg”></a>圖像鏈接提示：利用alt屬性，加入提示信息，當(dāng)瀏覽者的鼠標(biāo)移到圖像時，顯示提示信息。超鏈接與圖形5）圖像映射什么是圖像映射在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的超鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。右圖中的汽車圖像映射包括三個熱點，每個熱點均鏈接到一個單獨的頁面，該頁面提供有關(guān)此特定功能（如擋風(fēng)玻璃、前燈、或車輪和輪胎）的更多信息。圖像映射圖像映射的使用（1）定義映射圖（2）使用映射圖定義映射圖：<map>標(biāo)記符和<area>標(biāo)記符使用映射圖：<imgusemap=#映射圖名稱>AREA標(biāo)記符Shape屬性（rect、circle、poly）Coords屬性Href屬性圖像映射示例：<HTML><HEAD><TITLE>圖像映射示例</TITLE></HEAD><BODY><MAPname="mymap"><AREAhref="file1.htm"shape="rect"coords=“10,10,50,50"><AREAhref="file2.htm"shape="rect"coords=“50,50,100,100"></MAP><P>請單擊以下圖像中的不同區(qū)域，以便跳轉(zhuǎn)到不同的文件</P><P><IMGsrc=“fh.jpg"usemap="#mymap"></P></BODY></HTML>

在使用圖像的問題上，網(wǎng)頁的制作者可能會與瀏覽者產(chǎn)生一些矛盾。比如，制作者往往希望在自己的網(wǎng)頁上有一些漂亮的圖像，使網(wǎng)頁充滿藝術(shù)的魅力；而瀏覽者常常因為網(wǎng)頁下載時間太長而不耐煩，甚至不愿等著下載全部內(nèi)容。因此，我們可以采用以下的方法來緩解這個矛盾：

1．在設(shè)計網(wǎng)頁時，應(yīng)該反復(fù)斟酌哪些圖像必須要，哪些圖像可有可無，對于那些不是必需

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論