网页设计javascript窗口框架课件

1、网页设计javascript窗口框架第第 8 8 章章 窗窗 口口 框框 架架网页设计javascript窗口框架第第8 8章章 窗口框架窗口框架 8.1 8.1 窗口框架简介窗口框架简介 8.2 8.2 窗口框架控制窗口框架控制 8.3 FRAME8.3 FRAME间的链接间的链接8.4 8.4 浮动窗口浮动窗口 网页设计javascript窗口框架8.1 8.1 窗口框架简介窗口框架简介网页设计javascript窗口框架窗口框架可用于窗口框架可用于将窗口画面分割成多将窗口画面分割成多个小窗口个小窗口，且每个小窗口中，可以显，且每个小窗口中，可以显示不同的网页，示不同的网页，达到在浏览器中

2、同时达到在浏览器中同时浏览多个不同网页的效果浏览多个不同网页的效果。8.1.1 8.1.1 什么是窗口框架什么是窗口框架网页设计javascript窗口框架在介绍窗口框架文档之前，先来看看其在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。应用实例，有一个感性认识，见下图。网页设计javascript窗口框架Frameset结构的基本格式结构的基本格式 . . 8.1.2 8.1.2 窗口框架的基本结构窗口框架的基本结构网页设计javascript窗口框架包含Frameset结构的HTML文件 文件文件framePage.htm的源代码的源代码窗口框架文档窗口框架文档 你的浏

3、览器不支持带框架的网页你的浏览器不支持带框架的网页 网页设计javascript窗口框架v标签用于定义一个窗口框架标签用于定义一个窗口框架v则用于定义窗口框架中的子窗口则用于定义窗口框架中的子窗口v窗口框架文档的书写格式与一般的窗口框架文档的书写格式与一般的HTML文档的书写格式相同，只是文档的书写格式相同，只是用用代代替替标签标签，是一个成对标签，是一个成对标签，有开始和结束标签，在有开始和结束标签，在标签内使标签内使用了另一个标签用了另一个标签，用它来指定每一个，用它来指定每一个窗口的内容。窗口的内容。 说明说明网页设计javascript窗口框架 窗口框架的分割方式可分为两种，一窗口框架

4、的分割方式可分为两种，一种是水平分割种是水平分割(rows属性属性)，另一种是垂，另一种是垂直分割直分割(cols属性属性)。8.1.3 8.1.3 窗口框架的分割方式窗口框架的分割方式网页设计javascript窗口框架8.2 8.2 窗口框架控制窗口框架控制网页设计javascript窗口框架v是成对标签是成对标签，首标签，首标签和尾标签和尾标签之间的内容是之间的内容是HTML文文档主体部分。档主体部分。v使用框架的使用框架的HTML文档中不能出现文档中不能出现标签标签，否则会导致，否则会导致web浏览器忽略所有的框架浏览器忽略所有的框架定义而只显示定义而只显示和和之间的内容。之间的内容。

5、v标签主要有标签主要有rows、cols、border、bordercolor和和frameborder五个属性五个属性。8.2.1 8.2.1 框架设置标签框架设置标签framesetframeset网页设计javascript窗口框架1格式：格式： 2说明：说明： rows说明窗口行分隔情况，说明窗口行分隔情况，cols说明列分说明列分隔。隔。 各参数值之间用各参数值之间用逗号逗号分隔，依次表示各个分隔，依次表示各个子窗口的高度（宽度）。子窗口的高度（宽度）。一、水平一、水平/ /垂直分割垂直分割窗口属性窗口属性rows/colsrows/cols网页设计javascript窗口框架 ro

6、ws和和cols可以用可以用数字、百分比或剩余值数字、百分比或剩余值以及这三种方式的混合以及这三种方式的混合来表示：来表示： 数字：数字：表示子窗口高度（宽度）所占的表示子窗口高度（宽度）所占的像素点数。像素点数。 百分比百分比“%”：表示子窗口高度（宽度）：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。占整个浏览器窗口高度（宽度）的百分比。 一、水平一、水平/ /垂直分割垂直分割窗口属性窗口属性rows/colsrows/cols网页设计javascript窗口框架剩余值剩余值“*”。表示当前所有窗口设定之后的剩。表示当前所有窗口设定之后的剩余部分。余部分。当符号当符号*只出现

7、一次只出现一次，即其他子窗口的大小都有明，即其他子窗口的大小都有明确定义时，表示该子窗口的大小将根据浏览器窗确定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。口的大小而自动调整。当符号当符号*出现一次以上时出现一次以上时，表示按比例分割浏览器，表示按比例分割浏览器窗口的剩余空间。窗口的剩余空间。 一、水平一、水平/ /垂直分割垂直分割窗口属性窗口属性rows/colsrows/cols网页设计javascript窗口框架 ：表示将浏览器窗口分割为表示将浏览器窗口分割为3列：列：第一个子窗口在第一列，窗口宽度为整第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的个浏览器窗口宽度的4

8、0%；第二个子窗口在第二列，占浏览器窗口第二个子窗口在第二列，占浏览器窗口剩余空间的剩余空间的2/3，即其宽度为整个浏览器，即其宽度为整个浏览器窗口宽度的窗口宽度的40%；第三个子窗口占剩余空间的第三个子窗口占剩余空间的1/3，宽度为，宽度为整个浏览器窗口宽度的整个浏览器窗口宽度的20%。示例示例网页设计javascript窗口框架示例：横向与纵向同时分割示例：横向与纵向同时分割 Simple FRAMESETSimple FRAMESETFRAMESET cols=40%,60% rows=2 FRAME name=BotRight src=yellow.htm网页设计javascript窗

