圖片在網(wǎng)頁(yè)中的應(yīng)用.ppt

1、7-1圖片在網(wǎng)頁(yè)中的應(yīng)用,網(wǎng)頁(yè)上必備的元件除了文字之外，圖片也是不可少的物件。除了學(xué)術(shù)性或論文為主的研究網(wǎng)站會(huì)避免使用圖片外，多數(shù)的網(wǎng)站都會(huì)放上漂亮的圖來(lái)增添版面的色彩，更多網(wǎng)頁(yè)設(shè)計(jì)人員會(huì)精心設(shè)計(jì)漂亮的圖片來(lái)美化網(wǎng)站。 圖7-1的網(wǎng)頁(yè)只有文字，任憑描述的再漂亮，網(wǎng)頁(yè)瀏覽者也無(wú)法從文字的介紹領(lǐng)略到函館夜景的美麗。但若是加上一張圖片，那感覺(jué)又完全不同囉！,圖7-1,加入圖片標(biāo)籤,圖片是網(wǎng)頁(yè)中必備的元件，在網(wǎng)頁(yè)中加入圖片實(shí)際上是運(yùn)用使用超連結(jié)，將圖片連結(jié)檔圖片檔案才能正確顯示。目前瀏覽器支援的圖檔類型主要是JPEG、GIF和PNG三種，若其他格式的圖檔則必須要轉(zhuǎn)成這三種圖檔格式才能使用。在網(wǎng)頁(yè)中加入

2、圖片的標(biāo)籤為，程式的語(yǔ)法如下： IMG SRC=”圖片檔案位址”,圖片的基本屬性設(shè)定,現(xiàn)在你知道怎麼在網(wǎng)頁(yè)中加入圖片了，不過(guò)圖片可以設(shè)定的屬性可不少，當(dāng)然本章只能針對(duì)常用的屬性加以介紹，透過(guò)這些設(shè)定可以讓圖片呈現(xiàn)不同的面貌喔！,設(shè)定顯示的圖片大小,筆者建議一般在設(shè)定圖片時(shí)，請(qǐng)加上寬、高屬性的設(shè)定，這樣當(dāng)瀏覽網(wǎng)頁(yè)時(shí)若圖檔尚未下載完成，瀏覽器會(huì)先空出圖片的位置大小。如果您沒(méi)有指定寬度和高度，這時(shí)瀏覽器會(huì)以圖片的原始大小來(lái)顯示圖形，所以若你的原始圖片太大，也可以在此變更所顯示的圖檔大小。 Width：設(shè)定圖形在網(wǎng)頁(yè)中的寬度。 Height：設(shè)定圖形在網(wǎng)頁(yè)中的高度。,替圖片加上外框,看上面的程式時(shí)你是

3、否會(huì)覺(jué)得奇怪，怎麼會(huì)多出了BORDER這個(gè)字串，這又是甚麼甚麼呢？這是用來(lái)設(shè)定圖片的外框的。當(dāng)你在圖片上設(shè)定超連結(jié)時(shí)，就會(huì)自動(dòng)替圖片加上外框線，BORDER=0也是外框線的粗細(xì)=0，這時(shí)透過(guò)網(wǎng)頁(yè)是看不出變化了。,圖片加上超連結(jié)說(shuō)明文字,前一章介紹超連結(jié)時(shí)，可以在超連結(jié)的物件上加上說(shuō)明文字，那圖片上當(dāng)然也可以加上說(shuō)明文字，讓網(wǎng)頁(yè)觀眾知道點(diǎn)選這張圖片之後可以看到放大的圖片，若是圖片連到的是網(wǎng)頁(yè)，則說(shuō)明會(huì)連到哪個(gè)網(wǎng)頁(yè)，幫助使用者瀏覽網(wǎng)頁(yè)的內(nèi)容。 圖7-7就是瀏覽器設(shè)定不顯示圖片時(shí)，遇到圖片的處理方式。只能看到圖片的外框並透過(guò)圖像代表這裡有張圖。,圖7-7,7-2圖片的邊界與格式設(shè)定,前面的網(wǎng)頁(yè)範(fàn)例中

4、，在圖片的周圍都沒(méi)有文字，只有上、下有文字。不過(guò)多數(shù)的網(wǎng)頁(yè)會(huì)有圖文並列的情況，直接在圖片的旁邊加上圖片的說(shuō)明如圖7-9。,圖7-9,文繞圖的設(shè)定,若網(wǎng)頁(yè)中的圖片和文字都相當(dāng)多，就需要?jiǎng)邮謥?lái)設(shè)定圖片和文字間的距離，這樣網(wǎng)頁(yè)呈現(xiàn)的版面效果才會(huì)漂亮。這時(shí)就得靠HSPACE和VSPACE這二個(gè)屬性了。,圖片的對(duì)齊設(shè)定,單單只有設(shè)定圖片和文字的距離做出來(lái)的版面還是不夠好看，文字可以設(shè)定對(duì)齊網(wǎng)頁(yè)的左側(cè)或右側(cè)，圖片當(dāng)然也有類似的設(shè)定。透過(guò)不同對(duì)齊方向讓圖片的位置有更多的變化。,Align屬性的應(yīng)用,不過(guò)這樣做有個(gè)問(wèn)題，範(fàn)例中的圖片和文字是在不同段落，若是如前一個(gè)範(fàn)例圖片和文字是在同一個(gè)段落中時(shí)，當(dāng)圖片置中文字也會(huì)跟著置中。所以一般較少使用此方式來(lái)設(shè)定圖片的對(duì)齊方式，而是利用Align這個(gè)屬性來(lái)設(shè)定。Align屬性是用來(lái)設(shè)定圖片和文字的對(duì)齊方式，常用的屬性值如下： Top：對(duì)齊圖片上方。 Middle：對(duì)齊圖片中間。 Botton：對(duì)齊圖片底部。 Left：圖片靠文字左邊。 Right：圖片靠