多頁框網頁製作 

[請跟著做]
下面有三個實作的練習，我們的重點在於說明多頁框架的設計，所以以下的三個實作練習裡面，只提供框架設定部份的檔案原始碼，而不提供要載入框架內相對應網頁的原始碼，請分別製作 a.htm、b.htm 和 c.htm三個網頁並和下面的原始碼存放於同一個資料夾中以供載入框架中。然後將下列原始碼分別複製到記事本中並存成網頁。請將原始碼 1存成 index1.htm，原始碼 2存成 index2.htm，原始碼 3存成 index3.htm(當然可以存成其它檔名)。完成後以瀏覽器分別開啟 index1.htm、index2.htm和index3.htm看結果如何(我們只要啟動多頁框設定的網頁就可以了，不需要一個一個將個別的網頁開啟)。

原始碼 1 (index1.htm) 呈現結果
<HTML>
<HEAD>
<TITLE>頁框實作 1</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
　<FRAME SRC="a.htm" NAME="1"> 
　<FRAME SRC="b.htm" NAME="2"> 
</FRAMESET>
</HTML>
　

[解說]
<FRAMESET>這個標籤告訴瀏覽器準備做視窗分割了，如果是要將視窗左、右分，我們就用 COLS="左視窗寬度,右視窗寬度"作為FRAMESET的參數; 如果是要將視窗上、下分，我們就用 ROWS="上視窗高度,下視窗高度"作為FRAMESET的參數。本例中我們是左、右分，所以我們寫成。COLS="120,*" 就是說，左邊那一欄強制定為 120個像素，右邊則隨視窗大小而變。除了直接寫像數外，我們亦可用百分比來表示，例如COLS="20%,80%"。
<FRAME>標籤是要告訴瀏覽器哪個視窗要載入哪個網頁，順序上來說，先左後右或先上後下。如本例中，左視窗將載入a.htm，右視窗將載入b.htm。
在<FRAME>標籤中還有一個叫做 name的屬性，它是用來作頁框的身份辨識用的，本例中我們給左頁框取名為 1 ，右頁框取名為 2，如果我們在左頁框的網頁中有個超連結，並起希望點到這個超連結的時候，被連到的網頁能夠出現在右頁框中，我們就可以在左頁框網頁的超連結標籤中這麼寫 :
<a href="c.htm" target="2">xxx</a>
[ 看index1.htm實例的效果 ]

　
原始碼 2 (index2.htm) 呈現結果
<HTML>
<HEAD>
<TITLE>框窗實作 2</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
  <FRAME SRC="a.htm" NAME="1"> 
  <FRAMESET ROWS="100,*">
      <FRAME SRC="b.htm" NAME="2">
      <FRAME SRC="c.htm" NAME="3"> 
  </FRAMESET>
</FRAMESET>
</HTML>
　
1 2
3

[解說]
在這個例子裡出現了兩組<FRAMESET>，第一組的<FRAMESET>把第二組的<FRAMESET>包住了，表示瀏覽器先執行第一組的<FRAMESET>中的參數(先分割成1和2左、右兩個頁框並載入a.htm)，再執行第二組的<FRAMESET>(把右頁框再分割成2和3上、下兩個頁框並載入b.htm和c.htm)。請注意他們之間的巢狀結構。
[ 看index2.htm實例的效果 ]

　
原始碼 3 (index3.htm) 呈現結果
<HTML>
<HEAD>
<TITLE>框窗實作 3</TITLE>
</HEAD>
<FRAMESET ROWS="100,*">
  <FRAME SRC="a.htm" NAME="1"> 
  <FRAMESET COLS="120,*">
      <FRAME SRC="b.htm" NAME="2">
      <FRAME SRC="c.htm" NAME="3"> 
  </FRAMESET>
</FRAMESET>
</HTML>
　
1
2 3

[解說]
這個例子中先將視窗分割成上、下兩個頁框，然後再把下面那個頁框分成左、右兩個頁框。
[ 看index3.htm實例的效果 ]


其他屬性設定:
　
<FRAMESET COLS="120,*" frameborder=0 framespacing=5>

    　

  1. COLS="120,*"
    就是垂直切割畫面。你可以一次切成左右兩個畫面，當然也可以切成三個，很簡單只要寫成 COLS="30,*,50"（數字依自己的設計需要調整），*表示總長度被分配後剩下來的長度。

    　

  2. ROWS="120,*"
    就是橫向切割畫面，也就是將畫面上下分開，切法同上。

    　

  3. frameborder=0
    設定頁框的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。

    　

  4. framespacing=5
    表示頁框與頁框間的保留空白的距離，以免看起來太擠。
 　
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>

    　

  1. SRC="a.htm"
    設定此框中要顯示的網頁名稱，每個頁框一定要對應一個網頁，否則就會產生錯誤，這裡就是要您填入對應網頁的名稱。（如果該網頁在不同目錄，記得路徑要寫清楚）

    　

  2. NAME="1"
    設定這個頁框的名稱，這樣才能指定頁框來作連結，所以一定要設定喔！名稱自訂。

    　

  3. frameborder=0
    設定頁框的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。

    　

  4. scrolling="no"
    設定是否要顯示捲軸，YES是要顯示捲軸，NO是無論如何都不要顯示，AUTO是視情況顯示。

    　

  5. noresize
    設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。

    　

  6. marginhight=2
    表示頁框高度部份邊緣所保留的空間。

    　

  7. marginwidth=2
    表示框架寬度部份邊緣所保留的空間。
　

