框架的应用HTMLCSSJavaScript标准教程实例版第.ppt

《框架的应用HTMLCSSJavaScript标准教程实例版第.ppt》由会员分享，可在线阅读，更多相关《框架的应用HTMLCSSJavaScript标准教程实例版第.ppt（90页珍藏版）》请在三一办公上搜索。

1、实例版,第9章 框架的应用,9.1 框架概述9.2 框架的基本结构9.3 设置框架9.4 设置框架集9.5 浮动框架9.6 在框架上建立链接9.7 小实例框架的实际应用9.8 习题,9.1 框架概述,框架是一种在一个网页中显示多个网页的技术，通过超链接可以为框架之间建立内容之间的联系，从而实现页面导航的功能。框架的作用主要是在一个浏览器窗口显示多个网页，每个区域显示的网页内容也可以不同，它的这个特性在“厂”字型的网页中使用极为广泛。,9.1 框架概述,实例代码,9.1 框架概述,实例代码,9.2 框架的基本结构,基本语法：,框架的基本结构,9.2 框架的基本结构,语法说明：,在网页文件中，使用

2、框架集的页面的标记将被标记替代，然后再利用标记去定义框架结构，常见的分割框架方式有：左右分割、上下分割、嵌套分割，后面的章节将会具体介绍。所谓嵌套分割是指在同一框架集中既有左右分割，又有上下分割，,9.3 设置框架,9.3.1 设置框架源文件属性src9.3.2 添加框架名称name9.3.3 设置框架边框frameborder9.3.4 显示框架滚动条scrolling9.3.5 调整框架尺寸noresize9.3.6 设置框架边缘宽度与高度marginwidth与marginheight9.3.7 添加不支持框架标记,9.3.1 设置框架源文件属性src,基本语法,9.3.1 设置框架源文

3、件属性src,语法说明,在HTML文件中，src用于设置框架加载文件的路径。文件的路径可以是相对路径也可以是绝对路径。,9.3.1 设置框架源文件属性src,实例代码,9.3.1 设置框架源文件属性src,网页效果,9.3.2 添加框架名称name,基本语法,9.3.2 添加框架名称name,语法说明,在HTML文件中，利用框架标记中的name属性给框架添加名称，不会影响框架的显示效果。,9.3.2 添加框架名称name,实例代码,9.3.2 添加框架名称name,网页效果,9.3.3 设置框架边框frameborder,基本语法,9.3.3 设置框架边框frameborder,语法说明,在H

4、TML文件中，利用框架标记中的frameborder属性设置框架显示效果时，只能设置框架的边框是否显示，frameborder值为0时，不显示边框；frameborder值为1时，显示边框。,9.3.3 设置框架边框frameborder,实例代码,9.3.3 设置框架边框frameborder,网页效果,9.3.4 显示框架滚动条scrolling,基本语法,9.3.4 显示框架滚动条scrolling,语法说明,在HTML文件中，利用框架标记中的scrolling属性有三种方式设置滚动条：yes：添加滚动条 no：不添加滚动条 auto：自动添加滚动条,9.3.4 显示框架滚动条scrol

5、ling,实例代码,9.3.4 显示框架滚动条scrolling,网页效果,9.3.5 调整框架尺寸noresize,基本语法,9.3.5 调整框架尺寸noresize,语法说明,在HTML文件中，利用框架标记中的noresize属性设置不允许改变左侧框架的尺寸。,9.3.5 调整框架尺寸noresize,实例代码,9.3.5 调整框架尺寸noresize,网页效果,9.3.6 设置框架边缘宽度与高度marginwidth与marginheight,基本语法,9.3.6 设置框架边缘宽度与高度marginwidth与marginheight,语法说明,在HTML文件中，利用框架标记中的marg

6、inwidth和marginheight属性设置不允许改变左侧框架的尺寸。,9.3.6 设置框架边缘宽度与高度marginwidth与marginheight,实例代码,9.3.6 设置框架边缘宽度与高度marginwidth与marginheight,网页效果,9.3.7 添加不支持框架标记,基本语法,。,9.3.7 添加不支持框架标记,语法说明,在HTML文件中，利用框架标记中的属性设置浏览器不支持框架时，显示网页文件的内容。,9.3.7 添加不支持框架标记,实例代码,9.3.7 添加不支持框架标记,网页效果,9.4 设置框架集,表9-1 框架集属性,9.4 设置框架集,9.4.1 设置框

