Image Maps


Introduction to Frames

This section describes how to create framed HTML documents. Frames enable you display more than one web page on the screen. Frames divide the screen into multiple, scrollable regions enabling you to present information in a more flexible and useful fashion. Each frame can be given an individual URL and name, allowing it to be targeted by documents in other frames. Each frame can also be resized by the user. Sizzling HTML Jalfrezi uses frames to display a toolbar and contents strip around the main body of text.

Currently frames are only supported by Netscape Navigator 2 upwards and Microsoft Internet Explorer 3 upwards.

Specific Markup

<FRAMESET>, <FRAME>, <NOFRAMES>, TARGET, ROWS, COLS, FRAMEBORDER, BORDERCOLOR, FRAMESPACING, NORESIZE, MARGINWIDTH, MARGINHEIGHT, SCROLLING, <IFRAME>

Go to Contents Getting Started

Frames are displayed through a Frame Definition document. The frame definition describes the number and position of the frames and the URL of their contents. You cannot write the contents of the frames within the frame definition - these must always be held in separate documents.

The basic frameset

In a frame definition document, the <BODY> tag is replaced by the <FRAMESET> tag. The <FRAMESET> tag will be ignored if any tags normally found within the <BODY> element are placed before it. The <FRAMESET> container holds the <FRAME> elements which describe the frames that will make up the page.

A framed page layout is defined in terms of rows and columns using the <FRAMESET> and <FRAME> elements. The example below shows the web documents one.htm, two.htm and three.htm displayed side by side in columns on the screen. The first page is set to 80 pixels wide, the width of the second page is set to 25% of the available area and the third page should take up all the remaining space.

How it renders

Frames Example 1

Example of code

<FRAMESET COLS="80,25%,*">
	<FRAME SRC="one.htm">
	<FRAME SRC="two.htm">
	<FRAME SRC="three.htm">
</FRAMESET>

To arrange your frames horizontally rather than vertically, use the ROWS attribute in place of COLS. These attributes define the shape of the frames as row heights or column widths contained in a comma separated list. They are described in terms of absolute height in pixels, percentage values from 1 to 100% or as relative values using an asterisk ( * ). Incidentally Netscape browsers have a tendency to round frame sizes to the nearest 10 pixels. The total height of all rows must equal the total height of the window, so the values may be normalised by the browser if necessary. For example:

Example of code

<FRAMESET ROWS="2*,*">
Makes the top frame twice the height of the bottom frame.

<FRAMESET COLS="50,*,50">
Fixes the height of the left and right frames and allocates the remaining space in the window to the middle frame.

<FRAMESET ROWS="20%,60%,20%">
Displays a large middle frame between two smaller frames.

Nesting frames

The above example shows three frames placed within a frameset. To create a more complex arrangement of web pages you can place a frameset and its associated frames within another frameset. This is known as nesting frames, and you can think of it in the same way as putting a table within a table.

The example below shows how to nest frames by placing one frameset inside another. First we write a basic two row frameset:

Example of code

<FRAMESET ROWS="*,50%">
	<FRAME SRC="five.htm">
	<FRAME SRC="four.htm">
</FRAMESET>

How it renders

Frames Example 2

Now we replace the frame displaying page five.htm with the frameset in the first example (above):

Example of code

<FRAMESET ROWS="*,50%">
	<FRAMESET COLS="80,25%,*">
		<FRAME SRC="one.htm">
		<FRAME SRC="two.htm">
		<FRAME SRC="three.htm">
	</FRAMESET>
	<FRAME SRC="four.htm">
</FRAMESET>

How it renders

Frames Example 3

There is no limit to the number of frames you can nest, although be wary of using more than three frames on the screen as they can begin to make things very complicated for your readers. See WDG's excellent What's Wrong With Framesexternal link for more guidance in friendly use of frames.

Content for non-frame browsers

