Basic Frame Page

{- BACK -}

Frames! Everyone would like to have them in their own site. They enhance the looks of the pages, giving them a professional appearance and a sense and feel of integration and easier navigation. Are frames that difficult? Frame implementation is quite easy.

Here's where my advice about files and organization will work perfectly: having all your files in a single directory will make easier the transport of your personal web to other places, and preview it easily.

First: create a main page (usually you would name it "index.html"), long file names come in handy. That page should have all of the basic elements normally found on a web page, (<HTML>, <TITLE> and <HEAD> tags) except the <BODY> tags.

The <FRAMESET> tags

Where the <BODY> tags should be, put a <FRAMESET> tag. This tag will begin the frame set processing on the browser. The parameters for the <FRAMESET> tag are the following:

The COLS="xxx,yyy" or ROWS="xxx,yyy" parameters. They are mutually exclusive, that means you must put only one of them, because COLS= sets the frameset to two columns, and ROWS= sets it to two rows.
Both require two values for the width/height of the frames, separated by a comma. Number values are expressed in pixels, but you can specify a percent of the viewing window by putting a % right after the value. If you want a division to be the remaining portion of the window (window width minus the other frame's width) put an asterisk (*) instead of the corresponding value. That way, say we got a <FRAMESET> tag with a COLS="20%,*", the first frame will be 20 pixels wide and the other will be the remaining of the browser's window and will accommodate if you resize the window.
The FRAMEBORDER= parameter (optional), you can specify 1 or 0 as a value for this parameter to tell the browser to draw or not to draw a 3D division line between frames.
The FRAMESPACING= parameter (optional) specifies the spacing between the two frames.

The <FRAME> tags

After the <FRAMESET> tag, for every frame declared in the FRAMESET tag, put a <FRAME SRC="nameofpage.html" NAME="Frame name"> tag. For the SRC argument place the file you want (represented by "nameofpage.html" in the example). Name every frame differently using the NAME argument, that name will be used in the hyperlinks when you want to load a page in that specific frame.

DO NOT WRITE ANYTHING IN THE MAIN DOCUMENT!!! TYPE YOUR TEXT INSIDE THE FILES YOU SPECIFIED ON EVERY FRAME TAG

Closing the frame set

After that, put a closing </FRAMESET> tag.

That's all! Would you believe that? Now you've got a document set, let's say index.html, navbar.html and content.html and you want to frame them. What would you do? I'd do the following in index.html:

<HTML>
<HEAD>
<TITLE>Index document</TITLE>
</HEAD>
<FRAMESET ROWS="*,100">
<FRAME SRC="content.html" NAME="Contents">
<FRAME SRC="navbar.html" NAME="Navigation bar">
</FRAMESET>
</HTML>

That would load "content.html" in the big frame, and "navbar.html" in the 100 pixel high frame. You don't have to do any changes to the referenced documents. The former example gave me a window divided in two rows, one below with 100 pixels height, and the other in the upper part of the window. The upper division was named "Contents" and displayed content.html, while the lower was named "Navigation bar" and showed navbar.html. That's why it is important to name the frames consistently.

Now, in this example, I made the bottom division very small (100 pixels high), because I intended to include a navigation bar in there, with links that would let me navigate across the upper page (content.html). So, with our knowledge about tables, hyperlinks and bookmarks, we'll create a navigation bar for that document. Since "content.html" is very long and contains three sections, Part1, Part2 and Part3, we'll set a table with links to all these sections. We'll asume the bookmarks are already defined in "content.html" and we will only work around "navbar.html".

What to do:

Create a table
Create every cell
Put links to the other document in every cell

This is how the body of file as our navigation bar would look like:

Links between frames: the TARGET= argument

The TARGET argument in the <A HREF> tag tells the browser to load the link into the specified frame or window, named in the FRAME tags. Or, instead of a frame name, you can put "_top" to load into the full window, "_self" to load in the same frame, and "_blank" on a new, blank window. Handy, isn't it? This is the way the navigation bar at your left is built, just that instead of saying Part 1, 2 or 3, I nested graphics on the hyperlinks, specifying BORDER=0 in the IMG tags, to avoid the display of a nasty blue border around my little nifty graphics.

Nesting frames

You can nest frames. One or both of the source documents for your frame set (specified in the SRC= parameter of the FRAME tag) can have a FRAMESET too. The frameset's frames on the "child" document will fit into the frame for the child document.

Use of the <NOFRAMES> tag

The <NOFRAMES> tag is for people who don't have frames. It is used like this:

<NOFRAMES>
This page requires a frames-capable browser...please get one!
</NOFRAMES>

Text inside the <NOFRAMES> tag won't be displayed by frames-enabled browsers, so be cool and place there some info to help people using frames-disabled browsers. Place the <NOFRAMES> tags after the frame set, and do not put any body tags outside them.

One more thing about frames: there are other kind of frames, such as floating and embedded frames. These go beyond the scope of this document yet. For now, use your preferred search engine to look up information about these.

Sample Frames
Frame Sample #1:

<HTML>
<HEAD>
<TITLE>Frames Sample #1</TITLE>
</HEAD>
<FRAMESET COLS ="20%, 80%">
<FRAME SRC="frame3.html" SCROLLING="YES"
MARGINHEIGHT="5" MARGINWIDTH="5" NAME="CONTENTS">
<FRAME SRC="frame4.html" SCROLLING="YES"
MARGINHEIGHT="5" MARGINWIDTH="5" NAME="MAIN">
</FRAMESET>
<NOFRAMES>
This page requires a frames-capable browser...please get one!
</NOFRAMES>
</HTML>

Frames Sample #2:

<HTML>
<TITLE>Frames Sample #2</TITLE>
<frameset rows="75,*">
<frame src="frame2a.html" scrolling="no"
noresize marginwidth="1" marginheight="1">
<frameset cols="100,*">
<frame src="frame2b.html" name="contents">
<frame src="frame2c.html" name="main">
</frameset>
</frameset>
<noframes>
This page requires a frames-capable browser...please get one!
</noframes>
</HTML>

Frames Sample #3:

<HTML>
<TITLE>Frames Sample #3</TITLE>
<frameset cols="20%,*">
<frame src="frame3c.html" name="contents">
<frameset rows="20%,*,20%">
<frame src="frame3a.html" name="header" scrolling="no">
<frame src="frame3b.html" name="main">
<frame src="frame3d.html" name="footer" scrolling="no">
</frameset>
</frameset>
<noframes>
This page requires a frames-capable browser...please get one!
</noframes>
</HTML>

Frames Sample #4:

<HTML>
<HEAD>
<TITLE>Frame Examples #4</TITLE>
</HEAD>
<frameset rows="*,88" border=no>
<frame src="frame4a.html" name="main" noresize marginheight="6">
<frame src="frame4b.html" scrolling="no" noresize marginheight="0">
</frameset>
<noframes>
This page requires a frames-capable browser...please get one!
</noframes>
</HTML>

| Back to HTML Help! | Return to Home Page |

rickshelp@shaw.ca

rickshelp@rickshelp.com