div中框架的使用

1、FRAME （框架）是 Web上经常会看到的页面结构。使用可视Web开发工具（比如 Dreamweaver或者Frontpage），虽然可以在 WYSIWYG境中通过简单的鼠标托拽完成FRAME勺构建，但是要实现真正细致甚至强大的功能，仔细理解 FRAME勺代码结构至关重要！你将发现，FRAM原来是这样的亲切易用。创建基本的 FRAMESETFRAMESE页面与普遍的Web页面有些不同。虽然仍旧以v HTMI和包含标题的v HEAD标记以及其他 脚本开始，但是其内容仅仅是表示的各个页面的版式设计。因此，不再需要有vBODY元素，只需要vFRAMESE5T 标记。通过v FRAMESE5T标记的

2、v rows 和 cols 属性，浏览器窗口被分割为一个个格子。v rows 和 cols 的设置值可以是固定的像素值，可以是总空间的百分比值，还可以是用*以及一个数字相乘表示的分 割剩余空间的比例值。比如说：cols="80,20%,*" 分为 3列，宽度分别为 80像素，窗口宽度的 20，以及剩余宽度 rows="25%,75%" 分为 2 列，宽度分别为窗口宽度的25和 75rows="*,3*" 与上述第 2 个表示的一样，分为 2 列，但表示方法不同：第一列宽度为第二列的 1/3在v FRAMESEST和v /FRAMESE

3、T之间，用多个v FRAME标记表示每个分割区。col表示从左到右的列，row表示从上到下的行。每个v FRAMT有一个src属性，给出了这个 FRAME勺内容。它可以是浏览器 能显示的任何一个合法 URL或者是另外一个 FRAMESET为预防递归现象，一个 FRAMED能包含它本身所 在的FRAMESE页面。要用name属性定义FRAME勺名字，这样就可以在代码或者脚本程序中引用它。请看 一段基本的FRAMESE代码：v HTMLTv HEADTvTITLETSimple FRAMESETv/TITLE Tv /HEADTvFRAMESET cols="40%,60%"

4、rows="2*,*" Tv FRAME name="TopLeft" src="red.htm" Tv FRAME name="TopRight" src="green.htm" Tv FRAME name="BotLeft" src="blue.htm" Tv FRAME name="BotRight" src="white.htm" Tv /FRAMESETTv /HTMLTv FRAMESET rows=&q

5、uot;105,*" Tv FRAME name="adbanner" src="ad.html" Tv FRAMESET cols="40%,60%"Tv FRAME name="left" src="red.htm" Tv FRAMESET rows="*,*" Tv FRAME name="top" src="blue.htm" Tv FRAME name="bottom" src="whi

6、te.htm" Tv /FRAMESETTv /FRAMESETTv /FRAMESETTFRAME可的链接一个FRAMESE结构的页面，新文档只转载进窗口的一部分中， 而其他页面则保持静态不变。 当用户点 击FRAMER的链接时，新内容就在同一 FRAMED打开。要让新内容在其他 FRAMED打开，可以设置V A标 记的target属性值为那个FRAM啲name值。而且，我们还可以设置打开目标为当前可见的任意一个FRAME而不局限于本身的 FRAMESET目标可能是一个嵌套的 FRAMESE中的FRAME也可能是其他窗口中的 FRAME但是如果目标 FRAMED存在，就会 产生一个

7、带有目标 FRAMED字的新窗口。下面举个例子说明一下， 假设有一个简单含 2- FRAM啲FRAMESET文件名叫做home.html，代码如下：V HTMI>V HEA>v TITLE >FrommCo home page< /TITLE >v /HEAD>V FRAMESET cols="115,*" >V FRAME src="menu.htm" >V FRAME name="content" src="main.htm" >V /FRAMESE>

8、TV /HTML>文件menu.htm在左边的FRAMED，其中有一系列链接，点击它们后新内容将在右边的叫做content 的FRAME中打开。下面是menu.html的代码:VHTML>V HEAD>V /HEAD>V BODY>V P>V BR>VIMG src="Images/tmp_logo.gif" alt="FrommCo">V P>V A href="main.htm" target="content">Main page V/A>V

