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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:10下午 | IP記錄 引用 friend

本章講述標準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.comhttp://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的是不同的。

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:11下午 | IP記錄 引用 friend

本章講述標準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的網頁

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:11下午 | IP記錄 引用 friend

服務器端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.comhttp://www.tucows.com

當你畫好了圖像,包含了必需的HTML標識符,並建立了地圖文件後,你就有了一個服務器端image map,你可以在一個網頁上包含任意多的image map,而且你也可以在多個網頁上反覆使用同一幅圖像和地圖文件。例如,如果你想在多幅網頁上包含同一個導航條時,就可以這樣做 。

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:12下午 | IP記錄 引用 friend

使用窗口和框架

使用窗口和框架,你可以同時在屏幕上顯示多個HTML文件。使用窗口,你可以建立多個瀏覽器窗口的實例;使用框架,你可以將一個 瀏覽器窗口分成多個部分,並在每一部分中顯示一個HTML文件。

例如,使用框架,你可以將瀏覽器窗口分成左右兩個部分,在左半部分顯示Netscape的主頁,而在右半部分顯示Microso ft的主頁,來自兩個網點的網頁可以同時在一個瀏覽器窗口的兩個框架中和平共處(見圖7.3)。

 

圖7.3 處於同一個瀏覽器窗口中的Netscape和Microsoft的網頁

通常,使用框架是想讓用戶瀏覽網點時窗口上的部分內容一直保持不變,即一個框架中的內容保持不變,而另一個框架中的內容在變化。

假如你想在網站上提供一本書的全部內容,在這種情況下,你可以在一個框架內顯示這本書的目錄,而在另一個框架內顯示某一章節的內 容。如果用戶想跳到某一章節中去,他只需點擊目錄框架中相應章節的名字就可以了。

框架也可用來顯示廣告,如果你想在每一個網頁的底部都顯示同一個廣告,你可以建立一個廣告框架,當用戶在另一個框架中瀏覽你網點 的不同網頁時,廣告框架的內容可以保持不變。

最後,使用框架可以在每一個網頁的頂部顯示一幅標準的公司標誌。通過使用標準標題框架,你可以為網點提供一個一致的外觀,用戶只 要看一眼窗口的頂部,就會記住你的公司的名字。

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:12下午 | IP記錄 引用 friend

使用框架的不利和有利之處

在詳細介紹怎樣建立框架之前,你應該知道某些人是很討厭框架的。這並不是誇張,要瞭解對這個HTML標識符的強烈的心理反應,你 需要瞭解一些框架的不利之處:

框架小偷。缺省情況下,框架是有邊框的,這些邊框佔據了屏幕上可用作別的目的的一些空間,特別是在低分辨率的顯示器上,框架可以 佔用很多的空間,用戶對此很不滿。

框架侵犯。一個設計糟糕的框架可以侵犯別的網點的網頁,一旦一個框架顯示在網絡瀏覽器的窗口之上時,就可能很難將它清除。這個框 架可能一直顯示在屏幕上,甚至在你離開了創建這個框架的網點之後。從這一方面來說,一個設計糟糕的框架就和一個粗魯的拜訪者一樣 令人討厭。

框架與糟糕的公司有關。當第一個引入框架時,它們主要用來顯示廣告牌,這就在網絡大眾的頭腦裡建立了一種框架與廣告牌的聯繫。由 於人們一般並不喜歡廣告,框架也由於這種聯繫而令人討厭了。

框架是不值得信任的。最初Netscape以其特有的HTML擴展引入了框架,Microsoft不久也提供了他們自己的框架工 具。框架標識符的屬性還在討論之中,這使得在不同的瀏覽器上瀏覽時會造成不一致的框架行為,而且在許多瀏覽器上,框架根本就不起 作用。

框架中的頁很難被標識。對於顯示在框架中的網頁,你不能放置書籤,如果你這樣做,你將不能為其它的網頁放置書籤(設置框架的網頁 ),這使得瀏覽網站上使用框架的某一特定的頁變得很困難。

使用框架的網點會很慢。任何事都是公平的,瀏覽器讀入兩個HTML文件總是比一個要慢,因為框架允許你在同一個瀏覽器窗口裡顯示 多個HTML文件,因此要完全顯示出這一頁要花費較長的時間。

