frameset標籤設計頁面

重要事項：不能將標籤放在標籤裡。且 html5 已經不支援 frameset 標籤的使用！！！

1、frameset 元素可定義乙個框架集，它被用來組織多個視窗（框架）。每個框架存有獨立的文件。配合框架的使用，我們可以對頁面進行分割，區域性重新整理。合理的使用會給使用者帶來非常好的體驗效果。

2、frameset 的幾個屬性：

①、cols:定義框架集中列的數目和尺寸。垂直切割畫面(如分左右兩個畫面)，接受整數值、百分數， * 則代表占用剩餘的空間。數值的個數代表分成的視窗數目且以逗號分隔。例如 cols="30,*,50%" 可以切成三個視窗，第乙個視窗是 30 pixels 的寬度，為一絕對分割，第二個視窗是當分配完第一及第三個視窗後剩下的空間，第三個視窗則佔整個視窗畫面的 50% 寬度為一相對分割。你可自己調整數字。

②、rows:定義框架集中行的數目和尺寸。這是橫向切割，將畫面上下分開，數值設定同上。 cols 與 rows 兩引數盡量不要放在同乙個標記中，因 netacape 偶然不能顯示這型別的框架，盡量採用多重分割。

③、frameborder：設定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。

④、border：設定框架的邊框厚度。

⑤、bordercolor：設定框架的邊框顏色。

⑥、framespacing：表示框架與框架間保留的空白的距離。

3、frame 標籤的屬性：

①、name：設定框架名稱。此為必須設定的屬性。

②、src：設定此框架要顯示的網頁名稱或路徑。此為必須設定的屬性。

③、scrolling：設定是否要顯示滾動條。設定值為auto, yes, no。

④、bordercolor：設定框架的邊框顏色。

⑤、frameborder：設定是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框。

⑥、noresize：設定框架大小是否能手動調節。

⑦、marginwidth：設定框架邊界和其中內容之間的寬度。

⑧、marginhight：設定框架邊界和其中內容之間的高度。

⑨、width：設定框架寬度。

⑩、height：設定框架高度。

4、frameset使用例項：

如果要實現下面的效果

頁面分為三部分，頂部，左邊和右邊。其中點選左邊的超連結，右邊的框架頁面會相應變化。

整體頁面：main.html

1
<
frameset 
rows
="11%,*"
border
="1px"
framespacing
="0"
>
2<
frame 
src="top.html"
name
="top"
frameborder
="0"
/>
3<
frameset 
cols
="12%,*"
framespacing
="0"
framespacing
="0"
>
4<
frame 
src="left.html"
name
="left"
scrolling
="auto"
/>
5<
frame 
src="right.html"
name
="right"
scrolling
="auto"
/>
6frameset
>
7frameset
>

top.html,right.html就是乙個空頁面，left.html如下：

1
2<
div 
>
3<
ul >
4<
li ><
a href
="taskcreate.html"
target
="right" id="taskcreat">任務建立
a>
li>
5<
li ><
a href
="taskmanage.html"
target
="right"
>任務管理
a>
li>
6<
li ><
a href
="#"
target
="right"
>資料集管理
a>
li>
7<
li ><
a href
="#"
target
="right"
>模型管理
a>
li>8ul
>
9div
>

頁面的分層顯示，主要就是 frameset 標籤中對於 cols 和 rows 的使用，在配合 frame 標籤的巢狀。而想要達到點選左邊的選單欄，右邊的frame 相應發生變化，那必須要認識屬性

target:規定在何處開啟鏈結文件。瀏覽器將會載入和顯示用這個標籤的 href 屬性命名的、名稱與這個目標吻合的框架或者視窗中的文件。即 main.html 中，,這裡的 name 屬性值為多少，那麼 left.html 中，這裡要相等。

5、如何在子頁面中獲取父頁面所在的frameset中的其它的frame中的元素？

即如何在 right.html 中獲取 left.html中標籤的屬性值等等

$(parent.parent.mainframe.document).contents().find("body").html(); //manframe指的是你想要檢視的那個frame的id

比如上面的 left.html頁面中,任務建立的 id 為 taskcreat，那麼我們可以這樣獲取：並改變它的 class 屬性。

$(parent.parent.left.document).contents().find("#taskcreat").attr("class","list-group-item");

6、frameset 的優缺點

frameset標籤設計頁面

frameset標籤設計頁面

神奇的frameset標籤

frameset 頁面跳轉整理

frameset標籤設計頁面

frameset標籤設計頁面

神奇的frameset標籤

frameset 頁面跳轉整理

相關推薦