9、P>V A href="mission.htm" target="content"> Our mission V /A >V P>V A href="staff.htm" target="content"> Our staff V /A>V P>V A href="splash.htm" target="_parent"> FrommCo splash page V /A>V /BODY>V /HTML>请注意

10、最后一个链接中 target 的定义为 _parent ，这属于 4 个特殊的保留值。它们是：_parent :在当前 FRAMESE位置显示新href。_top :在当前整个窗口位置显示新href，比如本身FRAMESE位于另一个FRAMESE中。self :强制在当前 FRAMER显示新href。blank ：在新窗口中显示 href 。表示客户端图形地图的 AREA标记同样可以应用target属性，比如:VAREA shape=circle coords="75,75,50" href="main.htm" target="content

11、" alt="Main page"还有一种经常的情况是：Web页面中的大部分或者全部链接都要求在一个特别的FRAMER打开。这时,可以在页面的 HEA代码区使用 BASE标记设置默认的target，然后再分别定义特殊链接的target值。修饰 FRAMEFRAMESET仅在宽度、高度等方面具有可控制的数值，在美观方面也同样可以精确设置。默认情况下，FRAMESE的FRAMED有一个凸起的边沿，表示分割效果。如果不喜欢这个，想营造“无缝连接"的效果，可以在v FRAMIE标记中设置FRAMEborder=0来消除它。在3.0及高版本的Navigator和

12、Internet Explorer 中，如果在v FRAMESE5T标记中设置 FRAMEborder=Q 那么除了设置为 FRAMEborder=1 的FRAME外，所有其他FRAM啲边沿都将消失。虽然设置了 FRAMEborder=0,有些浏览器仍旧会在 FRAME可保留一些边沿的颜色痕迹。这时，可以在v FRAMESES标记中添加 FRAMEspacing=0(对 Internet Explorer )或者 border=0 (对 Navigator 和 Opera) 实现真正的无缝连接。请看下面的代码是如何使用这些属性的：v HTMI>v HEA>v TITLE >

13、FrommCo home page< /TITLE >v /HEAD> vFRAMESET cols="115,*" FRAMEspacing=0 border=0 > vFRAME src="menu.htm" FRAMEborder=0 noresize scrolling=no > vFRAME name="content" src="main.htm" FRAMEborder=0 >v /FRAMESE>Tv /HTML>上面的代码中有2个新的属性：nores

14、ize表示锁住FRAME而不允许使用鼠标改变大小，scrolling=no表示屏蔽FRAME勺滚动条，scrolling=yes表示允许，scrolling=auto表示根据显示内容需要自动显示滚动条。浮动 FRAME浮动FRAM是HTML4.0规范中的一个定义，目前的浏览器都支持它。不象FRAMESE表示的分割区样子，一个浮动FRAMED为一个内置对象存在于 Web页面上，其样式就象 一个页面上的一个图形或者一个 applet。浮动FRAME使用v IFRAME>标记，它具有与v FRAM>相同的大 多数属性设置，包括： name, src、marginwidth、marginh

15、eight、FRAMEborder以及 scrolling 。同时，它 还具有与图形或者 applet 一样的 height 、 width 和 align 属性。而且，浮动FRAME遵循与普通FRAME-样的target原则：我们可以通过它的 name来指向它。本原则 适用于在任一类型 FRAMER的浮动FRAME反之易然。浮动 FRAMED的没有traget的链接指向它本身，而 _parent链接则指向包含v IFRAME>的文档所在的 FRAM或者窗口。比如：vIFRAME name="floater" src="start.htm" wid

16、th=150 height=200 hspace=10 align=left>vIMG src="Images/noFRAME.gif" alt="You can't see the floating FRAME"width=150 height=200 hspace=10 align=right>v/IFRAME>v BR>vA href="one.htm" target="floater">Show one.htm v /A>v P><A href=&qu

