標題標題  顯示論壇會員列表名單  搜索論壇搜索  HelpHelp
  注冊注冊  登入登入
ASP教學區
 DoReMe : ASP教學區
主題 話題: 第五章 初級HTML 回復發表新主題
作者
貼子內容 << Prev Topic下一個主題 >>
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:48下午 | IP記錄 引用 koioggo

在網頁中加入圖像

在網頁中加入圖像是很簡單的,它通過<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。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:52下午 | IP記錄 引用 koioggo

用圖像建立鏈接

你可以用圖像來在網頁間建立鏈接,這和文本是一樣的。通常當你建立一個超鏈接時,你用<A>標識符包含你要鏈接的地 址文本,你也可以將圖像放於<A>標識符間,如同文本一樣:

 

<HTML>

<HEAD>

<TITLE> Image Attributes </TITLE>

</HEAD>

<BODY>

<A HREF=」http://www.yahoo.com」><IMG SRC=」myimage.gif」></A>

</BODY>

</HTML>

在此例中如果用戶用鼠標點擊圖像myimage.gif,那麼Yahoo!的主頁就會被調入(見圖5.14)。

 

圖5.14 作為鏈接使用的圖像

注意作為鏈接用的圖像顯示時的邊界,它的顏色與超鏈接的顏色一樣是可以控制的──通過使用<BODY>標識符的LI NK、VLINK和ALINK屬性(見前一節「控制鏈接的顏色」)。然而大部分情況下,你不想在圖像周圍顯示一個邊框,要去掉這 個邊框,使用<IMG>標識符的BORDER屬性,將邊框的寬度設為零。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:53下午 | IP記錄 引用 koioggo

使用圖像作為背景

你可通過使用背景圖像而使你的網頁取得顯著改觀,背景圖像將會在你網頁上的其它所有的元素底下平舖開來。背景圖像越小,重複的次 數越多,看下面的例子:

<HTML>

<HEAD>

<TITLE> Background Image </TITLE>

</HEAD>

<BODY BACKGROUND=」mylittleimage.gif」>

Hello World!

</BODY>

</HTML>

當這個HTML文件在網絡瀏覽器上顯示時,圖像mylittleimage.gif在水平和豎直方向上重複排列開來(見圖5.1 5)。如果你使用較大的圖像,圖像不會平舖(見圖5.16),你在這兩幅圖中可看見兩種效果。

 

圖5.15 小圖片在屏幕上平舖

注意

為網頁選擇背景圖像時要小心,選擇一個糟糕的背景圖像會使顯示在它上面的文字無法閱讀,如果網頁上有大量的文本,最好不要選擇背 景圖像。

 

圖5.16 大圖片在屏幕上平舖

使用背景圖像的另一個有趣效果是在網頁左端顯示一個彩色豎條,這個效果是通過使用一幅只有一個象素高但有1200個象素寬的圖像 實現的。這幅圖像的前300個象素是一種顏色,而後900個象素是另一種顏色,當這幅圖像在屏幕上平舖時,由於它的寬度比屏幕寬 ,因此只在豎直方向上重複(如圖5.17)。

 

圖5.17 具有兩列不同色彩的背景

Microsoft在<BODY>標識符裡添加了一個只在Internet Explorer上起作用的屬性。通常滾動一個有背景圖像的網頁時,背景圖像也跟著滾動,然而有時你希望背景圖像固定不動。你可 使用<BODY>標識符的BGPROPERTIES屬性來實現這一效果。例如,如果你想讓圖像myimage.gi f固定不動,你可使用下面的語句:

對於短小的網頁,這個附加的屬性沒有什麼特別的用處。但如果你的網頁很長,需要滾動時,你就會注意到背景圖像沒有滾動。

即使你在使用背景圖像,你還應該使用<BODY>標識符的BGCOLOR屬性來設置網頁的背景色,與所有圖像一樣, 讀入背景圖像也是耗費時間的,當讀入背景圖像時,將會顯示背景色直到圖像全部讀入。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:53下午 | IP記錄 引用 koioggo

