靜態(tài)網(wǎng)頁制作教程第十章頁面的分框顯示

1、如果要做一個(gè)很大的頁面，所有的頁面元素不可能放在一個(gè)頁面中，這樣讓人總有種凌亂和沒有層次的感覺，而如果將不同的內(nèi)容放在不同的窗體中，效果會(huì)如何呢？另外，在某些時(shí)候，當(dāng)我們需要將幾個(gè)文檔進(jìn)行比較時(shí)，總是很煩于在幾個(gè)窗口之間換來換去，如果將其放置于同一個(gè)大窗口的幾欄中進(jìn)行直接比較，就很方便了。如果要做到這一效果，我們必須使用框架技術(shù)。框架將畫面分成數(shù)個(gè)小窗口，而各個(gè)小窗口中，又可以顯示不同的頁面，達(dá)到在瀏覽器中同時(shí)瀏覽不同網(wǎng)頁的效果。當(dāng)用戶將一個(gè)瀏覽器畫面分割成數(shù)個(gè)窗口后，各窗口將扮演不同的功能。舉例來說，分割后的窗口，可以運(yùn)用其中一個(gè)作為主要顯示網(wǎng)頁內(nèi)容的主畫面，而另一個(gè)則作為菜單，控制主畫面中

2、顯示的網(wǎng)頁。這樣的設(shè)計(jì)顯然比起單一個(gè)窗口的網(wǎng)頁設(shè)計(jì)來得人性化，用戶也可以在數(shù)個(gè)網(wǎng)頁間任意切換。將整個(gè)瀏覽器分割的窗口框架，主要利用標(biāo)記和標(biāo)記來定義。其中標(biāo)記用于定義一個(gè)窗口框架組件，而標(biāo)記用于定義窗口框架中某個(gè)子窗口組件。因此，一組窗口框架的標(biāo)準(zhǔn)格式如下：但是注意，有標(biāo)記所定義的窗口框架組件，相當(dāng)于標(biāo)記所定義的文件主題組件，因此標(biāo)記不可包含在標(biāo)記中，否則，標(biāo)記將會(huì)無法正常作用。因此，運(yùn)用標(biāo)記建立窗口框架時(shí)，僅可包含于標(biāo)記中。而用于定義窗口的標(biāo)記，并沒有結(jié)束標(biāo)記，該標(biāo)記的使用方式，僅為在標(biāo)記中通過各種屬性的設(shè)定，以控制所代表的窗口框。1.標(biāo)記2.標(biāo)記3.創(chuàng)建一個(gè)簡單的框架4.框架的特殊效果標(biāo)記的

3、屬性有：1.Cols屬性cols=像素值以像素值表示此框架的寬度?；颍篊ols=n%N為整數(shù)，表示將所列頁面按縱向窗口排列，各個(gè)窗口按所設(shè)定的百分之n比例在頁面上排列。2.Rows屬性與cols的用法完全一致，有兩種方式表示。Rows=像素值以像素值表示此框架的高度。Rows=n%N為整數(shù)，表示將所列頁面按橫向窗口排列，各個(gè)窗口按所設(shè)定的百分之n比例在頁面上排列。3.Bordercolor屬性Bordercolor=#rrggbb屬于窗口的外部屬性，表示窗口框架的顏色。其中顏色設(shè)置與以前學(xué)習(xí)的設(shè)置方法一樣。4.Framespacing屬性Framespacing=nN為整數(shù)，屬于窗口的外部屬性

4、，表示所以窗口的邊界所設(shè)定的整數(shù)（即n）個(gè)空白間隔符。使用標(biāo)記的屬性值，可以將窗口橫向分成幾部分，也可以縱向分成幾部分，還可以混合分框。1.Name屬性Name是一個(gè)可選項(xiàng)，它給框架指定一個(gè)名字，使得框架能被其他的文檔或鏈接所使用。所有的名字都必須由一個(gè)字母或數(shù)字開始。另外，也可以設(shè)置成下述名字：Blank：總是將這個(gè)鏈接載入新的未命名的窗口Self：總是將這個(gè)鏈接載入它自身。parent：總是將這個(gè)鏈接載入到它的父窗口，若沒有父窗口，則載入其自身。top：通常裝載這個(gè)鏈接到最高水平，若已在最高水平，則裝載到它自身。2.Marginwidth屬性Marginwidth=n（n為整數(shù)）3.Mar

