Frames 2 - HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
FRAMES 2 - MULTIPLE FRAMES

One of the most common uses of frames is a page in which there is an index or site map on the left, a header at the top and under that the main page information which is usually the only thing that changes when you click a link. Here is a graphic representation of combining rows and columns:

Left side
frame is
often an index Top frame is
often used for a header

Lower frame
usually contains
the main information
about the site

To obtain this result we need to add another FRAMESET tag, using the ROWS tag as before. Just remember that rows and columns cannot be combined within the same <FRAMESET> tag. The code will now read like this:

</FRAMESET>

To see this example, CLICK HERE.

Now let's look at the various elements that make up this bit of code:

The first thing to note is that we now have two <FRAMESET> tags with two closing </FRAMESET> tags.

With the first <FRAMESET COLS> tag the browser will divide the page into 2 columns, one for the left pane and one for the right. So far so good. In the left column we find the FRAME SRC tag for the same page we used before, fryellow.html, which will fill 20% of the page width.

Now we start the nesting process. The remaining 80% of the page will be filled with two rows, so we need another FRAMESET tag to set up those rows. In other words, nested inside the FRAMESET COLS tag. This of course will be a <FRAMESET ROWS> tag.

Note that the order for rows is top to bottom so the next two FRAME SRC tags will place the frblue.html and frgrey.html pages into the percentages specified by the code.

The other important point to remember is to keep track of all the FRAMESET tags and make sure to close all of them. Practice until it is correct and try to keep it simple at this stage.

The next thing we will look at is making all these frames interactive so that you can, for example click on a link in the left frame and make it appear in the right or main frame.

Next: Frames 3 - Linking frames

Advanced Index