9、口框架示例：嵌套分割示例：嵌套分割FRAMESET rows=105,FRAMESET rows=网页设计javascript窗口框架 在在标签中，可运用标签中，可运用border属性属性控制分割窗口的框架的宽度控制分割窗口的框架的宽度，其语法如下所，其语法如下所示：示： 其中的数值代表此窗口框架的宽度，单位其中的数值代表此窗口框架的宽度，单位为像素为像素,數值為整數。數值為整數。 二、设置窗口框架二、设置窗口框架宽度属性宽度属性borderborder网页设计javascript窗口框架示例：框架宽度设置示例：框架宽度设置 Simple FRAMESETSimple FRAMESETFRAM

10、ESET border=10 cols=40%,60% rows=2 FRAME name=BotRight src=yellow.htm网页设计javascript窗口框架三、设置边框三、设置边框颜色属性颜色属性bordercolorbordercolor网页设计javascript窗口框架示例：框架颜色设置示例：框架颜色设置 Simple FRAMESETSimple FRAMESETFRAMESET border=10 bordercolor= FRAME name=BotRight src=yellow.htm网页设计javascript窗口框架 frameborder属性用于属性用于

11、控制窗口框架四周，控制窗口框架四周，是否显示框架是否显示框架。此属性可使用在。此属性可使用在标标签与签与标签中，使用在标签中，使用在标签内标签内时，可控制窗口框架的所有子窗口。使用在时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的标签时，则仅能控制该标签所代表的子窗口，其语法为：子窗口，其语法为： 0代表不显示框线，代表不显示框线，1代表显示框线，其默代表显示框线，其默认值为认值为1。四、设置框架四、设置框架隐藏属性隐藏属性frameborderframeborder网页设计javascript窗口框架示例：框的设置示例：框的设置 Simple FRAMESETSimpl

12、e FRAMESETFRAMESET cols=40%,60% rows=2 网页设计javascript窗口框架v每个子窗口均由每个子窗口均由标签定义标签定义v是单个的标签，使用时，将它是单个的标签，使用时，将它写在写在的开始和结束标签之间，的开始和结束标签之间，它它主要有六个属性：主要有六个属性：src、name、marginwidth、marginheight、scrolling和和noresize。8.2.2 8.2.2 子窗口设置标签子窗口设置标签frameframe网页设计javascript窗口框架src属性是用于属性是用于指定要导入到该子窗口的指定要导入到该子窗口的HTML文件

13、文件，其语法如下所示：，其语法如下所示： 如果一个如果一个标签中没有标签中没有src属性，则该属性，则该窗口显示为空。窗口显示为空。 1 1 srcsrc属性属性网页设计javascript窗口框架name属性是用来属性是用来指定窗口的名称指定窗口的名称，此属，此属性是可选的。当完成定义子窗口的名称性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网后，我们便可在超链接中，指定显示网页的子窗口。其语法如下所示：页的子窗口。其语法如下所示： 2 2 namename属性属性网页设计javascript窗口框架scrolling属性用于描述该窗口属性用于描述该窗口是否有滚动条是否有

14、滚动条。该属性是可选的。其设置语法如下：该属性是可选的。其设置语法如下： 各设置值所代表的意义依序为显示、不显各设置值所代表的意义依序为显示、不显示、自动设置，默认值是示、自动设置，默认值是auto。3 3 scrollingscrolling属性属性网页设计javascript窗口框架noresize 属性是一个标志，没有取值。它属性是一个标志，没有取值。它说明浏览者说明浏览者是否可以自行用鼠标调整窗口是否可以自行用鼠标调整窗口的大小的大小。如果设定了。如果设定了noresize属性，则窗属性，则窗口不能调整。如果默认，则可以自行调整口不能调整。如果默认，则可以自行调整窗口的大小。窗口的大小

15、。4 4 noresizenoresize属性属性网页设计javascript窗口框架marginwidth属性：属性：用来控制窗口内显示的用来控制窗口内显示的内容与窗口左右边缘的距离内容与窗口左右边缘的距离，该属性是取一，该属性是取一个像素值，默认为个像素值，默认为1，该属性是可选的。，该属性是可选的。marginaheight属性：属性：用来控制窗口内显示用来控制窗口内显示的内容与上下边缘的距离的内容与上下边缘的距离，该属性是取一个，该属性是取一个像素值，默认为像素值，默认为1，该属性是可选的。，该属性是可选的。5 5设置边距属性设置边距属性marginwidth /marginheigh

16、tmarginwidth /marginheight网页设计javascript窗口框架 对于框架网页中的超链接，可用对于框架网页中的超链接，可用target属性指定该链接的内容在哪个属性指定该链接的内容在哪个窗口显示。窗口显示。 8.3 FRAME8.3 FRAME间的链接间的链接网页设计javascript窗口框架31如在本章的第一个例子中，放置文件的功能是由如在本章的第一个例子中，放置文件的功能是由下面的代码片段实现的：下面的代码片段实现的：在文件在文件left.html中，放置文件的功能是由下面的中，放置文件的功能是由下面的代码片段实现的：代码片段实现的：1.春望春望 2.春晓春晓 分

17、析第一个例子分析第一个例子网页设计javascript窗口框架32用用target属性指定的目标属性指定的目标窗口名称，必须窗口名称，必须使用字母使用字母/数字字符，否则窗口名将被忽略数字字符，否则窗口名将被忽略。有几个有几个特定的窗口特定的窗口名例外，这几个窗口名名例外，这几个窗口名有特殊含义，它们是有特殊含义，它们是_blank、_self、_parent和和_top。targettarget属性属性网页设计javascript窗口框架33 target=_blank当将当将target属性设置为属性设置为_blank时，若单击时，若单击超链接后，将打开一个新窗口来显示网页。超链接后，将打

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

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