創建快速讀入的帶圖像的網頁

在網頁中使用圖像的問題在於讀入網頁的速度,如果你在網頁中正確地使用圖像,這個問題不會很突出。要創建快速讀入的帶圖像的網頁 ,請遵循下面的原則:

在你的網頁中盡可能地使用同一幅圖像。當瀏覽器讀入一幅圖像時,它會在緩存中保留一幅圖像的拷貝。如果你在許多頁中都使用同一幅 圖像,瀏覽器從Internet上讀入這些頁時就不會每次都讀入這個圖像文件。當你讀入同一個圖像文件時,你應確保<IM G>標識符的SRC屬性的值在每一頁上都是相同的。

減少圖像中調色板的大小。大部分作圖軟件都允許你指定GIF圖像的調色板大小,盡可能使用最小的調色板。注意這與減少圖像中顏色 的數目是不同的。例如,如果你在一幅只有兩種顏色的圖像中建立了一個256色的調色板,這將是很低效的。

一定要使用<IMG>標識符的WIDTH和HEIGHT屬性。如果你不指定這兩個屬性,瀏覽器就不會知道該為一幅圖 像留多大的空地。在這種情況下,當圖像全部被讀入後,瀏覽器會重畫整個網頁。而且,當你的網頁上有很多圖像時,瀏覽器會為每一幅 圖像一次又一次地重畫屏幕。

盡量使用交錯的GIF圖像。交錯GIF圖像在屏幕上顯示出來時看起來較快,因為在整個文件都傳輸到瀏覽器之前,它們就開始顯示了 。這種心理感覺是很有效的,你應該經常使用它們。

你盡可能地不要去選擇那些有許多不同色彩的圖像。具有大量同一色彩的圖像傳輸起來會較快。任何事都是均等的,圖像中色彩越多,需 要傳輸的信息就越多。通常,簡單的圖片總是比複雜的圖片效果要好。

不要在網頁中使用太多的圖片。在特定情況下,瀏覽器需要為網頁上的每一幅特定的圖片向服務器發出單獨的請求。將許多相鄰的小圖片 組合成一個大圖片要比單獨傳輸這些小圖片的效果要好。通常,當你能將許多小圖片組合成一個大圖片時,你就應該這樣做。

 

 

 

小結

本章講述了許多內容,你學會了所有基本的HTML標識符,你現在應該知道怎樣創建你自己的網頁了。

你學會了怎樣使用顏色,怎樣使用HTML標識符來設定頁格式和文本格式,你還學會了怎樣使用超鏈接將你的網頁與其它網頁鏈接起來 ,現在你還知道怎樣有效地將圖像加入你的網頁。

在這一點上,你應當感受到HTML的靈活性和強大功能,只要使用本章所介紹的HTML標識符,你就可以建立很複雜的網頁。然而我 們在下一章中還會介紹一些更令人興奮的標識符,你將學習怎樣在你的網頁中建立窗體、列表和表格。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 

如果你想回復的話你必須首先 login
如果你還沒有注冊的話你必須首先 注冊

<< 上一頁 頁 of 3
  回復發表新主題
顯示可打印的頁面 顯示可打印的頁面

論壇跳轉
不能 張貼新論題在這個討論版
不能 回應論題在這個討論版
不能 刪除你的發言在這個討論版
不能 編輯你的發言在這個討論版
不能 新增投票標題在這個討論版
不能 在這個討論版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.1875 seconds.

 
保養品
保養品, Skin Care
www.elady.tw
美材批發
美材, Cosmetic
www.elady.tw/beauty_org
保養品批發
名牌保養品、保養品批發
gb.perfume.com.tw/skincare
飾品批發
飾品、飾品批發
gb.perfume.com.tw/ornament