How Frames Work and how to link within them

THIS AREA

HTML
Using an editor
HTML Basics

Intermediate HTML
Tables
Lists
Sounds
Video
More Links
Frames
Style Sheets
Updating

Advanced HTML
HTML Hints
Reference Library
HTML Reviews

BWRS
SEARCH

Using Frames essentially allows you to have 2 or more web pages open in the same window at the same time.

These 2 page are loaded into a parent page containing the frames (this is called the frameset)

For Example

Here we have 2 pages you have created page1.htm and page2.htm. We want to display both in the same window

1

1 2

2

page1.htm loads into the frame on the Left side (lets call it left) of the window and page2.htm loads into the Right frame (right). The window now has 2 areas called Frames which each contain a pages.

This window is created by a page containing code for the frameset (this sets up the size & name of each frame and what page intially loads in).

In order for you to see your frame you must open this page up (lets call this page Frame.htm)

Frames can be very useful. Many people use a set of frame to give a static portion to their pages (e.g containing header logo and side menu) whilst the content part is more dynamic and loads into a frame (thereby everytime you click on the menu the whole page doesn't have to reload just one frame)

There are problems when frames are looked at on different resolution monitors. Your browser download time will also be increased as all webpages apppearing in the frameset will have to be downloaded.Also if overused can ruin your site. Finally older browsers (before Netscape 3.0) do not support them

Links within Frames

Creating a simple 2 frame page is not difficult (see our page on how to do this) However what catches most people out is the the links

Lets say you have created a page with a 2 frames in its frameset
where page1.htmloads into the frame called "LEFT" & page2.htm loads into the frame called "RIGHT" in the frameset

Say you want to create from page2.htm to a new page called page3.htm
which opens in place of page2.htm in Frame "RIGHT" as shown below

page1. htm page2. htm (where link is)

page1. htm page3. htm

then things are easy just use the standard way of linking

place a standard link in the HTML of page1.htm such as

<a href ="page3.htm">link to page3</a>

But say you are using page1.htm as a menu and you want to have a link from it which opens in frame "RIGHT" to replace page2.htm

page1. htm (where link is) page2. htm

page1. htm page3. htm

the trick is to use the target attribute which will use frame "RIGHT" as its value"

<a href = "page3.htm" target="RIGHT">link to page3</a>

You could do the reverse etc.

but say you wanted a link to replace our frameset window completely

page1. htm (where link is) page2. htm

page3. htm

then using the value "_top" loads the frame into the whole window replacing the frame set

e.g. <a href = "page3.htm" target="_top">link to page3</a>

If you want to open a completely new window but keep your old

e.g.

page1. htm (where link is) page2. htm		page1. htm page2. htm
		+ page3 .htm

use "_blank"

e.g. <a href = "page3.htm" target="_blank">link to page3</a>

On rare occasions you might have opened a framed page into a page a frame of another

page1 .htm page2 htm

page1 .htm page3 .htm page4 .htm

If you create a link in one of these secondary frames (e.g. here 3 and 4) with the value "_parent" in the target frame box you will load that page into the original (parent) frame

e.g <a href="page5.htm" target="_parent">

page1 .htm page3 .htm page4 .htm

page1 .htm page5 htm

If we're using precise HTML the "_self" tag should be used when you link a page to another page which opens in the same window. But this is not needed

e.g.

<a href ="page3.htm">link to page3</a>

is the same as

<a href = "page3.htm" target="_self">link to page3</a>

BACK TO FRAMES MAIN

terms & conditions copyright © 1999-2003 legal notices
home credits contact us link to us