Frames
NOW MAKE FRAMES - EASY

What is a FRAMES Page? A basic tutorial

To make a frames page, you must understand what is involved. A FRAMES page does not contain a <BODY> tag. All it does is tell the browser window how many frames to open, where to open each frame, and what .html pages go in each frame.

Here is an example of a very, very simple FRAMES page. (Notice there are no <BODY> tags. You cannot have a <BODY> tag and a tag in the same webpage)

<html>
<head>
<title>My First Frames Page</title>
<frameset rows="50%,*">
    <frame src="top.html" name="top">
    <frame src="bottom.html" name="bottom">
</frameset>
</html>

If you save the above text as your webpage, what will happen when you try to view it?

It will open the browser, divide it into two frames (one on top at 50%, the other in the remaining space), and place "top.html" in the top frame and "bottom.html" in the bottom frame. If you wanted the top frame to be smaller or larger, all you need to do is to change the percentage. In the example above, the percentage is at 50%. This means that it will take up 50% of the browser window. Changing it to 10% will mean that it will only take up 10% of the browser window.

Why is there an asterisk after the 50% in the example above?

The asterisk is an open variable that tells the browser to use the remaining space for the other frames. If the example had 30%, the browser will use the remaining space (70%).

Can I use pixel dimensions instead of percentages?

Yes, but not in the frame designer, the preview window would not know how to render it since it is not full size. After inserting the frames, modify the HTML to look like this:

<frameset rows="120,*">

This will make the top FRAME 120 pixels in HEIGHT and the other frame the rest of the browser window.

How can I make links in one FRAME and have the page change in the bottom FRAME?

You do this by adding the tag attribute TARGET into your links. This is why naming each frame is very important. If you have two frames, one called "top" and the other called "bottom". Any links in the "top" frame that have links with the TARGET="bottom" will jump the bottom frame. For example:

<a href="http://www.coffeecup.com" target="bottom">CoffeeCup</a>

Starting a FRAMES page. (Simple steps)

STEP ONE: Start a New Blank HTML page in the HTML Editor

STEP TWO: Delete the <BODY></BODY> tags.

STEP THREE: Click on the FRAMES button:

STEP FOUR: (Go in order of the numbers on the image below.)
#1 Select a Frame Style, click on a frame to make it the Active Frame
#2 Select the Frame Width (if applicable)
#3 Select the Frame Height (if applicable)
#4 Select the Frame Scrolling properties
#5 Insert a Frame Name
#6 Insert the URL for the Frame
*REPEAT #2 - #6 for each Frame. Clicking on a frame, makes it the Active Frame.

Click [Cool] to insert the HTML into the page you have opened.

