Frames Tutorial

Frames Tutorial: Creating Frame-based websites

Frames are a feature of HTML that allow browsers to put more than one page in the browser window at one time. This is done by dividing the main browser screen into smaller sections. These smaller sections are called frames, hence the name 'Frames'. Each of these smaller sections can contain a different page.

You can compare frames page with a picture frame on your desk, showing two or more images of your family members. Each image is a separate "page" or "frame", and all of them are held together by the "pictureframe" or "frameset".

A link on one page of the frames can change the page in the same frame section or in other ones. Because of this frames can sometimes yield unexpected results, particularly when using the BACK button.

If you have been navigating within a frame and then press BACK, you will go back within the frameset instead of going back to the previous page / other URL.

Frames are used for many things. The most common of these is for navigation around a web site. Frames provide a very neat solution to getting from place to place within a site. Frames also provide an additional artistic element for creating pages.

Frames can add an extra dimension to your page. As with many things, it is possible to get carried away with frames. Putting them onto your site just to be using them can distract from your page, but used judiciously, frames can make your page stand out.

Step 1: Decide how many rows or columns you want

Remember, frames are a way of dividing the browser's screen into different independent portions. In the "simple" case, you will be dividing the screen into columns or rows. For this example, we'll create a page with two columns.

Step 2: Create the pages that make up the rows or columns.

The most important thing to remember about frames is that a frameset consists of more than one HTML page.

If you have a page with TWO frames in it, THREE HTML files are needed:
- one for each of the frames
- and one that describes how the frameset will be laid out.

Remember that multipart frame with family pictures which I have already talked about? You need several images AND the picture frame to display them on your desk.

In this case, we'll say that you've already created two HTML pages, column1.htm and column2.htm. The former will be shown in the left frame, and the latter will be shown in the right frame of the browser window.

If you need to know how to set up such HTML documents please refer to our Basic HTML tutorial at: www.pcrobin.com/hpu/basic1.html

Step 3: Create the frameset page.

The next step is to create the frameset page that describes how the page is laid out.

Throughout this tutorial we'll be showing you HTML code. We'll add a period between the opening < and the tag. This is done to show you the code rather than the result of the code. When you write your HTML, please omit the period and use and not <.tag>

Here's the HTML for our frameset page:

   
<.HTML> 
<.HEAD>
<.TITLE>Frameset Page<./TITLE>
<./HEAD> 
<.FRAMESET COLS="20%, *"> 
<.FRAME SRC="column1.htm"> 
<.FRAME SRC="column2.htm"> 
<./FRAMESET> 
<./HTML>

When viewed in a browser, this page will be divided into two columns, showing the two files that you created: column1.htm and column2.htm.

Notice that this page doesn't use any BODY tag - frameset pages can't be rendered with a BODY tag as they don't present any information.

The FRAMESET tag defines the "frame" for the columns or rows you want to use to split your browser screen. It's like the frame which holds your different family pictures on your desk.

The FRAME tag defines a single window in the frameset - a single family image within the multipart frame on your desk.

To create a page with two rows instead of two columns, simply use ROWS instead of COLS in the FRAMESET tag:

<.FRAMESET ROWS="20%, *">

Step 4: Set the relative sizes of the rows or columns

Observant readers will notice the following line in the above example:

<.FRAMESET COLS="20%, *">

This line determines the relative sizes of the two columns. In this case, the left column is 20% of the height of the window, and the right column takes up the remaining 80%. There are four ways to tell the browser how tall or wide to make a column:

1. Percentage of screen height or width, as above.
2. Number of pixels. To make the first column 200 pixels wide, use COLS="200,*".
3. Use "*", meaning "whatever is left over." The above example also uses this method.
4. Use "n*", where n is a number. This means "n parts of what's left over."

Thus ROWS="*, 2*" makes two rows where the first one is 1/3 the height of the screen and the second is 2/3 the height of the screen.

And ROWS="100,2*,*" creates three rows: one 100 pixels tall, one that takes up 2/3 of the remaining space, and one that takes up the last 1/3.

Step 5: Decide where the links should go

Because each frame is a separate browser window, clicking a link in one of the frames will go to a new page in that frame/window. In some cases that may not be what you want. It's possible to create a link that, when clicked, makes a new page show up in another frame.

To do this, you need two steps:
1. Name the frames:


<.HTML> 
<.HEAD><.TITLE>Frameset Page<./TITLE>
<./HEAD> 
<.FRAMESET COLS="20%, *"> 
<.FRAME NAME="firstcolumn" SRC="column1.htm"> 
<.FRAME NAME="secondcolumn" SRC="column2.htm"> 
<./FRAMESET> 
<./HTML>

Notice the change in the FRAME tag: Each of them has a new attribute called NAME. This attribute assigns a name to the frame window which can be used to refer to it when calling links or executing scripts.

