請問一下假如我今天在A框架用樹狀選單(按一個按鈕會跑出下面的其他按鈕)
,然後樹狀選單下的每一個按鈕,我都要連結一個網頁,並且開在B框架,請問要如何做呢??
P.S:我的框架形式是分"左右"兩邊的那種
er">
|
 檢視圖片 | 何謂框架（Ｆｒａｍｅ）？我們在瀏覽網頁時，經常會發現在某些網頁中，它所呈現的畫面並非傳統的一個畫面顯示一個網頁，而是在一個畫面中，左邊顯示這個網頁的目錄，而按下了目錄的選項後，內容則會出現在右邊的畫面中，而這就是所謂的框架。因此所謂的框架，簡單來說就是分割網頁，把網頁分成好幾個部分。其實分割網頁的技巧並不難，不過觀念很重要，因此小弟打算先介紹框架的基本概念，接著再介紹最基本的分割方式，然後介紹控制框架外觀及功能的屬性，最後就來示範比較流行的分割方式。 【1】 、框架的基本概念 【2】、基本的分割網頁方式 【3】、控制框架外觀及功能的屬性 【4】、分割視窗進階應用 ㄛ！對了，本單元還剩最後的一個屬性未介紹，就是Target屬性。在上面的例子target="part2"中，單元一的內容會出現在Part2中。但是Target屬性卻提供給我們其他的選擇，我現在就一一介紹。
