第07章 窗口框架.ppt

1、第7章 窗口框架,7.1 窗口框架簡介 7.2 窗口框架控制 7.3 定義窗口名稱 7.4 浮動窗口,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),7.1 窗口框架簡介,7.1.1 什么是窗口框架 7.1.2 窗口框架的基本結(jié)構(gòu) 7.1.3 窗口框架的分割方式,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),7.2.1 框架設(shè)置標簽frameset 7.2.2 子窗口設(shè)置標簽frame,7.2 窗口框架控制,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),7.1.1 什么是窗口框架,窗口框架可用于將窗口畫面分割成多個小窗口，且每個小窗口中，可以顯示不同的網(wǎng)頁，達到在瀏覽器中同時瀏覽不同網(wǎng)頁的效果。 當將瀏覽的畫面分

2、割成多個窗口后，各窗口將可以扮演不同的功能。因為有時候，希望把網(wǎng)頁做成：一個窗口顯示的是目錄，另一個窗口顯示的是所選取的項目內(nèi)容，這樣，目錄不變，項目之間的切換就會快多了。本章將解決這個問題，介紹幾個新的標簽，用它們書寫的HTML文件不但可以在一個屏幕上開多個窗口，而且可以在每個窗口上顯示不同的網(wǎng)頁內(nèi)容。這就是HTML中的窗口框架。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),在介紹窗口框架文檔之前，先來看看其應(yīng)用實例，有一個感性認識，見下圖。,7.1.2 窗口框架的基本結(jié)構(gòu),上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),圖中的網(wǎng)頁做成兩個窗口：一個窗口顯示的是目錄，另一個窗口顯示的是所選取的項目內(nèi)容。

3、 這就是所謂的窗口框架，窗口框架可以生成能獨立變化和滾動的窗口，從而能將一個窗口分割為若干個子窗口，在每個子窗口中顯示一個HTML文檔。 例：測試窗口框架文檔，效果如上圖。 文件ex7-01.html的源代碼 窗口框架文檔 ,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),現(xiàn)在，再來看看HTML是如何實現(xiàn)窗口框架文檔的?？蚣艿幕窘Y(jié)構(gòu)，主要利用標簽與標簽來定義。其中標簽用于定義一個窗口框架，標簽則用于定義窗口框架中的子窗口。 實際上，窗口框架文檔的書寫格式與一般的HTML文檔的書寫格式相同，只是用代替標簽，是一個成對標簽，有開始和結(jié)束標簽，在標簽內(nèi)使用了另一個標簽，用它來指定每一個窗口的內(nèi)容。,上一頁

4、,下一頁,目 錄,結(jié) 束,本 節(jié),窗口框架文檔HTML的結(jié)構(gòu)如下： ,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),7.1.3 窗口框架的分割方式,窗口框架的分割方式可分為兩種，一種是水平分割，另一種是垂直分割。至于采用哪種分割方式，則要通過標簽中的rows屬性（水平分割）和cols屬性（垂直分割）來設(shè)置。 在完成窗口畫面的分割后，就要控制每個分割出來的子窗口?？刂谱哟翱诘膶傩孕枰ㄟ^標簽，在標簽最重要的屬性為子窗口的名稱（name屬性）與要導(dǎo)入的HTML文件的來源（src屬性）。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),框架設(shè)置標簽標簽是成對出現(xiàn)標簽，首標簽和尾標簽之間的內(nèi)容就是使用框架的HTML

5、文檔主體部分。在使用框架的HTML文檔中不能出現(xiàn)標簽，否則會導(dǎo)致web瀏覽器忽略所有的框架定義而只顯示和之間的內(nèi)容。 標簽的作用是將窗口分割為若干個子窗口。 標簽主要有rows、cols、border、bordercolor和frameborder五個屬性。,7.2.1 框架設(shè)置標簽frameset,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),一、水平/垂直分割窗口屬性rows/cols 1格式： 2說明： rows后面的值，說明窗口橫向分隔情況，cols后面的值說明縱向分隔說明。 各參數(shù)值之間用逗號分隔，依次表示各個子窗口的高度（寬度）。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié), rows和co

6、ls可以用數(shù)字、百分比或剩余值以及這三種方式的混合來表示： 數(shù)字。表示子窗口高度（寬度）所占的像素點數(shù)。 百分比“%”。表示子窗口高度（寬度）占整個瀏覽器窗口高度（寬度）的百分比。 剩余值“*”。表示當前所有窗口設(shè)定之后的剩余部分。當符號*只出現(xiàn)一次，即其他子窗口的大小都有明確定義時，表示該子窗口的大小將根據(jù)瀏覽器窗口的大小而自動調(diào)整。當符號*出現(xiàn)一次以上時，表示按比例分割瀏覽器窗口的剩余空間。 例如，表示將瀏覽器窗口分割為3列，第一個子窗口在第一列，窗口寬度為整個瀏覽器窗口寬度的40%；第二個子窗口在第二列，占瀏覽器窗口剩余空間的2/3，即其寬度為整個瀏覽器窗口寬度的40%；第三個子窗口占剩