2. Tell your links where to go:
Let's say you want to be able to click a link in the left frame and have a new page come up in the right frame. To do this, place the following link in column1.htm:

<.A HREF="newpage.htm" TARGET="secondcolumn"> Click here to see "newpage.htm" in the right frame<./A>

Notice that the link tag gets a new attribute TARGET. This attribute causes the link to be opened in the frame with the name it's calling up, i. e. the right frame in this case.

There are a few default TARGET attributes which you should know about:

1. TARGET="_TOP"
If you want to be able to click a link and have a new page fill the complete browser window (replacing the complete frameset or "breaking out of frames"), use TARGET="_TOP" as follows:

<.A HREF="newpage.htm" TARGET="_TOP"> Click here to see "newpage.htm" take up the whole window<./A>

2. TARGET="_BLANK"
And if you want the page to come up in an entirely new browser window, useTARGET="_BLANK" as follows:

<.A HREF="newpage.htm" TARGET="_BLANK"> Click here to see "newpage.htm" come up in a new window<./A>

Note: This works even on pages that do not have frames. To avoid cluttering the user's desktop with windows, this feature should be used sparingly.

3. TARGET="_parent"
If you have pages in nested framesets and only want to update the frameset of the page with the link please use the _parent target like this:

<.A HREF="newpage.htm" TARGET="_PARENT"> Click here to see "newpage.htm" come up in the parent frameset window of this page<./A>

NOTE: If you have registered your frames page with Hometown AOL please use TARGET="_PARENT" instead of TARGET="_TOP" so that the link correctly replaces the frameset of your page.

4. TARGET="_SELF"
If you want to make sure that the link replaces the page with the link please use this target attribute:

<.A HREF="newpage.htm" TARGET="_SELF"> Click here to see "newpage.htm" replace the page with the link<./A>

Review:

Let's quickly summarize what we have just learned:

If you want to use a page with frames and one of them is used as a navigational frame you will have to go through two steps to make sure that all the links don't replace the navigation bar:

1. Name your frame windows.
2. Target your links to appear in the correct frame window by calling up that name in the TARGET attribute with the link.

Step 6: Do you want users to be able to resize and scroll?

The default setting for the scrolling in frame windows is "AUTO" - it instructs the browser to decide whether scrollbars are needed, and place them where necessary.

<.FRAME SRC="column1.htm"> is the same as using
<.FRAME SRC="column1.htm" SCROLLING=AUTO>

If you want to have those scrollbars always show up, add a SCROLLING attribute to the FRAME tag and set it to "YES" like this:
<.FRAME SRC="column1.htm" SCROLLING=YES>

If you do not want a frame to have scrollbars, add a SCROLLING attribute to the FRAME tag and set it to "NO" to disable the scrollbar:
<.FRAME SRC="column1.htm" SCROLLING=NO>

By default all frames are resizable - if you do not want users to be able to resize a frame, add a NORESIZE attribute to the FRAME tag:
<.FRAME SRC="column1.htm" NORESIZE>

Step 7: Do you want 3-D borders around your frames?

By default, frameset pages have 3-D borders between the frames. For a completely seamless look, change the FRAMESET tag to the following:

This instructs the browser to turn off all 3-D borders between frames and to place the frames right up against each other. This feature is called borderless or invisible frames.

When using borderless frames, it's often helpful to be able to position a frame's contents directly at the top left corner of the frame, instead of a few pixels down and to the right, as is the browser default. This is especially useful since the different browsers have different offsets from the upper and leftmost border of the browser window.

To do this, change the FRAME tag for the individual frame pages so it includes the MARGINWIDTH and MARGINHEIGHT attributes:
<.FRAME NAME="firstcolumn" SRC="column1.htm" MARGINWIDTH="0" MARGINHEIGHT="0">

This tells the browser to ignore any default settings for border offsets.

Grab the Code

Here's the HTML code of a complete frameset example with a non-scrolling left column and default frame borders:

<.HTML> 
<.HEAD><.TITLE> Frameset Page 
<./TITLE><./HEAD> 
<.FRAMESET ROWS="20%, *"> 
<.FRAME NAME="firstcolumn" SRC="column1.htm" NORESIZE SCROLLING="no"> 
<.FRAME NAME="secondcolumn" SRC="column2.htm"> 
<./FRAMESET> 
<./HTML>

Here's the HTML code of a complete frameset example with a non-scrolling left column and invisible borders:

<.HTML> 
<.HEAD><.TITLE> Frameset Page 
<./TITLE><./HEAD> 
<.FRAMESET ROWS="20%, *" FRAMEBORDER="0" 
FRAMESPACING="0" BORDER="0"> 
<.FRAME NAME="firstcolumn" SRC="column1.htm" NORESIZE SCROLLING="no" 
MARGINWIDTH="0" MARGINHEIGHT="0"> 
<.FRAME NAME="secondcolumn" SRC="column2.htm" MARGINWIDTH="0" MARGINHEIGHT="0"> 
<./FRAMESET> 
<./HTML>

