網(wǎng)頁設(shè)計與制作（活頁式） 課件 情景3-2 圖像標(biāo)簽語法及常用屬性

網(wǎng)頁設(shè)計與制作圖像標(biāo)簽語法及常用屬性授課教師：胡文利JavaScriptCSSHTMLHTML目錄CONTENTS12學(xué)習(xí)目標(biāo)知識講解3小結(jié)學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01了解常見圖像格式學(xué)習(xí)目標(biāo)03掌握圖像標(biāo)簽屬性學(xué)習(xí)目標(biāo)02掌握圖像標(biāo)簽的語法02知識點講解知識點講解先向大家提個問題：圖片在網(wǎng)站建設(shè)中能起到什么作用？好的圖片能夠在第一時間就抓住用戶眼球，讓用戶產(chǎn)生好感，進一步引導(dǎo)用戶了解網(wǎng)站。3雖然圖片過大會降低網(wǎng)站的打開速度，但是圖片在網(wǎng)站中起到的作用完全不亞于文字。2圖片對于網(wǎng)站建設(shè)的作用就是吸引用戶、彰顯網(wǎng)站風(fēng)格、美化網(wǎng)站、簡化網(wǎng)站頁面。1將圖片和網(wǎng)站完美的融合在一起，能夠很好的突出網(wǎng)站風(fēng)格，網(wǎng)站重要內(nèi)容也會被凸現(xiàn)出來。4常用圖像格式在網(wǎng)頁中圖像太大會造成載入速度緩慢，太小又會影響圖像的質(zhì)量，那么哪種圖像格式能夠讓圖像更小，卻擁有更好的質(zhì)量呢？目前網(wǎng)頁上常用的圖像格式主要有三種:AGIFBJPGCPNG1、常用圖像格式—GIFGIF（GraphicsInterchangeFormat，圖形交換格式）最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，如站點圖標(biāo)、導(dǎo)航條等。GIF最突出的地方就是它支持動畫，同時GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。但GIF只能處理256種顏色。在網(wǎng)頁制作中，GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對單一的圖像。2、常用圖像格式—JPG表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。表單域：相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。JPEG（JoinPhotographGraphic，聯(lián)合圖像專家組標(biāo)準(zhǔn))又稱JGP，用來顯示照片等顏色豐富的精美圖像。JPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會造成一些圖像數(shù)據(jù)的丟失。JPG是特別為照片圖像設(shè)計的文件格式，網(wǎng)頁制作過程中類似于照片的圖像比如橫幅廣告（banner）、商品圖片、較大的插圖等都可以保存為JPG格式。3、常用圖像格式—PNGPNG（PortableNetworkGraphics，可移植網(wǎng)絡(luò)圖形）既融合了GIF格式透明顯示的顏色，又具有JPEG處理精美圖像的優(yōu)勢，是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。

相對于GIF/PNG的不足PNG不支持動畫IE6是可以支持PNG-8的，但在處理PNG-24的透明時會顯示為灰色。半透明的圖片只能使用PNG-24

相對于GIF/PNG的優(yōu)勢體積更小支持alpha透明顏色過渡更平滑

圖片保存為PNG-8會在同等質(zhì)量下獲得比GIF更小的體積圖片保存為PNG-8會在同等質(zhì)量下獲得比GIF更小的體積4、圖像標(biāo)簽語法在HTML中使用<img/>標(biāo)記來定義圖像，其基本語法格式如下：該語法中src屬性用于指定圖像文件的路徑和文件名，它是<img/>標(biāo)記的必需屬性。<imgsrc="圖像URL“/>5、圖像標(biāo)簽常用屬性屬性屬性值描述srcURL圖像的路徑alt文本圖像不能顯示時的替換文本title文本鼠標(biāo)懸停時顯示的內(nèi)容width像素（XHTML不支持%頁面百分比）設(shè)置圖像的寬度height像素（XHTML不支持%頁面百分比）設(shè)置圖像的高度border數(shù)字設(shè)置圖像邊框的寬度vspace像素設(shè)置圖像頂部和底部的空白（垂直邊距）hspace像素設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）alignleft將圖像對齊到左邊right將圖像對齊到右邊top將圖像的頂端和文本的第一行文字對齊，其他文字居圖像下方middle將圖像的水平中線和文本的第一行文字對齊，其他文字居圖像下方bottom將圖像的底部和文本的第一行文字對齊，其他文字居圖像下方5.1、圖像的替換文本屬性alt由于一些原因圖像可能無法正常顯示，比如網(wǎng)速太慢，瀏覽器版本過低等。因此為頁面上的圖像加上替換文本是個很好的習(xí)慣，在圖像無法顯示時告訴用戶該圖片的內(nèi)容。5.2、圖像的寬度、高度屬性width、height通常情況下，如果不給<img/>標(biāo)記設(shè)置寬和高，圖像就會按照它的原始尺寸顯示，當(dāng)然也可以手動更改圖片的大小。width和height屬性用來定義圖片的寬度和高度，通常我們只設(shè)置其中的一個，另一個會按原圖等比例顯示。如果同時設(shè)置兩個屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會變形或失真。5.3、圖像的邊框?qū)傩詁order默認情況下圖像是沒有邊框的，通過border屬性可以為圖像添加邊框、設(shè)置邊框的寬度，但邊框顏色的調(diào)整僅僅通過HTML屬性是不能夠?qū)崿F(xiàn)的。A5.4、圖像的邊距屬性vspace和hspace在網(wǎng)頁中，由于排版需要，有時候還需要調(diào)整圖像的邊距。HTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。5.5、圖像的對齊屬性align圖像的屬性align的屬性值有以下幾種：屬性值為bottom，表示將圖像的底部和文本的第一行文字對齊，其他文字居圖像下方。屬性值為left，表示將圖像對齊到左邊；屬性值為right，表示將圖像對齊到右邊；屬性值為top，表示將圖像的頂端和文本的第一行文字對齊，其他文字居圖像下方；屬性值為middle，表示將圖像的水平中線和文本的第一行文字對齊，其他文字居圖像下方；5.6、使用title屬性設(shè)置提示文字圖像標(biāo)記<img/>有一個和alt屬性十分類似的屬性title，title屬性用于設(shè)置鼠標(biāo)懸停時圖像的提示文字。練一練圖像屬性實例代碼如圖所示：練一練圖像屬性實例運行結(jié)果如圖所示：03小結(jié)小結(jié)本節(jié)內(nèi)容講解了圖像屬性的設(shè)置，通過插入抗疫宣傳海報練習(xí)，掌握在實際的網(wǎng)頁設(shè)計中，使用圖像屬性輕松插入圖像，請大家在課后對本節(jié)知識點進行復(fù)習(xí)，