17、ot;two.htm" target="floater">Show two.htm < /A>< P>< A href="start.htm" target="floater"> Bring back start.htm < /A >注意，对应支持< IFRAME>标记的浏览器，任何位于< IFRAME>和< /IFRAME>间的内容都将忽略。反 之，其中的内容将显示出来，这可以用作解释当前浏览器不支持<IFRAME>。何时

18、使用 FRAME我们知道，FRAMESE的基本用途就是分割浏览器窗口，使得窗口的一部分内容改变，而其他部分保持 不变。利用这个特性，就可以实现工具栏导航功能，一个FRAME内放置静态菜单页面，用户点击其中的项目后，在另外的FRAMED显示相关的内容。这样就可以从整体上减少文件大小，因为不必在每个内容页面 中再包含菜单项目。FRAME! 2个明显的不足：FRAMED另外的级别上增加了站点的管理，原因在于超级链接不仅仅要指向适当的页面，而且也会装 载到相关的FRAMED。另外，大多数浏览器在执行“添加书签”的操作时，只能记录下FRAMESE的初始位置。不管添加书签时是位于多么深的 FRAMESE中

19、，当再次选择这个书签时，就会返回到FRAMESE的初始页面。这就加大了访问者浏览指定内容的难度。但是，如果好好地组织站点信息，使导航操作只有不深的几层，那么，使用FRAMED能很好地为访问者服务。记住：访问者都希望简洁的导航信息。当然，导航并非是使用 FRAME勺唯一原因，也可以使用 FRAMED建交换工具和交换页面。而且， FRAME 的多文档框架结构非常适于被 javascript 应用程序所操作。用FRAME设计站点最常用的FRAME吉构就是“菜单内容” FRAMESET一个 FRAMED放置导航菜单，另一个 FRAMED转 载子菜单，每个子菜单的链接就指向本身。唯一的有target的链

20、接都在菜单FRAMED。请看下面的例程代 码：<HTML>< HEAD><TITLE>Welcome to my site!</TITLE >< /HEAD>< FRAMESET cols="150,*" >< FRAME name="menu" src="menu.htm" >< FRAME name="content" src="intro.htm" >< /FRAMESE>T<

21、 BODY>< !-如果是支持FRAME的浏览器，则不会显示下面的内容；否则，也显示出简单菜单页面->Welcome to my site.< P>< A href="intro.htm"> Introduction < /A>< A href="products.htm" > Products < /A >< A href="reviews.htm" > Reviews < /A >< /BODY>< /HTML&

22、gt;用脚本控制导航 FRAME上面介绍了 FRAME勺HTML代码结构，现在开始走向更深一步：使用脚本程序控制FRAME每个 Window对象有一个FRAMEs数组。对于普通的 Web页面，这个数组是空的，其属性 length为0。 带有FRAMESE的页面，按照其上< FRAM>标记的前后顺序，生成一个FRAME数组。由于FRAMESE所在页 面是每个FRAM啲parent窗口，数组索引从 0开始，所以从FRAMESE中引用第3个FRAME寸就使用 self.FRAMEs2，从其他 FRAME文档中引用第 3 个 FRAME寸就使用 parent.FRAMEs2。FRAMED组

23、中的每一个成员都是一个窗口，它们具有普通窗口的一切方法、事件以及属性，并且包括 它自己的FRAMED组(当它包含另外一个FRAMESE时)。因此，用脚本去修改一个FRAM啲内容就象修改它的 location.href 一样简单。下面举例说明，假设一个 FRAMESE包含3个同样的FRAME都位于窗口下部：< FRAMESET rows="60%,40%>"< FRAME name="link" src="link.htm" >< FRAMESET cols="*,*,*"><

24、; FRAME name="blank1" src="blank.htm">< FRAME name="blank2" src="blank.htm">< FRAME name="blank3" src="blank.htm">< /FRAMESE>T< /FRAMESE>T第一个FRAMER的文档叫做link.htm ，使用点击其中的单一链接就可以修改其他三个FRAMER的内容。实现代码如下 :< a href=&

