Defining Multiple Frames

Frames divide your browser into several separate sections each of which can display a separate web page. You define your web site as using frames by using a frameset definition as your home page instead of an ordinary web page. This frameset definition defines the separate frames within the browser window and which web pages are to be initially loaded into each. Usually the frameset definition also names each frame so that navigation links in one frame can load pages in a completely different frame. Optionally, a frameset definition can also be used to pass values between the different pages on your site using Javascript.

Not all browsers support frames so (if possible) you should provide a means by which anyone who cannot view your site in frames can still access the information on your site. The noframes declaration provides an alternative page definition that will display in browsers that do not support frames.

Let us consider a site having a title frame across the top, a navigation frame down the left side, and a main frame in the bottom right corner where the detail pages will be displayed. Let's have the title frame take up 20% of the height of the window and the navigation bar 100 pixels wide (so we can see the two different ways of specifying the sizes). This may not be the exact arrangement of frames that you are looking to use on your site but this example will show you all of the general principles and you should be able to work out for yourself how to adapt this to suit your requirements. The general layout of the screen will be like this:


What follows is the complete frameset definition (using XHTML 1.0) that we require to achieve this.

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
<html xmlns="">
<title>Example of three frames</title>
<!-- as usual meta statements, javascript functions and css declarations go here -->
<frameset rows="20%,80%">
   <frame name="title" id="title" src="title.htm" />
   <frameset cols="100,*">
      <frame name="nav" id="nav" src="nav.htm" />
      <frame name="main" id="main" src="main.htm" />
   <!-- code for page to display in browsers that don't support frames goes here -->

Now all you do is define title.htm, nav.htm, and main.htm the same as we would define any web page (bearing in mind that they will have only part of a browser window to display in).

Links in the navigation frame can replace the contents of the main frame (instead of the navigation frame) by specifying target="main" on the link.

Links to pages outside of your website should not be opened within one of your frames, you should be polite and open the page full window as the page owner expects. You do this by specifying target="_top" on the link.

If you want a more detailed explanation of how to create and use frames you might take a look at this page that goes into a lot more detail on how to configure frames to work the way that you want.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow