第7章 使用框架創(chuàng)建多頁面布局.ppt

1、第7章 使用框架創(chuàng)建多頁面布局,主要內(nèi)容,建立水平或垂直的框架分割窗口,用嵌套框架分割窗口,對滾動條進行控制,在空白窗口顯示網(wǎng)頁,在框架或浮動框架上進行鏈接,用嵌套框架分割窗口,7.1 框架簡介,7.1.1 框架 框架技術(shù)可以將瀏覽器分割成多個窗口，在各個窗口中，顯示不同的網(wǎng)頁，可以方便地在瀏覽器中瀏覽不同效果的網(wǎng)頁。 各窗口承擔(dān)不同的角色，實現(xiàn)不同的功能。 7.1.2 框架的基本結(jié)構(gòu) 框架的基本結(jié)構(gòu)主要分為框架和框架集兩個部分。 標(biāo)記用于定義框架。 標(biāo)記則用于定義框架集。,7.1.2 框架的基本結(jié)構(gòu), . . ,、用于定義框架集，書寫在與 之間，注意不可添加在與之間。 、用于描述具體的框架屬

2、性。 規(guī)范的XHTML需要書寫結(jié)束標(biāo)記。,7.2 利用框架分割窗口,常見的窗口分割方式： 水平分割 垂直分割 組合（嵌套）分割,7.2.1 窗口的水平分割,“rows”屬性可定義一個水平分割的窗口框架。 語法結(jié)構(gòu)： 語法說明 rows 屬性的值代表各子窗口的高度，第一子窗口高為“高度1”，第二子窗口高為“高度2”，“*”則代表值為其他窗口高度分配后剩余的高度。 高度數(shù)值設(shè)置： 1、采用整數(shù)設(shè)置，單位為像素（px），如： 2、用百分比設(shè)置，如：,7.2.1 窗口的水平分割,語法結(jié)構(gòu)： 語法說明 name 屬性的值代表各子窗口的別名，用于設(shè)定超鏈接目標(biāo)的顯示位置。 src 屬性的值是url地址，用

3、于指定該窗口中要顯示的具體網(wǎng)頁文件。,7.2.1 窗口的水平分割, 框架的水平分割 ,7.2.2 窗口的垂直分割,“cols”屬性可定義一個垂直分割的窗口框架。 語法結(jié)構(gòu)： 語法說明 cols 屬性的值代表各子窗口的寬度。,7.2.2 窗口的垂直分割, 框架的水平分割 ,7.2.3 窗口的嵌套分割,在實際應(yīng)用中，框架往往是水平、垂直分割的相互組合，需要對窗口進行嵌套分割。,7.2.3 窗口的嵌套分割, 嵌套分割 ,7.3 框架窗口的設(shè)置,邊框的邊線寬度； 邊框的邊線隱藏； 框架窗口的滾動條； 框架窗口的尺寸調(diào)整； 網(wǎng)頁內(nèi)容與框架邊框的邊距。,7.3 框架窗口的設(shè)置,7.3.1 邊框的邊線寬度

4、在標(biāo)記中，可運用border屬性控制分割窗口框架的邊框。 基本語法： 語法說明： n為整數(shù)，代表此窗口框架的寬度， 單位為像素(px)。,7.3 框架窗口的設(shè)置,7.3.2 邊框的邊線隱藏 frameborder屬性用于控制窗口框架的周圍是否顯示框架，可使用在標(biāo)記與標(biāo)記中。 使用在標(biāo)記內(nèi)時，可控制所有子窗口，使用在標(biāo)記中，只控制該標(biāo)記所代表的子窗口。 基本語法： 語法說明： 0表示不顯示邊框，1（默認(rèn)值）表示顯示邊框。,7.3 框架窗口的設(shè)置,7.3.3 框架窗口的滾動條 scrolling屬性用于控制窗口框架中是否顯示滾動條，使用此屬性，可以避免HTML文件因內(nèi)容過多而無法完全顯示。此屬性用

5、于標(biāo)記中。 基本語法： 語法說明： yes表示為顯示滾動條 no表示不顯示滾動條 auto為自動設(shè)置,7.3 框架窗口的設(shè)置,7.3.4 框架窗口的尺寸調(diào)整 將鼠標(biāo)指針移到要更改的框架上，待指針呈現(xiàn)雙箭頭符號時，再用鼠標(biāo)進行拖拽，可框架調(diào)整窗口的大小。 當(dāng)不希望用戶能隨意地改變子窗口的大小時，可以在標(biāo)記中，添加noresize屬性， 基本語法： ,7.3 框架窗口的設(shè)置,7.3.5 網(wǎng)頁內(nèi)容與框架邊框的間距 利用標(biāo)記中的marginwidth屬性來設(shè)置框架左右邊緣的寬度；marginheight屬性可以設(shè)置框架上下邊緣的寬度。 基本語法： ,7.4 浮動（嵌入式）框架,不對窗口做整體分割，根據(jù)

6、需要在網(wǎng)頁中嵌入的子窗口，稱為“浮動（嵌入式）框架”。 插入浮動框架要使用成對的標(biāo)記。 基本語法： 語法說明： 浮動框架可以包含在標(biāo)記中。 詳細(xì)屬性見教材表7-1。,7.4 浮動（嵌入式）框架,Name= 給框架命名 Src= 當(dāng)前框架所鏈接的頁面地址 Frameborder= 邊框是否顯示，“1”顯示邊框（默認(rèn)值為），“0”不顯示 Marginwidth= 框架邊框與內(nèi)容左右間距 Marginheight= 框架邊框與內(nèi)容左右間距 Scrolling= 滾動條，有3個值：auto自動，yes 總是顯示，no 不顯示 align= 對齊方式 (可設(shè)置6個方向位置) width= 寬度設(shè)置（水平方向） height= 高度設(shè)置（垂直方向） Noresize 浮動框架大小不可變,小結(jié),本章主要介紹了兩種框架方式：一種是分割窗口式，一種是嵌入式，兩種框架的