因此,看上去使用框架似乎是很糟糕的,但實際上,大部分的Internet網站設計者都應該因不正確地使用框架而受到批評。通常 框架是不必要的,你可以使用表格來代替它。

正如第六章「中級HTML」中所討論的,你可以使用表格將一個網頁分割成幾個子頁。表格不具有框架的那些缺點,因而表格框架模擬 框架的大部分效果。當你要使用框架時,你應當考慮用表格來代替它們。

例如,考慮圖7.4和7.5中所示的網頁,這兩個網頁看上去幾乎相同,只是圖7.4所示的網頁是用表格創建的,而圖7.5是用框 架的。由於使用表格創建的網頁讀起來會快些,你應當用表格來創建這一頁。

 

圖7.4 使用表格創建

 

 

圖7.5 使用框架創建

因為有上述的種種缺陷,你可能認為我會建議你再也不要使用框架,不是的。

事實上,框架有一些獨特的特性,通常在三種特殊情況下,你應當使用框架而不是表格。

首先,當你需要滾動條時,你必須使用框架。當你滾動一個表格中的目錄時,實際上你必須滾動整個網頁,但在框架中你就可以僅僅滾動 目錄。

考慮一個包含一本書的網點的例子,通過使用框架,你可以在同一時間顯示目錄和特定章節的內容(見圖7.6)。因為你可以滾動目錄 框架,因此即使你在閱讀一段很長的章節時,目錄表也可以保留在屏幕上。在這種情況下使用框架,你可以在同樣大小的屏幕空間中比通 常情況下顯示更多的目錄。

 

圖7.6 具有滾動條的框架

 

第二,如果你想讓窗口的一部分保持不變,而另一部分改變的話,你也要使用框架。例如,假定你想讓一幅廣告在任何時刻都顯示在瀏覽 器窗口中(見圖7.7),你不想讓用戶滾動網頁內容時把廣告也滾出屏幕,要想讓瀏覽器窗口上的一部分總是顯示在屏幕上,你就得使 用框架。

最後,你想顯示另一個網點的網頁時,你必須使用框架。有時你想與別的網站鏈接,讓更多的人來參觀自己的網點一直是網站管理者最大 的心願,一旦有人來參觀你的網點,你一定不想讓他離開,然而你要在你的網頁中加入與其它網點的超鏈接,因此怎樣才能讓人們可以瀏 覽其它的網點而不離開你的網點呢?可以將別的網點的網頁顯示在一個窗口或是一個框架中(見圖7.8)。

因此,這些情況下框架是很有用甚至是必需的。但是,要照顧到那些憎恨框架的人,你應當提供一個網點的無框架的版本,你會發現在任 何情況下這都是必須的,因為並不是所有的瀏覽器都支持框架。

 

圖7.7 使用框架顯示固定的廣告

 

 

圖7.8 在自己的網頁中顯示別的網頁

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:13下午 | IP記錄 引用 friend

建立一個新窗口

框架包含在瀏覽器窗口中,通常所有的HTML內容都顯示在一個缺省的瀏覽器窗口中──即你運行瀏覽器軟件後顯示的那個窗口──但 你也可以建立額外的窗口。通過建立多個瀏覽器窗口,你可以同時顯示多個HTML頁。

建立一個新窗口的過程是非常簡單的,你可以使用<A>的一個附加屬性TARGET來實現,如下所示:

<HTML>

<HEAD> <TITLE> New Window </TITLE> </HEAD>

<BODY>

<A HREF=「mypage.cfm」 TARGET=「mywindow」> Click Me! </A>

</BODY>

</HTML>

當這個HTML文件在瀏覽器上顯示時,超鏈接Click Me!出現在屏幕上,如果你點擊它,一個新的瀏覽器窗口就會顯示在屏幕上。這個新窗口與你剛運行瀏覽器軟件時顯示的那個缺省窗口 的功能是完全一樣的。

在這個新窗口中,HTML文件mypage.cfm被調入,<A>標識符的所有屬性工作起來沒有什麼不同。在此例中 ,這個標識符行為的唯一一個不同之處在於它創建了一個新的窗口。<A>的TARGET屬性建立了新窗口,它的值指定 了新窗口的名字,在此例中,新窗口的名字是mywindow。

只要TARGET屬性的值是一個不存在的窗口名,一個新的窗口就會建立。然而如果已經存在了一個具有同樣名字的窗口,HTML文 件就會讀入到那個窗口中。在同一個文件或不同文件中可以使用多個<A>的TARGET屬性來指定同一個窗口。

