Module 7 - Page 05 - Creating Complex Frame Layouts

Creating Complex Frame Layouts

Many (even most) frame layouts involve some combination of columns and rows not formed into a grid-pattern. These more-complicated layouts are accomplished using nested FRAMESET tags.

Every row or column defined in a FRAMESET tag must have either a FRAME tag associated with it, or a NESTED FRAMESET tag associated with it.

To clarify how to nest FRAMESET tags, I have broken down the process in the following step-by-step example.

Step One: nest a FRAMESET tag in our first column (or in any column or row of a FRAMESET), replacing the FRAME tag that would normally reside there.

Example:

<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="*,200">
     <frameset>
  
     </frameset>
     <frame src="./page3.html" />
</frameset>
</html>

Step Two: define ROWS for our nested FRAMESET (you'll always be defining the nested FRAMESET using the opposite structure from the parent FRAMESET).

Example:

<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="*,200">
     <frameset rows="150,*">
  
     </frameset>
     <frame src="./page3.html" />
</frameset>
</html>

Step Three: add FRAME tags to nested FRAMESET.

Example:

<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="*,200">
     <frameset rows="150,*">
           <frame />
           <frame />
     </frameset>
     <frame src="./page3.html" />
</frameset>
</html>

Step Four: set SRC attributes for FRAME tags.

Example:

<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="*,200">
     <frameset rows="150,*">
           <frame src="./page1.html" />
           <frame src="./page2.html" />
     </frameset>
     <frame src="./page3.html" />
</frameset>
</html>

Here is the above example displayed.

Here is the same example with the rows and columns reversed:

<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset rows="*,200">
     <frameset cols="150,*">
           <frame src="./page1.html" />
           <frame src="./page2.html" />
     </frameset>
     <frame src="./page3.html" />
</frameset>
</html>

And here is the above example displayed

Note: can you see how I have defined AT LEAST one row AND one column in these layouts using proportional units of measurement? This ensures that the fixed-width and fixed-height frames maintain their proper shapes.

You may nest framesets as deeply as you wish, creating very complicated layouts. Of course, if you make a design TOO complex, it loses usability; use only as many frames as you truly need.

Remember: Each row or column of a FRAMESET must have associated with it either a FRAME tag or a nested FRAMESET tag. Ultimately, EVERY frame in the design must have a FRAME tag associated with it.

Main Menu