重要事項(xiàng):不能將 <frameset></frameset> 標(biāo)簽放在<body></body> 標(biāo)簽里。且 HTML5 已經(jīng)不支持 frameset 標(biāo)簽的使用!!!
創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、繁昌網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為繁昌等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。1、frameset 元素可定義一個(gè)框架集,它被用來(lái)組織多個(gè)窗口(框架)。每個(gè)框架存有獨(dú)立的文檔。配合<frame></frame>框架的使用,我們可以對(duì)頁(yè)面進(jìn)行分割,局部刷新。合理的使用會(huì)給用戶帶來(lái)非常好的體驗(yàn)效果。
2、frameset 的幾個(gè)屬性:
①、cols:定義框架集中列的數(shù)目和尺寸。垂直切割畫(huà)面(如分左右兩個(gè)畫(huà)面),接受整數(shù)值、百分?jǐn)?shù), * 則代表占用剩余的空間。數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且以逗號(hào)分隔。例如 COLS="30,*,50%" 可以切成三個(gè)視窗,第一個(gè)視窗是 30 pixels 的寬度,為一絕對(duì)分割,第二個(gè)視窗是當(dāng)分配完第一及第三個(gè)視窗后剩下的空間,第三個(gè)視窗則占整個(gè)視窗畫(huà)面的 50% 寬度為一相對(duì)分割。你可自己調(diào)整數(shù)字。
②、rows:定義框架集中行的數(shù)目和尺寸。這是橫向切割,將畫(huà)面上下分開(kāi),數(shù)值設(shè)定同上。 COLS 與 ROWS 兩參數(shù)盡量不要放在同一個(gè) 標(biāo)記中,因 Netacape 偶然不能顯示這類(lèi)型的框架,盡量采用多重分割。
③、frameborder:設(shè)定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。
④、border:設(shè)定框架的邊框厚度。
⑤、bordercolor:設(shè)定框架的邊框顏色。
⑥、framespacing:表示框架與框架間保留的空白的距離。
3、frame 標(biāo)簽的屬性:
①、name:設(shè)定框架名稱(chēng)。此為必須設(shè)置的屬性。
②、src:設(shè)定此框架要顯示的網(wǎng)頁(yè)名稱(chēng)或路徑。此為必須設(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
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就是一個(gè)空頁(yè)面,left.html如下:
1 <!-- 左邊菜單欄顯示-->2 <div >3 <ul >4 <li ><a href="taskCreate.html" target="right" id="taskCreat">任務(wù)創(chuàng)建</a></li>5 <li ><a href="taskManage.html" target="right">任務(wù)管理</a></li>6 <li ><a href="#" target="right" >數(shù)據(jù)集管理</a></li>7 <li ><a href="#" target="right" >模型管理</a></li>8 </ul>9 </div>
頁(yè)面的分層顯示,主要就是 frameset 標(biāo)簽中對(duì)于 cols 和 rows 的使用,在配合 frame 標(biāo)簽的嵌套。而想要達(dá)到點(diǎn)擊左邊的菜單欄,右邊的frame 相應(yīng)發(fā)生變化,那必須要認(rèn)識(shí)屬性
target:規(guī)定在何處打開(kāi)鏈接文檔。瀏覽器將會(huì)載入和顯示用這個(gè)標(biāo)簽的 href 屬性命名的、名稱(chēng)與這個(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),比如瀏覽器的后退按鈕是沒(méi)用的;會(huì)產(chǎn)生很多頁(yè)面,不易管理;代碼復(fù)雜,不易被搜索引擎搜索;小型移動(dòng)設(shè)備顯示不全;多框架的頁(yè)面會(huì)增加服務(wù)器 http 請(qǐng)求等等。所以對(duì)于 frameset 的使用我們需要慎重,而且現(xiàn)階段的 DIV+CSS 用來(lái)實(shí)現(xiàn)這個(gè)功能也是可以的。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
分享文章:frameset標(biāo)簽設(shè)計(jì)頁(yè)面-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://www.chinadenli.net/article26/cccpcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、服務(wù)器托管、企業(yè)建站、外貿(mào)建站、自適應(yīng)網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
網(wǎng)頁(yè)設(shè)計(jì)公司知識(shí)