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"/>6         </frameset>7 </frameset>

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

1 <!-- 左边菜单栏显示-->2     <p >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>8         </ul>9     </p>

頁面的分層顯示，主要是 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 的優缺點

我們知道，目前的HTML5 標準已經不支援frameset 了，雖然使用它重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數據的傳輸，加快了網頁下載速度)。但它也有很多缺點，例如瀏覽器的後退按鈕是沒用的；會產生很多頁面，不易管理；程式碼複雜，不易被搜尋引擎搜尋；小型行動裝置顯示不全；多框架的頁面會增加伺服器http 請求等等。所以對於 frameset 的使用我們需要慎重，而且現階段的 p+CSS 用來實現這個功能也是可以的。

 

以上是frameset標籤設計頁面注意事項的詳細內容。更多資訊請關注PHP中文網其他相關文章！