《WEB应用开发工程师 5-框架的应用》由会员分享，可在线阅读，更多相关《WEB应用开发工程师 5-框架的应用（43页珍藏版）》请在金锄头文库上搜索。
1、框架的应用,通过本章的学习，能够达到熟练运用本章所讲到的关于框架的基本知识，灵活自由地对框架进行分割，重点掌握框架的基本结构和分割方式。,教学基本要求,主要内容,建立框架,窗口框架设置,浮动窗口,框架与超链接,框架结构 框架分割方式,建立框架,建立框架 - 框架结构,框架的基本结构包括两部分：框架集、框架 分别利用标签和标签来定义。 窗口框架文档HTML的结构如下：, ,左右分割窗口 采用cols属性，即在垂直方向上将浏览器分割成多个窗口。结构如下： cols后面的参数值可以用数字、百分比和剩余值及这三种方式的混合方式来表示。剩余值（*）表示当前所有窗口设定之后的剩余部分。,建立框架 - 框架
2、分割方式,列分的框架示例：,建立框架 - 框架分割方式,列分的框架示例代码：,建立框架 - 框架分割方式, 列分的框架示例 ,上下分割窗口 采用rows属性，即在水平方向上讲浏览器分割成多个窗口。结构如下： rows后面的参数值可以用数字、百分比和剩余值及这三种方式的混合方式来表示。剩余值（*）表示当前所有窗口设定之后的剩余部分。,建立框架 - 框架分割方式,行分的框架示例：,建立框架 - 框架分割方式,行分的框架示例代码：,建立框架 - 框架分割方式, 行分的框架示例 ,嵌套分割窗口 既左右分割又上下分割窗口。结构如下： 或者将cols属性和rows属性调换位置。,建立框架 - 框架分割方式
3、,既有行分又有列分的框架示例：,建立框架 - 框架分割方式,既有行分又有列分的框架示例代码：,建立框架 - 框架分割方式, 既有行分又有列分的框架示例 ,框架集属性设置,水平/垂直分割窗口属性rows/cols rows和cols的值分别说明窗口横向和纵向的分割情况。 其语法格式如下： 设置窗口框架宽度属性border 通过border属性，可以设定分割窗口的框架框宽度。 其语法格式如下： ,框架集属性,设置边框颜色属性bordercolor 通过bordercolor属性，可以设定框架边框的颜色。 其语法格式如下： 设置框架隐藏属性frameborder 通过frameborder属性，可以
4、设定是否显示框架线。 其语法格式如下： value可以取值0（不显示）或者1（显示）。,框架集属性,框架集属性示例：,框架集属性,横向分割,纵向分割,框架集属性示例代码：,框架集属性, 框架集属性示例 ,框架集属性小结,水平分割窗口属性rows,垂直分割窗口属性cols,设置窗口框架宽度属性border,设置边框颜色属性border color,设置框 架隐藏 属性 frame border,框架窗口属性,框架窗口属性,src属性 通过src属性，可以设置框架显示的文件路径。 语法格式： name属性 通过name属性，可以设定框架窗口的名称。 语法格式： 通过窗口名称可以引用该窗口,框架窗口
5、属性,frameborder属性 通过frameborder属性可以是否显示框架框。 语法格式： Value取值为：1（显示）或0（不显示） srcolling属性 通过srcolling属性，可以设定该窗口是否显示滚动条。 语法格式： Value取值：yes、no、auto；,框架窗口属性,noresize属性 设定用户不能鼠标拖动调整窗口的大小。 语法格式如下： 若该属性为一标志，没有取值。 若不指定该属性，用户可以调整框架窗口大小 marginwidth属性 通过marginwidth属性，可以设定框架中的内容与框架边缘的左右距离，相当于设定页面的左右边距。 语法格式如下： ,框架窗口属
6、性,marginheight属性 通过marginheight属性，可以设定框架上下边距，相当于设定页面的上下边距。 语法格式如下： ,框架窗口属性,框架窗口属性示例：,框架窗口属性,框架窗口属性示例代码：, 框架窗口属性示例 ,框架窗口属性小结,Src 属性,name属性,Frame border属性,Srcolling 属性,Noresize 属性,Margin Width 属性,Margin Height 属性,浮动窗口,浮动窗口就是在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容，在HTML中通过标签实现。 其语法格式如下： 浮动框架中不能用标签取代标签，标签处于标签之内。,浮动窗口
7、例：,浮动窗口,浮动窗口,浮动窗口示例代码：, 浮动窗口示例 用 IFRAME 可以在HTML文件里显示另一个网页。 这个 HTML 文档中使用 IFRAME 来显示另外一个 叫Frame_a.html 的网页。 ,框架与超链接,普通框架与超链接 浮动框架与超链接,普通框架与超链接,普通框架与超链接示例：,普通框架与超链接示例代码：,普通框架与超链接, 普通框架与超链接示例 其中，framelist.html的代码见下页：,普通框架与超链接,framelist.html的代码如下：, framelist.html Frame_a Frame_b Frame_c ,浮动框架与超链接,浮动框架与超
8、链接示例：,浮动框架与超链接,浮动框架与超链接示例： 点击“欢迎进入我的天地”链接后，所示页面：,.4.2 浮动框架与超链接,浮动框架与超链接示例： 点击“感谢您的光临”链接后，所示页面：,浮动框架与超链接,浮动框架与超链接示例代码： 5-4-2.htm程序示例代码：, 浮动框架与超链接示例 浮动窗口 欢迎进入我的天地 感谢您的光临 ,浮动框架与超链接,浮动框架与超链接示例代码： 5-4-2-1.htm程序示例代码：, 浮动框架与超链接示例 欢迎您进入我的网站！ ,浮动框架与超链接,浮动框架与超链接示例代码： 5-4-2-2.htm程序示例代码：, 浮动框架与超链接示例 欢迎进入 ,浮动框架与超链接,浮动框架与超链接示例代码： 5-4-2-3.htm程序示例代码：, 浮动框架与超链接示例 感谢光临 ,本单元小结,本章介绍了框架网页的结构 框架页面相关属性的设置 框架页面的超链接 思考 框架网页的结构主要有哪三种方式 如何设置框架页面相关属性以及框架页面的超链接,
