網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

HTML網頁製作:[14]創建框架鏈接

欄目: 學習交流 / 發佈於: / 人氣:2.91W

這篇是和我的HTML網頁製作系列的前兩篇掛鈎的。好吧,如果你還不知道什麼是框架,請看我的第12,13篇《HTML網頁製作》。

一.frameset的連接方法

(01)首先看下小編的目錄架構1.html將作為主頁面2.html將作為目錄頁面,裏面有2個目錄,分別是目錄一和目錄二3.html為目錄一將要鏈接的頁面4.html為目錄二將要鏈接的頁面

HTML網頁製作:[14]創建框架鏈接

(02)然後,看下1.html的代碼<frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="2.html" name="left"><frame src="3.html" name="right">其中,name的意思是,指定frame的名字,他有什麼用呢,看後面

HTML網頁製作:[14]創建框架鏈接 第2張

(03)再看2.html的代碼<ul><li><a href="3.html" target="right">目錄一</a></li><li><a href="4.html" target="right">目錄二</a></li></ul>我創建了一個列表,然後目錄一鏈接3.html,目錄二鏈接4.html。注意,有一個target的屬性,他的值就是上面frame的名字。意思是,點擊目錄一,將鏈接到3.html,然後將3.html顯示在frame的名字為right的框架中

HTML網頁製作:[14]創建框架鏈接 第3張

(04)再來看下3.html的代碼。沒什麼可説的,顯示幾個字而已

(05)再來看4.html的代碼,也沒什麼可説的

HTML網頁製作:[14]創建框架鏈接 第4張

(06)OK,來看1.html的網頁效果點擊目錄一,右側將顯示3.html的內容

HTML網頁製作:[14]創建框架鏈接 第5張

(07)點擊目錄二,右側將顯示4.html的內容

HTML網頁製作:[14]創建框架鏈接 第6張

二.iframe的連接方法

(01)這個和上面基本相同。我也不想多説什麼了。<iframe name="heihei" src="3.html"></iframe>語法就是這樣!在另外一個地方,用target鏈接這個名字,就可以了!

(02)OK,就是那麼簡單,當然,網頁做的很粗糙,代碼也未必符合規範,但是起到一個抱磚引玉的作用,先入門,然後再優化!