1、實例版,第9章 框架的應(yīng)用,9.1 框架概述 9.2 框架的基本結(jié)構(gòu) 9.3 設(shè)置框架 9.4 設(shè)置框架集 9.5 浮動框架 9.6 在框架上建立鏈接 9.7 小實例框架的實際應(yīng)用 9.8 習(xí)題,9.1 框架概述,框架是一種在一個網(wǎng)頁中顯示多個網(wǎng)頁的技術(shù)，通過超鏈接可以為框架之間建立內(nèi)容之間的聯(lián)系，從而實現(xiàn)頁面導(dǎo)航的功能。 框架的作用主要是在一個瀏覽器窗口顯示多個網(wǎng)頁，每個區(qū)域顯示的網(wǎng)頁內(nèi)容也可以不同，它的這個特性在“廠”字型的網(wǎng)頁中使用極為廣泛。,9.1 框架概述,實例代碼,9.1 框架概述,實例代碼,9.2 框架的基本結(jié)構(gòu),基本語法：, 框架的基本結(jié)構(gòu) ,9.2 框架的基本結(jié)構(gòu),語法說明：

2、,在網(wǎng)頁文件中，使用框架集的頁面的標(biāo)記將被標(biāo)記替代，然后再利用標(biāo)記去定義框架結(jié)構(gòu)，常見的分割框架方式有：左右分割、上下分割、嵌套分割，后面的章節(jié)將會具體介紹。所謂嵌套分割是指在同一框架集中既有左右分割，又有上下分割，,9.3 設(shè)置框架,9.3.1 設(shè)置框架源文件屬性src 9.3.2 添加框架名稱name 9.3.3 設(shè)置框架邊框frameborder 9.3.4 顯示框架滾動條scrolling 9.3.5 調(diào)整框架尺寸noresize 9.3.6 設(shè)置框架邊緣寬度與高度marginwidth與marginheight 9.3.7 添加不支持框架標(biāo)記,9.3.1 設(shè)置框架源文件屬性src,基

3、本語法, ,9.3.1 設(shè)置框架源文件屬性src,語法說明,在HTML文件中，src用于設(shè)置框架加載文件的路徑。文件的路徑可以是相對路徑也可以是絕對路徑。,9.3.1 設(shè)置框架源文件屬性src,實例代碼,9.3.1 設(shè)置框架源文件屬性src,網(wǎng)頁效果,9.3.2 添加框架名稱name,基本語法, ,9.3.2 添加框架名稱name,語法說明,在HTML文件中，利用框架標(biāo)記中的name屬性給框架添加名稱，不會影響框架的顯示效果。,9.3.2 添加框架名稱name,實例代碼,9.3.2 添加框架名稱name,網(wǎng)頁效果,9.3.3 設(shè)置框架邊框frameborder,基本語法, ,9.3.3 設(shè)置框

4、架邊框frameborder,語法說明,在HTML文件中，利用框架標(biāo)記中的frameborder屬性設(shè)置框架顯示效果時，只能設(shè)置框架的邊框是否顯示，frameborder值為0時，不顯示邊框；frameborder值為1時，顯示邊框。,9.3.3 設(shè)置框架邊框frameborder,實例代碼,9.3.3 設(shè)置框架邊框frameborder,網(wǎng)頁效果,9.3.4 顯示框架滾動條scrolling,基本語法, ,9.3.4 顯示框架滾動條scrolling,語法說明,在HTML文件中，利用框架標(biāo)記中的scrolling屬性有三種方式設(shè)置滾動條： yes：添加滾動條 no：不添加滾動條 auto：自

5、動添加滾動條,9.3.4 顯示框架滾動條scrolling,實例代碼,9.3.4 顯示框架滾動條scrolling,網(wǎng)頁效果,9.3.5 調(diào)整框架尺寸noresize,基本語法, ,9.3.5 調(diào)整框架尺寸noresize,語法說明,在HTML文件中，利用框架標(biāo)記中的noresize屬性設(shè)置不允許改變左側(cè)框架的尺寸。,9.3.5 調(diào)整框架尺寸noresize,實例代碼,9.3.5 調(diào)整框架尺寸noresize,網(wǎng)頁效果,9.3.6 設(shè)置框架邊緣寬度與高度marginwidth與marginheight,基本語法,9.3.6 設(shè)置框架邊緣寬度與高度marginwidth與marginheight

6、,語法說明,在HTML文件中，利用框架標(biāo)記中的marginwidth和marginheight屬性設(shè)置不允許改變左側(cè)框架的尺寸。,9.3.6 設(shè)置框架邊緣寬度與高度marginwidth與marginheight,實例代碼,9.3.6 設(shè)置框架邊緣寬度與高度marginwidth與marginheight,網(wǎng)頁效果,9.3.7 添加不支持框架標(biāo)記,基本語法, 。 ,9.3.7 添加不支持框架標(biāo)記,語法說明,在HTML文件中，利用框架標(biāo)記中的屬性設(shè)置瀏覽器不支持框架時，顯示網(wǎng)頁文件的內(nèi)容。,9.3.7 添加不支持框架標(biāo)記,實例代碼,9.3.7 添加不支持框架標(biāo)記,網(wǎng)頁效果,9.4 設(shè)置框架集,表

