第07章 窗口框架.ppt

1、第7章 窗口框架,7.1 窗口框架简介 7.2 窗口框架控制 7.3 定义窗口名称 7.4 浮动窗口,上一页,下一页,目 录,结 束,本 节,7.1 窗口框架简介,7.1.1 什么是窗口框架 7.1.2 窗口框架的基本结构 7.1.3 窗口框架的分割方式,上一页,下一页,目 录,结 束,本 节,7.2.1 框架设置标签frameset 7.2.2 子窗口设置标签frame,7.2 窗口框架控制,上一页,下一页,目 录,结 束,本 节,7.1.1 什么是窗口框架,窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。 当将浏览的画面分

2、割成多个窗口后，各窗口将可以扮演不同的功能。因为有时候，希望把网页做成：一个窗口显示的是目录，另一个窗口显示的是所选取的项目内容，这样，目录不变，项目之间的切换就会快多了。本章将解决这个问题，介绍几个新的标签，用它们书写的HTML文件不但可以在一个屏幕上开多个窗口，而且可以在每个窗口上显示不同的网页内容。这就是HTML中的窗口框架。,上一页,下一页,目 录,结 束,本 节,在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。,7.1.2 窗口框架的基本结构,上一页,下一页,目 录,结 束,本 节,图中的网页做成两个窗口：一个窗口显示的是目录，另一个窗口显示的是所选取的项目内容。

3、 这就是所谓的窗口框架，窗口框架可以生成能独立变化和滚动的窗口，从而能将一个窗口分割为若干个子窗口，在每个子窗口中显示一个HTML文档。 例：测试窗口框架文档，效果如上图。 文件ex7-01.html的源代码 窗口框架文档 ,上一页,下一页,目 录,结 束,本 节,现在，再来看看HTML是如何实现窗口框架文档的。框架的基本结构，主要利用标签与标签来定义。其中标签用于定义一个窗口框架，标签则用于定义窗口框架中的子窗口。 实际上，窗口框架文档的书写格式与一般的HTML文档的书写格式相同，只是用代替标签，是一个成对标签，有开始和结束标签，在标签内使用了另一个标签，用它来指定每一个窗口的内容。,上一页

4、,下一页,目 录,结 束,本 节,窗口框架文档HTML的结构如下： ,上一页,下一页,目 录,结 束,本 节,7.1.3 窗口框架的分割方式,窗口框架的分割方式可分为两种，一种是水平分割，另一种是垂直分割。至于采用哪种分割方式，则要通过标签中的rows属性（水平分割）和cols属性（垂直分割）来设置。 在完成窗口画面的分割后，就要控制每个分割出来的子窗口。控制子窗口的属性需要通过标签，在标签最重要的属性为子窗口的名称（name属性）与要导入的HTML文件的来源（src属性）。,上一页,下一页,目 录,结 束,本 节,框架设置标签标签是成对出现标签，首标签和尾标签之间的内容就是使用框架的HTML

5、文档主体部分。在使用框架的HTML文档中不能出现标签，否则会导致web浏览器忽略所有的框架定义而只显示和之间的内容。 标签的作用是将窗口分割为若干个子窗口。 标签主要有rows、cols、border、bordercolor和frameborder五个属性。,7.2.1 框架设置标签frameset,上一页,下一页,目 录,结 束,本 节,一、水平/垂直分割窗口属性rows/cols 1格式： 2说明： rows后面的值，说明窗口横向分隔情况，cols后面的值说明纵向分隔说明。 各参数值之间用逗号分隔，依次表示各个子窗口的高度（宽度）。,上一页,下一页,目 录,结 束,本 节, rows和co

6、ls可以用数字、百分比或剩余值以及这三种方式的混合来表示： 数字。表示子窗口高度（宽度）所占的像素点数。 百分比“%”。表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。 剩余值“*”。表示当前所有窗口设定之后的剩余部分。当符号*只出现一次，即其他子窗口的大小都有明确定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余空间。 例如，表示将浏览器窗口分割为3列，第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的40%；第二个子窗口在第二列，占浏览器窗口剩余空间的2/3，即其宽度为整个浏览器窗口宽度的40%；第三个子窗口占剩

