HTML网页制作:[12]使用框架结构之frameset
框架--網頁設計中常用的技術,用來讓一個瀏覽器同時顯示多個超文本。下面,小編將用文字、圖像以及具體的代碼,教大家如何制作一個使用了frameset的網頁。
好吧,雖然frameset已經不太流行了,不過會了總是沒有壞處的。小編會在該系列經驗的后續介紹更多的流行的知識。
工具/原料
- 一臺電腦
- TXT或者DW
步驟
首先,我希望在你的目錄下,有4個網頁,各自顯示不同的內容。
如圖所示:
1.html顯示“火影忍者”
2.html顯示“英雄聯盟”
3.html顯示“嵌入式開發、網頁開發、安卓開發”
4.html顯示“alsp”
OK,來介紹下frameset的語法
<frameset rows="第一個框架窗口的高度,第二個框架窗口的高度......"
? cols="第一個框架窗口的寬度,第二個框架窗口的寬度"......>
所謂框架集屬性frameset,其目的就是用來將網頁分成什么樣子。如圖所示,通過frameset將整個頁面分成三個部分:1)上面是頭部,用來放置logo等2)左側是目錄架構,用來放置目錄3)右側是要顯示內容懂了吧,frameset的作用,就是用來將整個頁面分成你想要的模塊和架構;
這里,又要提到一個窗口屬性,frame
用<frameset>將整個頁面分割成N個塊,而每一個塊,就是用frame來表示,其就是用來表示一個單獨的頁面。
其語法:
<frame src="頁面的源地址">
下面看例子。
<frameset rows="100,200,800" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>
再來看一下效果圖
可以看到,整個頁面被分成了3分。
而用frame指定的頁面也顯示了出來。
其中,
frameborder:用來表示顯示邊框
framespacing:表示邊框的寬度
下面再來看一個例子:
<frameset cols="100,200,900" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>
看效果圖,整個頁面也被分成了3分,但是,是橫向的。
再來看最后一個例子。
<frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="3.html"><frame src="4.html"></frame>
看效果圖
被分成了3分,但是和之前的都不一樣。
這里,rows="30%,*"的意思是,將頁面分成上部分30%,下部分用“*”表示為還沒有分配。
cols也是這個意思。
然后,通過frame將2.html頁面放在其中。
之后,再用frameset將下部分分成左右兩部分,放上3.html頁面和4.html頁面,就會出現上述的效果了
OK,到這里還沒有結束。如何實現左側添加目錄,在右側顯示不同的網頁內容呢?請關注小編之后的經驗吧。
總結
以上是生活随笔為你收集整理的HTML网页制作:[12]使用框架结构之frameset的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML frameset 标签
- 下一篇: HTML IFRAME 用法小总结