《使用框架结构》PPT课件.ppt
1,HTML标准教程,第12章 使用框架结构,HTML标准教程,本章目标：,什么是框架框架集标记框架标记不支持框架标记浮动框架框架与链接,HTML标准教程,12.1 什么是框架,1、作用：就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。2、目的：创建页面导航。,HTML标准教程,框架主要包括两部分，一个是框架集，另一个就是框架。框架集：就是在一个文档内定义一组框架结构的HTML网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。框架：就是指在网页上定义的一个显示区域。,12.2 框架集标记,HTML标准教程,基本框架代码,页面代码：,HTML标准教程,1、左右分割窗口2、上下分割窗口3、嵌套分割窗口,框架的分割方式,HTML标准教程,1、基本语法：2、语法解释：value为定义各个框架的宽度值，单位可以是像素，也可以是百分比。3、文件范例：12-1.htm,12.2.1 左右分割窗口属性COLS,HTML标准教程,1、基本语法：2、语法解释：value为定义各个框架的高度值，单位可以是像素，也可以是百分比。3、文件范例：12-2.htm,12.2.2 上下分割窗口属性ROWS,HTML标准教程,1、基本语法：,12.2.3 嵌套分割窗口,HTML标准教程,2、语法解释：上述代码先将框架按照行进行上下分割，然后在第二个框架中进行按照列的左右分割。3、文件范例：12-3.htm,12.2.3 嵌套分割窗口,HTML标准教程,1、基本语法：2、语法解释：设定框架集的边框宽度，单位为像素。3、文件范例：12-4.htm,12.2.4 框架集边框宽度属性FrameSpacing,HTML标准教程,1、基本语法：2、语法解释：设定框架集的边框颜色。3、文件范例：12-5.htm,12.2.5 框架集边框颜色属性BorderColor,HTML标准教程,总结：框架集属性,HTML标准教程,每一个框架都有一个显示的页面，这个页面文件称为框架页面。通过标记可以定义框架页面的内容。,12.3 框架标记,HTML标准教程,1、基本语法：2、语法解释：通过SRC属性设置框架显示的文件路径。3、文件范例：12-6.htm,12.3.1 框架页面源文件属性SRC,HTML标准教程,1、基本语法：2、语法解释：设定框架页面的名称。3、文件范例：12-7.htm,12.3.2 框架名称属性NAME,框架命名规则：必须是单个单词，允许使用下划线，但不允许使用连字符，句号和空格。框架名称必须以字母起始，而不能以数字起始。框架名称区分大小写。不要使用JavaScript中的保留字作为框架名称。,HTML标准教程,1、基本语法：2、语法解释：value取值为0或1，0为不显示边框，1为显示边框。3、文件范例：12-8.htm,12.3.3 框架边框显示属性FrameBorder,HTML标准教程,1、基本语法：2、语法解释：value取值见下表。3、文件范例：12-9.htm,12.3.4 框架滚动条显示属性scrolling,HTML标准教程,框架滚动条显示属性值,HTML标准教程,1、基本语法：2、语法解释：noresize代表禁止改变框架的尺寸大小。3、文件范例：12-10.htm,12.3.5 框架尺寸调整属性noresize,HTML标准教程,1、基本语法：2、语法解释：设定框架的左右边缘宽度。3、文件范例：12-11.htm,12.3.6 框架边缘宽度属性MarginWidth,HTML标准教程,1、基本语法：2、语法解释：设定框架的上下边缘高度。3、文件范例：12-12.htm,12.3.7 框架边缘高度属性MarginHeight,HTML标准教程,总结：框架属性,HTML标准教程,1、基本语法：,12.4 不支持框架标记,HTML标准教程,2、语法解释：放在标记之间的部分就是在不支持框架的浏览器中显示的内容，也就是标记中的内容。3、文件范例：12-13.htm,12.4 不支持框架标记,HTML标准教程,1、基本语法：2、语法解释：属性的含义见下表。,12.5 浮动框架,浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容。,HTML标准教程,标记属性,HTML标准教程,1、基本语法：2、语法解释：通过src属性设置浮动框架显示的文件路径。3、文件范例：12-14.htm,12.5.1 浮动框架的SRC属性,HTML标准教程,1、基本语法：2、语法解释：通过width和height属性设置浮动框架显示的宽度和高度。3、文件范例：12-15.htm,12.5.2 浮动框架的width和height属性,HTML标准教程,1、基本语法：2、语法解释：设定浮动框架的名称，命名规则同框架的name属性。3、文件范例：12-16.htm,12.5.3 浮动框架名称属性NAME,HTML标准教程,1、基本语法：2、语法解释：value取值为0或1，0为不显示边框，1为显示边框。3、文件范例：12-17.htm,12.5.4 浮动框架边框显示属性frameborder,HTML标准教程,1、基本语法：2、语法解释：设定浮动滚动条的显示，value取值见下表。3、文件范例：12-18.htm,12.5.5 浮动框架滚动条显示属性scrolling,HTML标准教程,框架滚动条显示属性值,HTML标准教程,1、基本语法：2、语法解释：设定浮动的边缘宽度。3、文件范例：12-19.htm,12.5.6 浮动框架边缘宽度属性MarginWidth,HTML标准教程,1、基本语法：2、语法解释：设定浮动的边缘高度。3、文件范例：12-20.htm,12.5.7 浮动框架边缘高度属性MarginHeight,HTML标准教程,1、基本语法：2、语法解释：value取值为left、center、right。3、文件范例：12-21.htm,12.5.8 浮动框架对齐属性align,HTML标准教程,1、普通框架与链接 2、浮动框架与链接,12.6 框架与链接,文件范例:12-22.htm 12-23.htm,HTML标准教程,作业：,P304页 1、2、3,
