图片在网页中的应用.ppt

《图片在网页中的应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、7-1圖片在網頁中的應用網頁上必備的元件除了文字之外，圖片也是不可少的物件。除了學術性或論文為主的研究網站會避免使用圖片外，多數的網站都會放上漂亮的圖來增添版面的色彩，更多網頁設計人員會精心設計漂亮的圖片來美化網站。圖7-1的網頁只有文字，任憑描述的再漂亮，網頁瀏覽者也無法從文字的介紹領略到函館夜景的美麗。但若是加上一張圖片，那感覺又完全不同囉！圖7-1加入圖片標籤圖片是網頁中必備的元件，在網頁中加入圖片實際上是運用使用超連結，將圖片連結檔圖片檔案才能正確顯示。目前瀏覽器支援的圖檔類型主要是JPEG、GIF和P

2、NG三種，若其他格式的圖檔則必須要轉成這三種圖檔格式才能使用。在網頁中加入圖片的標籤為，程式的語法如下：

3、，也可以在此變更所顯示的圖檔大小。Width：設定圖形在網頁中的寬度。Height：設定圖形在網頁中的高度。替圖片加上外框看上面的程式時你是否會覺得奇怪，怎麼會多出了『BORDER』這個字串，這又是甚麼甚麼呢？這是用來設定圖片的外框的。當你在圖片上設定超連結時，就會自動替圖片加上外框線，BORDER=0也是外框線的粗細=0，這時透過網頁是看不出變化了。圖片加上超連結說明文字前一章介紹超連結時，可以在超連結的物件上加上說明文字，那圖片上當然也可以加上說明文字，讓網頁觀眾知道點選這張圖片之後可以看到放大的圖片，若是圖片連到的

4、是網頁，則說明會連到哪個網頁，幫助使用者瀏覽網頁的內容。圖7-7就是瀏覽器設定不顯示圖片時，遇到圖片的處理方式。只能看到圖片的外框並透過圖像代表這裡有張圖。圖7-77-2圖片的邊界與格式設定前面的網頁範例中，在圖片的周圍都沒有文字，只有上、下有文字。不過多數的網頁會有圖文並列的情況，直接在圖片的旁邊加上圖片的說明如圖7-9。圖7-9文繞圖的設定若網頁中的圖片和文字都相當多，就需要動手來設定圖片和文字間的距離，這樣網頁呈現的版面效果才會漂亮。這時就得靠HSPACE和VSPACE這二個屬性了。圖片的對齊設定單單只有設定圖片和

5、文字的距離做出來的版面還是不夠好看，文字可以設定對齊網頁的左側或右側，圖片當然也有類似的設定。透過不同對齊方向讓圖片的位置有更多的變化。Align屬性的應用不過這樣做有個問題，範例中的圖片和文字是在不同段落，若是如前一個範例圖片和文字是在同一個段落中時，當圖片置中文字也會跟著置中。所以一般較少使用此方式來設定圖片的對齊方式，而是利用Align這個屬性來設定。Align屬性是用來設定圖片和文字的對齊方式，常用的屬性值如下：Top：對齊圖片上方。Middle：對齊圖片中間。Botton：對齊圖片底部。Left：圖片靠文字左邊

6、。Right：圖片靠文字右邊。Texttop：對齊文字部分的最頂端。Absbottom：對齊整行的最底端。