學習誌

要分割視窗？用刀子割？當然不是，要將視窗分成數個窗框，請用frameset，因為用到了frameset，所以要用到Frameset這個DTD，而不是之前範例一直用到的Strict，Frameset中沒有定義body，也就是說，要用frameset取代body的位置；要指定每個窗框所顯示的內容，請用frame這個空元素。設定它的src為一個URI

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      分割視窗
    </title>
  </head>
  <frameset cols="50%,50%">
    <frame src="ex11sub1.htm" />
    <frame src="ex11sub2.htm" />
  </frameset>
</html>

以上的範例是將視窗分成左右兩個窗框，用frameset的cols可將視窗以垂直並排，cols的屬性值如果有n個逗號，就會有n+1個窗框。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      分割視窗
    </title>
  </head>
  <frameset rows="50%,50%">
    <frame src="ex11sub1.htm" />
    <frame src="ex11sub2.htm" />
  </frameset>
</html>

以上的範例是將視窗分成上下兩個窗框，用frameset的rows可將視窗以水平並排，rows的屬性值如果有n個逗號，就會有n+1個窗框。

cols和rows的屬性值，以逗號區隔每個窗框的大小，所謂大小是：
對cols而言是窗框的寬度；對rows而言是窗框的高度。

以下所謂視窗大小，對cols而言是視窗最大化時的寬度；對rows而言是視窗最大化時的高度。

窗框的大小有三種設定形式：n、n%、n*。

n	是指一個正整數，不帶有其他符號。
n%	是指一個正整數，加上百分比符號 % 。
n*	指一個正整數，加上星號 * 。

基本上，這三種設定形式可以混合，當你只使用一種時，瀏覽器會依比例分配窗框大小，如：
<frameset cols="20%,40%,60%,80%">、<frameset cols="150,300,450,600">、<frameset cols="1*,2*,3*,4*">都有一樣的效果。

當這三種設定混合在一起的時候，瀏覽器先計算所有 n 設定方式的總和，如果總和小於或等於視窗大小，以 n 設定方式的窗框的大小就是 n ，剩餘視窗大小為：原始視窗大小減去所有以 n 形式設定的窗框大小；如果總和大於視窗大小，就像只使用 n 形式時，瀏覽器會依比例分配窗框大小，剩餘視窗大小為零。

瀏覽器再計算所有 n% 設定方式的總百分比，如果視窗大小的總百分比小於或等於剩餘視窗大小，以 n% 設定方式的窗框的大小就是視窗大小的 n% ；如果視窗大小的總百分比大於剩餘視窗大小，就像只使用 n% 形式時，瀏覽器會將剩餘視窗大小依比例分配窗框大小。

在分配完以 n 和 n% 形式設定的窗框大小後，瀏覽器最後計算以 n* 形式設定的總和，將剩餘視窗大小依比例分配窗框大小。以 n* 形式表示的 1* 也可以只用 * 表示。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      分割視窗(假設螢幕解析度為1024*768)
    </title>
  </head>
  <frameset cols="*,40%,2*,768,*">
    <frame src="ex11sub1.htm" />
    <frame src="ex11sub2.htm" />
    <frame src="ex11sub3.htm" />
    <frame src="ex11sub4.htm" />
    <frame src="ex11sub5.htm" />
  </frameset>
</html>

以上的範例明明是要將視窗分成五個垂直並排的窗框，可是實際上，當視窗有 1024*768 的大小時，只看得到二個窗框，右邊的是寬度768的窗框，左邊是原本設定為40%的窗框，實際上卻只剩25%。

雖然只有看到二個窗框，但是瀏覽器仍然將視窗分成五個窗框，只是有三個窗框的大小為零，你可以用滑鼠拉動窗框的邊界，就會發現這個事實。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      分割視窗(假設螢幕解析度為1024*768)
    </title>
  </head>
  <frameset cols="*,*" rows="*,*">
    <frame src="ex11sub1.htm" />
    <frame src="ex11sub2.htm" />
    <frame src="ex11sub3.htm" />
    <frame src="ex11sub4.htm" />
  </frameset>
</html>

以上的範例說明：cols和rows可以同時使用，第一個窗框在左上角，第二個窗框在右上角，因為cols中有一個逗號，表示每一橫行有二個垂直並排的窗框，rows表示有二個水平並排的橫行，所以第三個窗框在左下角，也就是在第二橫行第一直列，最後一個窗框在右下角。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      分割視窗(假設螢幕解析度為1024*768)
    </title>
  </head>
  <frameset cols="20%,*">
    <frame src="ex11sub1.htm" />
    <frameset rows="10%,*">
      <frame src="ex11sub2.htm" />
      <frame src="ex11sub3.htm" />
    </frameset>
  </frameset>
</html>

以上的範例說明：<frameset> </frameset>內可以再夾<frameset> </frameset>而形成巢狀，當然也可以將各窗框內所指定為一個也是用Frameset這種DTD的網頁來達到同樣的效果，只是一般常用的是使用巢狀的frameset。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      分割視窗
    </title>
  </head>
  <frameset cols="20%,*">
    <frame src="ex1107.htm" />
    <frame src="ex1108.htm" id="main" name="main" />
  </frameset>
</html>

以上的範例說明如何做出像本文件一樣的窗框效果，在frame增加一個id，指定該窗框的名字，就可以用a的target指定目標網頁出現在那個窗框。雖然XHTML 1.0已經規定：a、form、frame、iframe、img、map這些元素的name都必須換成id才符合XHTML 1.0，但是有些瀏覽器尚未支援，為了相容性，就要id和name都要設定同樣的值。以下這個範例，是以上的範例左邊窗框所指定要被顯示的網頁。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
    </title>
  </head>
  <body>
    <ul>
      <li><a href="ex1108.htm" target="main">ex1108</a></li>
    </ul>
  </body>
</html>

要注意的是：當你使用a的target時，要用到Transitional這個DTD，因為a的target在Strict這個DTD沒有定義。以下這個範例，是上面一個的上面一個的範例的右邊窗框所指定要被顯示的網頁。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
    </title>
  </head>
  <body>
    <p>
      這是 ex1108.htm
    </p>
    <p>
      <a href="ex1108.htm" target="_top">取消分割視窗</a>
    </p>
    <p>
      <a href="ex1106.htm" target="_top">啟用分割視窗</a>
    </p>
  </body>
</html>

以上的範例，target的屬性值為_top，是表示超連結的目標網頁要顯示在整個瀏覽器視窗，因此可以做到取消分割視窗的效果。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
    </title>
  </head>
  <body>
    <p>
      <a href="ex1109.htm" target="_blank">開新視窗</a>
    </p>
  </body>
</html>

以上的範例，target的屬性值為_blank，是表示超連結的目標網頁要顯示在新的瀏覽器視窗，因此可以做到開新視窗的效果。