多框架的设计.ppt

專業HTML網頁設計 陳錦輝 HTML/DHTML/CSS/JavaScript P303 第九章　多框架的設計 9.1 框架結構宣告 9.2 框架內容定義 9.3 巢狀框架 9.4 無框架結構 9.5 網頁DIY 9.1　框架結構宣告 框架(Frames)，它與由body所構成的HTML文件本體不太相同，由於每一個框架都是一個獨立的網頁(並可以透過超鏈結產生互動)，因此，當您需要在一個瀏覽器視窗中檢視多個HTML網頁時，就可以使用框架結構。 框架的宣告必須將body標籤去除，取而代之的是frameset標籤。 9.1　框架結構宣告 frameset標籤是用來宣告瀏覽器中的框架，也可以用來宣告框架中的框架(也就是構成巢狀框架)，單純的框架可以將視窗切割為上下或左右等多個框架，而巢狀框架則可以使得上下與左右框架同時存在。 frameset是用來宣告框架結構的HTML標籤，而針對每一個框架，則應該給予一個名字，以便當框架間產生互動時有所依據，宣告各框架的名字應該使用frame標籤的name屬性。 9.1　框架結構宣告 而frame為frameset的子標籤，換句話說，frame必須包含在frameset標籤之內。 frame標籤的src屬性是用來宣告該框架的內容來源，因此和img圖片標籤一樣，也是採用URL方式設定框架內容來源，若忽略此屬性，則該框架的內容將空無一物。而name標籤則是宣告框架名稱，若忽略此屬性，則該框架無法與其他框架取得互動依據。 rows屬性是用來宣告各水平框架的高度，設定方式有絕對設定與相對設定兩種，絕對設定以像素(Pixels)為單位。 範例9-1： 內容 執行結果 範例9-2： 內容 執行結果 9.1.1 frameset - rows屬性 cols屬性恰與rows屬性相反，是用來宣告各垂直框架的寬度，同樣具有絕對設定與相對設定兩種設定方式，絕對設定以像素(Pixels)為單位。 範例9-3： 內容 執行結果 範例9-4： 內容 執行結果 9.1.2 frameset - cols屬性 9.1.3 rows及cols屬性的特殊設定方法 當一個視窗中被切割為許多個框架時，通常只關心某一個最重要框架的高度或寬度是否足夠，其餘則按照剩餘比例分配即可。 為了避免網頁設計者計算的麻煩，rows與cols則設計了『*』表示法，用來自動計算框架寬度或高度。 rows與cols也支援倍數表示的相對設定，例如當指定3個框架的寬度為『cols=*,*,2*』，若瀏覽器寬度為800pixels，則3個框架的寬度將分別為『200,200,400』，因為『2*』將會代表平均分配基數的2倍。 9.1.4　frameset - border(frameborder)屬性 框架邊框的寬度可以透過border或frameborder屬性加以改變，一般網頁上常見無邊框的框架則是將border或frameborder設為0。 範例9-5： 內容 執行結果 frameset是用來宣告框架結構，而frame則是用來宣告每個框架的內容，諸如框架的內容來源、框架名稱等等都可以藉由frame的各種屬性來指定。 由於框架名稱的用途主要是用來提供框架互動的依據，因此，必須配合超鏈結使用才具有意義，在9.2.3節中，也將重新探討a標籤的target屬性。 9.2　框架內容定義 屬性 屬性值 功能說明 語法 src URL 設定框架來源 9.2.1 name 文字 設定框架名稱 9.2.2 9.2.3 marginwidth N個pixels 設定框架的文字與邊框水平距離 9.2.4 marginheight N個pixels 設定框架的文字與邊框垂直距離 scrolling yes、no、auto 設定框架的捲軸 9.2.5 noresize 無 強制設定框架的大小不可改變 9.2.6 frame屬性列表 9.2　框架內容定義 9.2.1 frame - src屬性 每個框架的內容都是一個獨立的HTML網頁，可以透過src屬性來指定該網頁來源，屬性值的設定則是URL格式。 範例9-6： 內容 執行結果 9.2.2 frame - name屬性 name屬性可以用來設定框架的名稱，設定框架名稱的主要目的是提供各框架間的互動依據，因此，必須配合超鏈結來使用才具有意義。 範例： 內容 執行結果 9.2.3 再談a - target屬性 在大多數的網站中常常可以發現到，當按下某個