7、9-1 框架集屬性,9.4 設(shè)置框架集,9.4.1 設(shè)置框架集邊框?qū)挾萬rmaspacing 9.4.2 設(shè)置框架集邊框顏色bordercolor 9.4.3 左右分割邊框cols 9.4.4 上下分割邊框rows,9.4.1 設(shè)置框架集邊框?qū)挾萬rmaspacing,基本語法, ,9.4.1 設(shè)置框架集邊框?qū)挾萬rmaspacing,語法說明,在HTML文件中，利用框架標(biāo)記中的frameborder屬性設(shè)置框架顯示效果時，只能設(shè)置框架的邊框是否顯示，frameborder值為0時，不顯示邊框；frameborder值為1時，顯示邊框。,9.4.1 設(shè)置框架集邊框?qū)挾萬rmaspacing,實

8、例代碼,9.4.1 設(shè)置框架集邊框?qū)挾萬rmaspacing,網(wǎng)頁效果,9.4.2 設(shè)置框架集邊框顏色bordercolor,基本語法, ,9.4.2 設(shè)置框架集邊框顏色bordercolor,語法說明,在HTML文件中，利用框架標(biāo)記中的bordercolor屬性設(shè)置框架邊框顏色，bordercolor后面的屬性值可以是表示顏色的英文單詞，也可以是十六進(jìn)制數(shù)（例：#0066ff）。,9.4.2 設(shè)置框架集邊框顏色bordercolor,實例代碼,9.4.2 設(shè)置框架集邊框顏色bordercolor,網(wǎng)頁效果,9.4.3 左右分割邊框cols,基本語法, ,9.4.3 左右分割邊框cols,語法

9、說明,在HTML文件中，利用cols屬性將網(wǎng)頁進(jìn)行左右分割，分割方式可以是百分比，也可以是具體的數(shù)值。,9.4.3 左右分割邊框cols,實例代碼,9.4.3 左右分割邊框cols,網(wǎng)頁效果,9.4.4 上下分割邊框rows,基本語法, ,9.4.4 上下分割邊框rows,語法說明,在HTML文件中，利用rows屬性可以將網(wǎng)頁上下分割，分割方式與左右分割方式相同。,9.4.4 上下分割邊框rows,實例代碼,9.4.4 上下分割邊框rows,網(wǎng)頁效果,9.4.4 上下分割邊框rows,網(wǎng)頁效果,9.5 浮動框架,表9-2 浮動框架屬性,9.5 浮動框架,9.5.1 設(shè)置浮動框架源文件屬性 9.

10、5.2 添加浮動框架名稱name 9.5.3 設(shè)置浮動框架的寬度和高度width和height 9.5.4 設(shè)置浮動框架的對齊方式align,9.5.1 設(shè)置浮動框架源文件屬性,基本語法, ,9.5.1 設(shè)置浮動框架源文件屬性,語法說明,在HTML文件中，src用于設(shè)置框架加載文件的路徑，文件的路徑可以是相對路徑也可以是絕對路徑。,9.5.1 設(shè)置浮動框架源文件屬性,實例代碼,9.5.1 設(shè)置浮動框架源文件屬性,網(wǎng)頁效果,9.5.2 添加浮動框架名稱name,基本語法, ,9.5.2 添加浮動框架名稱name,語法說明,在HTML文件中，利用框架標(biāo)記中的name屬性給框架添加名稱，不會影響框架

11、的顯示效果。,9.5.2 添加浮動框架名稱name,實例代碼,9.5.2 添加浮動框架名稱name,網(wǎng)頁效果,9.5.3 設(shè)置浮動框架的寬度和高度width和height,基本語法, ,9.5.3 設(shè)置浮動框架的寬度和高度width和height,語法說明,在HTML文件中，標(biāo)記中； width屬性可以設(shè)置浮動框架寬度； height屬性可以設(shè)定浮動框架的高度。,9.5.3 設(shè)置浮動框架的寬度和高度width和height,實例代碼,9.5.3 設(shè)置浮動框架的寬度和高度width和height,網(wǎng)頁效果,9.5.4 設(shè)置浮動框架的對齊方式align,基本語法, ,9.5.4 設(shè)置浮動框架的對齊

12、方式align,語法說明,在HTML文件中，利用浮動框架標(biāo)記中的align屬性設(shè)置浮動框架的對齊方式。 center：居中對齊； left：左對齊； right：右對齊。,9.5.4 設(shè)置浮動框架的對齊方式align,實例代碼,9.5.4 設(shè)置浮動框架的對齊方式align,網(wǎng)頁效果,9.6 在框架上建立鏈接,9.6.1 普通框架添加鏈接 9.6.2 浮動框架添加鏈接,9.6.1 普通框架添加鏈接,基本語法, ,9.6.1 普通框架添加鏈接,語法說明,利用標(biāo)記中的cols屬性進(jìn)行左右分割，左邊網(wǎng)頁文件來自于left.html，右邊網(wǎng)頁文件來自于right.html。,9.6.1 普通框架添加鏈接,實例代碼,9.6.1 普通框架添加鏈接,網(wǎng)頁效果,9.6.1 普通框架添加鏈接,實例代碼,9.6.1 普通框架添加鏈接,網(wǎng)頁效果,9.6.2 浮動框架添加鏈接,基本語法,9.6.2 浮動框架添加鏈接,語法說明,定義一個浮動框架，然后將網(wǎng)頁中需要顯示的內(nèi)容鏈接到浮動