HTML从入门到精通 第10章 框架结构_第1页
HTML从入门到精通 第10章 框架结构_第2页
HTML从入门到精通 第10章 框架结构_第3页
HTML从入门到精通 第10章 框架结构_第4页
HTML从入门到精通 第10章 框架结构_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第10章—F 框架结构窗口框架简介设置框架集的基本属性设置窗口属性浮动框架框架与链接框架的最主要功能是用来“分割”页面窗口，使每个“小窗口”能显示不同的HTML文件，这样的页面结构就称为框架结构的页面，而这些“小窗口”就被称为框架的“窗口”。可以说框架就是将网页画面分成几个窗口，同时取得多个URL。本章将详细讲解各种框架标记的使用。窗口框架简介10.1.1什么是框架如果页面可以分为几个部分，各个部分之间是相互独立的页面，却又互相有关联，用户在浏览这种页面时，当对其中某一部分进行操作，如浏览、下载时，其他页面会保持不变，这样的页面就被称为框架结构的页面，也称为多窗口页面。实际上框架对象本身也是一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。使用框架最主要的目的就是创建链接的结构，最常见的框架结构就是将网站的导航条作为一个单独的框架窗口，当用户查看具体的内容时，导航条窗口保持不变，这就为用户的浏览提供了方便。框架的基本结构框架主要包含两个部分，一个是框架集，另一个就是具体的框架文件。框架集就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件。通俗一点地说框架集就是存放框架结构的文件，也是访问框架文件的入口文件。如果网页由左右两个框架组成，那么除了左右两个网页文件之外，还有一个总的框架集文件。框架是页面中定义的每一个显示区域，也可以说一个窗口就是一个框架。框架页面中最基本的内容就是框架集文件，它是整个框架页面的导航文件，其基本语法如下；<html><head>vtitle>框架页面的标题v/title></head><frameset><frame><frame></frameset></html>从上面的语法结构中可以看到，在使用框架的页面中，<body>主体标记被框架标记vframeset>所代替。而对于框架页面中包含的每一个框架，都是通过vframe>标记来定义的。设置框架集的基本属性框架页面的结构也是在框架集文件中定义的，一般情况下，根据框架的分割方式来分类，主要包含3种框架结构，分别是：水平分割窗口。垂直分割窗口。嵌套分割窗口。下面对框架集的结构和一些基本属性进行详细的说明。水平分割窗口 rows水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口语法：vframesetrows="框架窗口的高度，框架窗口的高度, "><frame><frame></frameset>说明：在该语法中，rows中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。但是要注意的是，一般设定了几个rows的值，就需要有几个框架，即需要有相应数量的vframe>参数。实例代码：<html><head><title>水平分割窗口的效果</title></head><framesetrows="30%,70%"><frame><frame></frameset></html>运行代码，可以看到页面被分割成上下两个窗口，效果如图10-1所示。当浏览器大小变化时，框图10-1水平分割窗口垂直分割窗口——cols垂直分割窗口就是将页面沿垂直方向分割成多个窗口，也就是将页面分成左右排列的多个窗口语法：vframesetcols="框架窗口的宽度，框架窗口的宽度,……"><frame><frame></frameset>说明：在该语法中，cols中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。与水平分割窗口相同，一般设定了几个cols的值，就需要有几个框架，也就是有几个<frame〉参数。实例代码：<html><head>[1H计州11口IFia-H IMernetLHpkfcrn1卜店出--*J启为氏曲血收射溯MSi址脑1>4申3犢讷昭5併V叫妙肘nJ111<title>垂直分割窗口的效果</title></head><framesetcols="20%,55%,25%"><frame><frame><frame></frameset></html>运行代码，可以看到页面被分割成3个窗口，其中左右两个宽度相同，效果如图10-2所示。当浏览器大小变化时，框架也会随之 图10-2垂直分割窗口等比例缩放。嵌套分割窗口嵌套分割窗口就是在一个页面中，既有水平分割的框架，又有垂直分割的框架语法：vframesetrows="框架窗口的高度，框架窗口的高度, "><frame>vframesetcols="框架窗口的宽度，框架窗口的宽度,……">vframe>vframe>v/frameset>

•180・HTML•180・HTML网页设计参考手册</frameset>当然，也可以先进行垂直分割，再进行水平分割。其语法如下：vframesetcols="框架窗口的宽度，框架窗口的宽度,……"><frame>vframesetrows="框架窗口的高度，框架窗口的高度, "><frame>vframe>v/frameset>vframe>v/frameset>这两种结构的原理与注意事项和另外两种结构相同，主要是需要注意窗口大小的设置与窗口个数的统一。实例代码：<html><head><title>嵌套分割窗口的效果</title></head><framesetrows="30%,70%"><frame><framesetcols="20%,55%,25%"><frame><frame><frame></frameset></frameset></html>由代码可以看出，首先将页面进行水平分割成上下两个窗口，接着下面的框架又被垂直分割成个窗口。因此下面的框架标记<frame>被框架集标记己代替。运行程序，效果如图10-3所示。个窗口。勺由辽" i?Hft/£)・」〔・」甲島14―2穴问设置边框 frameborder由前面的几个实例可以看出，在默认情况下，框架窗口的四周有一条边框线，通过frameborder参数可以调整边框线的显示情况。语法：vframesetframeborder="是否显示"〉或vframeframeborder="是否显示"〉说明：frameborder的取值只能为0或1。如果取值为0，那么边框线将会被隐藏；如果取值为1边框线将会显示。在frameset中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效实例代码：<html><head><title>设置框架窗口的边框显示效果</title></head><framesetrows="20%,55%,25%"><frameframeborder="1"><framesetcols="35%,65%"frameborder="0"><frame><frame></frameset><frameframeborder="0"></frameset></html>变成运行这段代码，可以看到页面中的部分边框被隐藏，如图10-4所示。当鼠标移动到窗口中间时会变成图10-5按下鼠标的效果按下鼠标会看到隐藏的边框，如图10-5图10-5按下鼠标的效果疋件归删*他XM<L'衆现”"J*- ，彳，必固力豐"jJ收找典也秋¥|町Eh'ifec心01RnA矗盘件UgAtfr图10-4隐藏框架的边框框架的边框宽度 framespacing框架的边框宽度在默认情况下是1像素，通过参数framespacing可以调整其大小。语法：vframesetframespacing="边框宽度"〉说明：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数只能对框架集使用，对单个框架无效。

实例代码：<html><head><title>设置框架的边框宽度</title></head>图10-6设置框架的边框宽度图10-6设置框架的边框宽度<frame><framesetcols="20%,55%,25%"framespacing="30"><frame><frame><frame></frameset></frameset></html>运行这段程序，效果如图10-6所示。框架的边框颜色 bordercolor使用参数bordercolor可以设置框架集的边框颜色。语法：vframesetbordercolor="颜色代码"〉说明：该参数同样只对整个框架集有效，对于单个框架无效实例代码：<html><head><title>设置框架的边框颜色</title></head><framesetrows="30%,70%"framespacing="10"bordercolor="#CC99FF"><frame><framesetcols="20%,55%,25%"framespacing="30"bordercolor=<frame><frame><frame></frameset></frameset></html>运行这段代码，可以看到两个框架集设置了不同的边框颜色，效果如图10-7所示。图图10-7设置边框颜色设置窗口属性在框架结构的页面中，每一个框架窗口都有一个显示页面，这个页面称为框架页面。框架页面的属性设置都在<frame〉标记里进行。页面源文件 src框架结构中的各个页面都是一个单独的文件，而这些文件是通过src参数进行设置的。语法：vframesrc="页面源文件地址"〉说明：页面文件是框架页面的具体内容所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件为了说明框架的参数效果，首先设置一个框架页面的内容，代码如下：<html><head><title>段落的缩进效果</title></head><body>相传，两千五百年前，春秋时期的大音乐家俞伯牙，曾学琴于程廉先生，三年不成。后来他沿着孔子的足迹登游泰山，<blockquote>观东海日出，看云雾变化，</blockquote><blockquotexblockquote>闻松风长啸，听水涛咆哮，</blockquotex/blockquote><blockquotexblockquotexblockquote>拜大自然为师，琴艺大有长进，</blockquote></blockquote></blockquote><blockquote><blockquote><blockquote><blockquote>写出了著名的古琴曲高山和流水。</blockquote></blockquote></blockquote></blockquote></body></html>将这一文件命名为src01.html，将其保存在框架集文件的同一目录下，然后再设置框架集文件的代码如下：<html><head><title>设置页面源文件</title></head><framesetrows="30%,70%"><framesrc="pic01.gif"><framesrc="src01.html"></frameset></html>运行这段代码，效果如图10-8所示图10-8设置页面的源文件•184・HTML•184・页面名称 name页面名称是为了便于页面的查找和链接所提供的一个属性。框架的页面名称中不允许包含特殊字符、连字符-、空格等，必须是单个的单词或者字母组合。语法：vframesrc="页面文件地址"name="页面名称"〉实例代码：<html><head><title>设置页面名称</title></head><framesetrows="30%,70%"><framesrc="pic01.gif"name="pic"><framesrc="src01.html"name="text"></frameset></html>这段代码分别为上下两个框架页面命名为pic和text，运行代码时并不会显示框架名，因此不会影响框架的显示效果。调整窗口的尺寸 noresize由图10-5可以看出，当用鼠标拖动框架的边框时，框架窗口的尺寸就会随之变化。如果希望框架窗口的大小保持不变，可以设置noresize参数。语法：vframesrc="页面文件地址"noresize>说明：在frame标记中添加noresize参数，就表示框架窗口的尺寸不能改变。实例代码：尊書we■口mx酉-匾j-mwtdw扈昨antu 尊書we■口mx酉-匾j-mwtdw扈昨antu 工取砂用2此大n誥为邓琴誥丈焉桶写出t睾虽同占却悲芜山闻養弗」J空 上旳!匡占・曰J‘广」 ・」■■■■1^：A□Itltd回 Tt和啦:s&e?苗榴传.曲千直乃即IK.存牧时則的炜疾玄启曲好.曾辛龙于柑廉先住三即慕股”盂来池甫辛礼卡的足悝餐廚泰山*現眾海巳出看盍『空忧.<head><title>禁止改变框架窗口的尺寸</title></head><framesetrows="30%,70%"><framesrc="pic01.gif"name="pic"noresize><framesrc="src01.html"name="text"></frameset></html>所示。运行这段代码后，将鼠标放置在框架边框上时，光标不会变为双箭头形状，也无法拖动框架的边框，如图10-9所示。图10-9禁止调整窗口尺寸•185・第10•185・边框与页面内容的水平边距 marginwidth框架页面与HTML中的表格一样，也可以设置边框与页面内容的水平边距。语法：vframesrc="页面文件地址"marginwidth="水平边距">说明：水平边距用于设置页面的左右边缘与框架边框的距离，单位是像素。首先创建一个src02.html页面，代码如下：<html><head><title>设置水平边距</title></head><body><br><h3xfontcolor="#009933">美丽的江南小镇</fontx/h3><hr><fontcolor="#009966"><br>穿镇而过的狭窄河道，一座座雕刻精致的石桥，傍河而筑的民居，民居楼板底下就是水，石阶的埠头从楼板下一级级伸出来，女人正在埠头上浣洗，而离他们只有几尺远的乌蓬船上正升起一缕白白的炊烟，炊烟穿过桥洞飘到对岸，对岸河边有又低又宽的石栏，可坐可躺，几位老人满脸宁静地坐在那里看着过往船只。比之于沈从文笔下的湘西河边由吊脚楼组成的小镇，江南小镇少了那种浑朴奇险，多了一点畅达平稳。它们的前边没有险滩，后边没有荒漠，因此虽然幽僻却谈不上什么气势；它们大多很有一些年代了，但始终比较滋润的生活方式并没有让它们保留下多少废墟和遗迹，因此也听不出多少历史的浩叹；它们当然有过升沉荣辱，但实在也未曾摆出过太堂皇的场面，因此也不容易产生类似于朱雀桥、乌衣巷的沧桑之慨。总之，它们的历史路程和现实风貌都显得平实而耐久，狭窄而悠久，就像经纬着它们的条条石板街道。</font></body></html>创建框架页面集代码如下：<html><head><title>设置水平边距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"><framesrc="src02.html"name="text"marginwidth="70"></frameset></html>运行这段代码，可以看到右侧的框架页面中，文本内容与框架的边框之间设置了很大的空间，从而显得宽松很多，如图10-10所示。图10-10设置水平边距•186・HTML•186・边框与页面内容的垂直边距 marginheight与水平边距类似，通过marginheight参数可以设置边框与页面的垂直边距。语法：vframesrc="页面文件地址"marginheight="垂直边距">说明：垂直边距用来设置页面的上下边缘与框架边框的距离，单位是像素。实例代码：<html><head><title>设置垂直边距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"><framesrc="src02.html"name="text"marginwidth="70"marginheight="90"></frameset></html>运行这段代码，可以看到右侧的框架页面中，文本内容与框架的上下边框之间设置了很大的空间，如图10-11所示。.删曲回p.g啊3垃冲悶.1如图10-11所示。.删曲回p.g啊3垃冲悶.1[BflrgrWdtH^亘卢丹睥俺丽帕杠雨小ifl鞅匡圾低白萼・妊凹柑板i£商峡，«|过曲MU一而2*叩雀同I■一居下•柱対坐*書I亠匡殴i*.汁列可®一占E•'-的■医A上上fi^TtT_河^■前^TFh■■s.:LTI]'Fru•的君乂〒*狂|<石人.哥以攸融卞：碗-ffr，女曲y制叵兰%-n^^.^比-佈检利.気有就锂毛'■U也祗E巩的甬订口壮牙嵯下*门口.*口能一图10-11设置垂直边距的效果10.3.6设置框架滚动条显示——scrolling在默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以方便用户浏览。但是有时用户希望不显示滚动条，这可以通过设置scrolling参数来实现。语法：vframesrc="页面源文件"scrolling—'是否显示滚动条"〉说明：scrolling参数在这里只能取Yes、No或Auto三个值中的一个。其中，Yes表示一直显示滚动条，而No则表示无论什么情况都不显示滚动条；Auto是系统的默认值，它是根据具体内容来调整的，也就是说当页面长度超出浏览器窗口的范围时就会自动显示滚动条。实例代码：<html><head>

<title>设置垂直边距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"scrolling="Yes"><framesrc="src02.html"name="text"marginwidth="70"marginheight="90"scrolling="No"></frameset></html>图10-12设置滚动条的效果运行这段代码，可以看到如图10-12所示的效果。与图10-11相对比，可以看出设置scrolling为Yes时，即使页面内容远远小于浏览器的大小，也会显示滚动条；而当scrolling设置为No时，即使内容超出了浏览器的范围，也没有显示滚动夂图10-12设置滚动条的效果不支持框架标记 noframes对于一些低版本的浏览器来说，如果不支持框架结构就无法打开框架页面，但这样还不够，因为它并不清楚为什么打不开页面。通过noframes参数可以设置一些内容（包括文字或图片）来告诉浏览者其浏览器无法打开框架页面。语法：<html><head>vtitle>框架页面的标题v/title></head><frameset><frame><frame><noframe></noframe></frameset></html>说明：在该语法中，<noframe>和</noframe>标记之间的部分就是在不支持框架的浏览器中所要显示的内容。它可以与vbody>标记一样添加内容。实例代码：<html><head><title>设置水平边距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"><framesrc="src02.html"name="text"><noframe>对乔起.您的浏览器不直持世裂更丽，囚此无法那不此更而i<center>对乔起.您的浏览器不直持世裂更丽，囚此无法那不此更而i<p>对不起，您的浏览器不支持框架页面，因此无法显示此页面！</p>nuu<imgsrc="pic03.jpg">nuu</center></noframe></frameset>运行这段代码后，当用户的浏览器不支持框架结构时，就是直接显示<noframe>标记内如图10-13所示的页面内容。 图10-13显示<noframe>标记内的内容浮动框架浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套子窗口，也就是整个页面并不是框架页面，但是却包含一个框架窗口，在框架窗口内显示相应的页面内容。语法：<iframe页面源文件"><iframe页面源文件"></iframe>说明•与普通框架结构类似，浮动框架也可以设置很多参数，见表10-1表10-1浮动框架的参数设置浮动框架可以设置的参数 参数的含义 src 浮动框架页面的源文件地址width浮动框架在页面中显示的宽度 height 浮动框架在页面中显示的高度 浮动框架页面在浏览器中的对齐方式 可以为左allgll对齐、右对齐或居中对齐 name设定框架页面的名称marginwidth 设置页面与边框的水平间距marginheight 设置页面与边框的垂直间距续表浮动框架可以设置的参数参数的含义scrolling设定浮动框架页面内是否显示滚动条frameborder 设定浮动框架的边框从表10-1中可以看出，很多普通框架页面的属性在浮动框架页面中同样适用，例如name、scrolling等，而在普通框架中只对框架集有效的一些参数在这里同样可以设置，如frameborder等，此外浮动框架页面还可以设置大小和对齐方式。而对于浮动框架来说，框架边框的宽度和颜色是无法设置的，即与普通框架相比，浮动框架中不包含framespacing和bordercolor参数。本节将主要通过设置框架页面的参数和不设置进行对比，从而清晰地说明各个参数的功能。为了达到这一目的，需要进行如下的准备工作：创建两个普通的HTML页面，其中一个作为浮动框架的载体，命名为float.htm1;另一个作为浮动框架页面的源文件，命名为source.html。float.html文件的源代码如下：<html><head><title>未添加浮动框架的页面</title〉</head><body><fontsize="5"color="#CCOOOO">在这一个页面中将会添加一个浮动框架页面</font><hrsize=2></body></html>source.htm1文件的源代码如下：<html><head><title>浮动框架的页面内容</title></head><body><fontsize="5"color="#000099">经典影片：魂断蓝桥</fontxbrxbr><imagesrc="pic04.jpg"align="left">《魂断蓝桥》作为电影史上三大凄美不朽爱情影片之一，是一部荡气回肠的爱情经典之作，内容虽有些传奇化，但文艺气息浓厚，具有甚高的催泪效果。<br>《魂断蓝桥》（又名《滑铁卢桥》）是一部风靡全球近半个世纪的美国爱情故事片，也是西方电影在东方获得成功的经典。<br><hr>剧情介绍：<br>一次偶然的机会，芭蕾舞女演员玛亚在滑铁卢桥邂逅了高级军官罗伊。由于战争的原因，两人决定马上结婚，但就在婚礼即将举行的前一天晚上，罗伊接到命令，部队当晚开拔。玛亚无意中看到了罗伊的名字在阵亡名单中。此时罗伊的母亲来看她，尽管这位贵夫人非常和蔼可亲，但此时的玛亚已情绪混乱、言语无礼、不知所云。为了维持生活，玛亚和她的好友都沦为街头应招女郎。罗伊并没有死，他回来了。玛亚的遭遇使她无法面对与罗伊的婚姻及罗伊家族的显赫地位。她来到滑铁卢桥，毫无畏惧地向一辆辆飞驰的军车走去。</body></html>完成了两个页面文件之后，下面开始设置浮动框架页面的内容。•190・HTML•190・必需参数：页面源文件 src浮动框架中最基本的参数就是src,它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。语法：viframesrc="页面源文件"〉下面将文件source.html作为浮动框架页面的源文件插入到HTML文件float.html中，实例代码如下<html><head><title>添加浮动框架的页面</title〉</head><body><fontsize="5"color="#CCOOOO">在这一个页面中将会添加一个浮动框架页面</font><hrsize=2><iframesrc="source.html"></iframe></body></html>运行程序，效果如图10-14所示在这一个页面中榕士诱孤一个存动眶架页而经麹越片：魂断誉桥运行程序，效果如图10-14所示在这一个页面中榕士诱孤一个存动眶架页而经麹越片：魂断誉桥图10-14在页面中添加浮动框架页面下面介绍在浮动框架页面中可以设置的一些框架页面不能设置的参数，称为浮动框架特有参数主要包括框架的页面大小以及对齐方式。特有属性：大小 width和height在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中的，所以可以调整整个框架的大小。语法：viframesrc="浮动框架页面源文件"width="页面宽度"height="页面高度"〉说明：在该语法中，页面的宽度和高度值都以像素为单位。下面在float.html文件的基础上设置浮动框架页面的大小，实例代码如下：<html><head>

<title>设置框架页面的大小</title〉</head>图10-15调整浮动框架页面的大小图10-15调整浮动框架页面的大小<fontsize="5"color="#CCOOOO">在这一个页面中将会添加一个浮动框架页面</font><hrsize=2><iframesrc="source.html"width="550"height="310"></iframe></body></html>运行这段代码，效果如图10-15所示，与图10-14相对比，可以看到页面中的框架大小被调整得更加协调。特有属性：对齐方式 align除了设置框架大小的参数之外，设置框架的对齐方式也是浮动框架页面所特有的参数。语法：viframesrc="浮动框架页面源文件"align—对齐方式"〉说明：在该语法中，对齐方式用来设置浮动框架页面相对于浏览器窗口的水平位置。它可以取的值包括左对齐left、右对齐right和居中对齐center。下面在float.html文件的基础上设置浮动框架页面的对齐方式，实例代码如下：<html><head><title>设置对齐方式</title></head><body><fontsize="5"color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font><hrsize=2><iframesrc="source.html"width="550"height="310"align="center"></iframe></body></html>运行这段代码，效果如图10-16所示，与图10-15相对比，可以看到页面中的框架位置被调整，由图10-16设置对齐方式共有参数设置普通框架页面和浮动框架页面所共有的一些参数称为浮动框架的基本属性，主要包括src、name、marginwidth、marginheight和scrolling。由于这些参数的设置方法与普通框架类似，因此下面通过一个实例简单介绍。对于具体的参数可以参照10.3节的内容。语法：viframe浮动框架页面源文件"name="页面名称"marginwidth="边框与页面的水平距离”marginheight="边框与页面的垂直距离"scrolling—，是否显示滚动条"〉v/iframe>说明：在这里，这些参数的取值范围与普通框架相同，因此不再重复，只通过下面的实例说明这些属性的设置效果。实例代码：<html><head><title>设置框架的共有参数</title></head><body><fontsize="5"color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font><hrsize=2><iframesrc="source.html"width="550"height="310"align="center"name="public"marginwidth="60"marginheight="40"scrolling="No"></iframe></body></html>运行这段代码，对比图10-16，可以看到框架页面的内容与边框增加了一定的空间，而且在页面中虽然无法显示全部的内容，但是并没有出现滚动条，如图10-17所示。其他参数 frameborder在浮动框架页面中，还有另外一个特殊的参数可以设置，即框架边框显示属性frameborder。在普通框架中，该参数既对整个框架集有效，也对单个框架有效。同样地，在浮动框架中也可以设置这一参数。语法：viframe浮动框架页面源文件"frameborder="是否显示"〉</iframe>说明：在这里，这些参数的取值范围与普通框架相同。其中src是浮动框架的页面源文件；frameborder只能取0或1，0表示不显示边框，1为默认取值，表示显示边框。下面只通过一个实例说明这些属性的设置效果。实例代码：<html><head><title>设置框架页面的边框</title></head><body><fontsize="5"color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font><hrsize=2><iframesrc="source.html"width="550"height="310"align="center"name="public"marginwidth="60"marginheight="40"scrolling="No"frameborder="0"></iframe></body></html>运行这段代码，对比图10-16，可以看到浮动框架的页面边框不见了，如图10-18所示。框架与链接大部分情况下，在页面中添加框架是为了更好地对页面内容进行导航，因此常常是通过框架进行链接不同的内容。对于框架页面来说，设置页面的链接需要使用target参数，这一参数的取值不同于它在普通HTML页面中的取值，下面进行具体的介绍。10.5.1设置普通框架结构的链接普通的框架结构之间通过target参数互相链接起来。一般情况下，一个页面中会有一个框架窗口作为导航页面，里面添加了对另外一个框架的内容的链接设置，而这些链接则是通过target实现的。下面通过一个具体的实例来讲解关于框架之间的链接方法。首先需要设定一个框架集文件，用于确定框架页面的整体布局，这里将文件命名为19layout.html。19layout.html的实例代码如下：<html><head><title>框架页面的整体结构</title></head><framesetrows="150,*"><framesrc="navig.html"name="navig"scrolling="No"noresize><framesrc="content-1.html"name="content"></frameset></html>此处按照常见网站的上下结构进行布局，将页面上面的框架窗口设置为150像素高，下面的窗口则分割剩下的部分。在该文件中，设置了上面的框架窗口页面为导航页面，命名为navig,同时设置其默认打开的页面名为navig.htm1。同时还设置该页面窗口不显示滚动条，而且不允许调整窗口大小。在该文件中还设置了下面的框架窗口为内容页面，命名为content，设置默认打开的页面名content-1.html。下面就介绍这两个文件的具体编码。其中，navig.htm1文件将放置在框架的上方，作为页面的导航页，其代码如下：<html><head><title>导航页面</title></head><body><center><imgsrc="pic05.jpg"><br><br><ahref="content-1.html"target="content">白蛇传</a>        <ahref="content-2.html"target="content">梅妻鹤子<伦>        <ahref="content-3.html"target="content">菊花仙子<伦></center></body></html>在这个文件代码中‘target的值是设置将要显示页面内容的框架名称，此处设置为content,说明设置的这3个内容页面将在content框架窗口中显示。content-1.html文件是默认的内容页面，其代码如下：<html><head><title>内容页面</title></head><body><center><fontsize=5>白蛇传</font><br><br></center>    清明时分，西湖岸边花红柳绿，断桥上面游人如梭，真是一幅春光明媚的美丽画面。突然，从西湖底悄悄升上来两个如花似玉的姑娘，怎么回事？人怎么会从水里出来呢？原来，她们是两条修炼成了人形的蛇精，虽然如此，但她们并无害人之心，只因羡慕世间的多彩人生，才一个化名叫白素贞，一个化名叫小青，来到西湖边游玩。<br>    偏偏老天爷忽然发起脾气来，霎时间下起了倾盆大雨，白素贞和小青被淋得无处藏身，正发愁呢，突然只觉头顶多了一把伞，转身一看，只见一位温文尔雅、白净秀气的年轻书生撑着伞在为她们遮雨。白素贞和这小书生四目相交，都不约而同地红了红脸，相互产生了爱慕之情。小青看在眼里，忙说：“多谢！请问客官尊姓大名。”那小书生道：“我叫许仙，就住在这断桥边。”白素贞和小青也赶忙作了自我介绍。从此，他们三人常常见面，白素贞和许仙的感情越来越好，过了不久，他们就结为夫妻，并开了一间“保和堂”药店，小日子过得可美了！<br>    由于"保和堂"治好了很多很多疑难病症，而且给穷人看病配药还分文不收，所以药店的生意越来越红火，远近来找白素贞治病的人越来越多，人们将白素贞亲切地称为白娘子。可是，“保和堂”的兴隆、许仙和白娘子的幸福生活却惹恼了一个人，谁呢？那就是金山寺的法海和尚。因为人们的病都被白娘子治好了，到金山寺烧香求菩萨的人就少多了，香火不旺，法海和尚自然就高兴不起来了。这天，他又来到“保和堂”前，看到白娘子正在给人治病，不禁心内妒火中烧，再定睛一瞧，哎呀！原来这白娘子不是凡人，而是条白蛇变的！<br>    法海虽有点小法术，但他的心术却不正。看出了白娘子的身份后，他就想拆散许仙白娘子夫妇、搞垮“保和堂”。于是，他偷偷把许仙叫到寺中，对他说：“你娘子是蛇精变的，你快点和她分手吧，不然，她会吃掉你的！”许仙一听，非常气愤，他想：我娘子心地善良，对我的情意比海还深。就算她是蛇精，也不会害我，何况她如今已有了身孕，我怎能离弃她呢！法海见许仙不上他的当，恼羞成怒，便把许仙关在了寺里。<br>    在“保和堂”里，白娘子正焦急地等待许仙回来。一天、两天，左等、右等，白娘子心急如焚。终于打听到原来许仙被金山寺的法海和尚给“留”住了，白娘子赶紧带着小青来到金山寺，苦苦哀求，请法海放回许仙。法海见了白娘子，一阵冷笑，说道：“大胆妖蛇，我劝你还是快点离开人间，否则别怪我不客气了！”白娘子见法海拒不放人，无奈，只得拔下头上的金钗，迎风一摇，掀起滔滔大浪，向金山寺直逼过去。法海眼见水漫金山寺，连忙脱下袈裟，变成一道长堤，拦在寺门外。大水涨一尺，长堤就高一尺，大水涨一丈，长堤就高一丈，任凭波浪再大，也漫不过去。再加上白娘子有孕在身，实在斗不过法海，后来，法海使出欺诈的手法，将白娘子收进金钵，压在了雷峰塔下，把许仙和白娘子这对恩爱夫妻活生生地拆散了。<br>    小青逃离金山寺后，数十载深山练功，最终打败了法海，将他逼进了螃蟹腹中，救出了白娘子，从此，她和许仙以及他们的孩子幸福地生活在一起，再也不分离了。</body></html>用同样的方法添加另外两个内容页面，分别命名为content-2.html和content-3.htm1，具体的代码见•196・HTML•196・配套光盘相对应的文件夹，这里不再过多介绍。完成这几个文件之后，打开框架集页面，效果如图10-19所示。单击页面中的链接文字“梅妻鹤子”，会在框架的下方页面中显示content-2.html文件的内容，如31到IV白SE传巧&嶽辻花葩湘和fffTiKfikftffi.工融T|■绘醴KSD員55ira・附“3CaH#-- ff*.摊百星刑昔肖醉成匚」*址科怛M，E3Z事#4的枣Y.』•••「.! •iU.宅测"-夷甘屯工.空号片厦竝％汝、ffs?iTi-Fe7**a-nT.o»!=^hir4ti»i^«n・工&却為恵代轧龙盘呻事了一吃轨解勇*•少弋•勺込空卞就曰*畀耳抽年昨壬TtlH举店力如:总叭B*f!fiir.h^Ti3lJrtTt.IF础1崗用堆上了fJi.HIL*主丁豪事二阳丰•■疋章皿忙世，-=#*■出问15W：-^Silr ttfl<£i2#i^w,*E*flf?.i*cj?irirrtift-.-s：・.ujt-说川三扎當鶯克工”三獻勺齢注乩力沽宦砧加”-ar^：*.-池豐改羞匕农S>flST-K-^fcf巧馬"干.11磚可接Tinr-ffitir--w『鼻吉豪鸟軒耳桝sr, 的tjfikpkst.u乳比兄忖.白屋fiift.Rr-.^stas・干w屯 岭丸程-讥泊m门坤于n卑泄丛勻距百了一;•「Wt・M童曲憫却OiiuBAXfin.mmarFi^Ti"盘diW宋勵战眇鼻T・■玄磁SMWM建财疋•甲鑑累了.1

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论