【其他標籤】

　

◆ <noframe>

    　

  1. 使用方法：<noframe>請換有支援Frame功能的瀏覽器</noframe>

    　

  2. 標籤解說：有些較為早期的瀏覽器無法顯示Frame的功能，因此，就要使用此標籤，讓這些網友知道，該換換瀏覽器了。或者，也可以在這標籤中，寫入沒有Frame語法的網頁標籤，那麼，沒有支援Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。

　

◆ target=頁框名稱

    　

  1. 使用方法：<A HREF="a.htm" target=2>顯示內容</A>

    　

  2. 標籤解說：在<FRAME>標籤中的name的屬性是用來作頁框的身份辨識用的，在index1.htm例中我們給左頁框取名為 1 ，右頁框取名為 2，如果我們在左頁框的網頁中有個超連結，並起希望點到這個超連結的時候，被連到的網頁能夠出現在右頁框中，我們就可以在左頁框網頁的超連結標籤中這麼寫 :
    <a href="homepage_builder.htm" target="2">網頁立即通</a>
　

　

◆ target=_top

    　

  1. 使用方法：<A HREF="homepage_builder.htm" target=_top>網頁立即通lt;/A>

    　

  2. 標籤解說：有時候，在框窗裡會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會吃上官司！所以，這時候加入target=_top這個參數就可以使新連到的網站脫離頁框而重新佔據整個螢幕。
　
　

分割視窗

所謂分割視窗即是將流覽視窗分割成數個範圍，每個範圍稱為一個 frame ，每個 frame 都有自己的名字，可以彼此互通也可以不相干擾。

分割視窗只有一個命令就是 <frameset> 不過有幾個附加指令可用，先來看看如何分割視窗。

<frameset>...</frameset>

frameset 不可以和 body.../body 同時存在，同時存在時那一個寫在前在前，哪一個生效。

水平分割視窗

<frameset rows=> - 決定上下共分為幾個視窗

垂直分割視窗

<frameset cols=> - 決定左右共分為幾個視窗

決定分割大小

這裡rows=和cols=填的不是分割數，而是直接填入每個分割視窗的大小，數值和數值之間用逗號隔開即可。

而填入的數字可為「點數」「百分比」「大小比」如：

<frameset rows=100,200,300> 固定大小為100點200點和300點 或

<frameset rows=20%,20%,60%> 注意總和等於100% 或

<frameset rows=1*,2*,3*> 使視窗依 1:2:3 的比例分割。三種寫法可同時存在如：

<frameset rows=20%,200,1*,1*> 此時瀏覽器會先分 200 點給第二個視窗，其餘的20% 給第一個視窗，剩下再 1:1 分配。

指定分割後視窗顯示的內容

分割完成視窗後要指定每個視窗所要顯示的內容，語法如：

<frame src=顯示的文件名稱> 您可以指定一份文件或一個圖案在視窗中，先看個例子

<title>Frame 實例</title>
<frameset cols=15%,50%,*>
　　 <frame src="h-1.html" name=f1>
　　 <frame src="h-2.html" name=f2>
　　 <frame src="h-3.html" name=f3>
</frameset>

行2 與行 6是成對的標籤，在之中宣告分割的個別內容。指定視窗分割為垂直三部分，比例為第一是整個視窗大小的 15%，第二部份指定大小為整個視窗的 50% ,剩下的則是第三部份的大小。行 3,4,5 則是指定每個分割出來的視窗顯示不同的文件。

視窗的巢狀結構

所謂巢狀結構，我想是翻譯來的名稱，事實下並沒有那麼複雜。只是要在視窗中再分割視窗的方法而己。 像是寫程式中的for...next中又有for..next一樣。 要注意的是順序。我們將上一個例子再加以修改： 　

我們將第一個視窗再分割成兩個視窗，同樣的第三個視窗也再分為兩個視窗，這樣的結構就稱為巢狀視窗結構。這種巢狀結構怎麼宣告呢?看底下的原始文件內容：

Line 1
Line 2
Line 3
Line 4
Line 5 
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12		 <title>Frame 實例</title>
<frameset cols=15%,50%,*>
　　 <frameset rows=30%,*> 
　　　　 <frame src="h-1.html" > 
　　　　 <frame src="h-2.html" > 
　　 </frameset> 
　　 <frame src="h-3.html"3> 
　　 <frameset rows=70%,*> 
　　　　 <frame src="h-4.html" > 
　　　　 <frame src="h-5.html" > 
　　 </frameset> 
</frameset>

行2 與行 12是成對的標籤，在之中宣告分割的個別內容。和先前不同的地方是原本指定第一個分割視窗的行3現在則擴張成為行3,4,5,6把原本指定顯示的文件內容指令改成了另一個分割視窗的指令。原本的行5也改成了行8,9,10,11分割視窗的指令。如此一來，就完成了所謂巢狀視窗的架構了。