25、quot;javascript:navAII()">修改下面 3 个 FRAME勺内容< /a >< SCRIPT language="javascript" >< !- function navAll() parent.FRAMEs1.location.href="red.htm" parent.FRAMEs2.location.href="blue.htm"parent.FRAMEs3.location.href="white.htm" / ->< /S

26、CRIPT>用脚本控制动态 FRAME如果FRAMER变化的内容不多，就可以考虑使用脚本程序动态生成其内容。这样就不用再创建单独的 小HTML页面，无需从服务器上下载。创建内容的方法与在任何窗口中书写内容一样，都是通过document对象。举个例子说明一下。假设要在一个FRAME内显示小组成员的相片，并在其下的一个小FRAME内显示该成员的名字等信息。首先建立信息数组：empID = new Array();empID0 = 'Dana Corolla, CEO'empID1 = 'Arturo Montero, senior editor'empID2

27、= 'Percy Tercel, head designer' empID3 = 'Angus Coupedeville, astrologer'然后，建立小组成员照片的图形地图，将每个vAREA>链接到函数showMe(n),由它负责根据索引数据创建信息：part1 = ' vHTML>v HEAD>v /HEAD>'part1+= ' v BODY bgcolor=#ffffff>v DIV align=center > 'part2 = ' v /DIV >v /BODY&g

28、t;v /HTML> 'function showMe(n) parent.FRAMEs1.document.open(); parent.FRAMEs1.document.write(part1);parent.FRAMEs1.document.write(empIDn); parent.FRAMEs1.document.writeln(part2);parent.FRAMEs1.close();FRAME可的脚本控制使用 javascript ，我们既可以从创建窗口的页面访问那个窗口， 也可以从这个窗口创建的窗口访问它。 另一方面，FRAMESE中的文档(包括 FRAMESE

29、本身)总是可以访问和操纵其中每个的javascript 函数和变量。比如说，第三个 FRAMER有函数sayGobble(vol)，那么在其他FRAMER就可以使用 parent.FRAMEs2.sayGobble(vol) 来引用它。同样，FRAMESE页面中的变量 myNam可以被任何FRAMER parent.myName="Imelda" 的命令进行设置。不管在其他FRAMER的内容如何，在静态FRAMED者FRAMESE中的函数和变量始终保持可用。这个特征非常有价值，不仅可以将通用函数保存在其中从而压缩代码，而且，还可以实现页面间转换时的状态保 持。下面的FRAM

30、ESE页面只有一个 FRAMEW故query.htm，并且定义了一个 javascript 变量 myWordv HTML>v HEAD>v TITLE > Passing data v /TITLE >v SCRIPT LANGUAGE="javascript" >v !- myWord=""/- >v /SCRIPT>v /HEAD>vFRAMESET rows="*,1" FRAMEBORDER=n>ov FRAME name="active" src=&

31、quot;query.htm" >< FRAME name="dummy"V /FRAMESEF< /HTML>页面 query.htm 有一个文本输入框以及一个到 result.htm 的链接，链接的 onClick 事件将设置 FRAMESE页面的myWord变量为文本输入框的内容。代码如下：< HTMLF< HEADF< /HEADF< BODYF< FORM name="myFormF"< INPUT type=text size=12 name="myText&qu

32、ot; F< PF< A onClick="parent.myWord=myText.value"href="result.htm" FSee it in yellow on blue! </AF< /FORMF< /BODYF< /HTMLF页面result.htm 取回并打印出myWord的数值，代码是：< HTMLF< HEADF< /HEADF<BODY bgcolor=#0000cc vlink=#99ffff F<FONT size=+3 color=#ffff00 F< SCRIPT language="javascript" F< !- document.write(parent.myWord);/- F< /SCRIPTF< /FONTF< PF<A href="query.htm" FDo it again </aF< /BODYF< /HTMLF这个例子很有实用价值。比如说，你可以设定访问者按一定的次序打开页面，收集用户信息，最后定 制出用户特制的显示内容。谈到状态维护功能，这个方法不会比使用cookie或CGI更好，因为当FRAMESE重载或者退