架構頁有Frame、Iframe、Frameset 3個標記，初學者容易將三者混淆，下面分別講解三者的區別。
10.4.1 Frameset與Frame的區別
首先講解Frameset與Frame之間的區別。
<Frameset></Frameset>用來劃分架構，每一個架構由<Frame></Frame>標記。<Frame></Frame>必須在<Frameset></Frameset>之內使用，代碼如下：
<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>
<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">
<FRAME src="inc/admin_center.htm" name=main scrolling="no">
</FRAMESET>
在上面的例子當中，<Frameset></Frameset>把頁面分為左右兩個部分，左側架構中的頁面是admin_left.htm，右側架構中的頁面是admin_center.htm。
注意：<Frame></Frame>標記的架構順序為從左至右或從上到下。
兩者的差別如下：
● <Frameset>為架構標記，說明該網頁文檔為架構組成，並設定文檔中組成框架組的架構的布局。
● <Frame>用以設定組成框架組中各個架構的屬性。
10.4.2 Frameset參數設定
<Frameset>需要設定一些特定的參數，這些參數直接決定了整個頁面的布局，代碼如下：
<Frameset border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>
關於上段代碼的各項參數設定及其含義如表10.3所示。
表10.3 Frameset參數
參 數 |
說 明 |
Border |
設定架構的邊框厚度，以pixels為單位 |
frameborder |
設定是否顯示架構的邊框，0為不顯示，1為顯示 |
FrameSpacing |
表示架構與架構之間的距離 |
BorderColor |
設定架構的邊框顏色 |
Row |
將文檔分為上下的架構，Row後的值可以為數值或百分數，*表示佔用餘下的空間，數值的個數代表水平分成的架構個數，例如Rows=“210,*,10%”，表示頁面分為上中下三個架構頁，上邊的架構佔用210px，下邊的架構佔用整個文檔的10%，餘下的空間為中間的架構佔用。*是一個相對的概念，例如Row=*，表示頁面中沒有上下結構的架構布局 |
Cols |
設定同Row |
關於Frame參數的設定，代碼如下：
如表10.4所示。
表10.4 Frame參數
參 數 |
說 明 |
Name |
設定架構的名稱，須為英文 |
Src |
設定架構中顯示的頁面路徑和名稱，可為相對路徑亦可為絕對路徑 |
Marginwidth |
表示架構距離左右邊緣的距離 |
Marginheight |
表示架構距離上下邊緣的距離 |
Scrollling |
設定是否在架構中顯示捲軸，yes為顯示，no為不顯示，auto表示當架構頁中內容超過架構的大小時自動顯示捲軸 |
Frameborder |
設定是否顯示架構的邊框，0為不顯示，1為顯示 |
Noresize |
設定是否可以讓使用者改變這個架構的大小，不設定此項可以讓瀏覽者任意拉動架構，改變架構的大小 |
Framespacing |
表示架構與架構之間的距離 |
Bordercolor |
設定架構的邊框顏色 |
Frame與Iframe兩者可以實現的功能基本相同，不過Iframe比Frame具有更多的靈活性。
Iframe標記又叫浮動幀標記，可以用它將一個HTML文檔嵌入在一個HTML中顯示。它和Frame標記的最大區別是在網頁中嵌入的<Iframe></Iframe>所包含的內容與整個頁面是一個整體，而<Frame></Frame>所包含的內容是一個獨立的個體，是可以獨立顯示的。另外，應用Iframe還可以在同一個頁面中多次顯示同一內容，而不必重複這段內容的代碼。
10.21所示的頁面就是應用Iframe在頁面上下各建立了分頁的連結，上下的代碼是一樣的，只需在網頁中嵌入同一個檔案即可，不需要重複代碼的編寫，本案例的實際效果參看配書光碟片中的案例/frame/iframe/see_infomore_iframe.htm。
10.4.5 設定Iframe透明Iframe還有一個更大的好處，就是可以設定架構透明，讓架構內的背景和首頁面背景一樣。在上例操作中，細心的讀者會發現這個問題，下面來詳細說明如何設定Iframe透明。具體操作步驟如下：
（1）開啟配書光碟片中的案例/frame/iframe/see_infomore_iframe1.htm。
（2）在瀏覽器中瀏覽該頁檔案，發現在插入Iframe的地區將原來儲存格的背景覆蓋了，這不是想要的效果。
（3）開啟page.htm頁面，切換到程式碼檢視，在<body>標記中插入代碼如下：
<body style="background-color=transparent">
圖10.21 應用Iframe建立翻頁
（4）切換see_infomore_iframe1.htm到程式碼檢視，查看頁面插入Iframe的儲存格的代碼如下：
<td height="30" colspan="4" >
<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm"></iframe>
</td>
（5）在<Iframe>標記中，
<frame name="left" src=" index_manager/admin_left.htm " marginwidth="1" marginheight="1" scrolling="no" frameborder="1" noresize framespacing="2" bordercolor="#cc0000">
上段代碼的各項參數設定及其含義
allowTransparency="true"
（6）此時插入Iframe的儲存格代碼如下：
<td height="30" colspan="4" >
<iframe name="main" width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>
（7）儲存page.htm和see_infomore_iframe1.htm兩個頁面，在瀏覽器中瀏覽效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