警告

不要把窗口名與HTML文件的標題混淆,窗口名並不出現在瀏覽器窗口的頂部。實際上,窗口名根本就不會在網絡瀏覽器上出現,窗口 需要一個名字的唯一理由是HTML標識符可以用此來識別它。

你可以根據你的需要打開任意多的新窗口,但是做這樣的事你必須要謹慎。參觀你網點的人可能不會立即發現已經建立了一個新窗口。當 建立了一個新窗口,它通常會覆蓋其它所有的窗口,這可能會引起混淆。當你打開一個新窗口時,你應當通知用戶你正在做什麼。

注意

現在你明白了如何建立一個新窗口,但是如何關閉它呢?使用標準HTML你是無法做到這一點的。通常只有網絡瀏覽器的用戶可以關閉 一個窗口,然而,如果你在你的網頁中加入一些Java Script,那麼當這個窗口不是唯一打開的窗口時,你有可能關閉它。下面就是用於此目的的Java Script代碼:

這個script關閉任何一個現已打開的窗口。根據不同的瀏覽器,一個確認對話框可能會出現在屏幕上。

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:13下午 | IP記錄 引用 friend

將窗口分成多個框架

你應當將框架視為窗口中的不同區域,框架是瀏覽器窗口中特定的部分。一個瀏覽器窗口可以根據你的需要分成任意多的框架,一個單個 的框架也可以分成其它多個框架,即所謂的嵌套框架。

要在瀏覽器窗口中建立框架,你必須創建一個特殊的HTML文件稱作frameset文件。frameset文件本身並不在網絡瀏 覽器中出現,它只是指明其它的網頁是怎樣顯示在瀏覽器中的。下面是一個簡單的frameset文件的例子:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

</FRAMESET>

</HTML>

當這個frameset文件讀入瀏覽器中時,瀏覽器會顯示兩個HTML文件mypage1.cfm和mypage2.cfm,它 們都是普通的HTML文件,frameset文件通知瀏覽器這兩個文件應當分別顯示在兩個框架中,如圖7.9所示。

 

圖7.9 顯示在兩個框架中的HTML文件

你應當注意這個frameset文件中的一些特點,與一般的HTML文件不同,它沒有<BODY>標識符。在fra meset文件中,<FRAMESET>代替了<BODY>,實際上,你不需要在frameset文件 的主體部分中使用<BODY>,如果你使用的話,瀏覽器就會將frameset文件解釋成一個普通的HTML文件。

<FRAMESET>標識符指定了框架在瀏覽器窗口中顯示的方式,這個標識符將瀏覽器窗口分成多行和多列。在此例中 ,瀏覽器窗口被分成一行和兩列,屬性ROWS=「100%」,使框架具有整個瀏覽器窗口的高度;屬性COLS=「50%,50% 」使框架分成兩列,每列都具有窗口寬度的一半。

你可以根據需要將窗口分成多個行和列,每次分割的結果都產生一個新的框架,但是你應當記住太多的框架會讓瀏覽器窗口變得很混亂─ ─特別是在低分辨率的屏幕上顯示時(見圖7.10)。

 

圖7.10 太多的框架

在此例中,<FRAMESET>使用屏幕的百分數來分割窗口,當然你也可以指定絕對的象素寬度。下面的frames et文件建立了一個有200個象素的框架:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「200,*」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

</FRAMESET>

</HTML>

當這個frameset文件被網絡瀏覽器解釋時,它看起來就如圖7.11所示,左邊的框架具有200個象素寬。然而要注意,當使 用絕對值時你應當小心,因為你的網頁可能會在各種分辨率的屏幕上顯示。

 

圖7.11 使用絕對像素寬度的框架

注意此例中是如何使用星號(*)的,屬性COLS=「200*」指定了瀏覽器窗口應當被分成兩列。這個屬性的第一個值指明了第一 個框架應該是200個象素寬,第二個值星號指明了第二個框架佔據屏幕的剩餘空間。

你可在ROW或COL屬性中使用不止一個星號,每一個多出的星號都會將屏幕等分。來看在下面的例子中是怎樣使用星號的:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「*」 COLS=「*,*,*」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

<FRAME SRC=「mypage3.cfm」>

