《快速精通掌握frame的使用》由会员分享,可在线阅读,更多相关《快速精通掌握frame的使用(8页珍藏版)》请在金锄头文库上搜索。
1、FRAME(框架)是 Web 上经常会看到的页面结构。使用可视 Web 开发工具(比如 Dreamweaver 或者Frontpage),虽然可以在 WYSIWYG 环境中通过简单的鼠标托拽完成 FRAME 的构建,但是要实现真正细致甚至强大的功能,仔细理解 FRAME 的代码结构至关重要!你将发现,FRAME 原来是这样的亲切易用。创建基本的 FRAMESET FRAMESET 页面与普遍的 Web 页面有些不同。虽然仍旧以HTML和包含标题的HEAD标记以及其他脚本开始,但是其内容仅仅是表示的各个页面的版式设计。因此,不再需要有BODY元素,只需要FRAMESET标记。 通过FRAMESE
2、T标记的rows和cols属性,浏览器窗口被分割为一个个格子。rows和cols的设置值可以是固定的像素值,可以是总空间的百分比值,还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。比如说: cols=”80,20%,*” 分为 3 列,宽度分别为 80 像素,窗口宽度的 20,以及剩余宽度 rows=”25%,75%” 分为 2 列,宽度分别为窗口宽度的 25和 75 rows=”*,3*” 与上述第 2 个表示的一样,分为 2 列,但表示方法不同:第一列宽度为第二列的 1/3 在FRAMESET和/FRAMESET之间,用多个FRAME标记表示每个分割区。col 表示从左到右的列,r
3、ow 表示从上到下的行。每个FRAME有一个 src 属性,给出了这个 FRAME 的内容。它可以是浏览器能显示的任何一个合法 URL,或者是另外一个 FRAMESET。为预防递归现象,一个 FRAME 不能包含它本身所在的 FRAMESET 页面。要用 name 属性定义 FRAME 的名字,这样就可以在代码或者脚本程序中引用它。 请看一段基本的 FRAMESET 代码:HTMLHEADTITLESimple FRAMESET/TITLE/HEADFRAMESET cols=”40%,60%” rows=”2*,*”FRAME name=”TopLeft” src=”red.htm”FRAM
4、E name=”TopRight” src=”green.htm”FRAME name=”BotLeft” src=”blue.htm”FRAME name=”BotRight” src=”white.htm”/FRAMESET/HTMLFRAMESET rows=”105,*”FRAME name=”adbanner” src=”ad.html”FRAMESET cols=”40%,60%”FRAME name=”left” src=”red.htm”FRAMESET rows=”*,*”FRAME name=”top” src=”blue.htm”FRAME name=”bottom” s
5、rc=”white.htm”/FRAMESET/FRAMESET/FRAMESETFRAME 间的链接 一个 FRAMESET 结构的页面,新文档只转载进窗口的一部分中,而其他页面则保持静态不变。当用户点击 FRAME 中的链接时,新内容就在同一 FRAME 内打开。要让新内容在其他 FRAME 中打开,可以设置A标记的 target 属性值为那个 FRAME 的 name 值。 而且,我们还可以设置打开目标为当前可见的任意一个 FRAME,而不局限于本身的 FRAMESET。目标可能是一个嵌套的 FRAMESET 中的 FRAME,也可能是其他窗口中的 FRAME。但是如果目标 FRAME
6、不存在,就会产生一个带有目标 FRAME 名字的新窗口。 下面举个例子说明一下,假设有一个简单含 2FRAME 的 FRAMESET,文件名叫做 home.html,代码如下: HTMLHEADTITLEFrommCo home page/TITLE/HEADFRAMESET cols=”115,*”FRAME src=”menu.htm”FRAME name=”content” src=”main.htm”/FRAMESET/HTML 文件 menu.htm 在左边的 FRAME 中,其中有一系列链接,点击它们后新内容将在右边的叫做 content的 FRAME 中打开。下面是 menu.h
7、tml 的代码: HTMLHEAD/HEADBODYPBRIMG src=”Images/tmp_logo.gif” alt=”FrommCo”PA href=”main.htm” target=”content”Main page/APA href=”mission.htm” target=”content”Our mission/APA href=”staff.htm” target=”content”Our staff/APA href=”splash.htm” target=”_parent”FrommCo splash page/A/BODY/HTML 请注意最后一个链接中 targ
8、et 的定义为_parent,这属于 4 个特殊的保留值。它们是: _parent:在当前 FRAMESET 位置显示新 href。 _top:在当前整个窗口位置显示新 href,比如本身 FRAMESET 位于另一个 FRAMESET 中。 _self:强制在当前 FRAME 中显示新 href。 _blank:在新窗口中显示 href。表示客户端图形地图的AREA标记同样可以应用 target 属性,比如:AREA shape=circle coords=”75,75,50 href=”main.htm” target=”content” alt=”Main page” 还有一种经常的情况
9、是:Web 页面中的大部分或者全部链接都要求在一个特别的 FRAME 中打开。这时,可以在页面的HEAD代码区使用BASE标记设置默认的 target,然后再分别定义特殊链接的 target值。修饰 FRAMEFRAMESET 不仅在宽度、高度等方面具有可控制的数值,在美观方面也同样可以精确设置。 默认情况下,FRAMESET 的 FRAME 间有一个凸起的边沿,表示分割效果。如果不喜欢这个,想营造“无缝连接”的效果,可以在FRAME标记中设置 FRAMEborder=0 来消除它。在 3.0 及高版本的Navigator 和 Internet Explorer 中,如果在FRAMESET标记
10、中设置 FRAMEborder=0,那么除了设置为FRAMEborder=1 的 FRAME 外,所有其他 FRAME 的边沿都将消失。 虽然设置了 FRAMEborder=0,有些浏览器仍旧会在 FRAME 间保留一些边沿的颜色痕迹。这时,可以在FRAMESET标记中添加 FRAMEspacing=0(对 Internet Explorer)或者 border=0(对 Navigator 和Opera)实现真正的无缝连接。 请看下面的代码是如何使用这些属性的:HTMLHEADTITLEFrommCo home page/TITLE/HEADFRAMESET cols=”115,*” FRAM
11、Espacing=0 border=0FRAME src=”menu.htm” FRAMEborder=0 noresize scrolling=noFRAME name=”content” src=”main.htm” FRAMEborder=0/FRAMESET/HTML 上面的代码中有 2 个新的属性:noresize 表示锁住 FRAME 而不允许使用鼠标改变大小,scrolling=no 表示屏蔽 FRAME 的滚动条,scrolling=yes 表示允许,scrolling=auto 表示根据显示内容需要自动显示滚动条。浮动 FRAME 浮动 FRAME 是 HTML4.0 规范中
12、的一个定义,目前的浏览器都支持它。 不象 FRAMESET 表示的分割区样子,一个浮动 FRAME 作为一个内置对象存在于 Web 页面上,其样式就象一个页面上的一个图形或者一个 applet。浮动 FRAME 使用IFRAME标记,它具有与FRAME相同的大多数属性设置,包括:name、src、marginwidth、marginheight、FRAMEborder 以及 scrolling。同时,它还具有与图形或者 applet 一样的 height、width 和 align 属性。 而且,浮动 FRAME 遵循与普通 FRAME 一样的 target 原则:我们可以通过它的 name
13、来指向它。本原则适用于在任一类型 FRAME 中的浮动 FRAME,反之易然。浮动 FRAME 中的没有 traget 的链接指向它本身,而_parent 链接则指向包含IFRAME的文档所在的 FRAME 或者窗口。比如:IFRAME name=”floater” src=”start.htm” width=150 height=200 hspace=10 align=leftIMG src=”Images/noFRAME.gif” alt=”You cant see the floating FRAME”width=150 height=200 hspace=10 align=right/
14、IFRAMEBRA href=”one.htm” target=”floater”Show one.htm/APA href=”two.htm” target=”floater”Show two.htm/APA href=”start.htm” target=”floater”Bring back start.htm/A注意,对应支持IFRAME标记的浏览器,任何位于IFRAME和/IFRAME间的内容都将忽略。反之,其中的内容将显示出来,这可以用作解释当前浏览器不支持IFRAME。何时使用 FRAME 我们知道,FRAMESET 的基本用途就是分割浏览器窗口,使得窗口的一部分内容改变,而其他
15、部分保持不变。利用这个特性,就可以实现工具栏导航功能,一个 FRAME 内放置静态菜单页面,用户点击其中的项目后,在另外的 FRAME 内显示相关的内容。这样就可以从整体上减少文件大小,因为不必在每个内容页面中再包含菜单项目。 FRAME 有 2 个明显的不足:FRAME 从另外的级别上增加了站点的管理,原因在于超级链接不仅仅要指向适当的页面,而且也会装载到相关的 FRAME 内。 另外,大多数浏览器在执行“添加书签”的操作时,只能记录下 FRAMESET 的初始位置。不管添加书签时是位于多么深的 FRAMESET 中,当再次选择这个书签时,就会返回到 FRAMESET 的初始页面。这就加大了访问者浏览指定内容的难度。 但是,如果好好地组织站点信息,使导航操作只有不深的几层,那么,使用 FRAME 就能很好地为访问者服务。记住:访问者都希望简洁的导航信息。 当然,导航并非是使用 FRAME 的唯一原因,也可以使用 FRAME 创建交换工具和交换页面。而且,FRAME 的多文档框架结构非常适于被 javascript 应用程序所操作。用 FRAME 设计站点 最常用的 FRAME 结构就是“菜单内容”FRAMESET。一个 FRAME 内放置导航菜单,另一个 FRAME 内转载子菜单,每个子菜单的链接就指向本身。唯一的有 target 的链接