Chapter 6: Frames

When your web site grows to be multiple pages with complex layouts, the viewer may be confused by all the information. Also it is hard to tell when one is inside your domain or outside of it. A nice way of organizing and presenting your entire site is by using frames. If you are not familiar with frames, take a look at DevEdge JavaScript Guide. You will notice that the site has a column on the left side and a title section on the top in black. This web site shows you how frames work. When you click on the links in the left column, both the left frame and the top frame stay, while the central frame changes. See that the complex array of information in the site is well-layed out to you in the left frame without much confusion.

Each frame acts just like their own window. In fact, they are equivalent in their functionality. So far you've been building sites that contain only one frame. Who says you have to be happy with one? In this chapter you will learn how to create multiple frames and control their actions.

IMPORTANT: Web pages with frames should be identified by using the !DOCTYPE tag. Insert the following before the <HTML> tag.

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4. Frameset//EN">


Simple Frameset

First you will learn to create a simple frameset with three horizontal rows in the same column.

1. Type <FRAMESET after the </HEAD> tag on the framset page.
2. Type ROWS= "a, where a is the height of the first row. The value may be either by a percentage (20%), fixed pixel size (20), for completely variable (asterisk sign, *).
3. Type , b where b is the height of the second row.
4. Repeat step 3 for the third row.
5. Type "> to complete the row definition.
6. Type <FRAME to assign a URL and other attributes.
7. Type NAME="name" where name is a word that identifies the frame, such as index, top, etc. This word will be used in targetting later.
8. Type SRC="content.htm" where content.htm is the URL for the page that will be initially displayed in the frame.
9. Repeat steps 6-9 for the other two ros.
10. Type </FRAMESET> to finish.

You need to have the pages that will be shown in frames (content.htm). BODY tag is not used at all in the framset page.

To create frames that are in columns, type COLS instead of ROWS in step 2. All others are the same.

Combining Framesets

If you want to make your page look like the DevEdge JavaScript Guide, where they have a vertical and a horizontal frames, you need to combine the framesets. You are inserting a frameset in a frameset.

Here, you will learn how to create a page layout that looks like this:

 Frame 1  Frame 2
 Main Frame

1. Type <FRAMESET.
2. Type COLS="a, b"> where a and b represent the widths of the two columns.
3. For the first column, type <FRAME NAME="name" SRC="content.htm">, similar to steps 6-8 in the previous section.
4. For the second column, thich is divided into two rows, type <FRAMESET COLS="a, b">.
5. Type <FRAME NAME="name" SRC="content.htm"> for the top frame and the bottom frame.
6. Finish the two-row frameset with </FRAMESET>.
7. Finish the two-column frameset with </FRAMESET>.

See Example 6.1 for a simple frame.

Inline Frames (**IE only**)

If you want to mix text, graphics, and a frame all on one page, you need to use inline frames. They are frames within a regular HTML page. Since this is supported only by Internet Explorer, you'd probably want to create an alternate page for Netscape users. Inline frames are standard in HTML 4.

1. In the BODY section of the container page, type <IFRAME SRC="frame.url", where frame.url is the page that should be initially displayed in the inline frame.
2. Type NAME="name", where name is a word that identifies the frame.
3. Type WIDTH=x and HEIGHT=y to specify the frame size.
4. You can align the frame by typing ALIGN=left or ALIGN=right. This will wrap texts around the frames.
5. Type >.
6. Type the text that should appear if the browser does not support inline frames.
7. Type </IFRAME> to finish.

Frame Margins and Borders

Both IE and Netscape insert 8-pixel margin on the top and the left. You can adjust this to a different size.

1. In the FRAME tag, before the final >, type MARGINWIDTH=w, where w is the pixel amount between the left and right edges of the frame and the frame's contents.
2. Similarly, type MARGINHEIGHT=h for the top margin space.

To make the border of the frame disappear, type FRAMEBORDER=0 inside the topmost FRAMESET tag.

Scrollbars; Resize option

You can control the display more precisely by specifying how the user can view frames. To show the scrollbar all the time, type SCROLLING="YES" or SCROLLING="NO" inside the FRAME tag of the particular frame you wish to control. YES will show the scrollbar at all times, and NO will hide the scroll bar at all times. The default setting is "AUTO", which makes scrollbars appear only when necessary.

If you don't want the user to resize a particular frame, type NORESIZE in the FRAME tag for the desired frame.

Targeting links

You probably noticed in DevEdge JavaScript Guide that the main window's content changes when you click on the chapter titles in the left column. This is done by targetting links to particular frames.

1. Make sure the target frame has a name. (Refer to step 7 in "Simple Frameset" section.)
2. On the page where the link should appear, type <A HREF="file_name" where file_name is the file that should be displayed in the target frame.
3. Type TARGET="name", where name is the reference given to the target frame within the FRAME tag.

Example 6.2 also shows how to target links, change border colors, and set resize/scroll options. Take a look at the source code. Also take a look at the source code of the HTML file in the left column.


Exercise 9: Framing Your Pages

Create a file named "MyFrame.htm". This page should be divided into frames like this:

A
B C

Frame A -- The source file in this frame should say a greeting, such as "Welcome to My Page!".

Frame B -- Create a file called "MyContent.htm" and make this the source file for Frame B. MyContent.htm should have links to at least these pages: MyPage.htm (the one you've been working on so far) and MyJava.htm (one you created in Chapter 4). If you'd like, make links to your other favorite web sites.

Frame C -- When you click on the links in the "MyContent.htm" file, the pages should show up in this frame. Make your initial source file to be MyPage.htm.

Frame A should not be resizeable and not have scrollbars. Frame B & C should be set to default. Feel free to play with margins and border colors.

When completed, your page should look something like this:


Back to the Top
To the Table of Contents

Last Updated September 9, 2000 by Grace Pok