《使用框架结构课件》由会员分享，可在线阅读，更多相关《使用框架结构课件（38页珍藏版）》请在金锄头文库上搜索。
1、第第1212章章 使用框架结构使用框架结构1使用框架结构课件标准教程本章目标：本章目标：什么是框架什么是框架框架集标记框架集标记框架标记框架标记不支持框架标记不支持框架标记浮动框架浮动框架框架与链接框架与链接使用框架使用框架结结构构课课件件标准准教教程程12.1 什么是框架什么是框架1、作用：、作用： 就是把浏览器窗口划分为若干个就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的区域，每个区域可以分别显示不同的网页。网页。2、目的：、目的：创建页面导航。创建页面导航。使用框架使用框架结结构构课课件件标准准教教程程 框架主要包括两部分，一个是框架集，框架主要包括两部分，一个是框架集，另
2、一个就是框架。另一个就是框架。 框架集框架集：就是在一个文档内定义一组框：就是在一个文档内定义一组框架结构的架结构的HTML网页。框架集定义了在一个网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到窗口中显示的框架数、框架的尺寸、载入到框架的网页等。框架的网页等。 框架框架：就是指在网页上定义的一个显示：就是指在网页上定义的一个显示区域。区域。12.2 框架集标记框架集标记使用框架使用框架结结构构课课件件标准准教教程程 基本框架代码基本框架代码 页面代码：页面代码：使用框架使用框架结结构构课课件件标准准教教程程1、左右分割窗口、左右分割窗口2、上下分割窗口、上下分割窗口3、嵌套分割
3、窗口、嵌套分割窗口框架的分割方式框架的分割方式使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： value为定义各个框架的宽度值，单位可以是为定义各个框架的宽度值，单位可以是像素，也可以是百分比。像素，也可以是百分比。 3、文件范例：、文件范例：12-1.htm12.2.1 左右分割窗口属性左右分割窗口属性COLS使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： value为定义各个框架的高度值，单位可以是为定义各个框架的高度值，单位可以是像素，也可以是百分比。像素，也可以是百分比。 3、文
4、件范例：、文件范例：12-2.htm12.2.2 上下分割窗口属性上下分割窗口属性ROWS使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 12.2.3 嵌套分割窗口嵌套分割窗口使用框架使用框架结结构构课课件件标准准教教程程2、语法解释：、语法解释： 上述代码先将框架按照行进行上下分割，然上述代码先将框架按照行进行上下分割，然后在第二个框架中进行按照列的左右分割。后在第二个框架中进行按照列的左右分割。 3、文件范例：、文件范例：12-3.htm12.2.3 嵌套分割窗口嵌套分割窗口使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、
5、语法解释： 设定框架集的边框宽度，单位为像素。设定框架集的边框宽度，单位为像素。 3、文件范例：、文件范例：12-4.htm12.2.4 框架集边框宽度属性框架集边框宽度属性FrameSpacing使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定框架集的边框颜色。设定框架集的边框颜色。 3、文件范例：、文件范例：12-5.htm12.2.5 框架集边框颜色属性框架集边框颜色属性BorderColor使用框架使用框架结结构构课课件件标准准教教程程总结：框架集属性总结：框架集属性属性值属性值描描 述述cols左右分割左右分割rows上下分割
6、上下分割framespacing边框宽度边框宽度bordercolor边框颜色边框颜色使用框架使用框架结结构构课课件件标准准教教程程 每一个框架都有一个显示的页面，每一个框架都有一个显示的页面，这个页面文件称为这个页面文件称为框架页面框架页面。通过。通过标记可以定义框架页面的内容。标记可以定义框架页面的内容。12.3 框架标记框架标记使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 通过通过SRC属性设置框架显示的文件路径。属性设置框架显示的文件路径。3、文件范例：、文件范例：12-6.htm12.3.1 框架页面源文件属性框架页面源文件属性
7、SRC使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定框架页面的名称。设定框架页面的名称。3、文件范例：、文件范例：12-7.htm12.3.2 框架名称属性框架名称属性NAME框架命名规则：必须是单个单词，允许使用下划线，框架命名规则：必须是单个单词，允许使用下划线，但不允许使用连字符，句号和空格。框架名称必须但不允许使用连字符，句号和空格。框架名称必须以字母起始，而不能以数字起始。框架名称区分大以字母起始，而不能以数字起始。框架名称区分大小写。不要使用小写。不要使用JavaScript中的保留字作为框架中的保留字作为框架名称。名称。
8、使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： value取值为取值为0或或1，0为不显示边框，为不显示边框，1为显示为显示边框。边框。3、文件范例：、文件范例：12-8.htm12.3.3 框架边框显示属性框架边框显示属性FrameBorder使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： value取值见下表。取值见下表。3、文件范例：、文件范例：12-9.htm12.3.4 框架滚动条显示属性框架滚动条显示属性scrolling使用框架使用框架结结构构课课件件标准准教教程程框架滚动
9、条显示属性值框架滚动条显示属性值Scrolling属性值属性值描描 述述yes显示滚动条显示滚动条no不显示滚动条不显示滚动条auto根据页面的长度自动判断是否显根据页面的长度自动判断是否显示滚动条示滚动条使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： noresize代表禁止改变框架的尺寸大小。代表禁止改变框架的尺寸大小。3、文件范例：、文件范例：12-10.htm12.3.5 框架尺寸调整属性框架尺寸调整属性noresize使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定框架的左
10、右边缘宽度。设定框架的左右边缘宽度。3、文件范例：、文件范例：12-11.htm12.3.6 框架边缘宽度属性框架边缘宽度属性MarginWidth使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定框架的上下边缘高度。设定框架的上下边缘高度。3、文件范例：、文件范例：12-12.htm12.3.7 框架边缘高度属性框架边缘高度属性MarginHeight使用框架使用框架结结构构课课件件标准准教教程程总结：框架属性总结：框架属性属性值属性值描描 述述src源文件属性源文件属性name框架名称属性框架名称属性frameborder框架边框显示
11、属性框架边框显示属性scrolling框架滚动条显示属性框架滚动条显示属性noresize框架尺寸调整属性框架尺寸调整属性marginwidth框架边缘宽度属性框架边缘宽度属性marginheight框架边缘高度属性框架边缘高度属性使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 12.4 不支持框架标记不支持框架标记使用框架使用框架结结构构课课件件标准准教教程程2、语法解释：、语法解释： 放在放在标记之间的部分就是在不支标记之间的部分就是在不支持框架的浏览器中显示的内容，也就是持框架的浏览器中显示的内容，也就是标标记中的内容。记中的内容。3、文件范例：、文件范例：12
12、-13.htm12.4 不支持框架标记不支持框架标记使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 属性的含义见下表。属性的含义见下表。12.5 浮动框架浮动框架浮动框架是一种特殊的框架页面，在浏览器窗口中浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容。可以嵌套子窗口，在其中显示页面的内容。使用框架使用框架结结构构课课件件标准准教教程程标记属性标记属性属属 性值性值描描 述述src浮动框架中显示页面源文件的路径浮动框架中显示页面源文件的路径width浮动框架的宽度浮动框架的宽度height浮动框架的高度浮动
13、框架的高度name浮动框架的名称浮动框架的名称align浮动框架的排列方式浮动框架的排列方式(left center right)frameborder 框架边框显示属性框架边框显示属性scrolling框架滚动条显示属性框架滚动条显示属性MarginWidth 框架边缘宽度属性框架边缘宽度属性MarginHeight框架边缘高度属性框架边缘高度属性使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 通过通过src属性设置浮动框架显示的文件路径。属性设置浮动框架显示的文件路径。3、文件范例：、文件范例：12-14.htm12.5.1 浮动框架的
14、浮动框架的SRC属性属性使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 通过通过width和和height属性设置浮动框架显示属性设置浮动框架显示的宽度和高度。的宽度和高度。3、文件范例：、文件范例：12-15.htm12.5.2 浮动框架的浮动框架的width和和height属属性性使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定浮动框架的名称，命名规则同框架的设定浮动框架的名称，命名规则同框架的name属性。属性。3、文件范例：、文件范例：12-16.htm12.5.3 浮动框架
15、名称属性浮动框架名称属性NAME使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： value取值为取值为0或或1，0为不显示边框，为不显示边框，1为显示为显示边框。边框。3、文件范例：、文件范例：12-17.htm12.5.4 浮动框架边框显示属性浮动框架边框显示属性frameborder使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定浮动滚动条的显示，设定浮动滚动条的显示，value取值见下表。取值见下表。3、文件范例：、文件范例：12-18.htm12.5.5 浮动框架滚动条显示属
16、性浮动框架滚动条显示属性scrolling使用框架使用框架结结构构课课件件标准准教教程程框架滚动条显示属性值框架滚动条显示属性值scrolling属属 性值性值描描 述述Yes显示滚动条显示滚动条No不显示滚动条不显示滚动条ruto根据页面的长度自动判断是根据页面的长度自动判断是否显示滚动条否显示滚动条使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定浮动的边缘宽度。设定浮动的边缘宽度。3、文件范例：、文件范例：12-19.htm12.5.6 浮动框架边缘宽度属性浮动框架边缘宽度属性MarginWidth使用框架使用框架结结构构课课件件标
17、准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： 设定浮动的边缘高度。设定浮动的边缘高度。3、文件范例：、文件范例：12-20.htm12.5.7 浮动框架边缘高度属性浮动框架边缘高度属性MarginHeight使用框架使用框架结结构构课课件件标准准教教程程1、基本语法：、基本语法： 2、语法解释：、语法解释： value取值为取值为left、center、right。3、文件范例：、文件范例：12-21.htm12.5.8 浮动框架对齐属性浮动框架对齐属性align使用框架使用框架结结构构课课件件标准准教教程程 1、普通框架与链接、普通框架与链接 2、浮动框架与链接、浮动框架与链接12.6 框架与链接框架与链接文件范例文件范例:12-22.htm 12-23.htm使用框架使用框架结结构构课课件件标准准教教程程作业：作业：P304页页 1、2、3使用框架使用框架结结构构课课件件标准准教教程程
