1、第 7 章 窗 口 框 架,第7章 窗口框架,7.1 窗口框架简介 7.2 窗口框架控制 7.3 FRAME间的链接 7.4 浮动窗口,7.1 窗口框架简介,窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览多个不同网页的效果。,7.1.1 什么是窗口框架,在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。,Frameset结构的基本格式. . ,7.1.2 窗口框架的基本结构,包含Frameset结构的HTML文件,文件framePage.htm的源代码窗口框架文档你的浏览器不支持带框架的网页 ,标签用于定义一个窗口框架 则
2、用于定义窗口框架中的子窗口 窗口框架文档的书写格式与一般的HTML文档的书写格式相同，只是用代替标签，是一个成对标签，有开始和结束标签，在标签内使用了另一个标签，用它来指定每一个窗口的内容。,说 明,窗口框架的分割方式可分为两种，一种是水平分割(rows属性)，另一种是垂直分割(cols属性)。,7.1.3 窗口框架的分割方式,7.2 窗口框架控制,是成对标签，首标签和尾标签之间的内容是HTML文档主体部分。 使用框架的HTML文档中不能出现标签，否则会导致web浏览器忽略所有的框架定义而只显示和之间的内容。 标签主要有rows、cols、border、bordercolor和framebor
3、der五个属性。,7.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代码。,三、设置边框 颜色属性bordercolor,示例：框架颜色设置, Simple FRAMESET,frameborder属性用于控制窗口框架四周，是否显示框架。此属性可使用在标签与标签中，使用在标签内时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的子窗口，其语法为：0代表不显示框线，1代表显示框线，其默认值为1。,四、设置框架 隐藏属性framebor
6、der,示例：框的设置, Simple FRAMESET,每个子窗口均由标签定义 是单个的标签，使用时，将它写在的开始和结束标签之间，它主要有六个属性：src、name、marginwidth、marginheight、scrolling和noresize。,7.2.2 子窗口设置标签frame,src属性是用于指定要导入到该子窗口的HTML文件，其语法如下所示：如果一个标签中没有src属性，则该窗口显示为空。,1 src属性,name属性是用来指定窗口的名称，此属性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网页的子窗口。其语法如下所示：,2 name属性,scrolli
7、ng属性用于描述该窗口是否有滚动条。该属性是可选的。其设置语法如下：各设置值所代表的意义依序为显示、不显示、自动设置，默认值是auto。,3 scrolling属性,noresize 属性是一个标志，没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了noresize属性，则窗口不能调整。如果默认，则可以自行调整窗口的大小。,4 noresize属性,marginwidth属性：用来控制窗口内显示的内容与窗口左右边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。marginaheight属性：用来控制窗口内显示的内容与上下边缘的距离，该属性是取一个像素值，默认为1，该属
8、性是可选的。,5设置边距属性 marginwidth /marginheight,对于框架网页中的超链接，可用target属性指定该链接的内容在哪个窗口显示。,7.3 FRAME间的链接,31,如在本章的第一个例子中，放置文件的功能是由下面的代码片段实现的：在文件left.html中，放置文件的功能是由下面的代码片段实现的： 1.春望 2.春晓 ,分析第一个例子,32,用target属性指定的目标窗口名称，必须使用字母/数字字符，否则窗口名将被忽略。 有几个特定的窗口名例外，这几个窗口名有特殊含义，它们是_blank、_self、_parent和_top。,target属性,33, targe
9、t=“_blank“ 当将target属性设置为_blank时，若单击超链接后，将打开一个新窗口来显示网页。 target=“_self“ 当将target属性设置为_self时，则将在同一窗口中显示链接的网页。,target属性,34, target=“_parent“ 当将target属性设置为_parent时，若单击超链接后，该链接网页将导入目前子窗口的上一层框架。若没有上层，则导入在同一窗口中。 target=“_top“ 当将target属性设置为_top时，则将脱离目前的窗口框架，在最上层的窗口框架中，显示链接的网页。,target属性,示例：,AAA.html文件,Menu.ht
10、ml文件我们的任务 我们的成员 我们的公司 ,示例：,37,在一个页面中直接引入另一个页面，这种技术称为浮动的窗口（Floating frame）(也叫“内部框架”。在HTML中通过iframe标签实现。其语法如下所示：其中#=初始页面的URL。,7.4 浮动窗口,属性说明：,src：文件的路径，既可是HTML文件，也可以是文本、ASP、以及GIF、JPEG、JPG、PNG等图片文件； width、height：“画中画“区域的宽与高； scrolling:当SRC的指定的HTML文件在指定的区域显示不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，
11、则显示;,属性说明：,FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。 Name：子窗口名称 Marginheight、marginwidth ：指定文字与边界的距离,示例：,页内框架示例李白静思 怨情真可惜，您的浏览器不支持框架！ ,示例： file1.htm, file1.htm李白（701762），字太白，陕西成纪人。自幼学道术，五岁诵六甲十五好剑术。年少时轻财仗义，曾手刃数人。二十岁时于岷山之阳跟东严子学道术。,示例：file2.htm, file2 床前明月光，疑是地上霜。举头望明月，低头思故乡。,示例： file3.htm, file3 美人
12、卷珠帘，深坐蹙蛾眉；但见泪痕湿，不知心恨谁？,=,7-5 Frontpage 中框架的建立,7-5-1 如何建立框架,在FrontPage 2002的任何一种查看模式下，都可以执行菜单栏的“文件/新建/网页或站点”命令，再从右边的“新建网页或站点”视图中选择“网页模板”，然后再切换到“框架网页”标签页。,7-5-1 如何建立框架,7-5-1 如何建立框架,在“框架网页”标签页中有10种框架样式供用户参考。1）横幅和目录 2）目录3）页脚 4）脚注5）标题、页脚和目录 6）水平拆分7）嵌套式层次结构 8）垂直拆分9）由顶向下的层次结构 10）标题,7-5-1 如何建立框架,“目录”样式的框架网页
13、。,7-5-2 如何链接已存在的网页,当“框架”的样式选定后，就分别在左右框架内单击“设置初始网页(I)”按钮，将已编辑好的网页分别放入左右框架中。,7-5-2 如何链接已存在的网页,单击框架内的“设置初始网页”按钮，选择要链接的HTML文件。,7-5-2 如何链接已存在的网页,7-5-2 如何链接已存在的网页,FrontPage要将某个网页放入框架内，是以“超链接”方式来操作的，所以要放入框架的网页，必须事先在FrontPage 2002中编辑保存好。,7-5-3 如何保存网页,当框架网页做好后，执行菜单栏的“文件/保存”命令，即可将其保存到网站目录下。使用浏览器打开保存的框架网页，即可看到
14、浏览器窗口中包含多个页面的框架网页。,7-5-3 如何保存网页,7-5-4 如何在框架中 产生空白页面,可使用“新建网页”按钮在框架内产生空白页面直接编辑制作网页。,7-5-4 如何在框架中 产生空白页面,可使用“新建网页”按钮在框架内产生空白页面直接编辑制作网页。,7-5-5 如何调整框架大小,框架建立好之后，还可对框架的大小、样式等作调整。,7-5-6 如何增加框架数目,可以在已经制作完成的框架内再增加框架的数据。方法有两种： 一、使用菜单栏命令（1）选取要增加框架数目的框架，譬如将左框架分成上下两列，先将光标移到左框架并单击有关选项。,7-5-6 如何增加框架数目,7-5-6 如何增加框
15、架数目,一、使用菜单栏命令（2）执行菜单栏的“框架/拆分框架”命令，选择要分割的框架样式。,7-5-6 如何增加框架数目,7-5-6 如何增加框架数目,二、用鼠标直接拖动按着Ctrl键不放，直接用鼠标拖动框架的分隔线到指定的位置即可。,7-5-6 如何增加框架数目,二、用鼠标直接拖动按着Ctrl键不放，直接用鼠标拖动框架的分隔线到指定的位置即可。,7-5-7 如何删除框架,要删除多余的框架，可先选取要删除的框架，然后再执行“框架/删除框架”命令即可删掉多余的框架。,7-5-8 如何观看页面链接,当在网页编辑模式下，将框架内的页面都设计完成后，接着便可切换到“超链接”查看模式中，来预览整个含有框
16、架网页的链接状况。,7-5-8 如何观看页面链接,7-6 如何设置框架属性,“框架”和表格、图片一样都各有其属性值，可以通过改变“框架”的属性来达到修改框架的目的。,7-6 如何设置框架属性,（1）选取要改变属性的框架。 （2）在该框架内单击鼠标右键，在其弹出的快捷菜单栏中选取“框架属性”选项。 （3）在“框架属性”对话框中修改框架属性。,7-6 如何设置框架属性,7-6 如何设置框架属性,7-6-1 如何调整分隔线宽度,调整框架分隔线宽度的操作在 “框架属性” 对话框中完成。 （1）单击“框架网页”按钮，调出“网页属性”对话框，再选取“框架”标签页。,7-6-1 如何调整分隔线宽度,7-6-
17、1 如何调整分隔线宽度,（2）选中“显示边框”复选框，表示出现分隔线，若不打勾则分隔线不显示。 （3）在“框架间距”旁边设置分隔线宽度。,7-6-1 如何调整分隔线宽度,7-6-2 如何隐藏分隔线,将“显示边框”复选框内的“”去掉即可。,7-7 框架的超链接,“框架”的超链接可分为两种：一种是网站内部的文件链接，另外一种是对外的，也就是以WWW为链接的对象。“框架”的“超链接”和一般超链接是有些不同的地方，因为当“框架”有很多时，若没事先设定，框架网页就会被超链接的网页取代。,7-7-1 如何目标框架,（1）打开所需文件夹中的网站。 （2）先选取要“超链接”的对象，如文字或图片。 （3）单击超链接按钮，弹出“插入超链接”对话框。,7-7-1 如何目标框架,7-7-1 如何目标框架,7-7-1 如何目标框架,7-7-2 精选网站框架范例,1、框架范例此网页为框架边线隐藏的典型，左边为按钮区，右边为内容区，一目了然。,7-7-2 精选网站框架范例,7-7-2 精选网站框架范例,2、框架范例此网页为上下框架，下边的框架又分为左右两个框架，用来显示图书分类的主菜单。,7-7-2 精选网站框架范例,本章结束,
