DESIGNING YOUR OWN WEBSITE Vicky Vickers

PART THIRTEEN: CREATING SIMPLE FRAMESETS

What are framesets?
Have you ever gone to a website where the pages are divided up into smaller sections, sometimes even with a separate scrollbar for each section? These pages have been created using an HTML frameset. Frameset pages usually consist of an index section (on either the left side, top or bottom of the page) and the main body of text, but sometimes can also include a banner ad at the top or bottom (and occasionally at both top and bottom!). On a frameset page, when you click on a hot-link, usually only part of the page changes, the index and banner ad (or ads) remain the same.

Web terminology is a little difficult to follow at times as the term "web browser" can mean both a software package (e.g. Netscape, Internet Explorer, etc.) and the person using it. To make things clearer, in this article, I will use "web browser" or "browser" only for the software and "site visitor" or "visitor" for the person using the browser software.

Framesets: much maligned, often misused
When framesets were first introduced, they were often misused and consequently not much liked by a large section of the Web browsing public. Framesets were a cool new novelty which Web designers loved to play with. Pages with three or four frames on them were normal. As you can guess they looked really fragmented, left little room for text on the main frame and required a person to do lot of scrolling to read them! I still come across pages like this from time to time and unless I'm really desperate for the information contained on the page, I don't stick around. While framesets are still used inappropriately by some website designers, a lot of designers have now learned to use them responsibly.

A major problem with framesets is that you can follow a link to a completely differently website and still be stuck in the first website's framesets. There is a way of setting up the links on a frameset page so this doesn't happen, but it isn't often used as the original website owner wants you to be able to return to their site easily after your little side-trip. However, if you wish to bookmark your side-trip, or copy the location to send to friend, you're completely out of luck! All you'll end up bookmarking is the frameset site you started with. I have positioned my cursor over a link on a frameset page and then manually copied the website address which appears at the bottom of the browser window so I can visit the site without being trapped in someone else's frameset (or get the correct address to give to someone else). Netscape 4.0 offers a solution to this problem - on a Macintosh computer, clicking and holding inside the frame will bring up a menu which has a "New Window with this Frame" command (right-click on a PC).

What is an appropriate use of framesets?
I believe, if you're going to use framesets, that two sections (or frames) are enough. This would consist of one frame for an index, which doesn't change, and one for the main body of information which does change. Personally, I resisted using framesets for a long time, but came to the conclusion that it would be an appropriate method to create a library (www.crunchers.bc.ca/vicky/library/) of the articles I have been producing for this newsletter for the last two plus years. This meant I had to learn how to create framesets! So, feeling inspired one evening, I searched the Web for frameset tutorials and taught myself how to create a simple frameset site. I am going to use the frameset I created for my library as the example for this article.

A library of instructional articles is a great use for a frameset. It allows the visitor to easily select the topic they wish to read-up on, take short side-trips to other sites mentioned in the articles, and yet easily return to the original site so they can select another study topic. You can choose to keep the visitors in your frameset when they visit other sites or code your hot-links so they can roam freely, using the back button to return to your site. As my library is meant to be a learning experience and I usually provide the URL for all hot-links, I choose to keep the visitors in my frameset for their side-trips. I also decided not to include a "No Frames" version of the page as I believe the majority of the people interested the topics presented in the library will have a frames capable browser. Check out some of the tutorials listed at the bottom of this page is you wish to create a no frames version of the frameset.

On my website, I put my library in its own sub-directory (folder in Mac language) to keep it separate from the rest of the site. Then by naming the main page homepage.html, the library has a much simpler website address because I don't have to include the name of the main page in the URL. Note: with some ISPs (Internet Service Providers) you would have to name the main page "index.html" or "default.html" for this to work.

Note: This is a good way to handle any large sections of your website. Remember to change the addresses for any graphics so the pages placed in a sub-directory can find them. I find the simpliest way is to handle this is to create a sub-directory called graphics in each of my directories, including the main one. Then I place all graphics needed for the pages in each directory in its graphics sub-directory. The local URL for any graphics so placed would then be "graphics/graphicsname.gif".

A simple frameset
A page with two frames actually consists of three separate pages, which collectively are called a frameset. The main page contains very little information, its only purpose is to tell the other two pages, which are the actual frames, how to behave. In the simple example I'm going to use, the left-hand frame is a narrow index which covers 20% of the page and the right-hand frame (80%) contains the changing content.

The main page
The main page coordinates the frameset and it's name forms the last part of the URL used to access the frameset unless you have placed it in a sub-directory. As I have a lot of articles, I have put my frameset into a sub-directory and named my main page homepage.html. Below is all the main page has on it - five lines of HTML code. Notice, there are no body tags used on this page.