指定新文件到分割的視窗

分割視窗有什麼好處呢?基本上，是否分割視窗視需求而定，一般而言，要是網站的設計之中有某些部份是每頁都必需顯示的，好比選單之類的，那麼使用分割視窗可以減少許多撰寫 HTML 文件的麻煩，因為同樣的選單部份不必每份文件都撰寫，像先前我們舉例的五子棋網站，在左下方的功能選單不而要隨著正中央棋局的改變而改變，左方是聊天室，聊天室中的資料也都隨時在更新，所以選單也不需要重新讀取一次，這麼一來，使用分割視窗可以讓整個製作變的簡單許多。接下來的問題是：如何能讓選單中的超連結顯示在指定的視窗中呢?

要解決這個問題，我們必需在宣告分割視窗時對每個視窗加以命名，然後在超連結時使用 target 標籤指定顯示文件的視窗名稱即可。如圖：

當我們按下左邊 h-1.html 的超連結，當然是希望 h-1.html 的內容會顯示在右邊的視窗中，這時我但要修正一下分割視窗的宣告，改成：

<title>Frame 實例</title>
<frameset cols=15%,*>
　　 <frame src="f-menu.html" name=menu>
　　 <frame src="f-main.html" name=main>
</frameset>

注意到我們在<frame src=文件名稱>之後多加了 name=menu 的參數，這個參數指定該視窗的名稱，一旦一個分割視窗指定了名稱之後，往後在使用超連結時，就能以名稱的方式指定文件顯示在該視窗，我們來看看 f-menu.html 的內容是怎麼寫的。

<a href=h-1.html target=main>h-1.html</a>
<a href=h-2.html target=main>h-2.html</a>
<a href=h-3.html target=main>h-3.html</a>
<a href=h-4.html target=main>h-4.html</a>
<a href=h-5.html target=main>h-5.html</a>

注意到了嗎，在超連結的指定上，我們多加了 target 標籤來指定文件顯示的視窗。

這裡要注意一個地方：如果超連結指定的 target 名稱不是分割視窗中宣告的視窗名稱時，那麼流覽器會新開一個視窗來代替。


HTML iframe 框架語法

HTML iframe 用來設定嵌入框架的應用，首先解釋一下什麼是 HTML 框架，簡單來說，框架可以想像為一個櫥窗，裡面可以放很多的東西，這個櫥窗就像是一個網頁的主體，裡面放的東西可稱為內置框架，這個概念應該蠻容易了解的，那假設我們現在要在一個沒有框架的網頁內某個區塊，採用框架的方式嵌入其他網頁的內容，這時候就可以使用 HTML iframe 來處理，常常見到的如部落格邊欄上用 iframe 嵌入許多外掛，或者是網站上用 iframe 嵌入 Facebook 的粉絲團，都是相當普遍的 HTML iframe 應用方式。

HTML iframe 語法
<iframe src="嵌入目標" width="寬度" height="高度" frameborder="邊框參數" scrolling="卷軸參數"></iframe>
HTML 的 iframe 有許多參數可以設定，最重要的就是 src 這個部分，嵌入目標就是要嵌入的網頁，少了這個部分，iframe 就等於沒有存在意義，嵌入的網頁可以是相同網域內的其他頁面，也可以是外部網頁。width 與 height 分別用來設定 iframe 所要占用的寬度與高度。第三個參數 frameborder 可以用來設定 iframe 的邊框是否要顯示，如果寫為 frameborder="0" 代表不顯示邊框，如果寫成 frameborder="1" 則代表要顯示邊框。最後 scrolling 用來控制 iframe 的卷軸是否要顯示，有三種屬性質可以設定，寫成 scrolling="yes" 代表要顯示捲軸、寫成 scrolling="no" 代表不顯示捲軸、寫成 scrolling="auto" 則代表根據網頁大小自動顯示。

HTML iframe 範例
<iframe src="嵌入目標" width="250px" height="300px" frameborder="0" scrolling="no"></iframe>
此範例的寬度與高度設定都是以 px 為單位，這也是大部分瀏覽器（browser）的預設值，px 有沒有寫通常沒有影響（建議還是寫出來比較不容易出錯），但如果採用百分比做為單位，就一定要寫出來，否則光寫數字會造成瀏覽器的誤判，以為是要以 px 為單位，再來「frameborder="0"」代表不顯示邊框、「scrolling="no"」代表不顯示卷軸，基本上 HTML iframe 的概念就這麼簡單。
　

點ifram中的連結如何讓主網頁也前往連結

假設有一個網頁 a.html，在裡面使用了一個 ifram

<iframe src="test.php"></iframe>

而這個 test.php 裡面有連結，一般來說點選連結之後會在 ifram 裡面呈現，如果希望點選連結後連 a.html 都轉向目標連結，這時候就可以使用 target='_parent' 這個標籤來做設定。

<a href='要前往的連結' target='_parent'>

如此一來點擊在 a.html 中 ifram 的連結，a.html 也會轉向目標連結囉！