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

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

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

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

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