Layouts

Layouts
(last updated: Jun 6, 2008)

Overall Page Layout
Layers
External Frames
Internal Frames

Download the layouts.zip archive if you're interested in any of these examples.

Overall Page Layout

Generally you will want to employ one or more of these methods to achieve you desired layout design:

Tables: the overall structure is a table - minimally a single row with 2 columns.
Layers: the overall structure is a set of absolutely-positioned divisions (see Notes 9: absolute positioning).
External frames: the overall structure is a frameset containing multiple frame elements.
Internal frames: these type of layouts employ iframe elements.

The first of these, the table-based layout, is probably the most portable to a wide variety of browsers. Recall that one issue with table-based layout is avoiding the left column (typically holding navigational links) being "crushed" by the content in the right column.

Layers

A layer is an absolutely positioned division, namely, a div block in which the position style property is absolute. See the section about absolute positioning in Notes 9 for a discussion and some examples. When the position style property is set to absolute, the top and left style properties are used to set the division's location. When layers are allowed to overlap, the z-index style property can be used to determine the layering order.

The term layer derives from the (long deprecated) HTML element of this name used originally in Netscape Navigator 4. The layer element has been superceded by the absolutely positioned division.

In a layer-based layout, normally everything is put into a layout and these layers do not overlap.

In order to create a layered version of our sample website used in Experiment 6, we could leave the logo image alone and place the left navigation and right content sections in layers.

Bearing this in mind the global style file, mystyle.css would be used to specify the divisions nav and content:

body {
 background-color: palegoldenrod;
}

div.hdr {
  position: absolute; 
  top: 10px; 
  left: 25px; 
}

div.nav { 
  position: absolute; 
  top: 150px; 
  left: 15px; 
  width: 150px;
  padding: 10px;
  line-height: 4ex;
  background-color:lavender;
  border: solid 1px red;
}

div.content { 
  position: absolute; 
  top: 150px; 
  left: 200px; 
}

All the documents which use this layout would observe the following template:

<html>
<head>
<title></title>
<style>
@import url(mystyle.css);
</style>
</head>
<body>

<div class="hdr">
  <img src="../images/header.gif" alt="My Website" height="120" width="500"/>
</div>

<div class="nav">
  Links
</div>

<div class="content">
  Page content
</div>

</body>
</html>

The structure of the document webdesign.html is this:

<html>
<head>
<title></title>
<style>
@import url(mystyle.css);
h2.top { margin-top: 0px; } /* fix for first header */ 
</style>
</head>
<body>

<div class="hdr">
  <img src="../images/header.gif" alt="My Website" height="120" width="500"/>
</div>

<div class="nav">
  Links
</div>

<div class="content">
  <h2 class="top">What I've Learned in Web Design</h2>

  <table summary="" cellpadding="5px" width="100%"> 
  <tr valign="top">

  <td width="30%">
  <h3>HTML</h3> 
  ...
  </td>

  <td width="1%"></td>

  <td width="30%">
  <h3>Lists</h3>
  ...
  </td>

  <td width="1%"></td>
  
  <td width="30%">
  <h3>Graphical Images</h3>
  ...
  </td>

  </tr>
  </table>
</div>

</body>
</html>

We still want to use a table, but the table structure is now completely inside the content div. To see the overall effect,

click here (only the first two links are in use)

Unlike the table-based layout, we do not have to do anything special to avoid the links section being "crushed" by the content section.

External Frames

There are a number of tutorials on the web about using external frames, here is one example of them:

http://www.htmlcodetutorial.com/frames/frames.html.

External frames use an overall document structure based on the frameset element which replaces the usual body element. A frameset composes the browser window of individual frame elements, each of which is its own complete document.

For example, to frame our sample website, we can make a composition of three documents: the top containing the logo image, the left containing the navigation, the right containing the content. Bearing this in mind index.html would be the following frameset:

<html>
<head>
<title>Frames(1)</title>
</head>
<frameset rows="140,*">
  <frame name="top" src="header.html" />
  <frameset cols="150,*" >
     <frame name="left" src="nav.html" />
     <frame name="right" src="home.html" />
  </frameset>
  <noframes>
You are obliged to create a separate-but-equal website here
without using frames!
  </noframes>
</frameset>
</html>

The left and right portions are themselves contained in a frameset.

The files consist of

mystyle.css: defining the background color used by all documents
```
body { background-color: palegoldenrod; }
```

header.html: the top document containing the image

<html>
<head>
<title></title>
<style>
@import url(mystyle.css);
</style>
</head>
<body>
<img src="../images/header.gif" alt="My Website" height="120" width="500"/>
</body>
</html>

home.html: the (currently empty) content document of the home page

<html>
<head>
<title></title>
<style>
@import url(mystyle.css);
</style>
</head>
<body>
</body>
</html>

nav.html: the navigational links document

<html>
<head>
<title></title>
<style>
@import url(mystyle.css);
body { margin: 0px; }
div.main {
 line-height: 4ex;
 padding: 10px;
 line-height: 4ex;
 background-color:lavender;
 border: solid 1px red;
}
</style>
</head>
<body>
<div class="main">
<a target="right" href="home.html">Home</a><br />
<a target="right" href="webdesign.html">Web Design</a><br />
<a target="right" href="moves.html">Favorite Movies</a><br />
<a target="right" href="hobbies.html">My Hobbies</a><br/>
<a target="right" href="songs.html">Top 10 Songs</a><br/>
</div>
</body>
</html>

