利用frameset標(biāo)簽設(shè)計(jì)頁(yè)面方法介紹

1、frameset 元素可定義一個(gè)框架集，它被用來(lái)組織多個(gè)窗口（框架）。每個(gè)框架存有獨(dú)立的文檔。配合<frame></frame>框架的使用，我們可以對(duì)頁(yè)面進(jìn)行分割，局部刷新。合理的使用會(huì)給用戶帶來(lái)非常好的體驗(yàn)效果。

2、frameset 的幾個(gè)屬性：

①、cols:定義框架集中列的數(shù)目和尺寸。垂直切割畫面(如分左右兩個(gè)畫面)，接受整數(shù)值、百分?jǐn)?shù)， * 則代表占用剩余的空間。數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且以逗號(hào)分隔。例如 COLS="30,*,50%" 可以切成三個(gè)視窗，第一個(gè)視窗是 30 pixels 的寬度，為一絕對(duì)分割，第二個(gè)視窗是當(dāng)分配完第一及第三個(gè)視窗后剩下的空間，第三個(gè)視窗則占整個(gè)視窗畫面的 50% 寬度為一相對(duì)分割。你可自己調(diào)整數(shù)字。

②、rows:定義框架集中行的數(shù)目和尺寸。這是橫向切割，將畫面上下分開，數(shù)值設(shè)定同上。 COLS 與 ROWS 兩參數(shù)盡量不要放在同一個(gè) 標(biāo)記中，因 Netacape 偶然不能顯示這類型的框架，盡量采用多重分割。

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

④、border：設(shè)定框架的邊框厚度。

⑤、bordercolor：設(shè)定框架的邊框顏色。

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

3、frame 標(biāo)簽的屬性：

①、name：設(shè)定框架名稱。此為必須設(shè)置的屬性。

②、src：設(shè)定此框架要顯示的網(wǎng)頁(yè)名稱或路徑。此為必須設(shè)置的屬性。

③、scrolling：設(shè)定是否要顯示滾動(dòng)條。設(shè)定值為auto, yes, no。

④、bordercolor：設(shè)定框架的邊框顏色。

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

⑥、noresize：設(shè)定框架大小是否能手動(dòng)調(diào)節(jié)。

⑦、marginwidth：設(shè)定框架邊界和其中內(nèi)容之間的寬度。

⑧、marginhight：設(shè)定框架邊界和其中內(nèi)容之間的高度。

⑨、width：設(shè)定框架寬度。

⑩、height：設(shè)定框架高度。

4、frameset使用實(shí)例：

如果要實(shí)現(xiàn)下面的效果

頁(yè)面分為三部分，頂部，左邊和右邊。其中點(diǎn)擊左邊的超鏈接，右邊的框架頁(yè)面會(huì)相應(yīng)變化。

整體頁(yè)面：main.html

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

top.html,right.html就是一個(gè)空頁(yè)面，left.html如下：

<!-- 左邊菜單欄顯示-->
 <div >
 <ul >
 <li ><a href="taskCreate.html" target="right" id="taskCreat">任務(wù)創(chuàng)建</a></li>
 <li ><a href="taskManage.html" target="right">任務(wù)管理</a></li>
 <li ><a href="#" target="right" >數(shù)據(jù)集管理</a></li>
 <li ><a href="#" target="right" >模型管理</a></li>
 </ul>
 </div>

頁(yè)面的分層顯示，主要就是 frameset 標(biāo)簽中對(duì)于 cols 和 rows 的使用，在配合 frame 標(biāo)簽的嵌套。而想要達(dá)到點(diǎn)擊左邊的菜單欄，右邊的frame 相應(yīng)發(fā)生變化，那必須要認(rèn)識(shí)屬性

target:規(guī)定在何處打開鏈接文檔。瀏覽器將會(huì)載入和顯示用這個(gè)標(biāo)簽的 href 屬性命名的、名稱與這個(gè)目標(biāo)吻合的框架或者窗口中的文檔。即 main.html 中，<frame name="target值">,這里的 name 屬性值為多少，那么 left.html 中，<a target="name值"> 這里要相等。

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

即如何在 right.html 中獲取 left.html中<a></a>標(biāo)簽的屬性值等等

$(parent.parent.mainFrame.document).contents().find("body").html(); //manFrame指的是你想要查看的那個(gè)frame的id

比如上面的 left.html頁(yè)面中,任務(wù)創(chuàng)建的 ID 為 taskCreat，那么我們可以這樣獲取：并改變它的 class 屬性。

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

6、frameset 的優(yōu)缺點(diǎn)

我們知道，目前的 HTML5 標(biāo)準(zhǔn)已經(jīng)不支持 frameset 了，雖然使用它重載頁(yè)面時(shí)不需要重載整個(gè)頁(yè)面，只需要重載頁(yè)面中的一個(gè)框架頁(yè)(減少了數(shù)據(jù)的傳輸，加快了網(wǎng)頁(yè)下載速度)。但是它也有很多缺點(diǎn)，比如瀏覽器的后退按鈕是沒用的；會(huì)產(chǎn)生很多頁(yè)面，不易管理；代碼復(fù)雜，不易被搜索引擎搜索；小型移動(dòng)設(shè)備顯示不全；多框架的頁(yè)面會(huì)增加服務(wù)器 http 請(qǐng)求等等。所以對(duì)于 frameset 的使用我們需要慎重，而且現(xiàn)階段的 p+CSS 用來(lái)實(shí)現(xiàn)這個(gè)功能也是可以的。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com