第七章框架的应用.doc_咨信网zixin.com.cn

资源描述

第七章框架的应用框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样就可以很方便的在浏览器中浏览不同的网页效果。当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。框架技术也多用于后台管理页面排版。 1 框架的基本结构框架的基本结构主要分为框架和框架集两个部分。它是利用<frame>标记与<frameset>标记来定义。其中<frame>标记用于定义框架，而<frameset>标记则用于定义框架集。 <html> <head> <title>框架的基本结构</title> </head> <frameset…> <frame…></frame> </frameset> </html> <frameset>标记不可以包含在<html>标记中，直接将该标记包含在<html>标记中。 2 框架的设置常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用<frameset>标记中的rows(水平分割)或cols(垂直分割)属性来进行分割。在完成窗口的分割后，接下来就要设置每个分割出来的子窗口。设置子窗口的属性都在相应的子窗口的<frame>标记中。其中，最重要的属性为子窗口的名称(name属性)和要导入到框架中的子窗口HTML文件的路径(src属性)。 2.1 窗口的水平分割 rows属性可定义一个水平分割的窗口框架。格式： <frameset rows="高度1，高度2,…,* "> <frame src="url"> <frame src="url"> … </frameset> ü rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其它子窗口高度分配后所剩余的高度。 ü 设置高度数值的方式有两种：采用整数设置，单位为像素px：<frameset rows="100,200,*"> 用百分比设置，如：<frameset rows="20%,50%,*"> 实例1.html： <html> <head> <title>采用整数设置窗口的水平分割</title> </head> <frameset rows="80,120,*"> <frame></frame> <frame></frame> <frame></frame> </frameset> </html> 在水平分割窗口后，设置第一个窗口的高度为80px，第二个窗口中的高度为120px，第三个窗口的高度是浏览器的宽度减去前两个窗口的高度。网页效果如图7-1。图7-1设置窗口的水平分割 2.2 窗口的垂直分割 cols属性可定义一个垂直分割的窗口框架。格式： <frameset cols="宽度1，宽度2,…,* "> <frame src="url"> <frame src="url"> … </frameset> 垂直宽度值的设置，与水平分割高度值的设置方式相同。实例2.html： <html> <head> <title>采用整数设置窗口的垂直分割</title> </head> <frameset cols="80,120,*"> <frame></frame> <frame></frame> <frame></frame> </frameset> </html> 网页效果如图7-2。图7-2设置窗口的垂直分割 2.3 窗口的嵌套分割在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，如图7-3所示，实现“厂”字型框架需要对窗口进行嵌套分割。所谓的嵌套分割是指一个窗口框架还包含了另一个窗口框架。整个框架将用数个<frameset>标记建立。先用<frameset>的rows属性对窗口进行上下分割，然后再用cols属性把下面的窗口进行垂直分割，就完成了“厂”字型的框架。实例3.html： <html> <head> <title>窗口的嵌套分割</title> </head> <frameset rows="30%,*"> <frame></frame> <frameset cols="20%,*"> <frame></frame> <frame></frame> </frameset> </frameset> </html> 网页效果如图7-3。图7-3设置窗口的嵌套分割 2.4 框架的边框在<frameset>标记中，可运用border属性控制分割窗口框架的边框。格式：<frameset border="n"> n为整数，代表此窗口框架的宽度，单位为像素(px)。实例4.html： <html> <head> <title>框架的边框控制</title> </head> <frameset rows="30%,*" border=12> <frame></frame> <frameset cols="20%,*"> <frame></frame> <frame></frame> </frameset> </frameset> </html> 网页效果如图7-4。图7-4框架的边框 2.5 框架的隐藏 frameborder属性用于控制窗口框架的周围是否显示框架，此属性可使用在<frameset>标记与<frame>标记中，如果使用在<frameset>标记内时，可控制窗口框架的所有子窗口，如果用在<frame>标记中，则只能控制该标记所代表的子窗口。格式：<frameset frameborder="0"或"1"> "0"表示不显示边框，"1"表示显示边框，默认值为1。实例5.html： <html> <head> <title>框架的隐藏</title></head> <frameset cols="30%,40%,*" frameborder=0> <frame src=left.html></frame> <frame src=center.html></frame> <frame src=right.html></frame> </frameset> </html> 网页效果如图7-5。图7-5 框架的隐藏 3 子窗口的设置 3.1 指定子窗口显示网页 src属性是用来指定要导入到某个子窗口的HTML文件的位置。格式：<frame src="html文件的位置"> src属性的设置方法和<img>标记的src属性的用法是一样的，下面的<frame>标记，将设置子窗口显示名称为frame.html的网页。实例6.html： <html> <head> <title>指定子窗口显示网页</title> </head> <frameset cols="30%,40%,*"> <frame src=left.html></frame> <frame src=center.html></frame> <frame src=right.html></frame> </frameset> </html> 定义一个垂直分割的窗口框架，并在各子窗口中显示不同的网页。网页效果如图7-6。图7-6指定子窗口显示网页 3.2 定义子窗口名称 name属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口。格式：<frame name="子窗口名称"> 实例7.html： <html> <head> <title>指定子窗口的名称</title> </head> <frameset cols="30%,40%,*"> <frame src=left.html name=left></frame> <frame src=center.html name=center></frame> <frame src=right.html name=right></frame> </frameset> </html> 网页效果如图7-7。图7-7指定子窗口的名称 3.3 控制子窗口滚动条 scrolling属性用于控制窗口框架中是否显示滚动条，使用此属性，可以避免HTML文件因内容过多而无法完全显示。此属性用于<frame>标记中。格式：<frame scrolling="yes或no或auto"> yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。实例8.html： <html> <head> <title>控制框架滚动条</title> </head> <frameset rows="20%,70%,*"> <frame src="" name=left scrolling=yes></frame> <frame src=center.html name=center scrolling=no></frame> <frame src="" name=right scrolling=auto></frame> </frameset> </html> 网页效果如图7-8。图7-8控制子窗口滚动条 3.4 调整子窗口的尺寸运用<frameset>标记的rows和cols属性水平或垂直分割窗口。但设置后，各窗口框架的大小并非固定无法更改，当想更改窗口框架大小时，可以将鼠标指针移到要更改的框架上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调整窗口的大小。如果不希望用户能随意地改变子窗口的大小，那么这时可以在<frame>标记中，添加noresize属性，格式如下： <frame noresize src="url"> 3.5 设置子窗口的边距网页的边距可以通过margin来设定，那么框架和网页一样也可设置边距，可以利用<frame>标记中的marginwidth属性来设置框架左右边缘的宽度；marginheight属性可以设置框架上下边缘的宽度。格式： <frame src="url" marginwidth="value" marginheight="value"> 在HTML文件中，利用框架<frame>标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。实例9.html： <html> <head> <title>设置框架边距</title> </head> <frameset cols="30%,*"> <frame src=left.html marginheight=50 marginwidth=50></frame> <frame src=right.html></frame> </frameset> </html> 网页效果如图7-9。图7-9 设置子框架边距 4 浮动框架在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记<iframe></iframe>，同样用src属性来设置框架中显示文件的路径。格式：<iframe src="url"></iframe> 与框架不同的是，浮动框架可以包含在<body>标记中。浮动框架所含的属性见表7-1。表7-1 浮动框架的属性属性描述 src 设置源文件路径 width 设置浮动框架窗口宽度 height 设置浮动框架窗口高度 name 设置框架的名称 align 设置框架对齐方式 frameborder 设置是否有框架边框 framespacing 设置框架边框宽度 scrolling 设置框架滚动条 noresize 设置框架尺寸是否可以调整 bordercolor 设置边框颜色 marginwidth 设置框架左右边距 marginheight 设置框架上下边距一个页面中设置了两个浮动框架，第一个浮动框架的宽为200，第二个浮动框架的宽为300，两个浮动框架的高都为200，边框宽为3。实例10.html： <html> <head> <title>设置浮动框架</title> </head> <body> <table width=100%> <tr> <td><iframe src=fram1.html width=200 height=200></td> <td><iframe src=fram2.html width=300 height=200 frameborder=3 scrolling=yes></td> </tr> </table> </body> </html> 网页效果如图7-10。图7-10 设置浮动框架 5 综合示例在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点内容(超链接内容，文本或图片)，需要在框架之间建立超链接，并指明显示的目标文件的框架。使用<a>的target属性可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在target指定的框架内。 target属性的值可以是框架名，格式：<a href="目标文件名" target="框架名">热点文本</a> 框架名有四个特殊的值，分别实现4类特殊的操作，表7-2。表7-2 框架名的四种值取值描述 target=_blank 链接的目标文件被载入一个新的没有名字的浏览器窗口 target=_self 链接的目标文件被载入当前框架窗口中，代替正在显示的热点文本所在的那个文件 target=_top 链接的目标文件被载入整个浏览器窗口 target=_parent 当框架有嵌套时，链接的目标文件被载入父框架中。否则，被载入整个浏览器窗口 target=某个框架名称xname 链接的目标文件被载入指定的框架xname中下例实现框架间的链接。主页面m.html划分为左右两个子框架(子窗口)，名称分别为f1和f2。左子框架载入z.html，z.html包含若干超链接，点击超链接，链接到的目标文件根据target指定的f2，被装载到右子框架中。右边子框架最初放入x.html。 m.html的内容： <html> <head> <title>框架间的链接</title> </head> <frameset rows=30%,70%> <frame src="z.html" name="f1"> <frame src="x.html" name="f2"> </frameset> </html> z.html的内容： <html> <head> <title>例题</title> </head> <body link=red alink=blue vlink=green> <H2 align=center><B>例题</B></H2> <FONT size=3 color=purple> <CENTER> <A href="x.html" target="f2">【例1】</A>  <A href="y.html" target="f2">【例2】</A>  <A href="a.html" target="f2">【例3】</A>  <A href="b.html" target="f2">【例4】</A>  <A href="c.html" target="f2">【例5】</A>  </CENTER> </FONT> </body> </html> x.html的内容： <HTML> <HEAD> <TITLE>x---网页内容</TITLE> </HEAD> <BODY link=red alink=blue vlink=green> x---网页内容 </BODY> </HTML> 网页效果如图7-11和图7-12。图7-11 打开后最初结果图7-12 点击某个超链接后结果

展开阅读全文

第七章 框架的应用.doc

第七章框架的应用.doc