HTML语言—框架(1).ppt

主要内容主要内容: 框架基本概念框架基本概念,框架集标记框架集标记,框框架标记架标记,不支持框架标记不支持框架标记,浮动框架浮动框架,框架与链接框架与链接.重点内容重点内容: 框架原理框架原理,浮动框架浮动框架,框架与链框架与链接接.难点内容难点内容: 浮动框架浮动框架,框架与链接框架与链接. 课时课时:2HTML-框架框架基本概念基本概念框架集标记框架集标记框架标记框架标记不支持框架标记不支持框架标记浮动框架浮动框架框架与链接框架与链接 http:/ http:/ 窗口框架的作用：窗口框架的作用： 是将网页分割为多个是将网页分割为多个HTMLHTML页面，即将窗页面，即将窗口画面分割成多个小窗口，且口画面分割成多个小窗口，且每个小窗口每个小窗口中，中，可以可以显示不同的网页显示不同的网页，而在浏览器中则构成，而在浏览器中则构成一个完整的页面，达到在浏览器中同时浏览一个完整的页面，达到在浏览器中同时浏览不同网页的效果。不同网页的效果。 框架网页最大特点：框架网页最大特点： 是在不改变整页布局的情况下，可是在不改变整页布局的情况下，可以使其中的以使其中的HTMLHTML页面之间互相链接，页面之间互相链接， 达到不翻页即可获取所需内容的目的达到不翻页即可获取所需内容的目的 ，这一特点很大程度上使得其在显示电子这一特点很大程度上使得其在显示电子文档方面具有得天独厚的优势。文档方面具有得天独厚的优势。框架集标记框架集标记基本语法：基本语法： frameset 语法解释：语法解释：框架集是在一个文档内定义一组框框架集是在一个文档内定义一组框架结构的架结构的HTMLHTML页面，在这个页面中没有页面，在这个页面中没有 BODY标记。标记。框架集定义了在一个窗口中显示的框架框架集定义了在一个窗口中显示的框架数、尺寸和载入页面。数、尺寸和载入页面。 注意注意1：由由标记所定义的窗口框架标记所定义的窗口框架组件组件 ，相当于，相当于标记所定义的文件主题组标记所定义的文件主题组件，因此件，因此标记不可包含在标记不可包含在标标记中，否则记中，否则标记将无法正常使用。标记将无法正常使用。 注意注意2：标记用于定义子窗口，因标记用于定义子窗口，因为并没有结束标记，所以该标记的使用方式，为并没有结束标记，所以该标记的使用方式，仅在于设置标记中的各种属性，用以控制所代仅在于设置标记中的各种属性，用以控制所代表的窗口框架。表的窗口框架。二、框架集标记框架集标记框架集标记: 左右分割窗口属性左右分割窗口属性ColsCols 上下分割窗口属性上下分割窗口属性RowsRows 嵌套分割窗口嵌套分割窗口 框架集边框宽度属性框架集边框宽度属性FrameSpacingFrameSpacing 框架集边框颜色属性框架集边框颜色属性BordercolorBordercolor1、左右分割窗口属性、左右分割窗口属性Cols基本语法： 语法解释： Value定义各个框架的宽度值，单位可以是象素，也可以是百分比。 !- ex03106.htm -!- - html 左右分割窗口左右分割窗口/title frameset 2、上下分割窗口属性、上下分割窗口属性Rows基本语法： 语法解释： Value定义各个框架的宽度值，单位可以是象素，也可以是百分比。 !- ex03107.htm -!- - html 上下分割窗口上下分割窗口/title frameset 3、嵌套分割窗口、嵌套分割窗口基本语法： frameset cols=“value,value,” frameset rows=“value,value,” 语法解释： 可以嵌套分割。 !- ex03108.htm -!- - html 嵌套分割窗口嵌套分割窗口/title frameset cols=20% frameset rows=20% !- ex03108.htm -!- - html 嵌套分割窗口嵌套分割窗口/title frameset cols=20% frameset rows=20% 效果效果 4、框架集边框宽度属性、框架集边框宽度属性基本语法： 语法解释：设置框架集的边框宽度，单位为像素。!- ex03109.htm -!- - html 设定框架边框宽度设定框架边框宽度/title frameset cols=20% frameset rows=20% 效果效果 5、框架集边框颜色属性、框架集边框颜色属性基本语法： 语法解释：设置框架集的边框颜色。!- ex03110.htm -!- - html 设定框架边框颜色设定框架边框颜色/title frameset cols=20% frameset rows=20% 二、框架标记框架标记框架标记:框架页面源文件属性框架页面源文件属性SRC框架名称属性框架名称属性Name框架边框显示属性框架边框显示属性FrameBorder框架滚动条显示属性框架滚动条显示属性Scrolling框架尺寸调整属性框架尺寸调整属性NoResize框架边缘宽度属性框架边缘宽度属性MarginWidth框架边缘高度属性框架边缘高度属性MarginHeight1、框架页面源文件属性、框架页面源文件属性基本语法： 语法解释：每一个框架都有一个显示的网页页面，SRC属性设置该框架页面的文件路径。!- ex03111.htm -!- - html 设定框架页面的内容设定框架页面的内容/title frame frame 2、框架名称属性、框架名称属性基本语法： 语法解释：可以为每一个链接命名，该名称用于页面的链接和脚本描述，不影响页面的显示。命名规则：单个单词，可以有下划线“_”，必须以字母开始，且区分大小写。!- ex03112.htm -!- - html 设定框架的名称设定框架的名称/title frame frame 3、框架边框显示属性、框架边框显示属性基本语法： 语法解释：VALUE取值为0则不显示边框，为1则显示边框。注意注意1： Frameborder属性可用于控制窗口框架四周，是否显示框架。注意注意2：该属性可使用在标记与 标记中，使用在标记内时，可控制窗口框架的所有子窗口。使用在标记时 ，则仅能控制该标记所代表的子窗口。注意注意3：0代表不显示框线，1代表显示框线，其默认值为1。!- ex03113.htm -!- - 设定框架边框的显示设定框架边框的显示 效果效果4、框架滚动条显示属性、框架滚动条显示属性基本语法： 语法解释：VALUE取值为YES则显示滚动条，为NO则不显示滚动条，为AUTO则根据页面长度自动判断是否显示滚动条。!- ex03114.htm -!- - 设定框架边框的显示设定框架边框的显示 效果效果5、框架尺寸调整属性、框架尺寸调整属性基本语法： 语法解释：NORESIZE禁止改变框架的尺寸大小。图示!- ex03115.htm -!- - html 设定禁止调整框架大小设定禁止调整框架大小/title frame framesrc=“shu2.html” 6、框架边缘宽度属性、框架边缘宽度属性基本语法： 语法解释：MarginWidth设定框架的左右边左右边距距。!- ex03116.htm -!- - 设定框架的设定框架的左右边距左右边距 效果效果 7、框架边缘高度属性、框架边缘高度属性基本语法： 语法解释：MarginHeight设定框架的上边距、下边距。!- ex03117.htm -!- - html 设定框架的边缘高度设定框架的边缘高度/title frame framesrc=“shu2.htm” 四、不支持框架标记用于不支持框架技术的浏览器。用于不支持框架技术的浏览器。基本语法：基本语法： frameset cols=“value,value,” !- ex03118.htm -!- - 框架集框架集 对不起，您的浏览器不支持框架页面的显示。对不起，您的浏览器不支持框架页面的显示。 五、浮动框架浮动框架是一种特殊的框架页面，是在浏览器浮动框架是一种特殊的框架页面，是在浏览器窗口中嵌套子窗口，再在其中显示页面内容。窗口中嵌套子窗口，再在其中显示页面内容。基本语法：基本语法：浮动框架的属性!- ex03119.htm -!- - html 浮动框架浮动框架/title iframe src=“ex0378.htm” width=400 height=300 name=“iframe” align=“center” 六、框架与链接 使用框架的一个重要目的就使用框架的一个重要目的就是在不同的框架中显示不同的页是在不同的框架中显示不同的页面。面。 主要通过链接的主要通过链接的“Target”属性来设定链接的页面在哪个框属性来设定链接的页面在哪个框架和窗口中显示。架和窗口中显示。!- ex03120.htm -!- - html 框架集框架集/title frameset cols=“20%, !- ex03120-left.htm -!- - html 左侧框架左侧框架/title a href=“ex03120-right-1.htm” Dreamver MXDreamver MX a href=“ex03120-right-2.htm” Fireworks MXFireworks MX a href=“ex03120-right-3.htm” Flash MXFlash MX !- ex03120-right-1.htm -!- - html 右侧框架一右侧框架一/title Dreamweaver MX Dreamweaver MX Dreamweaver MX Dreamweaver MX 作为网页设计软件的代表，作为网页设计软件的代表， / body!- ex03120-right-2.htm -!- - html 右侧框架二右侧框架二/title Fireworks MX Fireworks MX Fireworks MX Fireworks MX 作为网页图像设计软件的代表，作为网页图像设计软件的代表， / body!- ex03120-right-3.htm -!- - html 右侧框架三右侧框架三/title Flash MX Flash MX Flash MX Flash MX 作为网页矢量交互动画软件的代表，作为网页矢量交互动画软件的代表， / body!- ex03121htm -!- - html 浮动框架与链接浮动框架与链接/title iframe src=“ex03120-right-1.htm” width=400 height=250 align=“center” a href=“ex03120-right-1.htm” Dreamver MXDreamver MX a href=“ex03120-right-2.htm” Fireworks MXFireworks MX a href=“ex03120-right-3.htm” Flash MXFlash MX