HTML 中的框架語法有兩種
1. FRAMESET+FRAME
2. IFRAME
第一種是比較早期就有的, 第二種是後來才有的, 這兩種語法陸續我都會講到, 下面我先來說說 FRAMESET+FRAME 的用法
早期的框架語法是由兩種標籤所組成的, FRAMESET 標籤主要是用來劃分框架區域, 每一個區域再對應一個 FRAME 標籤, 而 FRAME 標籤主要則是用來設定該框架所要載入的網頁
FRAMESET 是利用 rows 與 cols 兩個屬性來設定如何劃分框架區域, rows 是用來劃分由上到下的多個區域, 屬性值即是各區域的高度, 用逗號隔開, 高度的單位可以是 px (像素), 或 % (佔整個螢幕高度的多少百分比), 或者用 * 來代表剩餘的高度；同理 cols 則是用來劃分由左到右的多個區域, 屬性值即是各區域的寬度, 兩個屬性不可同時使用在同一個 FRAMESET 標籤上
下面直接用一個簡單的例子來說明
在上例中, FRAMESET 標籤的 rows 屬性值是由逗號所串接起來的三個高度值, 用來劃分由上到下的三個區域, 第一個框架的高度為 200px, 第二個框架的高度為整個螢幕高度的一半(50%), 第三個框架的高度則是整個螢幕的高度扣掉上面兩個框架高度後所剩下來的高度
由於在 rows 屬性中指定劃分了三個區域, 所以 FRAMESET 標籤內就要配合三個 FRAME 標籤, 而每一個 FRAME 標籤會有一個 src 屬性, 用來設定這個框架所要載入的網頁(在上例中, src 屬性都是故意不設值, 讓執行畫面分區清楚一點)
同理, 我們也可以用 cols 屬性來劃分由左到右的數個框架區域, 如下例
在上面有提到過, rows 與 cols 兩個屬性不可同時使用, 那若要劃分一個像下面這種區域的框架, 那該怎麼做呢
其實概念很簡單, 只要先將整個畫面劃分成左右兩塊, 再將右邊那一塊再劃分成上下兩塊即可, 實際的語法如下
綠色字部份的 FRAMESET 標籤是用來劃分左右兩個區塊, 原本在這個 FRAMESET 標籤內要有兩個 FRAME 標籤, 但因為我們要對此區塊再分割, 所以直接用 FRAMESET 標籤來替換 FRAME 標籤, 也就是黃色字部份的 FRAMESET 標籤, 如此就可以將右邊的區塊再分成上下兩塊
利用此原理, 我們就能有很多的變化, 但建議不要分得太複雜, 區塊大小要適當, 最重要的是依實際內容的需要來分
另外, 我們可以在上面各例中發現, 在劃分了區塊後, 各區塊會有框線, 若是覺得框線不美觀, 則可以利用 frameborder 屬性來取消框線, 在 FRAMESET 與 FRAME 兩個標籤中都有這個屬性, 設在 FRAME 標籤時, 只會影響該框架, 而設在 FRAMESET 標籤時, 則會影響由這個 FRAMESET 所劃分出來的所有框架, 例如
在使用這種框架語法時要注意一點, 這種語法一定要寫在 HEAD 標籤內, 並且其他寫在 BODY 標籤的內容都不會被呈現出來, 所以一般都要寫一支網頁單純用來劃分框架, 其他內容則要寫在其他的網頁, 再用框架載入, 如此在排版上就會有一些限制及不便, 例如若因某種特殊原因, 希望像下例在畫面中分兩個如紅框位置的框架, 以載入其他網頁
用上述的 FRAMESET+FRAME 就很難做, 真要做的話, 可能要像下圖所示般地劃分成 9 個框架區域, 才能在上面希望的位置上劃分出一個框架, 如此就變成要寫很多的網頁
不過現在有另一個框架語法改善了這種缺點, 也就是我下一篇所要講的 IFRAME
--gs--
{HTML基礎教學}{框架|FRAME|IFRAME}
1. FRAMESET+FRAME
2. IFRAME
第一種是比較早期就有的, 第二種是後來才有的, 這兩種語法陸續我都會講到, 下面我先來說說 FRAMESET+FRAME 的用法
早期的框架語法是由兩種標籤所組成的, FRAMESET 標籤主要是用來劃分框架區域, 每一個區域再對應一個 FRAME 標籤, 而 FRAME 標籤主要則是用來設定該框架所要載入的網頁
FRAMESET 是利用 rows 與 cols 兩個屬性來設定如何劃分框架區域, rows 是用來劃分由上到下的多個區域, 屬性值即是各區域的高度, 用逗號隔開, 高度的單位可以是 px (像素), 或 % (佔整個螢幕高度的多少百分比), 或者用 * 來代表剩餘的高度；同理 cols 則是用來劃分由左到右的多個區域, 屬性值即是各區域的寬度, 兩個屬性不可同時使用在同一個 FRAMESET 標籤上
下面直接用一個簡單的例子來說明
<HTML>
<HEAD>
<FRAMESET rows="200px,50%,*">
<FRAME src=""/>
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</HEAD>
</HTML>
<HEAD>
<FRAMESET rows="200px,50%,*">
<FRAME src=""/>
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</HEAD>
</HTML>
在上例中, FRAMESET 標籤的 rows 屬性值是由逗號所串接起來的三個高度值, 用來劃分由上到下的三個區域, 第一個框架的高度為 200px, 第二個框架的高度為整個螢幕高度的一半(50%), 第三個框架的高度則是整個螢幕的高度扣掉上面兩個框架高度後所剩下來的高度
由於在 rows 屬性中指定劃分了三個區域, 所以 FRAMESET 標籤內就要配合三個 FRAME 標籤, 而每一個 FRAME 標籤會有一個 src 屬性, 用來設定這個框架所要載入的網頁(在上例中, src 屬性都是故意不設值, 讓執行畫面分區清楚一點)
同理, 我們也可以用 cols 屬性來劃分由左到右的數個框架區域, 如下例
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</HEAD>
</HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</HEAD>
</HTML>
在上面有提到過, rows 與 cols 兩個屬性不可同時使用, 那若要劃分一個像下面這種區域的框架, 那該怎麼做呢
其實概念很簡單, 只要先將整個畫面劃分成左右兩塊, 再將右邊那一塊再劃分成上下兩塊即可, 實際的語法如下
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src=""/>
<FRAMESET rows="30%,*">
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src=""/>
<FRAMESET rows="30%,*">
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
綠色字部份的 FRAMESET 標籤是用來劃分左右兩個區塊, 原本在這個 FRAMESET 標籤內要有兩個 FRAME 標籤, 但因為我們要對此區塊再分割, 所以直接用 FRAMESET 標籤來替換 FRAME 標籤, 也就是黃色字部份的 FRAMESET 標籤, 如此就可以將右邊的區塊再分成上下兩塊
利用此原理, 我們就能有很多的變化, 但建議不要分得太複雜, 區塊大小要適當, 最重要的是依實際內容的需要來分
另外, 我們可以在上面各例中發現, 在劃分了區塊後, 各區塊會有框線, 若是覺得框線不美觀, 則可以利用 frameborder 屬性來取消框線, 在 FRAMESET 與 FRAME 兩個標籤中都有這個屬性, 設在 FRAME 標籤時, 只會影響該框架, 而設在 FRAMESET 標籤時, 則會影響由這個 FRAMESET 所劃分出來的所有框架, 例如
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAMESET rows="30%,*">
<FRAME frameborder="0" src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAMESET rows="30%,*">
<FRAME frameborder="0" src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
<HTML>
<HEAD>
<FRAMESET cols="30%,*" frameborder="0">
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAMESET rows="30%,*">
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
<HEAD>
<FRAMESET cols="30%,*" frameborder="0">
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAMESET rows="30%,*">
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
<FRAME src="http://images.look.urs.tw/images/s4.php?BlogID=54432"/>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
在使用這種框架語法時要注意一點, 這種語法一定要寫在 HEAD 標籤內, 並且其他寫在 BODY 標籤的內容都不會被呈現出來, 所以一般都要寫一支網頁單純用來劃分框架, 其他內容則要寫在其他的網頁, 再用框架載入, 如此在排版上就會有一些限制及不便, 例如若因某種特殊原因, 希望像下例在畫面中分兩個如紅框位置的框架, 以載入其他網頁
用上述的 FRAMESET+FRAME 就很難做, 真要做的話, 可能要像下圖所示般地劃分成 9 個框架區域, 才能在上面希望的位置上劃分出一個框架, 如此就變成要寫很多的網頁
| 1 | ||||
| 2 | 3 | 4 | ||
| 5 | ||||
| 6 | 7 | 8 | ||
| 9 | ||||
不過現在有另一個框架語法改善了這種缺點, 也就是我下一篇所要講的 IFRAME
--gs--
{HTML基礎教學}{框架|FRAME|IFRAME}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
14 意見:
不好意思~請問一下~~
DIV裡可以放上這個框架嗎.....
不行哦，若想在 DIV 內放框架，應該改用 iframe，可參考
HTML基礎教學(16)--框架(IFRAME)
我有個問題...請幫忙...我一直都解決不到...
我想問當我寫左個frameset 時候, 我依照你教的那個方法..但我一直display 到我要的東西, 是否我做錯了什麼, 我想問如果我要插入的那個frame 是否都要打入其他呢?
< src="\websitebannercols"/>
< src="\website\openingpagecols"/>
您好，這麼晚還沒睡，看來這個問題真的很困擾您唷 ^_^
不過，我看不太懂您的問題耶 ^_^"
因為有太多不能夠display 在bolg 到...唔知點講好....個問題就是...如果我用左frameset 是用cols 分左2個界面...但左同右我都display 任何東西...可唔可以在frameset 在教多小小...例如..只是在local 機上是否打條path 上去...另外要插入那個介面..是否又要打什麼path...我想了一個星期多....找書看看不明白..又沒有人可以幫到我....如果可以找到個聊天地方幫下我嗎?? 十分感謝回覆
我很樂意幫您，不過可否請您將您的基本frameset語法及各頁面位置貼上來，因為您的用語我看不太懂。
您似乎是這樣分
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src=""/>
<FRAME src=""/>
</FRAMESET>
</HEAD>
</HTML>
如果上面語法是寫在 1.html
左邊的frame是想顯示同資料夾的 2.html
右邊的frame是想顯示同資料夾的 3.html
那麼就是這樣寫
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src="2.html"/>
<FRAME src="3.html"/>
</FRAMESET>
</HEAD>
</HTML>
您上一次留言有提到要
< src="\websitebannercols"/>
< src="\website\openingpagecols"/>
不過您並沒有指明要顯示哪個檔案
所以您也許可以這樣寫
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src="/websitebannercols/a.html"/>
<FRAME src="/website/openingpagecols/b.html"/>
</FRAMESET>
</HEAD>
</HTML>
要注意 src 值若是用 / 開頭，表示它位於網站根目錄
以本Blog為例，若是這樣寫，那左邊會顯示下面這個網頁
http://enjoywebtech.blogspot.tw/websitebannercols/a.html
如果您不是在網站上執行，而是在本機直接點開 html
那麼 / 開頭就會表示它位於磁碟機根目錄，例如
D:/websitebannercols/a.html
謝謝你的幫忙....其實我是有打到html...不過唔比我在這裡display 出來.我會try...我想問多樣...你指到a.html (a <-----是指什麼) 另外那個(/) 是右到左..定左到右....因為在path display 出來是從左到右...但見到的是從右到左...不過我2樣都會try...謝謝
a.html只是一個範例的檔名，請改成您自己的檔名
在網址上，一般都是用 /，而若是本機資料夾路徑，win是用 \ (也可接受 /)，Linux 則是用 /
謝謝...但是我已經嘗試個那個問題...但是都依然看不多那個insert page...可以怎樣send 2個file 給你看是什麼問題嗎...我的mail 是jerry1306@hotmail.com...如果可以請回覆...謝謝!
您好，不好意思哦，目前不做email交流
在留言裡要打 HTML，請將 < 號改為 <，這樣就能顯示了
我已經嘗試過, 其實同你在上面打都一樣, 沒有不同, "src =\website\bannercols.<" (bannercols 是我save 的檔名...)
您說「bannercols 是我save 的檔名」？沒有副檔名嗎？若有，則這裡要寫哦，例如
src="/website/bannercols.html"
不過，我還是再提醒您注意一下檔案位置
這樣問好了，您目前寫這些 frameset 內容的網頁，也就是用分切 frame 的網頁，網址是什麼？
如果 domain 不方便說，就用 localhost 代表即可，請給完整的網址，也就是從 http 開始
再來，您要放到 frame 中的網頁，單獨執行的網址是什麼？
任何一個網頁都能直接用瀏覽器打上它的網址來瀏覽，所以我要先知道它單獨執行的網址是什麼？
我沒有用到網址...只是用local 機...在local drive 開了一個folder 叫wesite, 寫了那個html 叫bannercols.html 就沒有其他了...
如果您要用到 frameset，表示您至少想要切分成2個區塊，所以至少也會有兩個網頁檔案來讓這兩個區塊載入，先假設它們為 bannercols.html 及 other.html。
另外要使用 frameset 語法，則需要要有另一個 html 檔，專門用來寫 frameset 語法的，它是不會有 body 內容的，也就是您不能將它跟其他實際要呈現的內容寫在一起，先假設它為 index.html
所以以上會有三個檔案，請按照這樣準備這三個檔案，並放在同一個資料夾中，也就是放在您的 website 資料夾中，不要放在其他地方，也不要放在 website 資料夾的子資料夾中
請先不要做任何的變化，先完全按照我說的來做
準備好後，index.html 的內容請寫
<HTML>
<HEAD>
<FRAMESET cols="30%,*">
<FRAME src="bannercols.html"/>
<FRAME src="other.html"/>
</FRAMESET>
</HEAD>
</HTML>
而 bannercols.html 的內容則寫
<HTML>
<BODY>
I am bannercols.html
</BODY>
</HTML>
以及 other.html 的內容則寫
<HTML>
<BODY>
I am other.html
</BODY>
</HTML>
然後用瀏覽器開啟 index.html，這樣應該就會看到結果了，也就是畫面的左邊會顯示 I am bannercols.html，右邊則會顯示 I am other.html
如果以上沒有問題，您再去做您自己的變化
如果您想要將 frame 跟您實際要呈現的內容寫在同一個檔案，那麼請參考「HTML基礎教學(16)--框架(IFRAME)」
張貼留言
廣告訊息會被我刪除