5-框架的应用

1、框架的应用框架的应用n通过本章的学习，能够达到熟练运用本章所讲到通过本章的学习，能够达到熟练运用本章所讲到的关于框架的基本知识，灵活自由地对框架进行的关于框架的基本知识，灵活自由地对框架进行分割，重点掌握框架的基本结构和分割方式。分割，重点掌握框架的基本结构和分割方式。教学基本要求教学基本要求 主要内容主要内容建立框架建立框架窗口框架设置窗口框架设置浮动窗口浮动窗口框架与超链接框架与超链接n框架结构框架结构n框架分割方式框架分割方式建立框架建立框架建立框架建立框架 - 框架结构框架结构n框架的基本结构包括两部分：框架集、框架框架的基本结构包括两部分：框架集、框架v分别利用分别利用标签和标签和标

2、签来定义。标签来定义。n窗口框架文档窗口框架文档HTML的结构如下：的结构如下：n n左右分割窗口左右分割窗口采用采用colscols属性，即在垂直方向上将浏览器分割成多个属性，即在垂直方向上将浏览器分割成多个窗口。结构如下：窗口。结构如下： frameset cols = frame src = frame src = cols cols后面的参数值可以用数字、百分比和剩余值及这后面的参数值可以用数字、百分比和剩余值及这三种方式的混合方式来表示。剩余值（三种方式的混合方式来表示。剩余值（* *）表示当前所有）表示当前所有窗口设定之后的剩余部分。窗口设定之后的剩余部分。建立框架建立框架 - 框

3、架分割方式框架分割方式n列分的框架示例：列分的框架示例：建立框架建立框架 - 框架分割方式框架分割方式n列分的框架示例代码：列分的框架示例代码：建立框架建立框架 - 框架分割方式框架分割方式 列分的框架示例 n上下分割窗口上下分割窗口采用采用rowsrows属性，即在水平方向上讲浏览器分割成多个属性，即在水平方向上讲浏览器分割成多个窗口。结构如下：窗口。结构如下： frameset rows = frame src = frame src = rows rows后面的参数值可以用数字、百分比和剩余值及这后面的参数值可以用数字、百分比和剩余值及这三种方式的混合方式来表示。剩余值（三种方式的混合方

4、式来表示。剩余值（* *）表示当前所有）表示当前所有窗口设定之后的剩余部分。窗口设定之后的剩余部分。建立框架建立框架 - 框架分割方式框架分割方式n行分的框架示例：行分的框架示例：建立框架建立框架 - 框架分割方式框架分割方式n行分的框架示例代码：行分的框架示例代码：建立框架建立框架 - 框架分割方式框架分割方式 行分的框架示例 n嵌套分割窗口嵌套分割窗口既左右分割又上下分割窗口。结构如下：既左右分割又上下分割窗口。结构如下： frameset rows = frame src = frameset cols = frame src = frame src = 或者将或者将colscols属性

5、和属性和rowsrows属性调换位置。属性调换位置。建立框架建立框架 - 框架分割方式框架分割方式n既有行分又有列分的框架示例：既有行分又有列分的框架示例：建立框架建立框架 - 框架分割方式框架分割方式n既有行分又有列分的框架示例代码：既有行分又有列分的框架示例代码：建立框架建立框架 - 框架分割方式框架分割方式 既有行分又有列分的框架示例 框架集属性设置框架集属性设置n属性描述cols、rows窗口横向和纵向的分割border框架边沿宽度bordercolor框架边沿颜色frameborder是否显示框架边沿n水平水平/ /垂直分割窗口属性垂直分割窗口属性rows/colsrows/cols

6、rowsrows和和colscols的值分别说明窗口横向和纵向的分割情况。的值分别说明窗口横向和纵向的分割情况。 其语法格式如下：其语法格式如下： frameset rows = n设置窗口框架宽度属性设置窗口框架宽度属性borderborder 通过通过borderborder属性，可以设定分割窗口的框架框宽度。属性，可以设定分割窗口的框架框宽度。其语法格式如下：其语法格式如下： frameset border = 框架集属性框架集属性n设置边框颜色属性设置边框颜色属性bordercolorbordercolor 通过通过bordercolorbordercolor属性，可以设定框架边框的颜

7、色。属性，可以设定框架边框的颜色。 其语法格式如下：其语法格式如下： frameset bordercolor = n设置框架隐藏属性设置框架隐藏属性frameborderframeborder 通过通过frameborderframeborder属性，可以设定是否显示框架线。属性，可以设定是否显示框架线。其语法格式如下：其语法格式如下： frameset frameborder = value value可以取值可以取值0 0（不显示）或者（不显示）或者1 1（显示）。（显示）。框架集属性框架集属性n框架集属性示例：框架集属性示例：框架集属性框架集属性横向分割纵向分割n框架集属性示例代码：框

8、架集属性示例代码：框架集属性框架集属性 框架集属性示例 框架集属性框架集属性小结小结水平分水平分割窗口割窗口属性属性rows垂直垂直分割分割窗口窗口属性属性cols设置窗口设置窗口框架宽度框架宽度属性属性border设置边设置边框颜色框颜色属性属性bordercolor设置框设置框架隐藏架隐藏属性属性frameborder框架窗口属性框架窗口属性n属性描述src框架中显示的文件路径name框架名称frameborder是否显示框架scrolling是否显示滚动条noresize是否可调整框架尺寸marginwidth框架左右边距marginheight框架上下边距框架窗口属性框架窗口属性nsr