7、余空间的1/3，宽度为整个浏览器窗口宽度的20%。 再如在ex7-1.html的文件中，设置cols=179,*，表示纵向有两个窗口，其中第一个宽度为179个像素点，剩余的是第二个窗口；没有rows，说明用的是默认值，即横向为一个窗口。,上一页,下一页,目 录,结 束,本 节,二、设置窗口架框宽度属性border 在标签中，可运用border属性控制分割窗口的框架的宽度，其语法如下所示： 其中的数值代表此窗口框架的宽度，单位为像素。 三、设置边框颜色属性bordercolor 在标签中，可运用bordercolor属性设置边框的颜色，其语法如下所示： 其中的#代表此边框的颜色，取值可为RGB代

8、码。,上一页,下一页,目 录,结 束,本 节,四、设置框架隐藏属性frameborder frameborder属性用于控制窗口框架四周，是否显示框架。此属性可使用在标签与标签中，使用在标签内时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的子窗口，其语法为： 0代表不显示框线，1代表显示框线，其默认值为1。,上一页,下一页,目 录,结 束,本 节,7.2.2 子窗口设置标签frame,窗口框架建立起来后，应在各个子窗口内放入相应的信息。子窗口的初始化是用标签来描述的。屏幕上的每一个子窗口均对应一个标签。用标签中的src属性链接相应的文件，该文件内容就显示在标签对应的窗口之

9、中，像在图7-1中，ex7-01-1.html就放在左边的窗口，ex7-01-2.html则放在右边的窗口，其实现的代码片段如下： ,是个单向的标签，使用时，将它写在 的开始和结束标签之间，它主要有六个属性：src、name、marginwidth、marginheight、scrolling和noresize。,上一页,下一页,目 录,结 束,本 节,1指定子窗口显示网页属性src src属性是用于指定要导入到某个子窗口的HTML文件的位置，其语法如下所示： 如果一个标签中没有src属性，则该窗口显示为空。 2定义子窗口名称属性name name属性是用来指定窗口的名称，此属性是可选的。当完

10、成定义子窗口的名称后，我们便可在超链接中，指定显示网页的子窗口。其语法如下所示： ,上一页,下一页,目 录,结 束,本 节,3控制框架滚动条属性scrolling scrolling属性用于描述该窗口是否设有滚动条。该属性是可选的。其设置语法如下： 各设置值所代表的意义依序为显示、不显示、自动设置，默认值是auto。 4子窗口大小的调整属性noresize noresize 属性是一个标志，没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了noresize属性，则窗口不能调整。如果默认，则可以自行调整窗口的大小。,上一页,下一页,目 录,结 束,本 节,5设置边距属性margi

11、nhaeght/marginheight marginwidth属性用来控制窗口内显示的内容与窗口左右边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。 marginaheight属性，用来控制窗口内显示的内容与上下边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。,上一页,下一页,目 录,结 束,本 节,如果窗口中的内容含有高亮度的链接，那么，当鼠标点了这个链接之后，被链接的内容放在哪个窗口呢？我们来认识一个新的属性targe ，用这个属性就可以将被链接的内容放置到你想要放的窗口内。,7.3 定义窗口名称,上一页,下一页,目 录,结 束,本 节,如在文件ex7-01.ht

12、ml中，放置文件的功能是由下面的代码片段实现的： 在文件ex7-1-1.html中，放置文件的功能是由下面的代码片段实现的： 1.春望 2.春晓 从上述代码可以看出，ex7-1-1.html文件的内容将在窗口“windows1”（左边窗口）中显示，ex7-1-2.html文件的内容将右边窗口显示。,上一页,下一页,目 录,结 束,本 节,在ex7-1-1.html文件中，当你单击超级链接时，所链接的内容都将在右边窗口显示。 用target属性定义窗口的名称，必须使用字母/数字字符，否则窗口名将被忽略。但是，有几个特定的窗口名例外，这几个窗口名有特殊含义，它们是_blank、_self、_parent和_top。 target=_blank 当将target属性设置为_blank时，若单击超链接后，将以打开另一窗口的方式显示网页。 target=_self 当将target属性设置为_self时，则将在同一窗口中显示链接的网页。 target=_parent 当将target属性设置为_parent时，若单击超链接后，该链接网页将导入目前子窗口的上一层