Html frames

HTML Frames - Dividing Up
the Page
Presentation by Nobel Mujuji B.Sc.
Hons Information Systems (WUA) 2009

Aims
1. To understand what frames are and why they would be used
2. To put together a simple site with 3 frames
3. How to use the TARGET attribute of links to load pages in different frames
4. To learn how to use nested frames to split your site in different directions
5. To highlight potential issues/problems with using frames

What are frames? Why would you want to use them?
Frames are a way of organizing your website. They allow you to divide up your window into various
segments for different purposes. For example, you might want to have a website that is selling
sweets. You may want to have a panel of special offers or bulk-buy discounts which is always visible
to your customers, so they are more likely to buy.
Frames are individual segments of a window, each having its own page loading in it and being able
to work separately or with the other frames as you set them up to work. This gives greater flexibility
than just simply dumping everything onto one page.
Note: This definition will prove to be important because you will have one 'page' which literally just
sets up the frames and then you will need a separate file (which is also a complete HTML document)
for each of the different parts.

Let's put togeter a simple site using frames
<html>
<head>
<title>HTML Frames - Example 1</title>
<frameset rows="60,*,50">
<frame src="top_frame.html" name="topFrame">
<frame src="content_frame.html" name="contentFrame">
<frame src="bottom_frame.html" name="linksFrame">
</frameset>
</head>
<body>
</body>
</html>

FRAMESET Tag
• Everything that defines a set of frames, goes between FRAMESET tags (don't forget the closing tag). Seems simple enough? Good!
The other important thing here is to see that the FRAMESET tags and the subsequent FRAMEs are set up in the <head> of your
document, not in the body. It is not necessary to have anything in the body at all. Remember, I said that the page is being divided
up into sections - this document only does the 'slicing'.
• The really important bit is coming up now though, so watch closely. Decide in advance whether you want to divide your page up
into horizontal or vertical segments. It is possible to divide your page in both directions, but we will warm up to that!
• If you want to divide up your page into horizontal segments then you need to define a ROWS attribute. If you want to divide your
page up into vertical segments then you need to define a COLS attribute. For this tutorial, we will follow the examples and show
them in action.
• So above we have rows="60,*,50". There are three parts to this definition, each separated by a comma. This means I intend to
divide up the screen into 3 separate parts from top to bottom. The first and last parts are, in this example, defined by absolute
numbers - aiming for 60px and 50px. The middle section just has an asterisk and this means 'everything else'. The reason one of
your sections ought to have an asterisk is that people have different screen resolutions and then people can change the size of
their browser windows and you easily cannot control or predict this. With this definition, our top and bottom frames will always be
60 and 50, but the middle frame will resize with the screen resolution or the window size.
• Note: You can use percentages when defining segments, however this does mean your site will not look the same on everyone's
computer, which is not ideal. Using absolute figures gives you an element of control.

FRAME tag
• You must have a FRAME tag for each of the segments defined in your FRAMESET. So in this example, we have
set up 3 areas, so we must have 3 FRAME tags.
• The FRAME tag does not need a closing tag. This tag is also easier to understand. Honestly.
• SRC Attribute: this is the file you want to load into the frame. This is relative to your FRAMESET file, so if your
individual segment files are in the same folder as your frameset, then that's OK. But if they're in a separate
folder, then make sure you put the folder name in as well, else you will come across 'NOT FOUND' error
messages. Not good. So you will see that each frame tag above has a separate HTML file in it - these are
complete HTML files.
• Name Attribute: Is it really important that you give EACH frame a unique name. You will see one reason why
shortly.
• Your FRAME tags must be put in, in the same order you have defined them. So topFrame is the 60-high one,
bottomFrame is the 50-high one and contentFrame fills the rest of the window. Make sense?

Targeting Different Frames
One great usage for frames is to keep the links to your different pages always on-screen, instead of letting them scroll down
your page and have to scroll back up again to find your other pages. In the example above I have only set up one 'live' link,
but the bottom frame serves to keep links to to other pages on-screen.
This leads to another advantage of frames: when you add or remove pages from your site, you need only change one page
(unless you have links elsewhere in your site). This reduces greatly maintenance time on a website.
Let's look at the code for the link in that example:-
<a href="content_frame.html" target="contentFrame">Welcome to My Site!</a>

Cont…
• The only new bit here for you is the TARGET attribute. Remember giving the frames a unique
name earlier? This is where it is important, because you put in the TARGET the name of the frame
you want the page to load in. Glance Up at that code and spot the frame that is called
"contentFrame".
• If you do not set a target, the link will load in the same frame that link is in, which can get very
messy. So as good practice, if you're building a site using frames, ALWAYS use the TARGET
attribute so that you're aware of where each link is loading.

Take Control of Your Frames!
You don't want people to change your carefully written website willy-nilly do you? Your visitors should not be
in control of the layout of your site!
Depending on which browser you are using (and your window/screen size) you may have seen an attempt to
put scrollbars in the top and bottom frames. This definitely happened with Firefox on my computer.
Who should have the control? You should, that's who? So it's time to take back that control - and it's REALLY
simple to get rid of these bugbears.
Removing frame borders, not allowing frames to be resized To achieve this, you need one attribute in your
FRAMESET tag, like this:-
<frameset rows="60,*,50" frameborder="0">

Cont…
Removing unwanted scrollbars from frames
If you have frames where you absolutely don't want visitors from scrolling - like the page title or
links frame, then you need one attribute in your FRAME tag, like this:-
<frame src="top_frame2.html" name="topFrame" scrolling="no">

Nested Frames
Nested Frames - Divide your page up in different directions.
Well here we go - I promised we would look at dividing up the site in both directions so that's what
we're going to do!
If you have grasped the FRAMESET and FRAME tags then to set up frames in the opposite direction
just involves adding in another frameset pair of tags where you want to create the new frames.
Better use another example...

Example
<html>
<head>
<title>HTML Frames - Example 3</title>
<frameset rows="60,*,50" frameborder="0">
<frame src="top_frame3.html" name="topFrame" scrolling="no">
<frameset cols="200,*" frameborder="0">
<frame src="links_frame3.html" name="leftFrame" scrolling="no">
<frame src="content_frame3.html" name="contentFrame">
</frameset>
<frame src="bottom_frame3.html" name="linksFrame" scrolling="no">
</frameset>
</head>
</html>

Frame example Name it index.html
<html>
<head>
<title>Example Frames Page</title></head>
<frameset framespacing="0" border="0" frameborder="0" rows="75,*">
<frame name="title" scrolling="no" noresize target="contents"
src="title.html" marginwidth="0" marginheight="0">
<frameset cols="150,*">
<frame name="contents" target="body" src="contents.html"
marginwidth="0" marginheight="0" scrolling="auto">
<frame name="body" src="main.html"
marginwidth="0" marginheight="0" scrolling="auto">
</frameset>
<noframes>
<body topmargin="0" leftmargin="0">
This page uses frames. Your browser doesn't support them.
It's time for an upgrade!
</body>
</noframes>
</frameset>
</html>

Title.html
<html>
<head>
<title>Title</title>
<base target="contents">
</head>

This is our Title
</body>

Contents.html
<html>
<head>
<title>Contents</title>
<base target="main">
</head>

<a href="second.html">Second Body Page</a>

<a target="_top" href="index.html">Home</a>
</body>
</html>

Main.html
<html>
<head>
<title>Main</title>
<base target="_self">
</head>
This is the Main page, which welcomes our visitors.
Welcome!
</body>
</html>

Html frames

More Related Content

What's hot

Viewers also liked

Similar to Html frames

More from nobel mujuji

Recently uploaded

Html frames