网页设计javascript窗口框架课件

第第 8 8 章章 窗窗 口口 框框 架架第第8 8章章 窗口框架窗口框架 8.1 8.1 窗口框架简介窗口框架简介 8.2 8.2 窗口框架控制窗口框架控制 8.3 FRAME8.3 FRAME间的链接间的链接8.4 8.4 浮动窗口浮动窗口 8.1 窗口框架简介窗口框架简介窗口框架可用于窗口框架可用于将窗口画面分割成多将窗口画面分割成多个小窗口个小窗口，且每个小窗口中，可以显，且每个小窗口中，可以显示不同的网页，示不同的网页，达到在浏览器中同时达到在浏览器中同时浏览多个不同网页的效果浏览多个不同网页的效果。8.1.1 8.1.1 什么是窗口框架什么是窗口框架在介绍窗口框架文档之前，先来看看其在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。应用实例，有一个感性认识，见下图。Frameset结构的基本格式结构的基本格式 .8.1.2 8.1.2 窗口框架的基本结构窗口框架的基本结构包含Frameset结构的HTML文件 文件文件framePage.htm的源代码的源代码窗口框架文档窗口框架文档 你的浏览器不支持带框架的网页你的浏览器不支持带框架的网页 v标签用于定义一个窗口框架标签用于定义一个窗口框架v则用于定义窗口框架中的子窗口则用于定义窗口框架中的子窗口v窗口框架文档的书写格式与一般的窗口框架文档的书写格式与一般的HTML文文档的书写格式相同，只是档的书写格式相同，只是用用代替代替标签标签，是一个成对标签，是一个成对标签，有开始和结束标签，在有开始和结束标签，在标签内使用标签内使用了另一个标签了另一个标签，用它来指定每一个窗，用它来指定每一个窗口的内容。口的内容。说明说明 窗口框架的分割方式可分为两种，一窗口框架的分割方式可分为两种，一种是水平分割种是水平分割(rows属性属性)，另一种是垂，另一种是垂直分割直分割(cols属性属性)。8.1.3 8.1.3 窗口框架的分割方式窗口框架的分割方式8.2 窗口框架控制窗口框架控制v是成对标签是成对标签，首标签，首标签和尾标签和尾标签之间的内容是之间的内容是HTML文文档主体部分。档主体部分。v使用框架的使用框架的HTML文档中不能出现文档中不能出现标签标签，否则会导致，否则会导致web浏览器忽略所有的框架浏览器忽略所有的框架定义而只显示定义而只显示和和之间的内容。之间的内容。v标签主要有标签主要有rows、cols、border、bordercolor和和frameborder五个属性五个属性。8.2.1 框架设置标签框架设置标签frameset1格式：格式：2说明：说明：rows说明窗口行分隔情况，说明窗口行分隔情况，cols说明列分说明列分隔。隔。各参数值之间用各参数值之间用逗号逗号分隔，依次表示各个分隔，依次表示各个子窗口的高度（宽度）。子窗口的高度（宽度）。一、水平一、水平/垂直分割垂直分割窗口属性窗口属性rows/cols rows和和cols可以用可以用数字、百分比或剩余值数字、百分比或剩余值以及这三种方式的混合以及这三种方式的混合来表示：来表示：数字：数字：表示子窗口高度（宽度）所占的表示子窗口高度（宽度）所占的像素点数。像素点数。百分比百分比“%”：表示子窗口高度（宽度）：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。占整个浏览器窗口高度（宽度）的百分比。一、水平一、水平/垂直分割垂直分割窗口属性窗口属性rows/cols剩余值剩余值“*”。表示当前所有窗口设定之后的剩。表示当前所有窗口设定之后的剩余部分。余部分。当符号当符号*只出现一次只出现一次，即其他子窗口的大小都有明，即其他子窗口的大小都有明确定义时，表示该子窗口的大小将根据浏览器窗确定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。口的大小而自动调整。当符号当符号*出现一次以上时出现一次以上时，表示按比例分割浏览器，表示按比例分割浏览器窗口的剩余空间。窗口的剩余空间。一、水平一、水平/垂直分割垂直分割窗口属性窗口属性rows/cols ：表示将浏览器窗口分割为表示将浏览器窗口分割为3列：列：第一个子窗口在第一列，窗口宽度为整第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的个浏览器窗口宽度的40%；第二个子窗口在第二列，占浏览器窗口第二个子窗口在第二列，占浏览器窗口剩余空间的剩余空间的2/3，即其宽度为整个浏览器，即其宽度为整个浏览器窗口宽度的窗口宽度的40%；第三个子窗口占剩余空间的第三个子窗口占剩余空间的1/3，宽度为，宽度为整个浏览器窗口宽度的整个浏览器窗口宽度的20%。示例示例示例：横向与纵向同时分割示例：横向与纵向同时分割 Simple FRAMESET 示例：嵌套分割示例：嵌套分割 在在标签中，可运用标签中，可运用border属性属性控制分割窗口的框架的宽度控制分割窗口的框架的宽度，其语法如下所，其语法如下所示：示：其中的数值代表此窗口框架的宽度，单位其中的数值代表此窗口框架的宽度，单位为像素为像素,數值為整數。數值為整數。二、设置窗口框架二、设置窗口框架宽度属性宽度属性border示例：框架宽度设置示例：框架宽度设置 Simple FRAMESET 在在标签中，可运用标签中，可运用bordercolor属性属性设置边框的颜色设置边框的颜色，其语法如下所示：，其语法如下所示：其中的其中的#代表此边框的颜色，取值可为代表此边框的颜色，取值可为RGB代码，可以是單詞如：代码，可以是單詞如：red;或十六進制或十六進制如：如：#00ff00。三、设置边框三、设置边框颜色属性颜色属性bordercolor示例：框架颜色设置示例：框架颜色设置 Simple FRAMESET frameborder属性用于属性用于控制窗口框架四周，控制窗口框架四周，是否显示框架是否显示框架。此属性可使用在。此属性可使用在标标签与签与标签中，使用在标签中，使用在标签内标签内时，可控制窗口框架的所有子窗口。使用在时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的子标签时，则仅能控制该标签所代表的子窗口，其语法为：窗口，其语法为：0代表不显示框线，代表不显示框线，1代表显示框线，其默代表显示框线，其默认值为认值为1。四、设置框架四、设置框架隐藏属性隐藏属性frameborder示例：框的设置示例：框的设置 Simple FRAMESET v每个子窗口均由每个子窗口均由标签定义标签定义v是单个的标签，使用时，将它是单个的标签，使用时，将它写在写在的开始和结束标签之间，的开始和结束标签之间，它它主要有六个属性：主要有六个属性：src、name、marginwidth、marginheight、scrolling和和noresize。8.2.2 子窗口设置标签子窗口设置标签framesrc属性是用于属性是用于指定要导入到该子窗口的指定要导入到该子窗口的HTML文件文件，其语法如下所示：，其语法如下所示：如果一个如果一个标签中没有标签中没有src属性，则该属性，则该窗口显示为空。窗口显示为空。1 src属性属性name属性是用来属性是用来指定窗口的名称指定窗口的名称，此属，此属性是可选的。当完成定义子窗口的名称后，性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网页的子我们便可在超链接中，指定显示网页的子窗口。其语法如下所示：窗口。其语法如下所示：2 name属性属性scrolling属性用于描述该窗口属性用于描述该窗口是否有滚动条是否有滚动条。该属性是可选的。其设置语法如下：该属性是可选的。其设置语法如下：各设置值所代表的意义依序为显示、不显各设置值所代表的意义依序为显示、不显示、自动设置，默认值是示、自动设置，默认值是auto。3 scrolling属性属性noresize 属性是一个标志，没有取值。它属性是一个标志，没有取值。它说明浏览者说明浏览者是否可以自行用鼠标调整窗口是否可以自行用鼠标调整窗口的大小的大小。如果设定了。如果设定了noresize属性，则窗属性，则窗口不能调整。如果默认，则可以自行调整口不能调整。如果默认，则可以自行调整窗口的大小。窗口的大小。4 noresize属性属性marginwidth属性：属性：用来控制窗口内显示的用来控制窗口内显示的内容与窗口左右边缘的距离内容与窗口左右边缘的距离，该属性是取一，该属性是取一个像素值，默认为个像素值，默认为1，该属性是可选的。，该属性是可选的。marginaheight属性：属性：用来控制窗口内显示用来控制窗口内显示的内容与上下边缘的距离的内容与上下边缘的距离，该属性是取一个，该属性是取一个像素值，默认为像素值，默认为1，该属性是可选的。，该属性是可选的。5设置边距属性设置边距属性marginwidth/marginheight 对于框架网页中的超链接，可用对于框架网页中的超链接，可用target属性指定该链接的内容在哪个属性指定该链接的内容在哪个窗口显示。窗口显示。8.3 FRAME间的链接间的链接如在本章的第一个例子中，放置文件的功能是由如在本章的第一个例子中，放置文件的功能是由下面的代码片段实现的：下面的代码片段实现的：在文件在文件left.html中，放置文件的功能是由下面的中，放置文件的功能是由下面的代码片段实现的：代码片段实现的：1.春望春望 2.春晓春晓 分析第一个例子分析第一个例子31用用target属性指定的目标属性指定的目标窗口名称，必须窗口名称，必须使用字母使用字母/数字字符，否则窗口名将被忽略数字字符，否则窗口名将被忽略。有几个有几个特定的窗口特定的窗口名例外，这几个窗口名名例外，这几个窗口名有特殊含义，它们是有特殊含义，它们是_blank、_self、_parent和和_top。target属性属性32 target=_blank当将当将target属性设置为属性设置为_blank时，若单击超时，若单击超链接后，将打开一个新窗口来显示网页。链接后，将打开一个新窗口来显示网页。target=_self当将当将target属性设置为属性设置为_self时，则将在同时，则将在同一窗口中显示链接的网页。一窗口中显示链接的网页。target属性属性33 target=_parent当将当将target属性设置为属性设置为_parent时，若单击超时，若单击超链接后，该链接网页将导入目前子窗口的上链接后，该链接网页将导入目前子窗口的上一层框架。若没有上层，则导入在同一窗口一层框架。若没有上层，则导入在同一窗口中。中。target=_top当将当将target属性设置为属性设置为_top时，则将脱离目前时，则将脱离目前的窗口框架，在最上层的窗口框架中，显示的窗口框架，在最上层的窗口框架中，显示链接的网页。链接的网页。target属性属性34示例：AAA.html文件文件Menu.html文件文件我们的任务我们的任务我们的成员我们的成员 我们的公司我们的公司 示例：示例：在一个页面中直接引入另一个页面，这种技术称在一个页面中直接引入另一个页面，这种技术称为浮动的窗口（为浮动的窗口（Floating frame）(也叫也叫“内部框架内部框架”。在。在HTML中通过中通过iframe标签实现。标签实现。其语法如下所示：其语法如下所示：其中其中#=初始页面的初始页面的URL。8.4 8.4 浮动窗口浮动窗口37属性说明：src：文件的路径，既可是文件的路径，既可是HTML文件，也可以文件，也可以是文本、是文本、ASP、以及、以及GIF、JPEG、JPG、PNG等图片文件；等图片文件；width、height：画中画画中画区域的宽与高；区域的宽与高；scrolling:当当SRC的指定的的指定的HTML文件在指定的文件在指定的区域显示不完时，滚动选项，如果设置为区域显示不完时，滚动选项，如果设置为NO，则不出现滚动条；如为，则不出现滚动条；如为Auto：则自动出现：则自动出现滚动条；如为滚动条；如为Yes，则显示，则显示;属性说明：FrameBorder：区域边框的宽度，为了让区域边框的宽度，为了让“画中画画中画“与邻近的内容相融合，常设与邻近的内容相融合，常设置为置为0。Name：子窗口名称子窗口名称 Marginheight、marginwidth：指定文字指定文字与边界的距离与边界的距离示例：页内框架示例页内框架示例李白李白静思静思怨情怨情真可惜，您的浏览器不支持框架！真可惜，您的浏览器不支持框架！示例：李白（李白（701762），字太白，陕西成纪），字太白，陕西成纪人。人。自幼学道术，五岁诵六甲自幼学道术，五岁诵六甲十五好十五好剑术。年少时轻财仗义，曾手刃数人。二十岁剑术。年少时轻财仗义，曾手刃数人。二十岁时于岷山之阳跟东严子学道术。时于岷山之阳跟东严子学道术。示例：file2 床前明月光，床前明月光，疑是地上霜。疑是地上霜。举头望明月，举头望明月，低头思故乡。低头思故乡。示例：file3 美人卷珠帘，美人卷珠帘，深坐蹙蛾眉；深坐蹙蛾眉；但见泪痕湿，但见泪痕湿，不知心恨谁？不知心恨谁？p经常不断地学习,你就什么都知道。你知道得越多,你就越有力量pStudyConstantly,AndYouWillKnowEverything.TheMoreYouKnow,TheMorePowerfulYouWillBe写在最后Thank You在别人的演说中思考，在自己的故事里成长Thinking In Other PeopleS Speeches，Growing Up In Your Own Story讲师：XXXXXX XX年XX月XX日