Frames explained

Just what the heck are frames?

Ok. Here we go. A 'frame' is a ghastly thing that can be as horrible as heck to understand....until you understand them. Don't feel silly because you JUST DON'T GET IT!!! You are not alone.....and I promise you, one day....you will understand them. It might just be a case of when!!!

What I am going to attempt to do is explain what they are and how you create one without you throwing in the towel and giving up on html altogether. Whether I achieve that is yet to be seen....

Ok, taking a deep breath....

A frame is like a shell. Understand that? Good, now I can go home......


Just kidding. Think of a 'frame' as a television. On it's own, it's just a box. Tune it in, and it shows whichever station you set it to show. It draws the content in and displays it.


A frame does just that only it displays more than one set of content. On a lonely, solitary page, you place your 'frameset' (we'll get to that later). Within this frameset, you 'tune' the content in. In other words, you will state which html pages you would like displayed within your page by simply typing the url of the pages into your frameset code. The frame code 'draws' the set pages into the lonely, solitary page with the frameset code and displays them.

What's the benefit of frames?

With frames, you can have a section of your page remain 'loaded' at all times. In other words, you can have a navigation menu on your page so when you click a link on it, the whole page doesn't change, it loads the link you clicked into a 'frame' on your page.


For an example of a page built with frames and a bit more of an explanation, click here


Here we go with the frameset....

Ok...I take it you read through the bit on the example page. I hope that made things a bit clearer. The frameset code I used for that page is:


<!DOCTYPE html>
<html lang = "en">
<head>
<title>My frame example!</title>
</head>
<frameset cols="200,*">
<frame src="leftframe.html" name="left">
<frame src="rightframe.html" name="right">
</frameset>
<noframes>
<body>
This page uses frames, but your browser doesn't support them.
<body>
</noframes>
</html>

Now, let's break the frameset code down line by line.

<FRAMESET COLS="200,*">

  • frameset - this tells the broswer that it's a framed page.
  • cols - this means columns. You will notice my code has '200' and '*' set as the columns. What this is saying is that there are 2 framey-bits (because there are 2 values), the first framey-bit is to be 200 columns wide, and the second one is to fill the rest of the page, because it's a 'wildcard' number, stated by *. If it had said 'COLS="200,300,*"' this would have given us 3 frames across the page, because there are 3 values set.

<frame src="leftframe.html" name="left">

  • frame src="leftframe.html" - the page works from left to right, so this is the first framey-bit. SRC=source, and the source of the first framey-bit is leftpage.html which you can see here.
  • name="left" - this is the interesting bit. Give each framey-bit a name, so the frameset code knows what to do. I named the left frame 'left' (wow, creative ain't I??). The name is important as you use it to 'target' your links, or state where you want pages to open.

<FRAME SRC="rightframe.html" name="right">

This one's the same as the one we just went through, except for two things:

  • frame src="rightframe.html" - this says that in the second frame across the page, load my html page called 'rightframe.html'.
  • name="right" - we named the first one left, and because we need a different name, I called this one 'right'.

</FRAMESET>

This one just states that the frameset is finished.

<noframes>
This page uses frames, but your browser doesn't support them.
</noframes>

This is the bit of code that you don't see...unless your browser can't display frames. If it can't, then this is all you will see on your page. It's a good idea to include a link directly to your main page in here, so those who can't use frames still get to see your site WITHOUT frames, ie...send them directly to rightframe.html instead of them accessing it through the framed page.


Frameset understood? Now for the pages!

The first page you need to make is the one with your frameset. You can copy and paste the frameset code I used, substituting the page names for your own, or make up your own frameset code using mine as a guideline. Save your page, call it what you want to call it....but remember, when you're finished....this is the page you will open up to view your website in frames.

The second page you need to look at making is the one for the left frame. This is the one that loads into the left when the framed page opens, as it states in the "<frame src=leftframe.html>" tag. This page will remain static, as in not change...and will have links to any other pages you want shown on your site.

You make a normal, everyday page, like mine here.

One thing you need to do to make the framed page work is target your links!!! What I mean by this, is where you would normally have <a href=http://www.anydomain.com>click here for...</a> as your link, you need to 'target' it so it opens in your right frame
To do this, you type that link as <a href=http://www.anydomain.com target="right">click here for...</a>. You type 'target="right"' because that's the name of the right frame. If you had've called your right frame 'mainpage' then you would have made it 'target="mainpage"'. See? not so hard...you're just telling the browser where you want the links to open!

If you neglect to put the 'target="right"' bit in, then the whole page will change to the new page, which isn't what we want to achieve. We want the left frame to stay there.


That's the left side taken care of, now for the right....

This one's easy. If you already have a website, you don't really need to do anything at all here. You already have a 'main' page for your website (the one where everyone goes to first when they go to your site). Just put the url for the page in this line of code here:

<frame src="rightframe.html" name="right">

Substitute "rightframe.html" with the url of your page, and the 'name' is whatever you decided to call your right frame. If you don't already have a page to load into the right frame, well...quickly make one. Anything. Here's the page I have loaded into the right frame when the browser first opens, if it helps you any!

That's it. In a nutshell. If you've got this far, you have frames!