A significant proportion of your readers will not be using a browser that supports frames. It is important, therefore that you provide content for non-frame browsers. The <NOFRAMES> element enables you to do this. You can put any content inside the <NOFRAMES> </NOFRAMES> that you would normally place between the <HTML> </HTML> tags. If you do not provide this content then a reader using a non-frames browser will not see anything, and will be forced to go elsewhere. Browsers that support frames ignore all content within the <NOFRAMES> tag.

Example of code

<FRAMESET ROWS="*,50%">
	<FRAME SRC="five.htm">
	<FRAME SRC="four.htm">
<NOFRAMES>
	<BODY>
	<P>Welcome to my page.
	<A HREF="noframes.htm">Continue</A> to the frame-free version.</P>
	</BODY>
</NOFRAMES>
</FRAMESET>

Go to Contents The Details

As well as positioning your pages on the screen, you can also have some control over the frames themselves. You can remove the frame borders, colour them and change their width. Additionally you can put margins around your framed pages, remove the scroll bars and prevent resizing of the frames.

Enhancing a frameset

The following attributes can be applied to the <FRAMESET> element for additional control.

Enhancing an individual frame

The following attributes can be applied to the <FRAME> element for additional control.

Creating a seamless join between frames

To create a seamless join between frames in both Netscape and Microsoft browsers, you must set the FRAMESPACING, FRAMEBORDER and BORDER attributes all to zero, as in the example below.

Example of code

<FRAMESET COLS="120,*" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0>
	<FRAME SRC="toolbar.htm" MARGINWIDTH=2>
	<FRAME SRC="frames/fintro.htm">
</FRAMESET>

Go to ContentsLinking Frames

One of the main benefits of frames is that you can use a link in one frame to open a page in another frame on the same page. A good example of this is Jalfrezi's toolbar (on the left). Clicking on a button opens up a new section in the rest of the page, while the toolbar remains static. This process is called targeting frames.

Naming frames

The first step to targeting is to name your frames. This is done in the frame definition document by using the NAME attribute of the <FRAME> tag.

Example of code

<FRAME SRC="page32.htm" NAME="mainarea">

Targeting frames

You target named frames using the TARGET attribute. This attribute is not found in the frame definition but is used within normal HTML documents to direct data to specific frames. Normally when a user clicks on a link, the new document appears in the same frame as the link. The TARGET attribute is used to direct data to different frame. We shall consider the TARGET attribute in terms of frames and the <A> tag. The TARGET attribute can also be used in a similar manner with the <BASE> , <AREA> and <FORM> tags. In order to direct data to a different frame, the receiving frame must have been named in the frame definition.

Example of code

<A TARGET="mainarea" HREF="page2.htm">Page 2</A>

How it renders

The above example would load the file page2.htm into the frame named mainarea.

If the name in the TARGET attribute does not exist, the linked document will be opened as a new window, with a name as given in the TARGET attribute. The names must all begin with an alphanumeric character.

Magic target names

There are some special target names, called magic target names. These all begin with an underscore ( _ ) and are used to load pages into groups of frames.

Go to Contents Example

The following example will use nested framesets to display frames in approximately the following fashion:

+------------+-------------------------+------------+
|            |                         |            |
|            |                         |            |
|            |                         |            |
|            |                         |            |
|            |                         |            |
|            |                         |            |
+------------+------------+------------+------------+
|                         |                         |
|                         |                         |
|                         |                         |
|                         |                         |
|                         |                         |
|                         |                         |
+-------------------------+-------------------------+

The Frame Definition

<HTML>
<HEAD>
<TITLE>Sizzling HTML Jalfrezi - frames example</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="150,*,150">
        <FRAME SRC="x_frame1.htm" SCROLLING="yes">
        <FRAME SRC="x_frame2.htm">
        <FRAME SRC="x_frame3.htm" NAME="frame3">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
        <FRAME SRC="x_frame4.htm" MARGINHEIGHT=50 MARGINWIDTH=50>
        <FRAME SRC="x_frame5.htm">
    </FRAMESET>
</FRAMESET>
<NOFRAMES>You do not have a frame-compatible browser - this example won't work without one.<BR>
<A HREF="frames.htm">Click here</A> to return to the Frames page.
</NOFRAMES>
</HTML>

