HTML基礎第七講---框架 http://www.wrclub.net/ 8/27/2002 網人俱樂部 | ||||||||||||||||||
| 框架（Frame）也就是所謂的分割窗口、分割畫面、框窗效果（還真是五花八門），這個技巧在運用上問題比較多，用的好的話，有助於網友快速且有條理的瀏覽網頁，整理不好的話，呵呵...那笑話可就鬧大了。 【框架的基本概念】 1. 首先，各位先看看右手邊這張圖，我們將利用這張圖來作解說，這樣子，講起來可能會清楚一點。 OK！我們可以看見，右邊的這個窗口，一共分爲 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？ 2. 原來，左下角的這個檔案 index.htm，就是要告訴計算機，我們要將畫面分割成這樣，也就是說，所有Frame的卷標，其實都只擺在 index.htm 這個檔案裏。（當然，不是檔名一定要叫做 index.htm 取其它檔名也是可以的。） 3. 這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴計算機要如何分割的。（也就是例中的 index.htm 檔啦！） 1. 別急、別急，分割窗口可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想象畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？
2. 各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>卷標給取代了！也就是說，如果我們要分割畫面，就要先用<FRAMESET>卷標告訴計算機說：『喂！我要開始分割了！』此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！ 3. 現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定爲 2 等一下還要分割呢！），如下圖：
5. 然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 2 和 3 了）。如下圖：
6. 看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！（亂七八糟了對不對？） 7. 呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最簡單的分割法，我們會再將一些進階的卷標在底下一一說明。 【其它卷標參數說明】 <FRAMESET COLS="120,*" frameborder=0 framespacing=5> 1. COLS="120,*" <FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2> 1. SRC="a.htm" 2. NAME="1" 3. frameborder=0 4. scrolling="no" 5. noresize 6. marginhight=2 7. marginwidth=2 【相關用法】 ◆ <noframe> 1. 使用方法：<noframe>請換有支持Frame功能的瀏覽器</noframe> 2. 卷標解說：有些瀏覽器較爲老舊，無法顯示Frame的功能，因此，就要使用此卷標，讓這些網友知道，該換換瀏覽器了。或者，你也可以在這卷標中，擺上沒有Frame語法的網頁卷標，那麼，沒有支持Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。 ◆ target=框窗名稱 1. 使用方法：<A HREF="d1-1.htm" target=3>顯示內容</A> 2. 卷標解說：常常有一個情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個圖），那應該如何寫呢？就像上面加個 target=框窗名稱 就行啦！ ◆ target=_top 1. 使用方法：<A HREF="http://www.wrclub.net" target=_top>網人俱樂部</A> 2. 卷標解說：有時候，在框窗裏會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會喫上官司說！所以，這時候你必需加入 target=_top這個參數，那麼，這個新連到的網站，就會重新佔據整個屏幕啦！ |
HTML基礎第七講---框架
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
前端生成海報圖技術選型與問題解決
作者：vivo 互聯網大前端團隊 - Tian Yuhan 本篇文章主要聚焦海報圖分享這個形式，探討純前端在H5&小程序內，合成海報到下載到本地、分享至社交平臺整個流程中可能遇到的問題，以及如何解決。