《第9章框架的应用(HTML CSS JavaScript标准教程实例版(第2版)).ppt》由会员分享,可在线阅读,更多相关《第9章框架的应用(HTML CSS JavaScript标准教程实例版(第2版)).ppt(90页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 本书编委会 编著实例版实例版第9章 框架的应用9.1 框架概述9.2 框架的基本结构9.3 设置框架9.4 设置框架集9.5 浮动框架9.6 在框架上建立链接9.7 小实例框架的实际应用9.8 习题HTML/CSS/JavaScript 标准教程实例版(第2版)HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.1 框架概述框架概述框架是一种在一个网页中显示多个网页的技术,通过超链接可以为框架之间建立内容之间的联系,从而实现页面导航的功能。框架的作用主要是在一个浏览器窗口显示多个网页,每个区域显示的网页内容也可以不同,它的这个特性在“厂”字型的网页中使用极为广泛。HTM
2、L/CSS/JavaScript 标准教程实例版(第2版)第章99.1 框架概述框架概述实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.1 框架概述框架概述实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.2 框架的基本结构框架的基本结构基本语法:基本语法:框架的基本结构框架的基本结构 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.2 框架的基本结构框架的基本结构语法说明:语法说明:在网页文件中,使用框架集的页面的标记将被标记替代,然后再利用标记去定义框架结构,常见的分割框架方式有:左右分割、上下分割
3、、嵌套分割,后面的章节将会具体介绍。所谓嵌套分割是指在同一框架集中既有左右分割,又有上下分割,HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3 设置框架设置框架9.3.1 设置框架源文件属性src9.3.2 添加框架名称name9.3.3 设置框架边框frameborder9.3.4 显示框架滚动条scrolling9.3.5 调整框架尺寸noresize9.3.6 设置框架边缘宽度与高度marginwidth与marginheight9.3.7 添加不支持框架标记HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.1 设置框架源文件属性s
4、rc基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.1 设置框架源文件属性src语法说明语法说明在HTML文件中,src用于设置框架加载文件的路径。文件的路径可以是相对路径也可以是绝对路径。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.1 设置框架源文件属性src实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.1 设置框架源文件属性src网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.2 添加框架名称添加框架名称name基本语法基本语法 H
5、TML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.2 添加框架名称添加框架名称name语法说明语法说明在HTML文件中,利用框架标记中的name属性给框架添加名称,不会影响框架的显示效果。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.2 添加框架名称添加框架名称name实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.2 添加框架名称添加框架名称name网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.3 设置框架边框设置框架边框frameborder基本语
6、法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.3 设置框架边框设置框架边框frameborder语法说明语法说明在HTML文件中,利用框架标记中的frameborder属性设置框架显示效果时,只能设置框架的边框是否显示,frameborder值为0时,不显示边框;frameborder值为1时,显示边框。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.3 设置框架边框设置框架边框frameborder实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.3 设置框架边框设置框架边框framebor
7、der网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.4 显示框架滚动条显示框架滚动条scrolling基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.4 显示框架滚动条显示框架滚动条scrolling语法说明语法说明在HTML文件中,利用框架标记中的scrolling属性有三种方式设置滚动条:yes:添加滚动条 no:不添加滚动条 auto:自动添加滚动条HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.4 显示框架滚动条显示框架滚动条scrolling实例代码HTML/
8、CSS/JavaScript 标准教程实例版(第2版)第章99.3.4 显示框架滚动条显示框架滚动条scrolling网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.5 调整框架尺寸调整框架尺寸noresize基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.5 调整框架尺寸调整框架尺寸noresize语法说明语法说明在HTML文件中,利用框架标记中的noresize属性设置不允许改变左侧框架的尺寸。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.5 调整框架尺寸调整框架尺
9、寸noresize实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.5 调整框架尺寸调整框架尺寸noresize网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.6 设置框架边缘宽度与高度设置框架边缘宽度与高度marginwidth与与marginheight基本语法基本语法HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.6 设置框架边缘宽度与高度设置框架边缘宽度与高度marginwidth与与marginheight语法说明语法说明在HTML文件中,利用框架标记中的marginwid
10、th和marginheight属性设置不允许改变左侧框架的尺寸。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.6 设置框架边缘宽度与高度设置框架边缘宽度与高度marginwidth与与marginheight实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.6 设置框架边缘宽度与高度设置框架边缘宽度与高度marginwidth与与marginheight网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.7 添加不支持框架标记添加不支持框架标记基本语法基本语法 。HTML/CSS/JavaSc
11、ript 标准教程实例版(第2版)第章99.3.7 添加不支持框架标记添加不支持框架标记语法说明语法说明在HTML文件中,利用框架标记中的属性设置浏览器不支持框架时,显示网页文件的内容。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.7 添加不支持框架标记添加不支持框架标记实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.3.7 添加不支持框架标记添加不支持框架标记网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4 设置框架集设置框架集表9-1 框架集属性HTML/CSS/JavaScrip
12、t 标准教程实例版(第2版)第章99.4 设置框架集设置框架集9.4.1 设置框架集边框宽度frmaspacing9.4.2 设置框架集边框颜色bordercolor9.4.3 左右分割边框cols9.4.4 上下分割边框rowsHTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.1 设置框架集边框宽度frmaspacing基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.1 设置框架集边框宽度frmaspacing语法说明语法说明在HTML文件中,利用框架标记中的frameborder属性设置框架显示效果时,只能设置框架
13、的边框是否显示,frameborder值为0时,不显示边框;frameborder值为1时,显示边框。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.1 设置框架集边框宽度frmaspacing实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.1 设置框架集边框宽度frmaspacing网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.2 设置框架集边框颜色设置框架集边框颜色bordercolor基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.2
14、 设置框架集边框颜色设置框架集边框颜色bordercolor语法说明语法说明在HTML文件中,利用框架标记中的bordercolor属性设置框架边框颜色,bordercolor后面的属性值可以是表示颜色的英文单词,也可以是十六进制数(例:#0066ff)。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.2 设置框架集边框颜色设置框架集边框颜色bordercolor实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.2 设置框架集边框颜色设置框架集边框颜色bordercolor网页效果网页效果HTML/CSS/JavaScr
15、ipt 标准教程实例版(第2版)第章99.4.3 左右分割边框左右分割边框cols基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.3 左右分割边框左右分割边框cols语法说明语法说明在HTML文件中,利用cols属性将网页进行左右分割,分割方式可以是百分比,也可以是具体的数值。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.3 左右分割边框左右分割边框cols实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.3 左右分割边框左右分割边框cols网页效果网页效果HTML/CS
16、S/JavaScript 标准教程实例版(第2版)第章99.4.4 上下分割边框上下分割边框rows基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.4 上下分割边框上下分割边框rows语法说明语法说明在HTML文件中,利用rows属性可以将网页上下分割,分割方式与左右分割方式相同。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.4 上下分割边框上下分割边框rows实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.4.4 上下分割边框上下分割边框rows网页效果网页效果HTML/
17、CSS/JavaScript 标准教程实例版(第2版)第章99.4.4 上下分割边框上下分割边框rows网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5 浮动框架浮动框架表9-2 浮动框架属性HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5 浮动框架浮动框架9.5.1 设置浮动框架源文件属性9.5.2 添加浮动框架名称name9.5.3 设置浮动框架的宽度和高度width和height9.5.4 设置浮动框架的对齐方式alignHTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.1 设置浮动框架源
18、文件属性设置浮动框架源文件属性基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.1 设置浮动框架源文件属性设置浮动框架源文件属性语法说明语法说明在HTML文件中,src用于设置框架加载文件的路径,文件的路径可以是相对路径也可以是绝对路径。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.1 设置浮动框架源文件属性设置浮动框架源文件属性实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.1 设置浮动框架源文件属性设置浮动框架源文件属性网页效果网页效果HTML/CSS/JavaScr
19、ipt 标准教程实例版(第2版)第章99.5.2 添加浮动框架名称添加浮动框架名称name基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.2 添加浮动框架名称添加浮动框架名称name语法说明在HTML文件中,利用框架标记中的name属性给框架添加名称,不会影响框架的显示效果。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.2 添加浮动框架名称添加浮动框架名称name实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.2 添加浮动框架名称添加浮动框架名称name网页效果HTML/CSS/Jav
20、aScript 标准教程实例版(第2版)第章99.5.3 设置浮动框架的宽度和高度设置浮动框架的宽度和高度width和和height基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.3 设置浮动框架的宽度和高度设置浮动框架的宽度和高度width和和height语法说明在HTML文件中,标记中;width属性可以设置浮动框架宽度;height属性可以设定浮动框架的高度。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.3 设置浮动框架的宽度和高度设置浮动框架的宽度和高度width和和height实例代码HTML/CSS/JavaS
21、cript 标准教程实例版(第2版)第章99.5.3 设置浮动框架的宽度和高度设置浮动框架的宽度和高度width和和height网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.4 设置浮动框架的对齐方式设置浮动框架的对齐方式align基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.4 设置浮动框架的对齐方式设置浮动框架的对齐方式align语法说明在HTML文件中,利用浮动框架标记中的align属性设置浮动框架的对齐方式。center:居中对齐;left:左对齐;right:右对齐。HTML/CSS/JavaScrip
22、t 标准教程实例版(第2版)第章99.5.4 设置浮动框架的对齐方式设置浮动框架的对齐方式align实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.5.4 设置浮动框架的对齐方式设置浮动框架的对齐方式align网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6 在框架上建立链接在框架上建立链接9.6.1 普通框架添加链接普通框架添加链接9.6.2 浮动框架添加链接浮动框架添加链接HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.1 普通框架添加链接普通框架添加链接基本语法 HTML/CSS/Java
23、Script 标准教程实例版(第2版)第章99.6.1 普通框架添加链接普通框架添加链接语法说明利用标记中的cols属性进行左右分割,左边网页文件来自于left.html,右边网页文件来自于right.html。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.1 普通框架添加链接普通框架添加链接实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.1 普通框架添加链接普通框架添加链接网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.1 普通框架添加链接普通框架添加链接实例代码HTML/CSS/Ja
24、vaScript 标准教程实例版(第2版)第章99.6.1 普通框架添加链接普通框架添加链接网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.2 浮动框架添加链接浮动框架添加链接基本语法基本语法 HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.2 浮动框架添加链接浮动框架添加链接语法说明语法说明定义一个浮动框架,然后将网页中需要显示的内容链接到浮动框架中。HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.6.2 浮动框架添加链接浮动框架添加链接实例代码实例代码HTML/CSS/JavaScript 标准教
25、程实例版(第2版)第章99.6.2 浮动框架添加链接浮动框架添加链接网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.7 小实例小实例框架的实际应用框架的实际应用实例代码实例代码-框架框架HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.7 小实例小实例框架的实际应用框架的实际应用实例代码实例代码-leftHTML/CSS/JavaScript 标准教程实例版(第2版)第章99.7 小实例小实例框架的实际应用框架的实际应用实例代码实例代码-left(接上页)(接上页)HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.7 小实例小实例框架的实际应用框架的实际应用实例代码实例代码-topHTML/CSS/JavaScript 标准教程实例版(第2版)第章99.7 小实例小实例框架的实际应用框架的实际应用实例代码实例代码-top(接上页)(接上页)HTML/CSS/JavaScript 标准教程实例版(第2版)第章99.7 小实例小实例框架的实际应用框架的实际应用网页效果网页效果