新编-第12章-使用框架结构-精品课件

1、第12章 使用框架结构1HTML标准教程本章目标：什么是框架框架集标记框架标记不支持框架标记浮动框架框架与链接HTML标准教程12.1 什么是框架1、作用： 就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。2、目的：创建页面导航。HTML标准教程 框架主要包括两部分，一个是框架集，另一个就是框架。 框架集：就是在一个文档内定义一组框架结构的HTML网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。 框架：就是指在网页上定义的一个显示区域。12.2 框架集标记HTML标准教程 基本框架代码 页面代码：HTML标准教程1、左右分割窗口2、上下分割窗口3、

2、嵌套分割窗口框架的分割方式HTML标准教程1、基本语法： 2、语法解释： value为定义各个框架的宽度值，单位可以是像素，也可以是百分比。 3、文件范例：12-1.htm12.2.1 左右分割窗口属性COLSHTML标准教程1、基本语法： 2、语法解释： value为定义各个框架的高度值，单位可以是像素，也可以是百分比。 3、文件范例：12-2.htm12.2.2 上下分割窗口属性ROWSHTML标准教程1、基本语法： 12.2.3 嵌套分割窗口HTML标准教程2、语法解释： 上述代码先将框架按照行进行上下分割，然后在第二个框架中进行按照列的左右分割。 3、文件范例：12-3.htm12.2

3、.3 嵌套分割窗口HTML标准教程1、基本语法： 2、语法解释： 设定框架集的边框宽度，单位为像素。 3、文件范例：12-4.htm12.2.4 框架集边框宽度属性FrameSpacingHTML标准教程1、基本语法： 2、语法解释： 设定框架集的边框颜色。 3、文件范例：12-5.htm12.2.5 框架集边框颜色属性BorderColorHTML标准教程总结：框架集属性属性值描 述cols左右分割rows上下分割framespacing边框宽度bordercolor边框颜色HTML标准教程 每一个框架都有一个显示的页面，这个页面文件称为框架页面。通过标记可以定义框架页面的内容。12.3 框

4、架标记HTML标准教程1、基本语法： 2、语法解释： 通过SRC属性设置框架显示的文件路径。3、文件范例：12-6.htm12.3.1 框架页面源文件属性SRCHTML标准教程1、基本语法： 2、语法解释： 设定框架页面的名称。3、文件范例：12-7.htm12.3.2 框架名称属性NAME框架命名规则：必须是单个单词，允许使用下划线，但不允许使用连字符，句号和空格。框架名称必须以字母起始，而不能以数字起始。框架名称区分大小写。不要使用JavaScript中的保留字作为框架名称。HTML标准教程1、基本语法： 2、语法解释： value取值为0或1，0为不显示边框，1为显示边框。3、文件范例：

5、12-8.htm12.3.3 框架边框显示属性FrameBorderHTML标准教程1、基本语法： 2、语法解释： value取值见下表。3、文件范例：12-9.htm12.3.4 框架滚动条显示属性scrollingHTML标准教程框架滚动条显示属性值Scrolling属性值描 述yes显示滚动条no不显示滚动条auto根据页面的长度自动判断是否显示滚动条HTML标准教程1、基本语法： 2、语法解释： noresize代表禁止改变框架的尺寸大小。3、文件范例：12-10.htm12.3.5 框架尺寸调整属性noresizeHTML标准教程1、基本语法： 2、语法解释： 设定框架的左右边缘宽度

6、。3、文件范例：12-11.htm12.3.6 框架边缘宽度属性MarginWidthHTML标准教程1、基本语法： 2、语法解释： 设定框架的上下边缘高度。3、文件范例：12-12.htm12.3.7 框架边缘高度属性MarginHeightHTML标准教程总结：框架属性属性值描 述src源文件属性name框架名称属性frameborder框架边框显示属性scrolling框架滚动条显示属性noresize框架尺寸调整属性marginwidth框架边缘宽度属性marginheight框架边缘高度属性HTML标准教程1、基本语法： 12.4 不支持框架标记HTML标准教程2、语法解释： 放在标

7、记之间的部分就是在不支持框架的浏览器中显示的内容，也就是标记中的内容。3、文件范例：12-13.htm12.4 不支持框架标记HTML标准教程1、基本语法： 2、语法解释： 属性的含义见下表。12.5 浮动框架浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容。HTML标准教程标记属性属 性值描 述src浮动框架中显示页面源文件的路径width浮动框架的宽度height浮动框架的高度name浮动框架的名称align浮动框架的排列方式(left center right)frameborder框架边框显示属性scrolling框架滚动条显示属性MarginWidth

8、框架边缘宽度属性MarginHeight框架边缘高度属性HTML标准教程1、基本语法： 2、语法解释： 通过src属性设置浮动框架显示的文件路径。3、文件范例：12-14.htm12.5.1 浮动框架的SRC属性HTML标准教程1、基本语法： 2、语法解释： 通过width和height属性设置浮动框架显示的宽度和高度。3、文件范例：12-15.htm12.5.2 浮动框架的width和height属性HTML标准教程1、基本语法： 2、语法解释： 设定浮动框架的名称，命名规则同框架的name属性。3、文件范例：12-16.htm12.5.3 浮动框架名称属性NAMEHTML标准教程1、基本语

9、法： 2、语法解释： value取值为0或1，0为不显示边框，1为显示边框。3、文件范例：12-17.htm12.5.4 浮动框架边框显示属性frameborderHTML标准教程1、基本语法： 2、语法解释： 设定浮动滚动条的显示，value取值见下表。3、文件范例：12-18.htm12.5.5 浮动框架滚动条显示属性scrollingHTML标准教程框架滚动条显示属性值scrolling属 性值描 述Yes显示滚动条No不显示滚动条ruto根据页面的长度自动判断是否显示滚动条HTML标准教程1、基本语法： 2、语法解释： 设定浮动的边缘宽度。3、文件范例：12-19.htm12.5.6 浮动框架边缘宽度属性MarginWidthHTML标准教程1、基本语法： 2、语法解释： 设定浮动的边缘高度。3、文件范例：12-20.htm12.5.7 浮动框架边缘高度属性MarginHeightHTML标准教程1、基本语法： 2、语法解释： value取