5、ginheight屬性Marginheight=n（n為整數(shù)）窗口的內(nèi)部屬性，與marginwidth一樣，只是它控制的是框架上、下的頁邊距。4.Frameborder屬性Frameborder=yes/no屬性窗口的內(nèi)部屬性，表示窗口是否需要邊框（1為yes，0為no）。5.Scrolling屬性Scrooling=yes/no/auto屬于窗口的內(nèi)部屬性，表示窗口是否需要滾動(dòng)條（默認(rèn)為auto）。當(dāng)設(shè)置為yes時(shí)，表示框架始終都有滾動(dòng)條，值no則表明不要滾動(dòng)條，而值auto則意味著當(dāng)需要時(shí)自動(dòng)添上滾動(dòng)條。6.Noresize屬性如果此屬性出現(xiàn)在標(biāo)記語句中，那么用戶將不可能再改變框架的大小。

6、如果缺省，則框架的大小可以改變。橫向分框顯示效果混合分框顯示效果以混合框架為例，創(chuàng)建框架的一般步驟1.為各個(gè)窗口框架準(zhǔn)備好要顯示的頁面2.創(chuàng)建框架集文件實(shí)例：1.html1.去掉框架使用target可以建立一個(gè)從某個(gè)框架到一個(gè)框架上的頁的鏈接。此屬性附屬于標(biāo)記。其中target是一個(gè)框架的名字（像在標(biāo)記中使用的name屬性一樣），或者可以設(shè)置成如下表中的值。值值意義意義_top使用使用href中指定的中指定的url裝載入整個(gè)瀏覽器窗口，因而將去掉任何框架裝載入整個(gè)瀏覽器窗口，因而將去掉任何框架_parent使用使用href中指定的中指定的url裝載入框架集的父框架中裝載入框架集的父框架中_se

7、lf使用使用href中指定的中指定的url裝載到當(dāng)前窗口裝載到當(dāng)前窗口_blank使用使用href中指定的中指定的url裝載入一個(gè)新的未命名的瀏覽器窗口裝載入一個(gè)新的未命名的瀏覽器窗口建立從框架到不在框架的文檔上的鏈接的一般步驟：1.建立一個(gè)包含框架的文檔。2.在其中的框架中加入標(biāo)記3.設(shè)置target屬性。顯示文本4.保存文檔查看效果實(shí)例：1.html2.使用一個(gè)框架索引另一個(gè)顯示詳細(xì)信息的框架在上面創(chuàng)建一個(gè)簡單框架的實(shí)例中，我們學(xué)習(xí)了將web頁分成3部分的技術(shù)。平時(shí)我們常常能看到一些網(wǎng)頁使用框架將瀏覽器分成兩部分，其中一部分包含一個(gè)索引或一張表，給養(yǎng)護(hù)一些選項(xiàng)，另一部分則根據(jù)用戶在前一部分

8、的選擇顯示相應(yīng)的信息。實(shí)例：2.html（本例采用最簡單的兩個(gè)框架的布局，左邊的框架擁有一個(gè)索引，右邊的框架則是顯示用戶在左邊框架中選擇的結(jié)果）3.如何在頁面中建立一個(gè)浮動(dòng)的框架所謂浮動(dòng)的框架，就是能像對(duì)待一個(gè)圖像一樣去對(duì)待框架，即可以將之內(nèi)嵌到文檔中去。在html中，這是通過標(biāo)記來實(shí)現(xiàn)的。當(dāng)瀏覽器遇到一組標(biāo)記時(shí)，它建立一個(gè)框架并將src中指定的文件裝載到框架中。標(biāo)記的屬性如下：Align=left|center|rightFrameborder=1|0(1表示有邊框)height、width、marginheight、marginwidth、name=“在target要用的名字”、src=“url”Scrolling=“yes|no”實(shí)例：iframe.html(使用iframe)4.框架邊框的控制對(duì)于框架邊界而言，既可