Frames

Home

NB: These notes relate to the site in its previous incarnation - that was frame based.

Contents

Some ideas on why a web designer (You!) might choose frames for their site - If you've already decided you can skip this bit!
The technical bit with code.
Mission critical - ignore this at your peril!
How to load linked pages into a new window.
Bits I couldn't put elsewhere - includes some user considerations.
Fast pass to make sure the main points are covered.

Why Frames

Frames are used to make the layout of a site more cohesive and uniform. For example, this site uses frames for the time/date display above and the menu on the left hand side. Frames can also be used with colour to estanlish or enhance a corporate image.

This structure also makes site management simple. This page was added long after the site was published and needed only the addition of a menu item on the html page displayed in the left hand pane.

Top

Working with Frames

The frame structure is created using plain old html and uses frame and frameset tags.

Here is the code for setting up the frames used on this site (This is not now the case - press here to load the frame set in a new window)

<FRAMESET FRAMEBORDER=0 FRAMEBORDER=0 BORDER=0 cols="20%,80%">

<FRAME SCROLLING="AUTO" SRC="t171menu.htm" NAME="side" NORESIZE target="side">

<FRAMESET ROWS="20%,*">

<FRAME SCROLLING="NO" SRC="banner.htm" NAME="banner" NORESIZE target="banner">

<FRAME SCROLLING="AUTO" SRC="t171home.htm" NAME="page" NORESIZE target="page">

</FRAMESET>

<noframes>

<BODY>

</BODY>

</noframes>

</FRAMESET>

The first <frameset> tag sets up two frames as columns (vertical frames), one at 20% of the screen and the other at 80%. The first <frame> tag carries the information for the 20% frame. The source for the frame is shown as t171menu.htm and the frame name is "side".

The next <frameset> tag works on the 80% frame (because the other frame has been dealt with) and splits this frame into two rows (horizontal frames). One row is 20% the other uses the wildcard (*) to use whatever space remains. The following <frame> tags then deal with each horizontal frame in sequence. The scrolling and resize behaviour of each frame is also set in the frames tag.

The following tag, <noframes>, is used to display a message that will be activated if the browser hitting this page doesn't support frames - you can see that I have not done anything here!

Finally the <frameset> tags are closed.

This table shows the structure of this web site and the initial pages.

This frame is called 'side'. It loads t171menu.htm when the frames page is built. This frame is called 'banner' and its default page is banner.htm (Date/time)
This frame is called 'page' and it loads t171page.htm

Now we've looked at the code let's see how it's used.

To set the site up using frames we need to make sure the frames page is the first one loaded by the browser - thus the frames page is called 'home.htm' or 'default.htm'. The next thing needed are the pages to load into the frames. Each frame is a space used to display a hypertext page, thus a page is needed for each space and is loaded as soon as the frame structure is created.

Thus what happens is:

The browser hits your site

The default page loads the frame structure

The frames display their starting pages.

Now click here to go to the frames this code set up.

Top

Menus and loading to the right place

Now the structure is in place and the navigation decided it's time to start using the frames. Again using this site as the example, the menu is in a frame on the left but any selection needs loading into the 'page' frame. This is accomplished by adding the 'target' attribute to the anchor tag. The top menu item is 'home' and reloads the default page to the 'page' frame. Here is the hyperlink code:

<a href="t171page.htm" target="page" >Home<a>

The target is shown as 'page' and shows the name of the frame that t171page.htm should be loaded to. If you omit the target attribute the browser will load to the currect frame, in this instance the menu disappears never to be seen again!

Top

Letting go

Eventually people will want to leave the web site.

To do this you must tell the browser that external links need loading into the whole window or a new browser window. There are a number of commands which achieve this and they are all prefaced with the underscore ( _ ) character. Try the following and see which delivers the desired effect; top, new, Main, blank.

Top

Points to remember

When viewing a sire that uses frames the browser will display the title from the initial frames page rather than the title of the page being viewed. Similarly it is harder to control status bar effects from individual pages.

Users cannot bookmark a specific page in the site - again they will bookmark the default page, the page that sets up the frames, rather than actual content they want.

To print a particular frame the user must right-click on the frame and select 'print' from the pop-up menu, this also applies to viewing code.

Top

Summary

This is a fast pass to make sure we have all the bits in the correct order.

  1. Using frames means that the first page on the site (Home, default or whatever) must create the frame structure.
  2. There must be html pages to populate each frame. These can be dynamic or static, i.e. they don't change after being loaded first time.
  3. Any navigation links must show which frame the link will be loaded to.
  4. Make sure that links to external sites close down the frame structure or your work will end up surrounding other people's efforts!

Top

Author: Nigel Gibson
Email: click here