7、架集边框宽度frmaspacing9.4.2 设置框架集边框颜色bordercolor9.4.3 左右分割边框cols9.4.4 上下分割边框rows,9.4.1 设置框架集边框宽度frmaspacing,基本语法,9.4.1 设置框架集边框宽度frmaspacing,语法说明,在HTML文件中，利用框架标记中的frameborder属性设置框架显示效果时，只能设置框架的边框是否显示，frameborder值为0时，不显示边框；frameborder值为1时，显示边框。,9.4.1 设置框架集边框宽度frmaspacing,实例代码,9.4.1 设置框架集边框宽度frmaspacing,网页效

8、果,9.4.2 设置框架集边框颜色bordercolor,基本语法,9.4.2 设置框架集边框颜色bordercolor,语法说明,在HTML文件中，利用框架标记中的bordercolor属性设置框架边框颜色，bordercolor后面的属性值可以是表示颜色的英文单词，也可以是十六进制数（例：#0066ff）。,9.4.2 设置框架集边框颜色bordercolor,实例代码,9.4.2 设置框架集边框颜色bordercolor,网页效果,9.4.3 左右分割边框cols,基本语法,9.4.3 左右分割边框cols,语法说明,在HTML文件中，利用cols属性将网页进行左右分割，分割方式可以是百

9、分比，也可以是具体的数值。,9.4.3 左右分割边框cols,实例代码,9.4.3 左右分割边框cols,网页效果,9.4.4 上下分割边框rows,基本语法,9.4.4 上下分割边框rows,语法说明,在HTML文件中，利用rows属性可以将网页上下分割，分割方式与左右分割方式相同。,9.4.4 上下分割边框rows,实例代码,9.4.4 上下分割边框rows,网页效果,9.4.4 上下分割边框rows,网页效果,9.5 浮动框架,表9-2 浮动框架属性,9.5 浮动框架,9.5.1 设置浮动框架源文件属性9.5.2 添加浮动框架名称name9.5.3 设置浮动框架的宽度和高度width和h

10、eight9.5.4 设置浮动框架的对齐方式align,9.5.1 设置浮动框架源文件属性,基本语法,9.5.1 设置浮动框架源文件属性,语法说明,在HTML文件中，src用于设置框架加载文件的路径，文件的路径可以是相对路径也可以是绝对路径。,9.5.1 设置浮动框架源文件属性,实例代码,9.5.1 设置浮动框架源文件属性,网页效果,9.5.2 添加浮动框架名称name,基本语法,9.5.2 添加浮动框架名称name,语法说明,在HTML文件中，利用框架标记中的name属性给框架添加名称，不会影响框架的显示效果。,9.5.2 添加浮动框架名称name,实例代码,9.5.2 添加浮动框架名称na

11、me,网页效果,9.5.3 设置浮动框架的宽度和高度width和height,基本语法,9.5.3 设置浮动框架的宽度和高度width和height,语法说明,在HTML文件中，标记中；width属性可以设置浮动框架宽度；height属性可以设定浮动框架的高度。,9.5.3 设置浮动框架的宽度和高度width和height,实例代码,9.5.3 设置浮动框架的宽度和高度width和height,网页效果,9.5.4 设置浮动框架的对齐方式align,基本语法,9.5.4 设置浮动框架的对齐方式align,语法说明,在HTML文件中，利用浮动框架标记中的align属性设置浮动框架的对齐方式。ce

12、nter：居中对齐；left：左对齐；right：右对齐。,9.5.4 设置浮动框架的对齐方式align,实例代码,9.5.4 设置浮动框架的对齐方式align,网页效果,9.6 在框架上建立链接,9.6.1 普通框架添加链接9.6.2 浮动框架添加链接,9.6.1 普通框架添加链接,基本语法,9.6.1 普通框架添加链接,语法说明,利用标记中的cols属性进行左右分割，左边网页文件来自于left.html，右边网页文件来自于right.html。,9.6.1 普通框架添加链接,实例代码,9.6.1 普通框架添加链接,网页效果,9.6.1 普通框架添加链接,实例代码,9.6.1 普通框架添加链接,网页效果,9.6.2 浮动框架添加链接,基本语法,9.6.2 浮动框架添加链接,语法说明,定义一个浮动框架，然后将网页中需要显示的内容链接到浮动框架中。,9.6.2 浮动框架添加链接,实例代码,9.6.2 浮动框架添加链接,网页效果,9.7 小实例框架的实际应用,实例代码-框架,9.7 小实例框架的实际应用,实例代码-left,9.7 小实例框架的实际应用,实例代码-left（接上页）,9.7 小实例框架的实际应用,实例代码-top,9.7 小实例框架的实际应用,实例代码-top（接上页）,9.7 小实例框架的实际应用,网页效果,