7、余空間的1/3，寬度為整個瀏覽器窗口寬度的20%。 再如在ex7-1.html的文件中，設(shè)置cols=179,*，表示縱向有兩個窗口，其中第一個寬度為179個像素點，剩余的是第二個窗口；沒有rows，說明用的是默認值，即橫向為一個窗口。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),二、設(shè)置窗口架框?qū)挾葘傩詁order 在標簽中，可運用border屬性控制分割窗口的框架的寬度，其語法如下所示： 其中的數(shù)值代表此窗口框架的寬度，單位為像素。 三、設(shè)置邊框顏色屬性bordercolor 在標簽中，可運用bordercolor屬性設(shè)置邊框的顏色，其語法如下所示： 其中的#代表此邊框的顏色，取值可為RGB代

8、碼。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),四、設(shè)置框架隱藏屬性frameborder frameborder屬性用于控制窗口框架四周，是否顯示框架。此屬性可使用在標簽與標簽中，使用在標簽內(nèi)時，可控制窗口框架的所有子窗口。使用在標簽時，則僅能控制該標簽所代表的子窗口，其語法為： 0代表不顯示框線，1代表顯示框線，其默認值為1。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),7.2.2 子窗口設(shè)置標簽frame,窗口框架建立起來后，應(yīng)在各個子窗口內(nèi)放入相應(yīng)的信息。子窗口的初始化是用標簽來描述的。屏幕上的每一個子窗口均對應(yīng)一個標簽。用標簽中的src屬性鏈接相應(yīng)的文件，該文件內(nèi)容就顯示在標簽對應(yīng)的窗口之

9、中，像在圖7-1中，ex7-01-1.html就放在左邊的窗口，ex7-01-2.html則放在右邊的窗口，其實現(xiàn)的代碼片段如下： ,是個單向的標簽，使用時，將它寫在 的開始和結(jié)束標簽之間，它主要有六個屬性：src、name、marginwidth、marginheight、scrolling和noresize。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1指定子窗口顯示網(wǎng)頁屬性src src屬性是用于指定要導(dǎo)入到某個子窗口的HTML文件的位置，其語法如下所示： 如果一個標簽中沒有src屬性，則該窗口顯示為空。 2定義子窗口名稱屬性name name屬性是用來指定窗口的名稱，此屬性是可選的。當完

10、成定義子窗口的名稱后，我們便可在超鏈接中，指定顯示網(wǎng)頁的子窗口。其語法如下所示： ,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),3控制框架滾動條屬性scrolling scrolling屬性用于描述該窗口是否設(shè)有滾動條。該屬性是可選的。其設(shè)置語法如下： 各設(shè)置值所代表的意義依序為顯示、不顯示、自動設(shè)置，默認值是auto。 4子窗口大小的調(diào)整屬性noresize noresize 屬性是一個標志，沒有取值。它說明瀏覽者是否可以自行用鼠標調(diào)整窗口的大小。如果設(shè)定了noresize屬性，則窗口不能調(diào)整。如果默認，則可以自行調(diào)整窗口的大小。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),5設(shè)置邊距屬性margi

11、nhaeght/marginheight marginwidth屬性用來控制窗口內(nèi)顯示的內(nèi)容與窗口左右邊緣的距離，該屬性是取一個像素值，默認為1，該屬性是可選的。 marginaheight屬性，用來控制窗口內(nèi)顯示的內(nèi)容與上下邊緣的距離，該屬性是取一個像素值，默認為1，該屬性是可選的。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),如果窗口中的內(nèi)容含有高亮度的鏈接，那么，當鼠標點了這個鏈接之后，被鏈接的內(nèi)容放在哪個窗口呢？我們來認識一個新的屬性targe ，用這個屬性就可以將被鏈接的內(nèi)容放置到你想要放的窗口內(nèi)。,7.3 定義窗口名稱,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),如在文件ex7-01.ht

12、ml中，放置文件的功能是由下面的代碼片段實現(xiàn)的： 在文件ex7-1-1.html中，放置文件的功能是由下面的代碼片段實現(xiàn)的： 1.春望 2.春曉 從上述代碼可以看出，ex7-1-1.html文件的內(nèi)容將在窗口“windows1”（左邊窗口）中顯示，ex7-1-2.html文件的內(nèi)容將右邊窗口顯示。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),在ex7-1-1.html文件中，當你單擊超級鏈接時，所鏈接的內(nèi)容都將在右邊窗口顯示。 用target屬性定義窗口的名稱，必須使用字母/數(shù)字字符，否則窗口名將被忽略。但是，有幾個特定的窗口名例外，這幾個窗口名有特殊含義，它們是_blank、_self、_parent和_top。 target=_blank 當將target屬性設(shè)置為_blank時，若單擊超鏈接后，將以打開另一窗口的方式顯示網(wǎng)頁。 target=_self 當將target屬性設(shè)置為_self時，則將在同一窗口中顯示鏈接的網(wǎng)頁。 target=_parent 當將target屬性設(shè)置為_parent時，若單擊超鏈接后，該鏈接網(wǎng)頁將導(dǎo)入目前子窗口的上一層