<HTML><HEAD><TITLE>Library</TITLE></HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SCROLLING="AUTO" NORESIZE SRC="content_index.html">
<FRAME NAME="CONTENT" SCROLLING="AUTO" NORESIZE SRC="content.html">
</FRAMESET></HTML>
The first line (<HTML><HEAD><TITLE>Library</TITLE></HEAD>) contains the standard opening HTML and HEAD tags. Then as I wanted a page name to appear on the title bar, I also included a page name between the opening and closing tags for TITLE and then closed the HEAD.

The second line (<FRAMESET COLS="20%,80%">) tells the web browser to create a frameset and how each of the frames is to be used, e.g. how they are placed (in columns, rows or both) and how much room each of them is allowed to use. In this example, we are going to use two columns and no rows. Columns go up and down the page and rows go across.

The third line (<FRAME SCROLLING="AUTO" NORESIZE SRC="content_index.html">) tells the browser which page to access for the first frame (or column), in this example, the content index frame (SRC="content_index.html"). SRC is short for "source". The SCROLLING="AUTO" tells the browser to create scroll bars for the frame automatically only if they are needed (you can also use "YES": and "NO"). As auto scrolling is default, you don't need to include this tag if you want the scrolling function to occur automatically. "NORESIZE" (no-re-size) stops the site visitor from changing the size of the frames.

The fourth line (<FRAME NAME="CONTENT" SCROLLING="AUTO" NORESIZE SRC="content.html">) tells the browser to start the content frame with the content page (SRC="content.html") and also contains the instructions for scrolling and no resizing. However, a new element (NAME="content") is added, as this frame will be the one which changes when a visitor clicks on a hot-link in the index frame.

Finally, the page ends with closing FRAMESET and HTML tags (</FRAMESET></HTML>).

The content index frame
This page, which I called content_index.html, looks like a normal HTML page, and includes a body tag. The only difference between this and a regular HTML page are the addresses used in the hot-links. e.g. <A HREF="filename.html" TARGET="content">Filename</A>. "Filename" being the hot-link the visitor will click on. The TARGET="content" tells the browser which frame to use to open the hot-linked page.

The content frame
The content frame, which I named content.html, is created the same as any normal HTML page and contains the initial information which the visitor will see when they initially access your frameset. The information in this frame will change every time a visitor clicks on another hot-link in the content index frame. It will also change when they click on a hot-link contained in the content frame itself.

Letting visitors out of your frames
There are two ways of letting visitors out of your frameset. One is to add TARGET="_TOP" to the hot-link, e.g. <A HREF="filename.html" TARGET="_TOP">Filename</A>. This will take visitors out of your frameset, creating a normal window and is usually only applied to hot-links on your content frame. If you did this with all your index links, you would lose the advantage of creating a frames page in the first place. Of course there is always the occasional exception.

The second way to let visitors leave your frameset to tell the hot-link to open in a new browser window by adding TARGET="_BLANK" to the hot-link. e.g. <A HREF="filename.html" TARGET="_BLANK">Filename</A>This has the advantage of retaining your page in the original window, behind the newly opened window, so the visitor can return to it if and when they wish.

Frameset tutorials on-line
If you want to learn more about framesets, you can get all the information you need on the Web. When I decided to learn how to create framesets, I went to my favourite search engine, Alta-Vista (altavista.digital.com/) and typed in a request (+frames +tutorials). This resulted in more information on learning framesets than I could ever use in a lifetime! Below are a few good sites which should give you all the information you will ever need to create your own framesets.

Paul Evád, one of the founding members of WEAV, has an excellent tutorial (www.kudosnet.com/frames/).

Simple Frames, How to Build and Use Them by Stephen Lankton (www.clubie.com/team3/frames/mainbody.htm) is another site I found useful.

The Art of Frames, sponsored by Webspinners, is fairly easy to understand site (www.spunwebs.com/frmtutor.html).

The Web Developers Virtual Library has a comprehensive frames tutorial (WDVL.Internet.com/Authoring/HTML/Frames/). (Thanks to Mark Elrod of WEAV for suggesting this site.)

Acknowledgements
This article was published in the June 1998 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line". Thanks to Murray Fallen, President of WEAV and owner of CVC Productions West Ltd. (cvcprod.ca/west/) for his advice and assistance in writing this article.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index

Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)

Copyright 2000 by Word Crunchers, Etc.

([an error occurred while processing this directive] )