View the example

The example shows all of the features of frames described above, including targeting windows and the NOFRAMES feature for non-frame compatible browsers.

Go to Contents Floating Frames

Microsoft Internet Explorer 3.01 upwards supports the so-called floating frame. This is rendered using the <IFRAME> tag and enables you to place a frame at any point in a webpage.

Go to Contents Frequently Asked Questions

I want to use frames on my site. Which page do I put my frame commands on?
Frames are displayed through a Frame Definition document. The frame definition describes the number and position of the frames and the URL of their contents. You cannot write the contents of the frames within the frame definition - these must always be held in separate documents.

How can I load documents into multiple frames from a single link?
I'll explain here how to load two frames at the same time. Let's assume you'd like your website to be set up as follows:

    +-----+----------------------------------------------+
    |     |                                              |
    |  A  |    B                                         |
    +-----+----------------------------------------------+
    |     |                                              |
    |  C  |    D                                         |
    |     |                                              |
    |     |                                              |
    |     |                                              |
    |     |                                              | 
    |     |                                              |
    |     |                                              |
    |     |                                              |
    +-----+----------------------------------------------+

Where A is a static logo, C is the index, D is the main display area and B is the banner or header for each page, therefore as D changes, so should B. The trick to loading two frames at a time is to put the two frames within their own frame. This means you will have to write (at least) two 'frame definition' documents.

With respect to the above example, the first frame definition should define frame A, frame C and a third frame to contain frames B and D (we shall call this frame E). Frame E will contain the second frame definition which controls how frames B and D are displayed. By way of example, the first frameset should be something like the following. This example displays 'Section 1' as the initial page for the main display area. Notice the 'name' attribute in the second frameset.

<FRAMESET COLS="100,*">
	<FRAMESET ROWS="100,*">
		<FRAME SRC="logo.htm">
		<FRAME SRC="index.htm">
	</FRAMESET>
	<FRAME SRC="section1.htm" NAME="maindisplay">
</FRAMESET>

The second frame definition, contained in section1.htm, defines the header and main text for "Section 1":

<FRAMESET ROWS="100,*">
	<FRAME SRC="header1.htm">
	<FRAME SRC="text1.htm">
</FRAMESET>

To make all this function you will need to add the TARGET attribute to all the links in your index document, eg.

<A HREF="section1.htm" TARGET="maindisplay">Section 1</A>.

Multiple frame loads can also be performed using JavaScript.

How I do stop my webpages appearing inside other people's frames?
The only way to stop your web pages appearing inside other people's frames is to use JavaScript. If your own site does not use frames then you can employ the following script in each of your pages.

<BODY onLoad="if (self != top) top.location = self.location">

If your website does use frames then you will have to use JavaScript to frame proof your pages. The following code checks to see if a document is in a frame and, if it is checks that the frame is one that you have named. If the frame is not one you have named then your page must be in someone else's frames and the script clears the frames and loads a document of your choice.

<SCRIPT LANGUAGE="JavaScript">
<!--//
if (self != top) if ( top.frames[1].name !="mainarea") top.location = "http://vzone.virgin.net/sizzling.jalfrezi/index.htm"
//-->
</SCRIPT>

In the above example, the frame you're expecting the document be loaded in is called mainarea. If the script finds this isn't the case then it loads the file http://vzone.virgin.net/sizzling.jalfrezi/index.htm and displaces the existing frames. Place the script in the HEAD of your documents. See NetscapeWorld's The Best Way to Frame-Proof Your Pagesexternal link and Still More Tricks to Frame-Proofing Your Pagesexternal link for more information.

I've created a frameset but when I load it into Netscape Navigator, the page remains blank. Why?
The most likely problem is a <BODY> tag outside the <NOFRAMES> tags. If a <BODY> tag is present outside the <NOFRAMES> tags then Netscape browsers will completely ignore the frameset.

Go to Contents Useful References


Sizzling HTML Jalfrezi
ContactPurchase
Page Contents
Previous pageJalfrezi ContentsNext page

Click Here!