Making Frameset Pages Visible in Browsers that don't Support Frames

Since frameset pages usually contain no content, just a set of FRAMESET and FRAME tags, they tend to not show up at all in browsers that don't support frames - they will just get a blank page. Fortunately, the frames standard provides an easy way to provide content for non-frame browsers such as WebTV, Lynx, or browsers for the Windows CE operation system.

<.HTML> 
<.HEAD><.TITLE>Frameset 
Page<./TITLE><./HEAD> 
<.FRAMESET COLS="20%, *"> 
<.FRAME SRC="column1.htm"> 
<.FRAME SRC="column2.htm"> 

<.NOFRAMES> 
<.BODY> 
Welcome to my home page! Your browser is frames challenged!  etc. 
<./BODY> 
<./NOFRAMES> 
<./FRAMESET> 
<./HTML>

Browsers that support frames will ignore everything between <.NOFRAMES> and <./NOFRAMES>. Browsers that do not support frames will ignore the frames and display everything between the NOFRAMES tags.

Now you're done with your first frameset page!

That's all it takes to create a simple frameset page of your own. The next section explains how to make complex framesets, which can be divided into both columns and rows.

Now that you know how to create simple frameset layouts, it's very straightforward to make complex ones. A complex frameset is just a simple frameset, some or all of whose frames are also framesets.

If you want to have several frame windows on your site which divide the screen into horizontal as well as vertical areas you will have to nest framesets. Each frameset can only set the frame dividers either horizontally or vertically. You can't mix this in one frameset.

Let's say we want to create a page that has an index on the left and three frames of content on the right:

To do this, we create a frameset with two columns. The first column will contain framepage 1, and the second will contain three horizontal frame window with the framepages 2 through 4.

Here's the HTML:

 
<.HTML> 
<.HEAD><.TITLE>FramesetPage<./TITLE> 
<./HEAD> 
<.FRAMESET COLS="20%, *">

The first column is just a single frame:

<.FRAME SRC="framepage1.htm">

But for the second column, instead of using another FRAME tag, we insert a FRAMESET tag with three rows.

<.FRAMESET ROWS="20%, *,20%"> 
<.FRAME SRC="framepage2.htm"> 
<.FRAME SRC="framepage3.htm"> 
<.FRAME SRC="framepage4.htm"> 
<./FRAMESET>

Then we close the FRAMESET and HTML tags, and we're done.

      
<./FRAMESET> 
<./HTML>

Thus, by "nesting" one frameset inside another, complex frame layouts can easily be built from simple ones.

We could have created the same layout by using two FRAME tags and pointing the second FRAME tag to a separate file that was itself a frameset. The above syntax, in which we can insert a FRAMESET block instead of a FRAME tag, is actually a shorthand that reduces the number of files needed by one.

There's one case in which you don't want to use the shorthand: when you want to click a link in frame 1 and have a page come up that replaces frames 2, 3, and 4. In that case, you would do it the longer way, giving the second frame a name and using <.A HREF="address" TARGET="name of right-hand frame"> to replace the contents of that frame.

Sizing and Coloring Frame Borders

Both the FRAMESET as well as the FRAME tag offer the choice to vary the thickness of the borders between the frame browser windows as well as the color of those borders.

We have already seen earlier in class that frames have a border by default. To make the borders vanish you have to set the border attribute to zero like this:

If you want to have a thick border between your frame windows change the BORDER attribute to any value you like. The border thickness is given in pixels.

Frameset with a 5 pixels border:

Do you want to add some color to your frame borders? HTML does even offer an attribute for this:

This will add a 2 pixels thick border to the frame windows which is colored red.

You can set up some interesting effects using these attributes, but use them sparingly or they lose they effectiveness.

Using Floating Frames

Floating frames are a nifty HTML feature which has been introduced by Microsoft and made it into the latest HTML4 specification. As of now floating frames do only work with the MSIE/AOL browser. There is a rumor that the Netscape browser will support them in one of the next versions.

Having this restriction in mind you can make use of them if you are fairly sure that your visitors are mainly AOL or Internet Explorer users.

What are floating frames? Think of a floating frame as a "window" that floats in your page. Through the window, you can see another Web page.

Therefor you will need two files to create your floating frame:
1. The frame page which will be seen in the floating frame window.

2. The frames page

You can insert the code for the floating frame into any basic HTML document like this:

<.HTML> 
<.HEAD><.TITLE>Floating Frame 
Page<./TITLE><./HEAD> 
<.BODY> 
<.IFRAME WIDTH=200 HEIGHT=200 
SRC="mypage.html"> 
<./IFRAME> 
<./BODY> 
<./HTML>