</FRAMESET>

</HTML>

當這個frameset文件被網絡瀏覽器解釋時,屏幕上會顯示出如圖7.12所示。屬性ROWS=「*」告訴瀏覽器框架將佔據整 個窗口的高度,屬性COLS=「*,*,*」告訴瀏覽器將窗口寬度等分成三部分,每一個部分是一個框架。

 

圖7.12 具有相同寬度的框架

<FRAME>標識符指明哪個HTML文件被讀入框架,SRC屬性指向一個本地或Internet上任何地方的一個 HTML文件。特定的HTML文件依據它們出現的次序與某個框架相關聯,因此在此例中,文件mypage1.cfm出現在第一列 中,而文件mypage2.cfm出現在第二列中,而mypage3.cfm則出現在第三列中。

<FRAME>標識符有很多有用的屬性,例如,缺省情況下當框架的內容太大時,框架會顯示一個豎直或水平滾動條,你 可以使用SCROLLING=「NO」屬性來覆蓋這種行為。當你想通過不顯示框架滾動條來保護屏幕空間時,這個屬性是很有用的, 但是使用它要小心,因為使用它可能會造成一部分網頁內容永遠也無法看到。

<FRAME>的另一個有用的屬性是NORESIZE,缺省情況下瀏覽器的用戶可以改變屏幕上框架的尺寸,然而有時 你不想讓用戶破壞你精心設計的佈局,使用NORESIZE你就可以實現這一點。但是再一次提醒你,使用這個屬性要小心,如果你禁 止人們在他們的瀏覽器上改變框架的大小,可能會造成許多不便,一個具有NORESIZE屬性的小框架可能會使框架的內容無法被人 瀏覽。

使用<FRAME>的FRAMEBORDER屬性你可以控制一個框架是否具有邊框,如果你使用屬性FRAMEBOR DER=0,則框架的邊界將會消失。你也可以用<FRAME>的這個屬性來指定是否在frameset文件中定義的 所有框架都具有一個邊界。

最後, 你可以用MARGINWIDTH和MARGINHEIGHT屬性來控制框架的邊距,這兩個屬性對於在框架和其內容之間保留一些空 間是很有用的,它們在框架內容周圍設置了一些空白。

下面的frameset文件使用了剛剛討論的這些屬性(見圖7.13):

<HTML>

<HEAD>

<TITLE> Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「*」 COLS=「*,*,*」>

<FRAME SRC=「mypage1.cfm」 NORESIZE>

<FRAME SRC=「mypage2.cfm」 FRAMEBORDER=0 SCROLLING=「YES」

NORESIZE MARGINWIDTH=50 MARGINHEIGHT=50>

<FRAME SRC=「mypage3.cfm」 FRAMEBORDER=0 SCROLLING=「NO」>

</FRAMESET>

</HTML>

圖7.13 複雜的框架

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:13下午 | IP記錄 引用 friend

框架和早期的瀏覽器

框架是在Netscape Navigator 3.0中引入的,早期的瀏覽器不能識別任何有關框架的標識符,通常這不會造成任何問題。如果一個瀏覽器不能識別一個標識符或一個 屬性,它就僅僅忽略它,但是框架卻在這一方面有一些特殊的問題。

frameset文件產生了一個與早期瀏覽器的兼容性問題,因為frameset文件不是一個普通的HTML文件,如果你在這個 文件中加入一般的HTML標識符,就會產生不可預料的結果。例如,在Netscape的瀏覽器中,框架就不會起作用了。

這就產生了一種困境,你想讓frameset文件與能識別框架的瀏覽器和不能識別框架的瀏覽器都兼容,如果你在frameset 文件中只使用有關框架的標識符,這個文件將與早期的瀏覽器不兼容。另一方面,如果你使用了非框架的HTML標識符,這個文件就不 會像一個正確的frameset文件那樣工作,因此我們該怎麼辦呢?

很幸運,有一個特殊的標識符可以解決這個問題,使用<NOFRAMES>你可以建立一個即與支持框架的瀏覽器兼容也 與不支持框架的瀏覽器兼容的frameset文件。下面的例子說明了怎樣使用這個標識符:

<HTML>

<HEAD>

<TITLE> Simple Frames </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「mypage1.cfm」>

<FRAME SRC=「mypage2.cfm」>

</FRAMESET>

<NOFRAME>