9、c属性属性v通过通过src属性，可以设置框架显示的文件路径。属性，可以设置框架显示的文件路径。v语法格式：语法格式：nname属性属性v通过通过name属性，可以设定框架窗口的名称。属性，可以设定框架窗口的名称。v语法格式：语法格式： v通过窗口名称可以引用该窗口通过窗口名称可以引用该窗口框架窗口属性框架窗口属性nframeborder属性属性v通过通过frameborder属性可以是否显示框架框。属性可以是否显示框架框。v语法格式：语法格式： vValue取值为：取值为：1（显示）或（显示）或0（不显示）（不显示）nsrcolling属性属性v通过通过srcolling属性，可以设定该窗口是

10、否显示滚动条。属性，可以设定该窗口是否显示滚动条。v语法格式：语法格式： vValue取值：取值：yes、no、auto；框架窗口属性框架窗口属性nnoresize属性属性v设定用户不能鼠标拖动调整窗口的大小。设定用户不能鼠标拖动调整窗口的大小。v语法格式如下：语法格式如下：v若该属性为一标志，没有取值。若该属性为一标志，没有取值。v若不指定该属性，用户可以调整框架窗口大小若不指定该属性，用户可以调整框架窗口大小nmarginwidth属性属性v通过通过marginwidth属性，可以设定框架中的内容与框架属性，可以设定框架中的内容与框架边缘的左右距离，相当于设定页面的左右边距。边缘的左右距离

11、，相当于设定页面的左右边距。v语法格式如下：语法格式如下： v框架窗口属性框架窗口属性nmarginheight属性属性v通过通过marginheight属性，可以设定框架上下边距，相当属性，可以设定框架上下边距，相当于设定页面的上下边距。于设定页面的上下边距。v语法格式如下：语法格式如下： v框架窗口属性框架窗口属性n框架窗口属性示例：框架窗口属性示例：n框架窗口属性框架窗口属性n框架窗口属性示例代码：框架窗口属性示例代码： 框架窗口属性示例 框架窗口框架窗口属性小结属性小结Src属性属性name属性属性Frameborder属性属性Srcolling属性属性Noresize属性属性Marg

12、inWidth属性属性MarginHeight属性属性浮动窗口浮动窗口n浮动窗口就是在浏览器窗口中可以嵌套子窗口，在浮动窗口就是在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容，在其中显示页面的内容，在HTML中通过中通过标标签实现。签实现。v其语法格式如下：其语法格式如下：vv浮动框架中不能用浮动框架中不能用标签取代标签取代标签，标签，标签处于标签处于标签之内。标签之内。n浮动窗口例：浮动窗口例：浮动窗口浮动窗口浮动窗口浮动窗口n浮动窗口示例代码：浮动窗口示例代码： 浮动窗口示例 用 IFRAME 可以在HTML文件里显示另一个网页。 这个 HTML 文档中使用 IFRAME 来显示另外一

13、个 叫Frame_a.html 的网页。 框架与超链接框架与超链接n普通框架与超链接普通框架与超链接n浮动框架与超链接浮动框架与超链接普通框架与超链接普通框架与超链接n普通框架与超链接示例：普通框架与超链接示例：nn普通框架与超链接示例代码：普通框架与超链接示例代码：普通框架与超链接普通框架与超链接 普通框架与超链接示例 其中，framelist.html的代码见下页：普通框架与超链接普通框架与超链接nframelist.htmlframelist.html的代码如下：的代码如下： framelist.html Frame_a Frame_b Frame_c浮动框架与超链接浮动框架与超链接n浮

14、动框架与超链接示例：浮动框架与超链接示例： n浮动框架与超链接浮动框架与超链接n浮动框架与超链接示例：浮动框架与超链接示例：v点击点击“欢迎进入我的天地欢迎进入我的天地”链接后，所示页面：链接后，所示页面： n.4.2 浮动框架与超链接浮动框架与超链接n浮动框架与超链接示例：浮动框架与超链接示例：v点击点击“感谢您的光临感谢您的光临”链接后，所示页面：链接后，所示页面： n浮动框架与超链接浮动框架与超链接n浮动框架与超链接示例代码：浮动框架与超链接示例代码：v5-4-2.htm程序示例代码：程序示例代码：n 浮动框架与超链接示例 浮动窗口 欢迎进入我的天地 感谢您的光临 浮动框架与超链接浮动框架与超链接n浮动框架与超链接示例代码：浮动框架与超链接示例代码：v5-4-2-1.htm程序示例代码：程序示例代码： 浮动框架与超链接示例 欢迎您进入我的网站！ 浮动框架与超链接浮动框架与超链接n浮动框架与超链接示例代码：浮动框架与超链接示例代码：v5-4-2-2.htm程序示例代码：程序示例代码： 浮动框架与超链接示例 欢迎进入浮动框架与超链接浮动框架