CREATING FRAMES

Frames are basically another way you can create a unique interface for your Web site. You can divide the page into different parts, each of which can be updated separately. Basically each frame is a regular, complete HTML document. If you wanted to divide your page into two frames, then you would put one complete HTML document in the left frame and another complete HTML document in the right frame. In addition you need to write a third HTML document, which contains the HTML tags that specify what goes where, as a matter of fact, that is its only function. But first I'm going to explain the frame tags which will be used in the Master Frame document.

Tags / Attributes

Description

Creating Frames Tags

<FRAMESET></FRAMESET>

The <FRAMESET></FRAMESET> tags are required for frames-style pages, but it also replaces the <BODY></BODY> tags completely on the Master Frame page. When you use frames you're committed to using them completely, you can't just add frames to part of your page. On a typical Master Frame page, <FRAMESET></FRAMESET> tags are added like this:

<HTML>
<HEAD>
<TITLE>Title text</TITLE>
</HEAD>
<FRAMESET>
…Frames and other HTML text…
</FRAMESET>
</HTML>

The <FRAMESET></FRAMESET> tags can accept two attributes, ROWS and COLS. Both attributes accept either numerical values (size in pixels), percentages or a combination of both. The value (*) can also be used to suggest that a particular row or column should take up the rest of the page, in other words, it acts as a wildcard to say "take up the rest of what's left". These attributes are defined as follows:

<FRAMESET ROWS="value, value">

<FRAMESET COLS="value, value">

The following example would create two rows, one 50 pixels long and another row that took up the rest of the page:

<FRAMESET ROWS="50,*">

You can also define it like this:

<FRAMESET ROWS="50,*,2*">

Note the number 2 infront of the second wild card or *. This number can be anything greater than two. In the example above, we have told the browser to make three frames. The first frame 50 pixels wide with the rest divided between frames two and three, but make frame three twice as big as frame two.

The following attributes can also be defined for the <FRAMESET></FRAMESET> tags: BORDER, BORDERCOLOR, FRAMEBORDER, FRAMESPACING and SPACING.

BORDER changes the thickness of the borders around the frames, you can also set BORDER equal to false, which in turn will cause the borders to disappear. BORDER is defined as follows:

<FRAMESET BORDER="20">

BORDERCOLOR changes the color of the frame border, and is defined as follows:

<FRAMESET BORDERCOLOR="#FF0000">

FRAMEBORDER lets you turn off borders for an individual frame, and this is how it is defined:

<FRAMESET FRAMEBORDER="NO">

FRAMESPACING increases the space between frames. This would probably be better explained with a picture. A normal frame page might look like this:

But with the FRAMESPACING attribute defined, the frame page will look something like this:

And this is how it is defined:

<FRAMESET FRAMESPACING="10">

Assign Frame Tags

<FRAME>

The <FRAME> tag is used within the <FRAMESET></FRAMESET> tags. The main thing to remember is that frames are different Web pages displayed together on one Web page. To keep things a little cleaner, I'm going to stop writing the rest of the HTML tags. Needless to say, keep them in your document. The following is an example of a frame page:

<FRAMESET ROWS="50, *">
<FRAME SRC="URL or HTML document 1">
<FRAME SRC="URL or HTML document 2">
</FRAMESET>

The SRC attribute is used to tell the frame what URL or HTML document should be loaded in that frame. Remember each frame is a complete HTML document, and since the <FRAMESET></FRAMESET> and <FRAME> tags are being defined within the Master Frame document, you have to assign a complete HTML document to each frame you create.

One more thing before we go on. Note that <FRAMESET></FRAMESET> is a container tag, and <FRAME> is not. For those that don't know or remember what that means, a container tag has an opening tag <TAG> and a closing tag </TAG>. A tag without a closing tag is called an empty tag. These tags have only an on tag <TAG>, there are no off tags. The reason for this is that empty tags don't act on blocks of text. Instead, they do something all on their own.

A frame page can be divided into 2 or more frames, just make sure you assign a URL or HTML page to each section you defined. You can make the frames different sizes, just make sure your arithmetic is correct or the browser will come up with its own interpretation. Take a look at the following:

<FRAMESET ROWS="20%, 20%, 20%, 20%, 20%">
<FRAME SRC="URL or HTML document 1">
<FRAME SRC="URL or HTML document 2">
<FRAME SRC="URL or HTML document 3">
<FRAME SRC="URL or HTML document 4">
<FRAME SRC="URL or HTML document 5">
</FRAMESET>

You will see that you can resize the frames by positioning the cursor over the border lines so that the cursor changes into the resize icon , holding down the left mouse button and dragging the border in the appropriate direction. To prevent the user from being able to do this we use the NORESIZE attribute, and it is defined like this:

<FRAME SRC="URL address" NORESIZE>

Other attributes are NAME, MARGINWIDTH, MARGINHEIGHT and SCROLLING.

All of these axcept NAME are appearance-oriented. Let's deal with them first and come back to NAME in a moment.

MARGINWIDTH and MARGINHEIGHT are used to control the right/left margins and the top/bottom margins of the text and graphics within a frame, respectively. Each takes a numerical value in pixels, for example:

<FRAME SRC="text.html" MARGINWIDTH="5" MARGINHEIGHT="5">

This creates a five pixel border between the contents of text.html and the frame edges.

SCROLLING can accept the values YES, NO and AUTO, and is used to determine whether or not scroll bars will appear in the frame window. For those of you who don't know what scroll bars are, they are the bars that will appear on the right and bottom of your screen when the content of the window is bigger than the screen size, and you need to either scroll down or right to view it. The default value for SCROLLING is AUTO.

YES means the window gets scrollbars, whether they're needed or not.

NO means there will be no scrollbars, even if your frame contents are bigger than the frame, the browser will simply display as much as it can.

With AUTO scrollbars will appear if they are needed and if they are not needed they stay hidden.

You should be very careful about turning off the scrollbars. First see how your frames would look in other resolutions or font sizes so as to make sure that the bottoms of all the frames are not chopped off and you couldn't see the rest of that frame. Look at the following to see how SCROLLING is defined:

<FRAME SRC="text.html" SCROLLING="YES">

Now that we have our frame window set up, wouldn't it be tedious if every time we wanted to change one of the frames we would have to reload all the different frames again? But what if you could just leave the other frame windows and load a new document in just one other frame window? Well, this is where the NAME attribute comes into play. You need to name your frames, or at least the frames you might want to change. It is done like this:

<FRAME SRC="URL" NAME="Frame name">

Although you can pretty much name your frame window anything you want, there is one restriction, you can't start the name with an underscore character "_". NAME must begin with an alpha-numeric character (abcde 12345). But why not underscore you might ask? Well, because of the four so-called "magic targets". They are _top, _blank, _self and _parent. Any target beginning with an underscore that is not one of the "magic targets" may behave unpredictably. But what exactly do those four magic targets do? Used in conjunction with the TARGET attribute of the <A></A> tags:

_top opens a link in the full browser window.
_blank opens a link in a new browser window.
_self opens a link in the same browser window or frame. In other words, basically the same as _top and,
_parent opens a link in the immediate frameset parent.

But what does that mean exactly you might ask, well I think an example will explain this better. You have a frames page, but want to open one of your links in the full window size of the browser and not in one of your target frames. To do this you will open the link by using the magic tags, in this case the _top or _self magic targets are used, and this is what the link will look like:

<A HREF="page.html" TARGET="_top">Break out of frames</A>

Very important to remember, when using one of the four magic targets, _top, _blank, _self or _parent, make sure they are lower case. UPPER case won't be understood and the end result will probably be the link opening in a new window.

Once the frame window has been named we can use the TARGET attribute with the link tags. Can you still remember the link tags? If not let me refresh your memory:

<A HREF="URL address">Link Description</A>

But now to bring this all together, let's examine the following example:

<FRAME SRC="index.html" NAME="main_viewer">

This is a frame window we just named main_viewer with the Web document index.html displayed inside it. So let's create a link that, once clicked, will load the document product.html into the frame window main_viewer:

<A HREF="product.html" TARGET="main_viewer">Product List</A>

In short, you assign a NAME to the frame you want to assign another URL or HTML page to. Then in your link you assign a URL or HTML page to that frame by setting the TARGET value equal to the NAME you specified.

Look at the following exercise for a detailed explanation on frames. For this example exercise we will design a personal Web page that is going to look like the following:

Each block in the above frame page is a different Web page, so let's start creating them first. We will start with the title. The block on the top of the frame page.

The HTML page above was saved as frame1.html. Now we move on to the links part of your frame Web Page. The block on the bottom left of the frame page.

The HTML page above was saved as frame2.html. The last piece will then look as follows. The block on the bottom right of the frame page.

Now we have the three Web pages that will make up our frame Web page, and only now can we create our Master Frame page. Next is the HTML code of the frame window. The numbers next to each line of code has been put in to explain each line of the HTML code.

Now is probably a good time to think about the poor people that are using non frames-capable browsers. Although most, if not all of your visitors will be able to see frames, there is a minority surfing the web with outdated or special browsers. This is where the <NOFRAMES></NOFRAMES> tags come in.

The following is a list of framesets most often used. Just click on the frameset of your choice to view the HTML code for it. Either retype the initial script, or copy and paste it by selecting the script and holding the control button (Ctrl) and pressing C, then opening your text editor and holding the control button (Ctrl) and pressing V. Note however that in the code, the NAME value assigned to each frame is a suggested name, so feel free to change the code in any way. Also remember that to come back to this page when you've finished looking at the code, simply click the "Back" button of your browser.

So lets do an exercise with frames. Follow the instructions below very carefully. Once again the answer will be provided as well as the output. Please try and do the exercise yourself without looking at the solution. Once you have successfully completed this exercise you can feel confident enough to call yourself a Web designer.

Banner and Contents	Contents	Footer	Footnotes	Header
Header, Footer and Contents	Horizontal Split	Nested Hierarchy	Top-Down Hierarchy	Vertical Split

	Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

	Click here to see the solution to this exercise. To come back to this page when you've finished looking at the answer, close the new window it opened in.