The tag to insert a floating frame window is <.IFRAME><./IFRAME>. It calls up the page which you want to display in the floating frame window, in this case we have named it "mypage.html".

Btw - IFRAME stands for "Inline Frame".
Let's take a look at the attributes which can be used with the IFRAME tag:

WIDHT="n" HEIGHT="n" These attributes specify the width and the height of the frame window to the browser window. You can specify the height as a number of pixels or as a percentage of the current screen width and height.

3. Do you want the frame window to have borders?
By default, floating frames have a 3-D recessed appearance. If you want a more seamless look, add a FRAMEBORDER attribute to your FRAMESET tag like this:

<.IFRAME WIDTH=200 HEIGHT=200 SRC="mypage.html" FRAMEBORDER="0">

4. Do you want a scrollbar with your frame window?
By default the frame window will automatically show a horizontal as well as a vertical scrollbar if the page displayed in the window exceeds the window width or height.

If you do not want the floating frame to have a scrollbar, add a SCROLLING attribute, as follows:
<.IFRAME WIDTH=200 HEIGHT=200 SRC="mypage.html" SCROLLING="no">

5. Do you want a margin around your floating frame window?
When you have places your frame window in the middle of a page and have aligned text around it it may be useful to specify margins around it. This works just like it does for images, using the HSPACE and VSPACE attributes:

<.IFRAME WIDTH=200 HEIGHT=200 SRC="mypage.html" HSPACE="10" VSPACE="10">
This will assign a margin of 10 pixels to each side of the frame window.

6. Do you want to align the frame window to the right or to the left?
By default the IFRAME window is centered in the middle of the page you places it in. If you want the window to be aligned to the left or the right of the page use this:

<.IFRAME WIDTH=200 HEIGHT=200 SRC="mypage.html" ALIGN="right">

Replace ALIGN="right" with ALIGN="left" if you want to have the frame window aligned to the other side of the page.

7. Call up another page in the frame window
Just as with "normal" frames you can make a link call up a different page in the floating frame window. And just like with the "normal" frames there are again two steps to take care of:
a. Name the frame window
Assign a name to the floating frame window like this:
<.IFRAME WIDTH=200 HEIGHT=200 SRC="mypage.html" NAME="window">
b. Tell you link where to call up the new page
Use the TARGET attribute with these links the same way as you have alreadylearned earlier in class:
<.A HREF="newpage.htm" TARGET="window">Click here to see "newpage.htm" come up in the floating frame window.<./A>

Frames Tips and Tricks

In the last part of class we are going to answer a few common questions aboutframes and show you some tips and tricks.

1. Can I protect my pages from being framed by someone else?
With frames it is possible that someone else is 'borrowing' your pages. By creating a site with frames someone else can use its own navigational system but your pages with the actual information. To protect your pages from this you can use a JavaScript to test for this and if so, correctly load your page.

<.SCRIPT language="javascript"> 
if (self != top) { 
top.location.href = self.location.href 
} 
<./SCRIPT>

This script checks if the top window is the same as the window in which the page is loaded. If this isn't true, it means the current file is contained inside a frame. Then this situation is corrected by loading the current page as the top frame.
Put this script inside the HEAD section of a page that you want to protect.

2. How can I change two or more separate frame pages at the same time?

There are two ways to do this:
a. Implement your nested frameset as a separate page in the parent frameset.

Remember the complex, nested frameset we have set up in the second part of class? Instead of nesting another frameset tag within the parent frameset tag define this one as a separate one.

Use the two columns frameset from part one of tutorial:

<.HTML> 
<.HEAD><.TITLE>Frameset 
Page<./TITLE><./HEAD> 
<.FRAMESET COLS="20%, *"> 
<.FRAME NAME="firstcolumn" SRC="column1.htm"> 
<.FRAME NAME="secondcolumn" SRC="column2.htm"> 
<./FRAMESET> 
<./HTML>

and define the page "column2.htm" as another frameset page, for example like this:

<.HTML> 
<.HEAD><.TITLE>Frameset 
Page<./TITLE><./HEAD> 
<.FRAMESET ROWS="20%, *,20%"> 
<.FRAME SRC="framepage2.htm"> 
<.FRAME SRC="framepage3.htm"> 
<.FRAME SRC="framepage4.htm"> 
<./FRAMESET> 
<./HTML>

To change the appearance of the page (column2.htm) in the second frame window just define another frameset page with different frames pages and replace column2.htm with it.
b. Use a JavaScript
You can also change two or more pages in framed windows using a JavaScript.

3. Where do I add the META tags for search engines when using framed pages?
Add you META tags in the HEAD section of the frameset page so that the search engines can find them in the first document they are going to hit.

Also add a description in the NOFRAMES part of the frameset page, this one is often read and indexed by search engine spiders.