今天是阳历 2024 年 05 月 06 日 星期一 农历 三月月 廿八日

 

[Online Resource Centre 教学材料]   [E-Teacher 电子教师]   [Homepage Constructions 网页建设 ]
 

Frames

Nested Framesets

Simple Examples | No Frames | Borders and Borderless Frames | Nested Framesets | Frame Margins | Naming Frames & Targeting Links | Frames Exercise

You can, of course, create a frame set of three or more rows, or a set of three or more columns. Frame sets can also be nested to create more complicated layouts.

Method 1: Defining a Frame Set Within a Frame Set

Here's an arrangment that has two rows of frames with one of the rows having two columns (you can think of this as sort of a combination of Examples 1 and 2): Example 6. The code that produces this nested arrangement is:

  <frameset rows="20%,80%">
<frame src="file1.html">
   <frameset cols="20%,80%">
      <frame src="file2.html">
      <frame src="file3.html">
   </frameset>
</frameset>

Here's a similar arrangement, but with the two columns switched and borderless frames: Example 6a. This time the HTML is:

  <frameset rows="20%,80%" border="0">
<frame src="file1.html">
   <frameset cols="80%,20%">
      <frame src="file2.html">
      <frame src="file3.html">
   </frameset>
</frameset>

Note that although we only set border=0 for the outer frame set (rows) in Example 6a, this results in no borders at all. But compare to Example 6b. Do you see a difference in these two frame sets? (You may, in fact, see different results in this case when using Netscape than when using Explorer.) For 6b the HTML is:

  <frameset rows="20%,80%">
<frame src="file1.html">
   <frameset cols="80%,20% border="0"">
      <frame src="file2.html">
      <frame src="file3.html">
   </frameset>
</frameset>

In this case border="0" is specified for the "inner" frame set. Consequently, there should be no border between the column frames of that set, but there is a border between the upper frame and the lower frame (which, of course, contains the nested frame set).

Method 2: Loading a Frame Set Into a Frame Set

Now consider this case: Example 7. This frame set is defined as:

  <frameset rows="20%,80%">
   <frame src="file1.html">
   <frame src="fset7a.html">

</frameset>

This frame set consists of two row frames. Into the top frame we load file1.html as before. Into the bottom frame we load not a single file but another frame set, in this case defined in fset7a.html, as:

  <frameset rows="20%,80%">
   <frame src="file2.html">
   <frame src="file3.html">

</frameset>

We can also create a frame set, load an initial set of files into the set, and then have one (or more) of those files load a frame set into one (or more) of those frames. Here is a simple example: Example 8. Here we first create a two frame set, just like in Example 1. But now instead of loading file2.html into the bottom frame, we load file8.html:

  <html>
<head>
<title>File 8</title>
</head>
<body bgcolor="#ff0000">
File 8.
<p>
Click <a href="fset7a.html">here</a> to load a new frame set.
</body>
</html>

When you click on "here", the two column frame set defined in fset7a.html gets loaded into the lower frame, replacing file8.html.

More Complicated Arrangements

Here's a frame set with three rows, with the middle row having two columns: Example 9. Do you know what HTML is needed to create this frame set? (Assume that the rows occupy 20%, 65%, and 15% of the available vertical height and that the columns occupy 20% and 80% of the available width and see if you can reproduce this frameset.) Do you remember how to "nail down" the borders between the rows, but still allow the border to be draggable, so that the relative column widths can be adjusted by a viewer? Can you think of any situations in which you might want to use a frame set similar to this?

We could consider even more complicated arrangements, but by now you should get the idea. Perhaps the next time you visit a web page that uses frames, you'll take a moment to think about how its frame layout is organized. Some browsers will let you "cheat" on this: with Netscape and Explorer 4.0, for instance, you can view the frame set file by choosing "View Source" or "View Page Source" from the View drop-down menu. (Right-clicking the mouse with a Windows version of these browsers brings up a menu that only lets you look at the source for the active frame, the frame that was clicked in when this menu appeared.) But even when these browsers "give you the answer" by showing you the code that was used to create a frame set, you may still sometimes find it useful to study that code, perhaps to decide whether or not is a layout that you might want to adapt for one of your own projects. We hope our discussions here will help you on such occasions.

 
[Online Resource Centre 教学材料]   [E-Teacher 电子教师]   [Homepage Constructions 网页建设 ]
      School Name 学校名称
      Online Resource Information 线上资源资讯
      News & Events 学校新闻
      Events Calendar 每日事件