HTML網頁制作：[12]使用框架結構之frameset

首先，我希望在你的目錄下，有4個網頁，各自顯示不同的內容。

如圖所示：

1.html顯示“火影忍者”

2.html顯示“英雄聯盟”

3.html顯示“嵌入式開發、網頁開發、安卓開發”

4.html顯示“alsp”

 

OK，來介紹下frameset的語法

<frameset rows="第一個框架窗口的高度，第二個框架窗口的高度......"

  cols="第一個框架窗口的寬度，第二個框架窗口的寬度"......>

所謂框架集屬性frameset，其目的就是用來將網頁分成什么樣子。如圖所示，通過frameset將整個頁面分成三個部分：1）上面是頭部，用來放置logo等2）左側是目錄架構，用來放置目錄3）右側是要顯示內容懂了吧，frameset的作用，就是用來將整個頁面分成你想要的模塊和架構；

 

這里，又要提到一個窗口屬性，frame

用<frameset>將整個頁面分割成N個塊，而每一個塊，就是用frame來表示，其就是用來表示一個單獨的頁面。

其語法：

<frame src="頁面的源地址">

下面看例子。

 

 

<frameset rows="100,200,800" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

 

再來看一下效果圖

 

可以看到，整個頁面被分成了3分。

而用frame指定的頁面也顯示了出來。

其中，

frameborder:用來表示顯示邊框

framespacing:表示邊框的寬度

 

 

下面再來看一個例子：

<frameset cols="100,200,900" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

 

 

看效果圖，整個頁面也被分成了3分，但是，是橫向的。

 

再來看最后一個例子。

<frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="3.html"><frame src="4.html"></frame>

 

看效果圖

被分成了3分，但是和之前的都不一樣。

 

這里，rows="30%,*"的意思是，將頁面分成上部分30%,下部分用“*”表示為還沒有分配。

cols也是這個意思。

然后，通過frame將2.html頁面放在其中。

之后，再用frameset將下部分分成左右兩部分，放上3.html頁面和4.html頁面，就會出現上述的效果了