Note that these hyperlinks use the additional target attribute. In the usage:

target="right"

the value "right" corresponds to the frame with name="right" and is used to cause the hyperlink page to be displayed in the right frame instead of, by default, in the left frame where the navigation page is located.

Additionally, the file webdesign.html is a document holding the content described in the "content" layer above. The overall effect can be seen by

clicking here.

There are a number of features of frames that you may want to avoid in this case, including frame borders and scrolling. In order to get rid of these, you would add attributes to index.html as follows:

<html>
<head>
<title>Frames(2)</title>
</head>
<frameset rows="140,*" frameborder="no" framespacing="0" border="0" >
  <frame name="top" src="header.html" scrolling="no" />
  <frameset cols="150,*" >
     <frame name="left" src="nav.html" scrolling="no" />
     <frame name="right" src="home.html" scrolling="no" />
  </frameset>
  <noframes>
You are obliged to create a separate-but-equal website 
without using frames!
  </noframes>
</frameset>
</html>

To see the overall effect of this modified version,

click here

Although external frames, once you've used them, appear quite elegant and efficient, there are a number of issues regarding their usage. Here is a section quoted from the tutorial mentioned above:

Frames Block Out Many People Whose Browsers Are Frames-Incapable
When designing a framed site, it's important to remember that many people use browsers that can't handle frames. Contrary to some people's perceptions, this is not just because the user is too lazy to "get a real browser". Some people use text or audio browsers which render material in a linear fashion. Others simply dislike frames and turn them off in their browser's settings. If you don't include no-frames content, you are simply leaving out a portion of your potential audience.

Frames Are Often Misused
Probably the biggest problem with frames is that it is so easy to use them incorrectly. The web is filled with pages that use frames not because they are correct for the situation but because "they're cool". This is what gives frames a bad name. If you are considering using frames, make the choice based on what works best for your site, not on the mere availablility of "special effects".

The Functionality of Frames Can Already Be Achieved Through More Standard HTML
Most things that can be done with frames can be done without them... and in fact should be done without them anyway because you should always have a no-frames alternative. In fact, this is the reason many designers have abandoned frames: redundant effort. When I queried one large web site as to why they stopped having frames and no-frames versions the web master replied that it was too much work keeping them synchronized.

At issue is the fact that you need to create a parallel website without frames and direct the user to it via the section:

<noframes>
...
</noframes>

Internal Frames

Again, I'll refer you to the same tutorial site, this time for internal frames:

http://www.htmlcodetutorial.com/frames/_IFRAME.html.

Internal frames (using the iframe elements) are different from external frames in that they are internal to a document and not part of an overall frameset. They are similar to external frames in that

the content can be set from an external HTML document via the src attribute
the content can targetted from a hyperlink using the target attribute within the hyperlink corresponding to the name attribute within the iframe.

An additional difference is that an iframe accepts and displays content between the start and end tags. Using iframes, similar to the frame usage, the overall website layout is specified in the one file index.html, but this file is not a frameset, rather it uses some other kind of layout (tables, layers) to create the variable content section which is the iframe.

Bearing this in mind we would create index.html to be a table containing the header image, the navigation cell and the content iframe as follows:

<html>
<head>
<title>IFrames(1)</title>
<style>
@import url(mystyle.css);

div.nav { 
  padding: 10px;
  line-height: 4ex;
  background-color:lavender;
  border: solid 1px red;
}
</style>
</head>
<body>

<img src="../images/header.gif" alt="My Website" height="120" width="500"/>

<table width="100%">
<tr valign="top">
<td width="150px">
<div class="nav">
<a target="content" href="home.html">Home</a><br />
<a target="content" href="webdesign.html">Web Design</a><br />
<a target="content" href="moves.html">Favorite Movies</a><br />
<a target="content" href="hobbies.html">My Hobbies</a><br/>
<a target="content" href="songs.html">Top 10 Songs</a><br/>
</div>
</td>

<td>
<iframe name="content" src="home.html"></iframe>
</td>
</tr>
</table>

</body>
</html>

Note that, as in external frames, these hyperlinks use the additional target attribute. In the usage:

target="content"

the value "content" corresponds to the iframe with name="content" and is used to cause the hyperlink page to be displayed in the iframe instead of, by default, in the main page.

We go back to using a table-layout (or layer-based layout if desired) except that the content section is an iframe dislaying the intial source for the home page, home.html. The files home.html and webdesign.html are exactly the same as the ones used for external frames. To see the overall effect,

click here.

Obviously, we need to work with the attributes to get a better presentation. There are a number of attributes of iframes that you can use to control the display. Unfortunately, it does not work to set the height to 100% to avoid a vertical scrolling effect. Without other JavaScript techniques, you just have to set the height "big enough". The modified version of index.html differs only by this version of the iframe element:

<iframe name="content" src="home.html" width="100%" 
        frameborder="0" height="800"></iframe>