| Posted: 2004/11月/16 12:48下午 | IP記錄
|
|
|
在網頁中加入圖像
在網頁中加入圖像是很簡單的，它通過<IMG>標識符來實現，下面是個例子：
<HTML>
<HEAD>
<TITLE> Image Example </TITLE>
</HEAD>
<BODY>
<IMG SRC=」myimage.gif」>
</BODY>
</HTML>
在此例中，圖像myimage.gif將在網絡瀏覽器上顯示出來。<IMG>標識符的SRC屬性指明了要顯示的圖像 文件。你可以使用絕對或相對URL來指定一個圖像文件，圖像文件可以不是你本機上的文件，可以是環球網上任何一個地方的文件。
例如，如果你的機器與Internet相連，你可以使用下列代碼在你的網頁上顯示一幅Active Server Pages網站上的圖像：
<HTML>
<HEAD>
<TITLE> External Image </TITLE>
</HEAD>
<BODY>
<IMG SRC=」http://www.aspsite.com/testimage.gif」>
</BODY>
</HTML>
<IMG>標識符有許多有用的屬性。例如，使用WIDTH和HEIGHT屬性你可以在圖像被讀入之前通知瀏覽器圖像 的大小。雖然指定圖像的長寬並不會加快圖像讀入的速度，但指定這兩個值會讓瀏覽器在讀入圖像時預先在網頁上為圖像留下空地，結果 是網頁顯示得快了，因為瀏覽器不用在圖像讀入以後再一次計算圖像周圍其他元素的位置了。
注意
要養成使用<IMG>的WIDTH和HEIGHT屬性的習慣，因為使用它們會使網絡瀏覽器顯示變快。
<IMG>標識符另一個有用的屬性是ALT，使用ALT你可以指定替代圖片顯示的文本。一些用戶（雖然我得承認這樣 的人不多）在使用網絡瀏覽器時會關掉調入圖像的選項，當這些人瀏覽網頁時，他們看不見圖片，看到的是由ALT屬性指定的替代文本 。
ALT屬性還可以創建彈出式文字，當你的鼠標指針移到圖像上的某一位置時會彈出來。這在Internet Explorer3.0及4.0和Netscape Navigator4.0上都能實現。下面是一個使用ALT屬性的例子：
<HTML>
<HEAD>
<TITLE> Image With An Alternative </TITLE>
</HEAD>
<BODY>
<IMG SRC=」myimage.gif」 WIDTH=10 HEIGHT=12 ALT=」This is my image!」>
</BODY>
</HTML>
<IMG>標識符另一個有用的屬性BORDER，這個屬性在Netscape和Microsoft的瀏覽器上會有不 同的效果。在Netscape Navigator上，BORDER屬性可以用來為一幅圖像加黑邊框，當你想讓圖像在一個框中顯示時這是很有用的（見圖5.11 ）。
圖5.11 Netscape Navigator中具有邊框和空白的圖像
另一方面，在Internet Explorer上使用時，BORDER屬性為圖像加了一個透明邊框（見圖5.12），理論上，當要確保網頁上在圖像附近的其它 元素與圖像間隔一定距離時，這是很有用的。但是，在Netscape Navigator上，要取得BORDER屬性的效果，用下面兩個標識符來取代會更好些。
它們是HSPACE和VSPACE屬性，它們指定圖像周圍水平和豎直方向的空間大小，這兩個屬性在Microsoft和Nets cape的瀏覽器上都能工作，下列的例子使用了BORDER、HSPACE和VSPACE屬性：
<HTML>
<HEAD>
<TITLE> Image Attributes </TITLE>
</HEAD>
<BODY>
<IMG SRC=」myimage.gif」 WIDTH=10 HEIGHT=12 ALT=」This is my image!」
BORDER=5 HSPACE=10 VSPACE=10>
This is some text.
</BODY>
</HTML>
注意句子：This is some text，在圖像右邊界10個象素遠的地方顯示出來，在Netscape Navigator上，這句話在圖像黑框右邊界的10個象素遠處顯示，而在Internet Explorer，這句話在圖像透明邊框的右邊界10個象素處顯示。
圖5.12 Microsoft Internet Explorer中具有邊框和空白的圖像
<IMG>標識符的最後一個有用的屬性是ALIGN，它用來根據基行的文本定位圖像，通常這個屬性可取五個值：to p、middle、bottom、left和right。下面的例子使用了這幾個值（見圖5.13）：
<HTML>
<HEAD>
<TITLE> Image Alignment </TITLE>
</HEAD>
<BODY>
<IMG SRC=」myimage.gif」> This image is not aligned
<P>
<IMG SRC=」myimage.gif」 ALIGN=」top」> This image is top aligned
<P>
<IMG SRC=」myimage.gif」 ALIGN=」middle」> This image is middle aligned
<P>
<IMG SRC=」myimage.gif」 ALIGN=」bottom」> This image is bottom aligned
<P>
<IMG SRC=」myimage.gif」 ALIGN=」left」> This image is left aligned
<P>
<IMG SRC=」myimage.gif」 ALIGN=」right」> This image is right aligned
</BODY>
</HTML>
在Netscape和Microsoft的瀏覽器中這五個值的效果是完全一樣的，圖像的定位是有基行文本的位置決定的。例如，當 ALIGN屬性的值是「top」時，圖像與文本在同一行上顯示但上端對齊。
圖5.13 使用不同對齊方式的圖像
注意
Netscape為圖像的ALIGN屬性引入了一些特殊的值。然而我不支持你使用它們，因為它們只在Netscape Navigator上起作用，詳細信息可參閱附錄D。
|
標題 
名單 
搜索 
Help
注冊 
登入
DoReMe : ASP教學區
話題: 第五章 初級HTML