（１） Target="_blank"：我們若將target="part2"用target="_blank"取代，則當我們按下單元一的超連結後，瀏覽器會自動開一個新的瀏覽器畫面來顯示單元一（04.htm）的內容。
（２） Target="_self"：此為預設值，若使用這種控制碼，則當我們按下某分割視窗的超連結後，其內容會顯示在原本的分割視窗內。
（３） Target="_top"：我們若將target="part2"用target="_top"取代，則當我們按下單元一的超連結後，瀏覽器會將原本的框架架構拆掉而將單元一（04.htm）的內容單獨地顯示在瀏覽器的主視窗中，也就是瀏覽器畫面只會顯示出單元一的內容，而不會顯示出其他分割視窗的內容。 首先，各位在分割網頁前必須先了解一個概念，就是在分割網頁時，我們是不使用<Body></Body>這組標籤，取而代之的乃是我們現在要介紹的<Frameset></Frameset>這組標籤。因為當我們在分割網頁時，<Body>這組標籤是沒有意義的。說來說去對沒有經驗的朋友而言，可能搞不懂小弟到底在說什麼，那我現在先寫一段分割網頁的原始碼來給各位看看：
<Html>
<Head>
<Title>您網頁的標題（假設為：frame03）</Title>
</Head>
<Frameset cols="40%,*">
<Frame src="01.htm">
<Frameset rows="*,*">
<Frame src="02.htm">
<Frame src="03.htm">
</Frameset>
</Frameset>
<Noframes>
請您使用可支援Frame功能的瀏覽器
</Noframes>
</Html>
實際效果：  檢視圖片
由以上的原始碼內容中我們可看出，在網頁的檔頭部分（非綠色），都和一般的網頁原始碼一樣；但在網頁內容的部分則用<Frameset></Frameset>這組標籤取代<Body></Body>。至於<Noframes>這標籤的用意是指當您所使用的瀏覽器不支援分割網頁的功能時，則您可以看到<Noframes></Noframes>這組標籤之間的內容。所以一個分割網頁的架構基本上就是這個樣子。 再來的這個觀念最重要，就是一個以框架為架構所形成的網頁，是由許多的個別網頁所組成，例如各位在上面的原始碼中可看到<Frame src="01.htm">等的內容。那許多人便會有疑問，那上面介紹的原始碼內容是做什麼用的？其實上面的原始碼的功用在於告訴瀏覽器『這份網頁文件是以框架的效果所組成』，並且告訴瀏覽器『在瀏覽器的整個畫面中，每個分割網頁的部分所呈現的個別網頁為何？』。因此在上面所介紹的分割網頁文件原始碼（各位從圖中瀏覽器的位置欄可看到，我們的這份原始碼的檔名為frame03.htm）可說是這份分割網頁文件的主檔案，它提供了分割網頁的訊息及分割視窗內的網頁文件內容資訊給瀏覽器；而「01.htm」、「02.htm」及「03.htm」則可說是這份分割網頁文件的副檔案，它們的內容分別顯示於３個分割視窗內。相信這樣解釋之後，各位應該都對框架的基本概念有一初步的了解了吧！ 各位現在對框架的構造有一初步的認知後，那我現在就以這兩種最基本的網頁分割形式來讓大家了解分割網頁的方法。
（１） 將網頁分割成左右兩個部分：
要將網頁分割成左右兩部分，方法非常簡單，只要用下列的原始碼即可：
<frameset cols="*,*">
<frame src="01.htm">
<frame src="02.htm">
</frameset>
實際效果：  檢視圖片
（２） 將網頁分割成上下兩個部分：
要將網頁分割成上下兩部分，方法一樣簡單，只要用下列的原始碼即可：
<frameset rows="*,*">
<frame src="01.htm">
<frame src="02.htm">
</frameset>
實際效果：  檢視圖片
由以上的兩個例子，我們可以注意到以下的幾點：
１．『cols』與『rows』的差別：這兩種屬性的意義正好相反，若使用<frameset cols="*,*">的語法，則表示指定瀏覽器要將整個視窗以左右欄的方式來分割；若使用<frameset rows="*,*">，則表示要以上下列的方式分割。
２．不管是左右分割或是上下分割，在<frameset cols="*,*">的標籤中，『，』是用來控制分割視窗的個數，因此<frameset cols="*,*,*">則表示要將視窗分割成左、中、右三個視窗。
３．在這<frameset cols="*,*">的標籤中，『*』的部分是用來控制分割視窗的大小，若是<frameset cols="*,*">則表示瀏覽器會依情況自動調整子視窗的顯示大小；但是在指定大小時，我們也可以視窗百分比或是像素（Pixel）的點數來指定大小，例如：<frameset cols="20%,30%,*">或是<frameset cols="200,160,*">。 在了解了框架的基本意義及基本分割法後，現在我們來介紹控制框架外觀及功能的屬性。
（１） 與Frameset相關的屬性：
１． Frameborder：設定是否顯示框架的邊框。１或Yes是預設值，表示顯示邊框；０或No表示不顯示邊框。
２． Border：設定分割視窗間邊界處的厚度。０表示視窗之間為緊貼的狀態，數字越大，厚度越大。
３． Framespacing：效果與Border相同，但只有IE才認得。 （２） 與Frame相關的屬性：
１． Src：<frame src="網頁的URL位置">
指定HTML檔。就如同前面所介紹的<frame src="網頁的URL位置">，此屬性就是用來指定分割網頁中所對應顯示出的網頁。
２． Name：<frame name="分割視窗的名稱">
為分割視窗命名。我會在分割視窗進階篇中介紹它的用處。
３． Scrolling：<frame scrolling="No/Yes/Auto">
設定分割視窗是否顯示捲動軸。預設值為『Auto』，意思是瀏覽器會依情況決定是否顯示捲動軸。當您希望不論在任何情況下分割視窗皆不要顯示出捲動軸，則您可指定Scrolling="No"；反之，則Scrolling="Yes"。
４． Noresize：<frame noresize>
鎖住分割視窗的大小。當您加上此標籤後，您就可以限制瀏覽您的網頁的使用者自己隨意調整分割視窗的大小。
５． Marginwidth、Marginheight：<frame marginwidth="與左右邊界的距離" marginheight="與上下邊界的距離">
設定視窗內容與邊界的距離。設定的方法為指定點數，數字越大，則內容與分割視窗邊界的距離就越大。 在這部分，小弟要介紹一般比較常見的一種分割方式給大家，而且希望大家在了解了之後，能夠舉一反三，分割出自己希望呈現出的框架結構。此外我還要介紹分割視窗名稱的妙用及分割視窗間超連結的結合。 首先我們先來介紹如何分割出像本網站中『音樂夢工廠』及『酷！Slam Dunk』單元的分割網頁形式。順便一提，這種分割方式就是框架的巢狀架構。
例如：
<FRAMESET cols="20%,*" frameborder=1 border=0>=== 第一組框架標籤
<FRAME src="01.htm" name="part1">
<FRAMESET rows="80%,*" frameborder=1 border=0>=== 第二組框架標籤
<FRAME src="02.htm" name="part2">
<FRAME src="03.htm" name="part3">
</FRAMESET>
</FRAMESET>
實際效果：  檢視圖片
在這個框架中，小弟應用了一些控制框架外觀及功能的屬性，各位可自己觀察。然而在這個巢狀的架構中，各位可有注意到，右邊的兩個子視窗（第二組框架標籤），其在原始碼的編輯中，是在第一組框架標籤<frameset cols>之內，而由這個架構我們可了解，由於第一個框架標籤<frameset cols>，所以瀏覽器將畫面分割為左右兩邊，而又由於第二組框架標籤<frameset rows>，所以瀏覽器又將右邊的部分分割成上下兩塊。相信在這樣的說明後，各位應當對這種分割方式有了初步的了解。 再來我們來看看框架的名稱，我將這三個框架分別命名成『part1』、『part2』及『part3』。然而這有什麼用呢？相信各位一定都知道框架最神奇的地方就在於您按下左邊分割視窗的超連結後，其內容會出現在右邊的分割視窗中。然而這是如何做到的？而這就要借助於分割視窗的名稱了。不過各位又會好奇的問，那超連結的標籤該如何寫呢？我們以『進階frame架構』的圖為例，在圖中，若是我們想將左側視窗中「單元一」的內容（假設單元一所呈現的網頁為04.htm）顯示到右側的part2視窗中，那我們該如何做呢？其次方法很簡單，我們只要將下列的原始碼加到單元一即可。
超連結寫法：
<A Href="04.htm" target="part2"></A>
實際顯示效果： 檢視圖片
因此重點就在於要加上target="part2"這段控制碼。所以說為框架命名的妙用就在這，各位了解了吧！ 太好了！太偉大了！小弟終於把本單元完成了，寫的好累，說真的框架的概念很好懂，只是要用寫的方法來解釋就有些累，但希望各位能得到收穫，畢竟這才是小弟的目的。＃ |
|
|
參考資料
host.ymjhs.tyc.edu.tw/~microwei/instrrucdesign/frameinst.htm
檢視圖片 
留言列表
留言列表
