网页设计javascript-窗口框架

《网页设计javascript-窗口框架》由会员分享，可在线阅读，更多相关《网页设计javascript-窗口框架（44页珍藏版）》请在装配图网上搜索。

1、第 8 章 窗 口 框 架,第8章 窗口框架,8.1 窗口框架简介 8.2 窗口框架控制 8.3 FRAME间的链接 8.4 浮动窗口,8.1 窗口框架简介,窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览多个不同网页的效果。,8.1.1 什么是窗口框架,在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。,Frameset结构的基本格式 . . ,8.1.2 窗口框架的基本结构,包含Frameset结构的HTML文件,文件framePage.htm的源代码 窗口框架文档 你的浏览器不支持带框架的网页 ,标签用于定义一个窗口框

2、架 则用于定义窗口框架中的子窗口 窗口框架文档的书写格式与一般的HTML文档的书写格式相同，只是用代替标签，是一个成对标签，有开始和结束标签，在标签内使用了另一个标签，用它来指定每一个窗口的内容。,说明,窗口框架的分割方式可分为两种，一种是水平分割(rows属性)，另一种是垂直分割(cols属性)。,8.1.3 窗口框架的分割方式,8.2 窗口框架控制,是成对标签，首标签和尾标签之间的内容是HTML文档主体部分。 使用框架的HTML文档中不能出现标签，否则会导致web浏览器忽略所有的框架定义而只显示和之间的内容。 标签主要有rows、cols、border、bordercolor和frameb

3、order五个属性。,8.2.1 框架设置标签frameset,1格式： 2说明： rows说明窗口行分隔情况，cols说明列分隔。 各参数值之间用逗号分隔，依次表示各个子窗口的高度（宽度）。,一、水平/垂直分割窗口属性rows/cols, rows和cols可以用数字、百分比或剩余值以及这三种方式的混合来表示： 数字：表示子窗口高度（宽度）所占的像素点数。 百分比“%”：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。,一、水平/垂直分割窗口属性rows/cols,剩余值“*”。表示当前所有窗口设定之后的剩余部分。 当符号*只出现一次，即其他子窗口的大小都有明确定义时，表示该子窗

4、口的大小将根据浏览器窗口的大小而自动调整。 当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余空间。,一、水平/垂直分割窗口属性rows/cols,： 表示将浏览器窗口分割为3列： 第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的40%； 第二个子窗口在第二列，占浏览器窗口剩余空间的2/3，即其宽度为整个浏览器窗口宽度的40%； 第三个子窗口占剩余空间的1/3，宽度为整个浏览器窗口宽度的20%。,示例,示例：横向与纵向同时分割, Simple FRAMESET ,示例：嵌套分割, ,在标签中，可运用border属性控制分割窗口的框架的宽度，其语法如下所示： 其中的数值代表此窗口框架的宽

5、度，单位为像素,數值為整數。,二、设置窗口框架宽度属性border,示例：框架宽度设置, Simple FRAMESET ,在标签中，可运用bordercolor属性设置边框的颜色，其语法如下所示： 其中的#代表此边框的颜色，取值可为RGB代码，可以是單詞如：red;或十六進制如：#00ff00。,三、设置边框颜色属性bordercolor,示例：框架颜色设置, Simple FRAMESET ,frameborder属性用于控制窗口框架四周，是否显示框架。此属性可使用在标签与标签中，使用在标签内时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的子窗口，其语法为： 0代表不

6、显示框线，1代表显示框线，其默认值为1。,四、设置框架隐藏属性frameborder,示例：框的设置, Simple FRAMESET ,每个子窗口均由标签定义 是单个的标签，使用时，将它写在的开始和结束标签之间，它主要有六个属性：src、name、marginwidth、marginheight、scrolling和noresize。,8.2.2 子窗口设置标签frame,src属性是用于指定要导入到该子窗口的HTML文件，其语法如下所示： 如果一个标签中没有src属性，则该窗口显示为空。,1 src属性,name属性是用来指定窗口的名称，此属性是可选的。当完成定义子窗口的名称后，我们便可在

7、超链接中，指定显示网页的子窗口。其语法如下所示： ,2 name属性,scrolling属性用于描述该窗口是否有滚动条。该属性是可选的。其设置语法如下： 各设置值所代表的意义依序为显示、不显示、自动设置，默认值是auto。,3 scrolling属性,noresize 属性是一个标志，没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了noresize属性，则窗口不能调整。如果默认，则可以自行调整窗口的大小。,4 noresize属性,marginwidth属性：用来控制窗口内显示的内容与窗口左右边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。 marginaheig

8、ht属性：用来控制窗口内显示的内容与上下边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。,5设置边距属性marginwidth /marginheight,对于框架网页中的超链接，可用target属性指定该链接的内容在哪个窗口显示。,8.3 FRAME间的链接,31,如在本章的第一个例子中，放置文件的功能是由下面的代码片段实现的： 在文件left.html中，放置文件的功能是由下面的代码片段实现的： 1.春望 2.春晓 ,分析第一个例子,32,用target属性指定的目标窗口名称，必须使用字母/数字字符，否则窗口名将被忽略。 有几个特定的窗口名例外，这几个窗口名有特殊含义，它们是_

9、blank、_self、_parent和_top。,target属性,33, target=_blank 当将target属性设置为_blank时，若单击超链接后，将打开一个新窗口来显示网页。 target=_self 当将target属性设置为_self时，则将在同一窗口中显示链接的网页。,target属性,34, target=_parent 当将target属性设置为_parent时，若单击超链接后，该链接网页将导入目前子窗口的上一层框架。若没有上层，则导入在同一窗口中。 target=_top 当将target属性设置为_top时，则将脱离目前的窗口框架，在最上层的窗口框架中，显示链接

10、的网页。,target属性,示例：,AAA.html文件 ,Menu.html文件 我们的任务 我们的成员 我们的公司 ,示例：,37,在一个页面中直接引入另一个页面，这种技术称为浮动的窗口（Floating frame）(也叫“内部框架”。在HTML中通过iframe标签实现。 其语法如下所示： 其中#=初始页面的URL。,8.4 浮动窗口,属性说明：,src：文件的路径，既可是HTML文件，也可以是文本、ASP、以及GIF、JPEG、JPG、PNG等图片文件； width、height：画中画区域的宽与高； scrolling:当SRC的指定的HTML文件在指定的区域显示不完时，滚动选项，

11、如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;,属性说明：,FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。 Name：子窗口名称 Marginheight、marginwidth ：指定文字与边界的距离,示例：,页内框架示例 李白 静思 怨情 真可惜，您的浏览器不支持框架！ ,示例： file1.htm, file1.htm 李白（701762），字太白，陕西成纪人。自幼学道术，五岁诵六甲十五好剑术。年少时轻财仗义，曾手刃数人。二十岁时于岷山之阳跟东严子学道术。 ,示例：file2.htm, file2 床前明月光，疑是地上霜。举头望明月，低头思故乡。 ,示例： file3.htm, file3 美人卷珠帘，深坐蹙蛾眉；但见泪痕湿，不知心恨谁？ ,=,本章結束 謝謝圍觀,