| Posted: 2004/11月/16 1:10下午 | IP記錄
|
|
|
本章講述標準HTML中的一些高級標識符，你將學習怎樣建立image map來使你的網點易於瀏覽，你還會學習怎樣使用窗口和框架來同時顯示多個網頁，最後你將學習怎樣通過cascading style sheets來更好地控制你網頁的佈局。
使用image map
許多網點的主頁都有一幅圖像，你可以點擊它的不同部位來進入網點的不同部分（見圖7.1）。例如，這幅圖像可以包含一些圖標，指 定為新聞部分。對話部分及下載部分，如果這個網點的參觀者想從主頁立即進入新聞部分，他就可以簡單地點擊一下新聞的圖標，包含有 這些圖標的圖像就被稱為image map。
圖7.1 一個image map的例子
image map的另一個用途是在網點的每一頁的頂部建立導航條，導航條包含了這個網點主要部分的菜單。同樣，用戶可以用導航條快速而簡單 地進入他所感興趣的部分。例如，Netscape的網點上許多網頁都有一個導航條（見圖7.2）。
這是image map的兩個主要用途，然而只要我們去想，它還有很多別的用途。例如，你可以使用image map來搜集信息，假如你想知道參觀你網點的人是來自世界的哪個角落，你就可以建立一幅世界地圖的image map，參觀者可通過點擊地圖來指出他們來自哪個國家。如果你想在一幅圖像上顯示一系列選擇，就要使用image map。
有兩種類型的image map：服務器端的及客戶端的，當你使用服務器端image map時，服務器會在用戶點擊了圖像上某一部位時決定採取什麼行動；而在客戶端image map中，則是由瀏覽器決定採取什麼行動。服務器端image map與更多的瀏覽器有更好的兼容性，但是客戶端image map更快。兩種image map都很容易建立，下面的兩節將分別介紹這兩種類型。
圖7.2 具有導航條的Netscape的網頁
服務器端image map
如果你想讓你的image map在更多的瀏覽器上都能正確運行的話，就使用服務器端image map，它甚至能很好地與早期的瀏覽器兼容。它唯一的一個不利之處是它比客戶端image map要慢許多。
建立一個服務器端image map需要以下三步：
建立圖像
在HTML文件中使用正確的標識符
建立image map
下面將對此進行詳細的討論。
你可以在image map中使用任何類型的圖像，一般使用GIF，但你也可以使用JPEG或PNG格式的圖像，這對於image map來說沒有什麼差別。你可以用任何一種支持網頁圖像格式的作圖軟件來建立你的圖像。
在建立圖像時，要確保它的尺寸足夠大，能使用戶輕鬆地用鼠標點擊不同的部位。如果你建立的圖像太小，用戶點擊正確的區域會很吃力 ，這會降低用戶的興趣。同時也不要使圖像太大，否則圖像調入瀏覽器會非常地慢。Internet上有很多網點在它們的主頁上都放 置了過大的image map（社團的網點更是這樣）。你的圖像很具有藝術性，但如果要花幾個小時來讀入它的話，就沒有人願意去看它。
建立服務器端image map的第二步是在HTML文件中包含必需的HTML標識符，你可以使用<IMG>的ISMAP屬性來指定一幅圖像 為服務器端image map。下面是個例子：
<HTML>
<HEAD> <TITLE> Server-Side Image Map </TITLE> </HEAD>
<BODY>
<A HREF=「/somedirectory/mymap.map」> <IMG SRC=「myimage.gif」 ISMAP> </A>
</BODY>
</HTML>
這個例子假設你已經建立了一幅名為myimage.gif的GIF圖像，這幅圖像是用來作為image map的。ISMAP屬性通知瀏覽器將這幅圖像解釋為image map而不是一般的圖像。
你可以使用<IMG>標識符的所有屬性，例如，你可以用BORDER＝0屬性來防止在Netscape Navigator上顯示時在圖像周圍畫一個邊框。
建立一個服務器端image map的最後一步是建立一個地圖文件。地圖文件是具有擴展名為 .map的一般文本文件，你可以使用任何一種普通的文本編輯軟件來建立地圖文件。在上例中，注意圖像是包含在<A> 標識符中，然而HREF屬性不是通常那樣指向一個HTML文件，而是指向一個名為mymap.map的文件，這就是個地圖文件。
一個地圖文件將圖像中不同的區域與不同的網絡地址（URL）關聯起來。例如，假設你的圖像上有一個報紙的圖標，還有一個聊天室的 圖標，如果有人點擊了報紙圖標，你希望瀏覽器調入新聞的網頁，如果點擊了聊天室的圖標，你希望調入聊天室的網頁。要建立這種圖像 與網頁間的聯繫，你必須使用地圖文件。
Internet Information Server（本書假定你在使用的Web服務器）能識別NCSA和CERN格式的地圖文件。下面的例子是一個NCSA格式的地圖 文件：
# WWW NCSA Image Map file for『myimage.gif 』
default /home.cfm
rect /news.cfm 0,0 100,100
rect /chat.cfm 101,0 200,100
在這個地圖文件中，符號＃表明一句註釋的開始，你可以在＃號後輸入任何你想要的文字。在此例中，註釋中說明了與地圖文件相關的圖 像文件名。當你有多幅image map時，這是個好的習慣，通過在地圖文件中指明圖像的名字，你可以記住哪個圖像與哪個地圖文件相關。
代碼rect用來將圖像中的一個矩形區與一個HTML文件地址相關聯，例如，news.cfm文件與坐標為0，0和100，10 0定義的矩形區相關聯。這個坐標指明了圖像上的一個區域，左上角坐標為（0，0），右下角坐標為（100，100）。當用戶點擊 了圖像上的這個區域後，HTML文件news.cfm就會被調入瀏覽器。
最後，代碼default指明了當用戶點擊image map上未被定義的區域時，瀏覽器應當調入的HTML文件。在此例中，如果用戶點擊了上述定義的兩個矩形區域之外，瀏覽器就會調 入home.cfm文件。
在這個地圖文件中，定義的區域是矩形的，但是你也可以使用別的形狀，例如圓形、多邊形，甚至是單獨的點（如果你覺得有必要的話） 。下面的例子使用了所有這四種形狀的區域：
# WWW NCSA Image Map file for『myimage.gif 』
default /home.cfm
rect /news.cfm 0,0 100,100
circle /chat.cfm 50,50 20
poly /help.cfm 200,0 400,0 400,100 200,100 200,0
point /NeverGetHere.cfm 500,6
在這個地圖文件中，代碼circle在地圖上定義了一個圓心在（50，50），半徑在20的圓形區域，poly定義了一個由一系 列的點（給出X、Y坐標）組成的多邊形區域，最後point定義了一個單獨的點，要想調入HTML文件NeverGetHere .cfm，用戶必須點擊圖像上坐標為（500，6）的單個點。
注意
使用多邊形在image map上定義區域時要小心，早版本的Internet Information Server不能處理超過100個點組成的多邊形（這將會造成禁止進入的錯誤）。現版的服務器能處理多達160個點的多邊形，但 多於這些的點就會被忽略。
你可能已經注意到在上述地圖文件中由rect和circle定義的區域是重疊的。在兩個區域重疊的情況下，在地圖文件中首先定義 的區域會起作用，因此在此例中，重疊區域會執行矩形區的功能，news.cfm文件將會與矩形和圓重疊的區域相關聯。
注意
一些作圖軟件，如Fractal Design Painter，可以自動地為你產生地圖文件。另外，許多共享軟件和免費軟件可以用來建立地圖文件，可瀏覽http://www.shareware.com或http://www.tucows.com。
當你畫好了圖像，包含了必需的HTML標識符，並建立了地圖文件後，你就有了一個服務器端image map，你可以在一個網頁上包含任意多的image map，而且你也可以在多個網頁上反覆使用同一幅圖像和地圖文件。例如，如果你想在多幅網頁上包含同一個導航條時，就可以這樣做 。
客戶端image map
客戶端image map與服務器端image map的功能完全一樣，但客戶端image map會快許多，它的唯一一個缺點是它在早期到瀏覽器上不被支持。
在客戶端image map上，用HTML標識符來指定一個地圖文件，你可以使用<MAP>和<AREA>標識符來完成這一 切，下面是個例子：
<HTML>
<HEAD> <TITLE> Client-Side Image Map </TITLE> </HEAD>
<BODY>
<MAP NAME=「mymap」>
<AREA SHAPE=「rect」 COORDINATES=「0,0,100,100」 HREF=「/news.cfm」>
<AREA SHAPE=「rect」 COORDINATES=「101,0,200,100」 HREF=「/chat.cfm」>
</MAP>
</BODY>
</HTML>
<MAP>標識符用來包含<AREA>並為地圖提供一個名字，每一個<AREA>在圖像上 定義了一個區域，並與一個地址（URL）相關聯。
在此例中，在圖上定義了兩個矩形區域，第一個區域從圖像的左上角開始，並有100個象素的寬和高，如果用戶在這個區域內點擊鼠標 ，就會調入news.cfm文件；第二個矩形從坐標（101，0）開始，並在坐標（200，100）結束，這個區域與HTML文 件chat.cfm相關聯。
注意
根據HTML 3.2規範，你可以使用百分數來提供區域的坐標，然而，並不是所有的瀏覽器都支持這一特性，所以你最好不要用它。
你也可以在SHAPE屬性中指定圓形和多邊形，下面的例子使用了三種形狀：
<HTML>
<HEAD> <TITLE> Client-Side Image Map </TITLE> </HEAD>
<BODY>
<MAP NAME=「mymap」>
<AREA SHAPE=「rect」 COORDINATES=「0,0,100,100」 HREF=「/news.cfm」>
<AREA SHAPE=「circle」 COORDINATES=「50,50,20」 HREF=「/chat.cfm」>
<AREA SHAPE=「poly」
COORDINATES=「200,0 400,0 400,100 200,100 200,0」 HREF=「/help.cfm」>
<AREA SHAPE=「rect」 COORDINATES=「0,0,10,10」 NOHREF>
</MAP>
</BODY>
</HTML>
在此例中，通過給出圓心的坐標x、y及圓的半徑定義了一個圓形區域，而多邊形的定義是通過提供一系列表明多邊形頂點的x、y坐標 而完成的。
注意在最後一個<AREA>中出現的NOHREF屬性，它用來定義image map上的無效區域，如果用戶點擊了這個區域，將不調入任何文件。在此例中，最後一個<AREA>標識符用來在第一 個<AREA>中定義的矩形區中挖出一個洞（當你想要在image map上定義一個複雜的形狀時，這個屬性是很有用的）。
注意第一個矩形和圓形重疊的區域，第一個<AREA>將有優先權，因此在此例中，如果用戶點擊了重疊區域，將會讀入 news.cfm文件。
在客戶端image map中，你不能定義一個缺省文件用來當用戶點擊在定義區域之外時讀入。然而，還有別的辦法來實現這一效果，如果你讓最後一個& lt;AREA>作用於整個圖像，這個標識符就會為整個image map指定一個缺省文件。
這個HTML文件不很複雜，你還要指定一個圖像用在你的image map中，你可以用<IMG>的USEMAP屬性來將一幅圖像與一個地圖文件相關聯，就像下面的例子所示：
<HTML>
<HEAD> <TITLE> Client-Side Image Map </TITLE> </HEAD>
<BODY>
<MAP NAME=「mymap」>
<AREA SHAPE=「rect」 COORDINATES=「0,0,100,100」 HREF=「/news.cfm」>
<AREA SHAPE=「rect」 COORDINATES=「101,0,200,100」 HREF=「/chat.cfm」>
</MAP>
<MAP SRC=「myimage.gif」 USEMAP=「#mymap」>
</BODY>
</HTML>
在此例中，地圖mymap與圖像myimage.gif相關聯，如果你需要，你可以把一個地圖文件與同一網頁上的多幅圖像相關聯 ，這是很有用的。例如，如果你想在一個網頁的頂部和底部都加上同一個導航條。
通常，客戶端image map一般使用GIF圖像，但你也可以使用JPEG甚至是PNG圖像。如果你想在image map中使用照片，JPEG圖像可能是較好的選擇（見第五章「初級HTML」瞭解何時使用JPEG要比GIF好）。
你可以使用<IMG>標識符的所有常用屬性。例如，你應當指定圖像的WIDTH和HEIGHT屬性，這樣讀入圖像時 會快些。另外，你也可以使用<IMG>的BORDER＝0屬性，這樣在顯示出來的圖像的周圍沒有邊框出現。
當指定地圖文件名時要小心，在<IMG>標識符中指定時一定要在地圖名前加上＃號，而且，地圖文件名是區別大小寫的 ，名為Mymap的地圖與名為mymap的是不同的。
|
標題 
名單 
搜索 
Help
注冊 
登入
DoReMe : ASP教學區
話題: 第七章 高級HTML
