Frames and Framesets - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML

	Sign In Sign-Up

Frames
list of tutorials		next tutorial [Forms]

Frames can be a bit complex to set up and have fallen out of favour a bit in the last year or so. When they were introduced to the HTML Standard everyone and his dog used them because they're great for laying out Webpages and particularly for those navigation bars which stay constant when the main part of the page updates when a link is clicked.
They are useful for that function but the reasons they are not so popular now are that they can trap other people's Webpages in the frames if the website designer is not careful, they make it difficult to mark individual pages as 'favorites' or 'bookmarks' and that they are just so easy to get wrong.

Anyways, I'll give you a brief guide as to how to use 'em and you can make up your own mind.

When you use frames you have first to create a file [a 'frameset'] which specifies the files to be contained in the frames, how the frames are set up [in rows or columns, or a combination of both if you want to get really fancy!] and what the frames are called. You have to name the frames because the links in frames are 'targeted' to the relevant frames or to other sites and therefore out of the frameset.

In this part of the frames tutorial we'll create the frameset file which will consist of a menu at the top of the page and two other pages. We'll create the files to go in the frameset in Part 2.

Copy the text below into your text editor
Save the file [frameset1.htm]
Read the comments below that
Go on to Part 2

<HTML>
<HEAD>
<TITLE>Frameset Page</TITLE>
</HEAD>
<FRAMESET ROWS="14%,*" BORDER="0" FRAMEBORDER="No" SCROLLING="AUTO">
<FRAME NAME="menu" SRC="framemenu1.htm" NORESIZE>
<FRAME NAME="page" SRC="framepage1.htm" NORESIZE>
</FRAMESET>
</HTML>

Let's look at this in a bit more detail.

<FRAMESET> </FRAMESET>: These tags open and close the frameset. As you can see the attributes of the <FRAMESET> tag include - in this case - the fact that there are two frames [in two rows]. The first row has been expressed as a percentage of the browser window and note that the other row size can be represented by an asterisk. The frame sizes can also be given as a size in pixels. I turned the border off to make the two frames blend - but you can specify a border with width and colour attributes. The frames are set to be able to be scrolled. This can be set to 'yes', 'no' or 'auto'. This is one of the settings that can cause hassle for people if their browser has different settings than the one you test your htm files in.
<FRAME>: This is the tag that defines the content of the frames. Note that the name of the frame is set here and the URL of the file to be displayed in it. I have called the two files "menu" and "page" for simplicity's sake but they can be named whatever you like. You will clearly see the reasoning behind naming the frames when we get to the next part of this tutorial. The frames have been set to 'noresize' so that viewers of the page can't resize them.

Note that the file does not have <BODY> </BODY> tags!

To find out more about the FRAMESET and FRAME tag attributes check out my TAG LIST Page

Go on to Part Two

Top of the page