It is very important to give each Frame a name (see #5 box in the above example). This will allow you to make links in one frame, but have them open in up in a different frame.

To do this, create a hyperlink, then add the TARGET attribute. For example:

<a href="http://www.coffeecup.com" target="main">Go to CoffeeCup</a>

Naming your frames words like "main", "top", "left", or "right" will make this very easy to accomplish. (You can name the frames anything you want.)

Now when you click on the link from, say the "top" frame, the page will jump in the "main" frame.

Technical Notes on Frames

Frame Document
A Frame document has a basic structure very much like your normal HTML document, except the BODY container is replaced by a FRAMESET container which describes the sub-HTML documents, or Frames, that will make up the page.

Frame Syntax
Frame syntax is similar in scope and complexity to that used by tables, and has been designed to be quickly processed by browsers.

<FRAMESET>
This is the main container for a Frame. A standard frame document has no BODY, and no tags that would normally be placed in the BODY can appear before the FRAMESET tag, or the FRAMESET will be ignored (unless the frame is a floating frame, supported by Internet Explorer only). The FRAMESET tag has a matching end tag, and within the FRAMESET you can only have other nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.

ROWS="row_height_value_list"
The ROWS attribute takes as its value a comma separated list of values. These values can be absolute pixel values, percentage values between 1 and 100, or relative scaling values. The number of rows is implicit in the number of elements in the list. Since the total height of all the rows must equal the height of the window, row heights might be normalized to achieve this. A missing ROWS attribute is interpreted as a single row arbitrarily sized to fit.

Syntax of value list
value
A simple numeric value is assumed to be a fixed size in pixels. This is the most dangerous type of value to use since the size of the viewer's window can and does vary substantially. If fixed pixel values are used, it will almost certainly be necessary to mix them with one or more of the relative size values described below. Otherwise the client engine will likely override your specified pixel value to ensure that the total proportions of the frame are 100% of the width and height of the user's window.

value%
This is a simple percentage value between 1 and 100. If the total is greater than 100 all percentages are scaled down. If the total is less than 100, and relative-sized frames exist, extra space will be given to them. If there are no relative-sized frames, all percentages will be scaled up to match a total of 100%.

value*
The value on this field is optional. A single '*' character is a "relative-sized" frame and is interpreted as a request to give the frame all remaining space. If there exist multiple relative-sized frames, the remaining space is divided evenly among them. If there is a value in front of the '*', that frame gets that much more relative space. "2*,*" would give 2/3 of the space to the first frame, and 1/3 to the second.

Example for 3 rows, the first and the last being smaller than the center row:

<FRAMESET ROWS="20%,60%,20%">

Example for 3 rows, the first and the last being fixed height, with the remaining space assigned to the middle row:

<FRAMESET ROWS="100,*,100">

COLS="column_width_list"
The COLS attribute takes as its value a comma separated list of values that is of the exact same syntax as the list described above for the ROWS attribute.

The FRAMESET tag can be nested inside other FRAMESET tags. In this case the complete subframe is placed in the space that would be used for the corresponding frame if this had been a FRAME tag instead of a nested FRAMESET.

BORDER
Netscape allows the global setting of frame border thickness by using this attribute within the <FRAMESET> element. It accepts a pixel value, which determines the thickness of any borders used within the frame set.

BORDERCOLOR
This Netscape specific attribute sets the colors for the border of the specified frameset. It can also be used in the <FRAME> element (see below) for setting the border colors of a specific frame. It accepts any #rrggbb hex triplet as a value. Any BORDERCOLOR setting in a <FRAMESET> element is over-ridden by a setting present in the <FRAME> element.

FRAMEBORDER
Netscape allows the use of this attribute (in a similar fashion to that supported by Internet Explorer in the <FRAME> element) to set the borders globally for an entire <FRAMESET>. Values can be either "yes" or "no".

<FRAME>
This tag defines a single frame in a frameset. It has 6 possible attributes: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. The FRAME tag is not a container so it has no matching end tag.

The SRC attribute takes as its value the URL of the document to be displayed in this particular frame. FRAMES without SRC attributes are displayed as a blank space the size the frame would have been.

NAME="window_name"
The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents (These are usually from other frames in the same document.) The NAME attribute is optional; by default all windows are unnamed.

Names must begin with an alphanumeric character. However, several reserved names have been defined, which start with an underscore.
These are currently:

_blank   Always load this link into a new, unnamed window.
_self   Always load this link over yourself.
_parent   Always load this link over your parent. (becomes self if you have no parent).
 _top   Always load this link at the top level. (becomes self if you are at the top).

NOTE: Although these are reserved names for the NAME attribute of the <FRAME> element, they should only be referred to using an Anchor Target. That is, used to target specific windows, allowing smoother transition between framed documents and between framed and normal documents.

MARGINWIDTH="value"
The MARGINWIDTH attribute is used when the document author wants some control of the margins for this frame. If specified, the value for MARGINWIDTH is in pixels. Margins can not be less than one-so that frame objects will not touch frame edges-and can not be specified so that there is no space for the document contents. The MARGINWIDTH attribute is optional; by default, all frames default to letting the browser decide on an appropriate margin width.

MARGINHEIGHT="value"
The MARGINHEIGHT attribute is just like MARGINWIDTH above, except it controls the upper and lower margins instead of the left and right margins.

SCROLLING="yes|no|auto"
The SCROLLING attribute is used to describe if the frame should have a scrollbar or not. Yes results in scrollbars always being visible on that frame. No results in scrollbars never being visible. Auto instructs the browser to decide whether scrollbars are needed, and place them where necessary. The SCROLLING attribute is optional; the default value is auto.

NORESIZE
The NORESIZE attribute has no value. It is a flag that indicates that the frame is not resizable by the user. Users typically resize frames by dragging a frame edge to a new position. Note that if any frame adjacent to an edge is not resizable, that entire edge will be restricted from moving. This will effect the resizability of other frames. The NORESIZE attribute is optional; by default all frames are resizable.

FRAMEBORDER
This attribute allows control of the frame border display. With this attribute set to "0" (Internet Explorer), the borders for the specific frame are not drawn. Netscape now also supports use of this attribute (using values of "yes|no") and also supports it in the <FRAMESET> element (see above) for globally setting the borders of a whole frame set. NOTE : In Netscape frames share borders and for the borders to not be drawn, all the frames sharing a common border must have their FRAMEBORDER attribute set to "no".

FRAMESPACING="value"
This attribute is also Internet Explorer specific and allows the setting of extra space around frames, to give the appearance of floating frames. The "value" should be the distance required around the frame in pixels.

i.e. <FRAME FRAMESPACING="55" ...> would present the frame with a spacing of 55 pixels.

BORDERCOLOR
This Netscape specific attribute sets the colours for the border of the specified frame. It can also be used in the <FRAMESET> element (see above) for globally setting the border colours of a whole frameset. It accepts any #rrggbb hex triplet as a value. Setting the BORDERCOLOR attribute in the <FRAME> element over-rides any setting given in the <FRAMESET> element, of which the <FRAME> is a part.

<NOFRAMES>
This tag is for content providers who want to create alternative content that is viewable by non-Frame-capable clients. A Frame-capable Internet client ignores all tags and data between start and end NOFRAMES tags.