<BODY BGCOLOR=「green」>

I can only be seen by ancient, pre-frame browsers!

</BODY>

</NOFRAME>

</HTML>

 

圖7.14 支持框架的瀏覽器將顯示框架

當這個frameset文件被支持框架的瀏覽器解釋時,瀏覽器會忽略包含在<NOFRAMES>標識符之間的任何內 容,見圖7.14。但是,如果在不支持框架的舊版瀏覽器上顯示時,除了包含在<NOFRAMES>中的內容,瀏覽器 會忽略其餘的任何東西(見圖7.15)。你可以在<NOFRAMES>中包含任何你需要的HTML標識符。

 

圖7.15 不支持框架的瀏覽器不會顯示框架

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:13下午 | IP記錄 引用 friend

框架和鏈接

假設你想建立一個網點包含一本書的全部內容,你建立了兩個框架,在左邊框架中,你建立了一個指向書中章節的超鏈接列表;在右邊框 架中,你顯示特定章節的內容。你可以使用表7.1和7.2所示的兩個HTML文件來建立frameset文件和目錄表文件。

表7.1 frameset文件

<HTML>

<HEAD>

<TITLE> A Great Book On Active Server Pages </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「toc.cfm」>

<FRAME SRC=「chapter1.cfm」>

</FRAMESET>

</HTML>

表7.2 目錄表文件

<HTML>

<HEAD>

<TITLE> Table Of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF=「chapter1.cfm」> Chapter 1: </A>

Everything You Need To Know About Active Server Pages

<LI> <A HREF=「chapter2.cfm」> Chapter 2: </A>

Even More Information On About Active Server Pages

</UL>

</BODY>

</HTML>

 

當這個frameset文件在瀏覽器中顯示時,你可看到如圖7.16所示,效果看起來還不錯,目錄表和章節內容都顯示在它們應該 呆的地方。然而,如果你點擊到第二章的鏈接,你不會得到正確的結果,問題在於第二章的網頁被讀進了錯誤的框架(見圖7.17)。

 

圖7.16 看上去似乎正確

缺省情況下,當你在一個框架中點擊一個超鏈接時,新的網頁會讀進同一個框架中,有時這是你所希望的,但更多情況下,你希望網頁被 讀進另一個框架中。在這個例子中,你希望章節內容被讀進右邊的框架中,而不是左邊的,這可通過指定特定的框架名來實現這一點。

 

圖7.17 鏈接將文件讀入到錯誤的框架中

與窗口類似,框架也可以有名字,顯然你可以用<FRAME>的NAME屬性來為一個框架起名,一旦你為框架起了名字 ,你可以用<A>的TARGET屬性來指定它,表7.3和7.4中的兩個文件是修改後正確的文件。

表7.3 新的frameset文件

<HTML>

<HEAD>

<TITLE> A Great Book On Active Server Pages </TITLE>

</HEAD>

<FRAMESET ROWS=「100%」 COLS=「50%,50%」>

<FRAME SRC=「toc.cfm」 NAME=「TOC」>

<FRAME SRC=「chapter1.cfm」 NAME=「CHAPTER」>

</FRAMESET>

</HTML>

 

表7.2 新的目錄表文件

<HTML>

<HEAD>

<TITLE> Table Of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF=「chapter1.cfm」> Chapter 1: </A>

Everything You Need To Know About Active Server Pages

<LI> <A HREF=「chapter2.cfm」> Chapter 2: </A>

Even More Information On About Active Server Pages

</UL>

</BODY>

</HTML>

 

NAME和TARGET屬性強制超鏈接和網頁正確工作,當用戶在名為TOC的框架中點擊一個超鏈接時,相應章節的內容就會讀入名 為CHAPTER的框架中。<A>的TARGET屬性使超鏈接定位於正確的框架。

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


加入: 2004/5月/08
Online Status: Offline
回復: 38
Posted: 2004/11月/16 1:14下午 | IP記錄 引用 friend

正確從框架中退出

框架不流行的一部分原因是它在許多瀏覽器上糟糕的執行結果,我們都有過不愉快的經歷:為了僅僅發現沒有框架隱藏在背後,我們不得 不離開一個網站,這是令人討厭的。然而,你可以做得更好:你會學習到怎樣控制你的框架。

