HTML高階標籤(2)————視窗分幀(2)————後臺管理頁面
阿新 • • 發佈:2019-01-24
使用frameset進行視窗分幀,構建簡易的後臺頁面。這篇部落格就作為一個簡易後臺管理頁面的實戰演練。
1 首先,需要一個頁面,使用<frameset>按比例劃分為適合的三個區域:頭部,選單,主體。
<frameset>不能放在<body>中編寫。
給每一個<frame>進行命名,便於後面連結時target屬性可以直接指向指定位置。
程式碼如下(檔名自定義,我寫的是 frameset.html):
<html> <head> <title>後臺管理頁面</title> </head> <frameset rows="100,*"> <frame src="head.html" name="top"> <frameset cols="180,*"> <frame src="menu.html" name="left" noresize scrolling="no"> <frame src="main.html" name="right"> </frameset> </frameset> </html>
2我們需要在三個幀中指定不同的URL,需要編寫幾個html檔案:head.html; menu.html; menu1.html; menu2.html; menu3.html; menu4.html; main.html
head.html:
四個選項,每個選項鍊接到不同的選單,target指向選單位於的窗體。
<center><h3>後臺管理頁面頭部</h3></center><br> <a href="menu1.html" target="left">第一項</a> <a href="menu2.html" target="left">第二項</a> <a href="menu3.html" target="left">第三項</a> <a href="menu4.html" target="left">第四項</a>
menu.html:
九個選項,每個選項鍊接到不同的的內容,target指向主體位於的窗體。
由於所使用的方法與頭部連結選單時的完全相同,故URL就均為空,不一一編寫了。
<center><h2>選單部分</h2></center>
menu1.html:
<center><h2>選單部分1</h2></center> <a href="" target="right">第一頁</a><br> <a href="" target="right">第二頁</a><br> <a href="" target="right">第三頁</a><br> <a href="" target="right">第四頁</a><br> <a href="" target="right">第五頁</a><br> <a href="" target="right">第六頁</a><br> <a href="" target="right">第七頁</a><br> <a href="" target="right">第八頁</a><br> <a href="" target="right">第九頁</a><br>
menu2.html:
<center><h2>選單部分2</h2></center>
<a href="" target="right">第一頁</a><br>
<a href="" target="right">第二頁</a><br>
<a href="" target="right">第三頁</a><br>
<a href="" target="right">第四頁</a><br>
<a href="" target="right">第五頁</a><br>
<a href="" target="right">第六頁</a><br>
<a href="" target="right">第七頁</a><br>
<a href="" target="right">第八頁</a><br>
<a href="" target="right">第九頁</a><br>
menu3.html:
<center><h2>選單部分3</h2></center>
<a href="" target="right">第一頁</a><br>
<a href="" target="right">第二頁</a><br>
<a href="" target="right">第三頁</a><br>
<a href="" target="right">第四頁</a><br>
<a href="" target="right">第五頁</a><br>
<a href="" target="right">第六頁</a><br>
<a href="" target="right">第七頁</a><br>
<a href="" target="right">第八頁</a><br>
<a href="" target="right">第九頁</a><br>
menu4.html:
<center><h2>選單部分1</h2></center>
<a href="" target="right">第一頁</a><br>
<a href="" target="right">第二頁</a><br>
<a href="" target="right">第三頁</a><br>
<a href="" target="right">第四頁</a><br>
<a href="" target="right">第五頁</a><br>
<a href="" target="right">第六頁</a><br>
<a href="" target="right">第七頁</a><br>
<a href="" target="right">第八頁</a><br>
<a href="" target="right">第九頁</a><br>
main.html:
<center><h1>主體內容部分</h1></center>
編寫好所有檔案之後,儲存在相同的目錄下面。開啟frameset.html檔案,就可以看到如下效果:
點選頭部第二項後:
好了,一個後臺最基本的功能也就實現了。若編寫出現bug,請耐心除錯。