2012年10月26日 星期五

HTML Frame

HTML Frame

This document is copyrighted and provided as is. You are welcomed to use it for non-commercial purpose.

HTML 支援的框架總共有兩種，一種是 frameset + frame，另一種是 iframe， 他們的差別以及使用時機，我們會分別描述。首先，我們說明的是 frameset + frame。

frameset + frame

我們之前說的網頁（也可以說是沒有框架的網頁），其基本的網頁結構如下： 
  <html>
  <head>
  網頁標題
  </head>

  <body>
  網頁內容
  </body>
  </html>
也就是說"網頁內容"放置於 <body> 標籤內。可是框架的概念不同， 它基本上是將一個網頁 (web page) 分割成數個框架，這些框架定義在一個 <frameset> 的標籤內；而每一個框架的內容為一完整的 HTML 檔案。 如果一個網頁內須包含多個框架，則其網頁結構如下： 
  <html>
  <head>
  網頁標題
  </head>

  <frameset>
  放入框架 (即 <frame src="URL">)
  </frameset>

  <noframes>
  <body>
  對那些無法瀏覽 frame 的 browers 放一些資訊在這裡。
  </body>
  </noframes>
  </html>
  • 框架的組成元件:
    1. <frameset> </frameset>: 宣告一個框架集，內容可以包含多個 <frame>。
    2. <frame>: 宣告一個框架。
    3. <noframes> </noframes>: 提供資料給無法看框架的瀏覽器。
  • 第一個 Frame 網頁: 這個網頁包含兩個垂直 frames 且包含資訊與 links 給無法看框架的瀏覽器。 
    <html>
<head>
<title>Frame I</title>
</head>

<frameset cols="50%,50%">
<frame src="/~jlu/classes/examples/frame/f1.html">
<frame src="/~jlu/classes/examples/frame/f2.html">
</frameset>

<noframes>
<body>
This is a framed page. Please use a frame-capable browser to view this
page. This page is in fact contains two pages and they are:
<ul>
<li> <a href="/~jlu/classes/examples/frame/f1.html">Left Frame</a>
<li> <a href="/~jlu/classes/examples/frame/f2.html">Right Frame</a>
</ul>
</body>
</noframes>
</html>
  • 這裡還有一些例子.
  • <frameset> tag: 
    <frameset [cols/rows]="百分比/Pixels,百分比/Pixels, ...., *"
       border="數字" bordercolor="顏色" frameborder="yes/no">
  • <frame> tag: 
    <frame src="URL" width="百分比/Pixels" height="百分比/Pixels"
       scrolling="yes/no/auto" marginwidth="數字" marginheight="數字"
       name="名稱">
    "name" 是與 <a href="URL" target="名稱/_top/_self/_blank/_parent"> 合用. "_self" 會將 URL 的內容顯示在被點選的 Frame 中; "_top", "_blank", 與 "_parent" 會將 URL 的內容顯示在"原視窗上", "新視窗上", 與 "被點選的 Frame 的母視窗上".

iframe

iframe 可以把它解讀成內部框架（internal frame）；也可以簡單的說，它是 一個可以在傳統的 HTML 網頁內定義的框架。舉例來說，我們這個教學網頁，是一個 傳統的 HTML 網頁（沒有 frameset + frame），但是，如果我希望這個網頁內 能夠有如下的一個框架，我是沒有辦法使用 frameset + frame，而必須使用 <iframe> 標籤。
上述框架的原始碼如下： 
<iframe frameborder="1" width="640px" height="480px"
           src="html_basic.html">
這裡的文字只會出現在沒支援 iframe 的瀏覽器。
</iframe>
其中，frameborder 的值可以是 1 或者 0；width 和 height 代表框架的大小； src 代表該框架所顯示的內容是由該 URL 所載入的。 <iframe> 還有一些有用的屬性，我們將其條列如下：
  • name: 代表該框架的名稱；一般來說，會跟 <a target="框架名稱"> 合用。
  • scrolling: 它的值是用來設定這個框架有沒有捲動軸，其值可以是 yes, no, 或者 auto。




張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)