FREE Tutorials Resource Centre - bring a breath of fresh air to learning

Tuesday, 18th June 2013

HTML Frames - Dividing Up the Page
HTML Tutorial 7

Aims

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

What are frames? Why would you want to use them?

Frames are a way of organising 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.

Another reason might be to have all your site's links visible on the page, while the actual 'content' - i.e. text, or shop items or blog (whatever really) scrolls as much as it needs.

Frames are individual segments of a window, each having its own page loading in it and being able to work autonomously 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.

Vaguely Compliant Frames!

The first thing to note is that frames are not really in W3C's ideal for setting up websites. Later tutorials will look at better approaches, but thank goodness, the friendly people at W3C did at least provide a way for a frames-based website to pass its tests. Isn't that nice?

The second thing you need to know is that the DOCTYPE declaration, which we haven't touched since the start of this course, is different for the page which defines the frames. Here is the line you will need to start that file:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

I have underlined the changes from the 'Transitional' one we have worked with so far. Remember you only need this line on the document that defines the frames. All the sections we will set up will be normal HTML pages, with the Transitional definition (and therefore 'loose.dtd') as is standard in this set of tutorials.

Let's put togeter a simple site using frames

Having got the first line sorted, let's look at an example document to set up the frames, so to use the terminology above, a FRAMESET document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<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>

The 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.

The FRAME tag

Vital: 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 seprate 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?

For a 'live' example (from the above code) then Click Here (this will open in a new window).

Load the above example, and view the source (from the View menu - Mac & PC). Also right click each frame and view the source from those pages to see that each is a stand-alone HTML document.

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>

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.

Finally, check your typing. Ensure you have typed the name exactly as it should be (including the use of upper- and lower-case letters), else you could have links opening in new windows, so be careful of typos.

Take Control of Your Frames!

Load example 1 again. Have a go at resizing the frames. Really easy wasn't it?

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:-

That's it - putting that bit in there stops visitors from resizing your frames and makes things look much neater.

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:-

Told you it would be easy.

There's another live example coming up, but one point to note that having each file as a separate HTML document gives you the freedom to put different fonts and colours in each section. Feel free to view the source of the frameset and each frame.

For a no-border, non-scrolling frames site click here (this opens in a new window).

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...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<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>

Hopefully the indentation of the tags will help you see what's going on. Using indentation yourself can help make your code clearer and does not affect how your site displays.

Here we define our first frameset as per our other examples: 60,*,50. In the '60' frame we put 'top_frame3.html'. In the '50' frame we put 'bottom_frame3.html'.

Our middle section of 'all the rest of the space' we now put another set of frameset tags. This set uses COLS, so we are dividing up the available space into vertical sections, which works from left to right. This frameset only has two components: "200,*". So you know what that means: the first left section is 200 pixels and this has links_frames3.html in it. Finally whatever is left over has content_frame3.html in it.

The result is this - click here to have a look.

Don't forget to close both frameset tags in the right place. Getting tags in the wrong place can seriously mess up your delicate layout.

Issues and Problems with Frames

This has been a long tutorial, but for a simple site layout, frames can work quite well. However, I would not be doing you justice without giving you a few problems and issues to be aware of:-

Over-Nesting - be careful you do not use a frameset file as one of your 'frame' files. This can lead to your site being infinitely loaded into an ever decreasing amount of space and may cause crashes. On a similar vein, don't use too many frames so that your site gets too complicated to navigate. Always consider your visitors/users first.
Screen Resolutions - again, before you set too many absolute-size frames to consider screen resolutions of your visitors. As a safe starting point, ensure that your site loads in 1024px×768px and upwards. At the time of writing, 800px×600px was only very rarely used by the majority of visitors to sites I have been monitoring.
Search Engines - As each frame contains its own file, search engines (and human visitors too) are able to load each file separately, without opening your frameset document first. This can be overcome (using JavaScript), but it's annoying for you as the site writer and for your visitors who have to be 'redirected' to the correct page. This is also a strong reason not to use frames unless you really want to.
W3C Is Not Your Friend - this tutorial gets you so close to compliant coding, but there are two things W3C doesn't like.

frameborder - despite the fact that you can see the difference by having frameborder in or out, the validator will tell you that it isn't a valid attribute.
W3C's clever validator may tell you that you have a </head> tag but no <head> tag. See for yourself with the code snippet above that this tag clearly is there. You can't win them all can you?

Lots of Editing - finally, remember that having to use multiple files will involve setting each page's DOCTYPE, fonts, background colours etc, which can be time consuming in larger sites. Some of these obstacles can be overcome using CSS, but does not eliminate everything.

Well Done!

If you've done this in one sitting then NOW is a good time for a coffee break! Play around with frames in both directions and see what you can achieve. A good idea is to quickly draw down what you're trying to aim for then that will help you code correctly.