HTML 中框架、層的運用
本章目標：掌握框架結構<frameset><frame><iframe>
掌握組織元素：span和div
本章重點：框架結構<frameset><frame><iframe>
本章難點：框架的搭建
一、 框架
使用框架，可以在一個瀏覽器窗口中顯示不止一個HTML文檔。這樣的HTML文檔被稱為框架頁面，它們是相互獨立的。：
使用框架的不利因素有：
- 網站開發者需要關心更多HTML文檔的情況。
- 打印整個頁面變得困難。
frameset標簽：
- <frameset>標簽定義了如何將窗口拆分成框架。
- 每個frameset標簽定義了一組行和列。
- 行/列的值指明了每個行/列在屏幕上所占的大小
frame標簽：
- <frame>標簽定義了每個框架中放入什麽文件。
下面這個例子中，有一個兩列的分欄。第一個被設置成窗口寬度的25％，第二個被設置成窗口寬度的75％。頁面“frame_a.htm”被放在第一個分欄中，“frame_b.htm”被放在第二個分欄中。
基本註意點——有用的技巧：
假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。如果不想讓用戶改變大小，可以在<frame>標簽中加入：noresize="noresize"。
給不支持框架的瀏覽器寫上<noframes>標簽。
更多示例：
混合框架：
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>
這個例子說明了怎樣把三個頁面以行列混合的方式放在框架中。
使用了noresize="noresize"的框架：
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
這個例子說明了noresize屬性。這個框架是不可改變大小的，把鼠標移動到框架邊界上，你會發現無法調整大小。
導航框架：
<html>
<frameset cols="120,*">
<frame src="frame_link.htm">
<frame src="frame_a.htm" name="showframe">
</frameset>
</html>
這個例子說明了如何創建一個導航框架。導航框架包含了一系列鏈接，它們的目標頁面在第二個框架中。文件“frame_links.htm”包含了三個鏈接，鏈接的代碼如下：
內聯框架：
<html>
<body>
<iframe src="intro.htm"></iframe>
<p>Some older browsers don‘t support iframes.</p>
<p>If they don‘t, the iframe will not be visible.</p>
</body>
</html>
這個例子說明了如何創建一個內聯框架（包含在HTML頁面裏的框架）。
在框架內跳轉到指定章節：
<html>
<frameset cols="30%,70%">
<frame src="frame_a.htm">
<frame src="frame_section.htm#C10">
</frameset>
</html>
這個例子顯示了兩個框架頁。其中一個的源是一個文件的指定章節，該章節在文件“frame_section.htm”中使用代碼<a name="C10">指定。
使用導航框架跳轉到指定章節：
<html>
<frameset cols="200,*">
<frame src="frame_linksection.htm">
<frame src="frame_section.htm" name="showframe">
</frameset>
</html>
這個例子顯示了兩個框架頁。左邊的導航框架包含了一系列以第二個框架為目標的鏈接（“frame_linksection.htm”），第二個框架顯示鏈接文件（“frame_section.htm”）。導航框架中的一個鏈接指向目標文件中的指定章節。文件“frame_link”中的HTML代碼是像這樣的：
二、 組織元素：span和div
span和div元素用於組織和結構化文檔，並經常聯合class和id屬性一起使用。
用span組織元素：
span元素可以說是一種中性元素，因為它不對文檔本身添加任何東西。但是與CSS結合使用的話，span可以對文檔中的部分文本增添視覺效果。
讓我們用一句本傑明·弗蘭克林（Benjamin Franklin）的名言來舉個例子：
假設我們想用紅色來強調弗蘭克林先生所認為的“不要在睡眠中度過一天”的好處，我們可以用<span>標簽來標記上述每一點好處。然後，我們將這幾個span設置為相同的class。這樣，我們稍後就可以在樣式表裏針對這個class定義特定的樣式。
相應的CSS代碼如下：
用div組織元素：
如前面例子所示，span的使用局限在一個塊元素內，而div可以被用來組織一個或多個塊元素。
除去這點區別，div和span在組織元素方面相差無幾。讓我們來看一個例子。
HTML 中框架、層的運用