新編-第12章-使用框架結(jié)構(gòu)-精品課件

1、第12章 使用框架結(jié)構(gòu)1HTML標(biāo)準(zhǔn)教程本章目標(biāo)：什么是框架框架集標(biāo)記框架標(biāo)記不支持框架標(biāo)記浮動框架框架與鏈接HTML標(biāo)準(zhǔn)教程12.1 什么是框架1、作用： 就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。2、目的：創(chuàng)建頁面導(dǎo)航。HTML標(biāo)準(zhǔn)教程 框架主要包括兩部分，一個是框架集，另一個就是框架。 框架集：就是在一個文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁?？蚣芗x了在一個窗口中顯示的框架數(shù)、框架的尺寸、載入到框架的網(wǎng)頁等。 框架：就是指在網(wǎng)頁上定義的一個顯示區(qū)域。12.2 框架集標(biāo)記HTML標(biāo)準(zhǔn)教程 基本框架代碼 頁面代碼：HTML標(biāo)準(zhǔn)教程1、左右分割窗口2、上下分割窗口3、

2、嵌套分割窗口框架的分割方式HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： value為定義各個框架的寬度值，單位可以是像素，也可以是百分比。 3、文件范例：12-1.htm12.2.1 左右分割窗口屬性COLSHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： value為定義各個框架的高度值，單位可以是像素，也可以是百分比。 3、文件范例：12-2.htm12.2.2 上下分割窗口屬性ROWSHTML標(biāo)準(zhǔn)教程1、基本語法： 12.2.3 嵌套分割窗口HTML標(biāo)準(zhǔn)教程2、語法解釋： 上述代碼先將框架按照行進行上下分割，然后在第二個框架中進行按照列的左右分割。 3、文件范例：12-3.htm12.2

3、.3 嵌套分割窗口HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定框架集的邊框?qū)挾?，單位為像素?3、文件范例：12-4.htm12.2.4 框架集邊框?qū)挾葘傩訤rameSpacingHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定框架集的邊框顏色。 3、文件范例：12-5.htm12.2.5 框架集邊框顏色屬性BorderColorHTML標(biāo)準(zhǔn)教程總結(jié)：框架集屬性屬性值描 述cols左右分割rows上下分割framespacing邊框?qū)挾萣ordercolor邊框顏色HTML標(biāo)準(zhǔn)教程 每一個框架都有一個顯示的頁面，這個頁面文件稱為框架頁面。通過標(biāo)記可以定義框架頁面的內(nèi)容。12.3 框

4、架標(biāo)記HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 通過SRC屬性設(shè)置框架顯示的文件路徑。3、文件范例：12-6.htm12.3.1 框架頁面源文件屬性SRCHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定框架頁面的名稱。3、文件范例：12-7.htm12.3.2 框架名稱屬性NAME框架命名規(guī)則：必須是單個單詞，允許使用下劃線，但不允許使用連字符，句號和空格?？蚣苊Q必須以字母起始，而不能以數(shù)字起始?？蚣苊Q區(qū)分大小寫。不要使用JavaScript中的保留字作為框架名稱。HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： value取值為0或1，0為不顯示邊框，1為顯示邊框。3、文件范例：

5、12-8.htm12.3.3 框架邊框顯示屬性FrameBorderHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： value取值見下表。3、文件范例：12-9.htm12.3.4 框架滾動條顯示屬性scrollingHTML標(biāo)準(zhǔn)教程框架滾動條顯示屬性值Scrolling屬性值描 述yes顯示滾動條no不顯示滾動條auto根據(jù)頁面的長度自動判斷是否顯示滾動條HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： noresize代表禁止改變框架的尺寸大小。3、文件范例：12-10.htm12.3.5 框架尺寸調(diào)整屬性noresizeHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定框架的左右邊緣寬度

6、。3、文件范例：12-11.htm12.3.6 框架邊緣寬度屬性MarginWidthHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定框架的上下邊緣高度。3、文件范例：12-12.htm12.3.7 框架邊緣高度屬性MarginHeightHTML標(biāo)準(zhǔn)教程總結(jié)：框架屬性屬性值描 述src源文件屬性name框架名稱屬性frameborder框架邊框顯示屬性scrolling框架滾動條顯示屬性noresize框架尺寸調(diào)整屬性marginwidth框架邊緣寬度屬性marginheight框架邊緣高度屬性HTML標(biāo)準(zhǔn)教程1、基本語法： 12.4 不支持框架標(biāo)記HTML標(biāo)準(zhǔn)教程2、語法解釋： 放在標(biāo)

7、記之間的部分就是在不支持框架的瀏覽器中顯示的內(nèi)容，也就是標(biāo)記中的內(nèi)容。3、文件范例：12-13.htm12.4 不支持框架標(biāo)記HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 屬性的含義見下表。12.5 浮動框架浮動框架是一種特殊的框架頁面，在瀏覽器窗口中可以嵌套子窗口，在其中顯示頁面的內(nèi)容。HTML標(biāo)準(zhǔn)教程標(biāo)記屬性屬 性值描 述src浮動框架中顯示頁面源文件的路徑width浮動框架的寬度height浮動框架的高度name浮動框架的名稱align浮動框架的排列方式(left center right)frameborder框架邊框顯示屬性scrolling框架滾動條顯示屬性MarginWidth

8、框架邊緣寬度屬性MarginHeight框架邊緣高度屬性HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 通過src屬性設(shè)置浮動框架顯示的文件路徑。3、文件范例：12-14.htm12.5.1 浮動框架的SRC屬性HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 通過width和height屬性設(shè)置浮動框架顯示的寬度和高度。3、文件范例：12-15.htm12.5.2 浮動框架的width和height屬性HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定浮動框架的名稱，命名規(guī)則同框架的name屬性。3、文件范例：12-16.htm12.5.3 浮動框架名稱屬性NAMEHTML標(biāo)準(zhǔn)教程1、基本語

9、法： 2、語法解釋： value取值為0或1，0為不顯示邊框，1為顯示邊框。3、文件范例：12-17.htm12.5.4 浮動框架邊框顯示屬性frameborderHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定浮動滾動條的顯示，value取值見下表。3、文件范例：12-18.htm12.5.5 浮動框架滾動條顯示屬性scrollingHTML標(biāo)準(zhǔn)教程框架滾動條顯示屬性值scrolling屬 性值描 述Yes顯示滾動條No不顯示滾動條ruto根據(jù)頁面的長度自動判斷是否顯示滾動條HTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定浮動的邊緣寬度。3、文件范例：12-19.htm12.5.6 浮動框架邊緣寬度屬性MarginWidthHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： 設(shè)定浮動的邊緣高度。3、文件范例：12-20.htm12.5.7 浮動框架邊緣高度屬性MarginHeightHTML標(biāo)準(zhǔn)教程1、基本語法： 2、語法解釋： value取