第07章 窗口框架.ppt

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

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

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

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

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

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

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

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

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

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

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

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