Nested Frames Introduction

Nested Framesets are the easiest of Framesets to create. For this tutorial we will create a simple 3-frame nested frameset. You will need four HTML files for this tutorial. Create the four files shown below and save them with the file names as noted below.

name the above file default.htm

name the above file top.htm

name the above file left.htm

name the above file main.htm

If you followed the instructions as shown above you should have a frameset page when opened in a browser that looks similar to below.

Now, I know you're looking at that thinking, "I don't like those borders/lines around those frames." There is a way to get rid of those. The only page you have to change is the "default.htm" to get rid of them as shown below in code and what it will look like in a browser.

There are times when you don't want any space for the borders or gutters of the page. Unfortunately IE and Netscape handle these differently and you will have a small pixel difference but it will be close.

Use the code below and on each of the three frameset pages add the following to the body tag:

marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"

You need all of that to be compatible with IE and Netscape.

Below see a browser screenshot to show how the margins have been affected.

In this particular frameset I want to have my links in the left frame and I want the links to load pages in the main content frame. In order to do this we must "target" the link. So, in our left frameset I would create my links similar to below:

If you look at the hyperlinks above you will see target="frmain". If you look above further you will see that we named our main content frame frmain. Now, when a surfer clicks one of those links located in the left frame, the corresponding page will be loaded in the main content frame.

Drawbacks of nested framesets are that you cannot load two different pages with one link. For instance, let's say you want the navigation page in the left frame to change as well as the main content frame. With nested framesets this is not possible. Check out the tutorial on traditional framesets to see how to make changes to two pages at once possible.

Some Frameset Attributes:

• COLS (number of columns in the frameset)
• ROWS (number of rows in the frameset)
• BORDER (size in pixels)
• FRAMEBORDER (can be Yes/No or 0/1)
• FRAMESPACING (size of space in pixels)
• BORDERCOLOR (color name or hex color)

Some Frame Attributes:

• FRAMEBORDER ( can be 0 or 1 )
• MARGINHEIGTH (size in pixels)
• MARGINWIDTH (size in pixels)
• NAME (name of frame)
• NORESIZE (cannot be resized)
• SCROLLING (can be Auto/Yes/No)
• SRC (url of page to load in frame)

We add the NOFRAMES tag for backward compatibility for browsers that do not support frames. You can code in a full normal html page there with links for those browsers so that they will still be able to navigate your site or you can create a no frame site with a link to it between the NOFRAMES and /NOFRAMES tags.

Copyright Vikki Olds, All Rights Reserved