控制框架的秘密在於TARGET標識符的四個特殊的值。通過使用這些值「_blank」、「_parent」、「_self」和 「_top」,你可以從不同級別的框架中跳出來。

這四個值中最常用的是「_top」,它使瀏覽器窗口擺脫所有的框架。下面的例子說明了如何使用這個值:

<HTML>

<HEAD>

<TITLE> Table of Contents </TITLE>

</HEAD>

<BODY>

<UL>

<LI> <A HREF=「home.cfm」 TARGET=「_top」> HOME </A>

<LI> <A HREF=「chapter1.cfm」 TARGET=「CHAPTER」> Chapter 1: </A>

Everything You Need To Know About Active Server Pages

<LI> <A HREF=「chapter2.cfm」 TARGET=「CHAPTER」> Chapter 2: </A>

Even More Information On Active Server Pages

</UL>

</BODY>

</HTML>

這個HTML文件被用來建立一個目錄表,它有一個超鏈接,這個超鏈接指向網站的主頁。當你用鼠標點擊這個超鏈接時,你不想讓主頁 被讀入目錄表的框架中,你也不想讓主頁被讀入章節內容的框架中,你想所有的框架都消失,讓主頁佔據整個屏幕空間。在此例中,屬性 TARGET=「_top」完成了這一功能。

當你需要將瀏覽器窗口中的所有框架都消除時,可以使用「_top」值。當你要與外部的網站鏈接時,這個值是很有用的。如果你不想 讓外部網站的網頁顯示在一個框架中的話,就必須使用「_top」值。最後,如果你想不通過框架來提供你網站的版本(這通常是很好 的),你應當在你指向版本的鏈接中使用「_top」值。

TARGET屬性的另一個有潛在價值的值是「_parent」,你可以通過在一個frameset文件將<FRAME&g t;標識符的SRC屬性指向另一個frameset文件來建立一個框架。當你建立具有一定複雜程度的屏幕佈局(見圖7.18)時 ,你就需要用這種方法來建立框架。「_parent」值允許你從當前一級的框架中返回到當前frameset文件的父框架中。

圖7.18 複雜的屏幕佈局

 

注意

你可能想知道在一個frameset文件中構建它本身時會發生什麼。例如,下面的名為myself.cfm的frameset文 件在一個錯誤的循環中引用了自己:

<TITLE> Vicious Frames </TITLE>

<FRAMESET ROWS=「*」 COLS=「*」>

<TARGET SRC=「myself.cfm」>

</FRAMESET>

我很遺憾地告訴大家,計算機對此無法識別,屏幕上什麼也沒有發生,只顯示一個空白的頁。

TARGET屬性的「_blank」值打開一個新的、空白的窗口。當你想打開一個新窗口時,這個值是很有用的,但不必操心給它一 個名字。然而,如果你將來想鏈接進同一個窗口的話,你應當為這個窗口提供一個名字(見前面的章節「建立一個新窗口」)。

最後,TARGET屬性的「_self」值是這個屬性的缺省值,你可能從來也不需要這個值。當你點擊個鏈接時,缺省情況下,這個 鏈接所指向的網頁將被讀入當前的框架中。如果窗口中沒有框架,新的網頁就被讀入當前的窗口中。

對框架的最後考慮

使用框架要小心,你應當時刻注意那許多的網絡迷們對框架所報的厭惡態度。當你要使用框架時,你應該考慮是否可以用表格來代替它。

如果你要使用框架,就得小心謹慎地處理它們。當你有一個指向你網點外部的網站的超鏈接時,不要忘記使用TARGET=「_top 」屬性來使所有的框架消失。而且,你應當在低分辨率的屏幕上測試你的網頁來確定框架沒有影響一些重要的內容。

最後,如果你決定要使用框架,可以考慮提供一個網頁的非框架的版本。你可以在你的主頁上包含一個No Frame的超鏈接來允許參觀者不使用框架就能瀏覽你網點的內容。在任何情況下,你都需要建立一個網頁的非框架版本,因為並不是 所有的瀏覽器都支持框架。

綜上所述,框架在某些情況下確實能改善你的網站,某些特殊的效果只有使用框架才能獲得。你可能會冒險疏遠一些用戶,但網頁設計就 是充滿著冒險的。

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

of 4 下一頁 >>
  回復發表新主題
顯示可打印的頁面 顯示可打印的頁面

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

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

This page was generated in 0.2031 seconds.

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