TU STUDIES
Using Computers
Web Site Design Module
Task 9

Working With Frames

Many web sites on the internet divide the screen into areas called frames and use the various parts of the screen to do different things. The most common use of this technique is to provide a menu on the left of the screen which then calls up further pages in the main section (the imfamous daveparr.co.uk/vendetta is an example of this) You can also use frames to provide a header or footer showing details of the website author as has been done on www.unisonscarborough.com Look at these two sites and see how they work when you select the various options. Only the main part of the screen changes. When a page is loaded that requires a scroll bar to appear, only the main section scrolls, the menu an footer stay where they are.

How is it done?

To use frames you must create an html page which does nothing else but define how the screen is sub divided and tells the browser which pages you want to load into the frames to start with. Open EditPlus and create a new page containing the code shown below (note the line numbers in red are for reference and are not to be included in your code). When you have typed in the code save it on your disk as index.htm 
1 - <html>

2 - <head>
3 - <title>Frame Set</title>
4 - </head>

5 - <frameset cols="25%,75%">

6 - <frame src="task1.htm" scrolling="auto" name="index">
7 - <frame src="table.htm" scrolling="auto" name="main">

8 - </frameset>
9 - <noframes>This site requires a browser which supports frames such as Internet Explorer 4.0</noframes>
10 - </html>
Lines 1 to 4 and Line 10 should be familiar to you, the new frameset tags work as follows:-

Line 5 is the basic framester tag. The attribute cols tells the browser that we want to split the screen into vertical columns (the alternative is rows for horizontal splitting). The values "25%,75%" define the amount of screen allocated to each section. You can actually define as many sections as you wish but they must add up to 100%.

Lines 6 and 7 define the frames that have been allocated in line 5. The order of these is important, line 6 refers to the first frame defined (the 25% part), line 7 to the second (the 75% part). The first part of the tag tells the browser which web page to load into that frame; here this is task1.htm for the first and table.htm for the second. Change these as necessary so that you are calling up two files that actually exist on your disk. The scrolling="auto" atttribute tells the browser to include a scroll bar if the page loaded needs it but not to if it doesn't. The final part names the frame. This is important when you make links from one frame to another. Keep these names simple and consistant. Here the left hand frame is called index, the right is called main.

Line 8 closes the frameset.

Line 9 uses the <noframes> tag to display text to tell users who's browsers do not support frames why they can't see your site. Such browsers are old now and becoming increasingly rare (The current version on Explorer is 6, version 3 was the last one to not support frames). Leaving this out would not be a great problem but it may help some people.

Making Links Between Frames

If the page that is loaded in your left hand frame has a link in it try clicking on it. The page it links to will be displayed in the same frame. The same goes for links in the right hand frame. It is often necessary to make a link in one frame to display a page in the other (as is the case when the left fram is used as an index). Imagine you have a link to the file picture.htm in the page shown in the left hand frame, the code will say something like:- 
<a href="picture.htm">Look at my Picture</a>
To load this into the right hand frame we need to know what the frame is called (look back to line 7... we name the frame "main"). Add the target attribute to the link as shown below in red:- 
<a href="picture.htm" target="main">Look at my Picture</a>
We have now told the browser not only what file to load when the link is clicked but also which frame to display it in.

Create Your Own Index

Create a page called menu.htm that has a link to all of the other pages on your disk (task 1, picture, table, asylum seekers etc). Modify your frameset file so that menu.htm loads into the left hand frame all of the links call the pages into the right hand frame.

Click here for the next worksheet