Frames, Frames, Frames

 


Agenda

 

 


 

Frames

Frames allow a single web browser window to be divided into several different areas. Each area can display a different web page. Frames thus add flexibility to a web site. For examples, they allow different background colors or images to be used for different parts of the same window, or a table of contents to be available at all times while the user scrolls through the main body of a document. It's not hard to come up with other creative applications for them.

The HTML tags that break a browser window up into several frames are similar to the tags that define lists. Using them is fairly straightforward. First, define a page that gives the frame layout. Second, specify a web page to put in each frame.

A page that gives a frame layout does not have a BODY; instead, it has a FRAMESET and individual FRAMEs. Every time you use the FRAMESET tag, you break the window into columns or rows. Each column or row may then be used as a frame, or broken up into smaller frames by using another FRAMESET tag. Like the <BODY> tag, the <FRAMESET> must be ended with the </FRAMESET> tag.

Here's how FRAMESET works. Use it in place of the BODY tag in a web page. In the tag, specify whether you want to divide the window into rows or columns, and give a list of sizes for the rows or columns. The tag itself looks like this:

<FRAMESET TYPE = "size1, size2, ....">

In place of TYPE, insert ROWS to divide the window into horizontal frames, or insert COLS to divide the window into vertical frames. In place of each size, provide a size for a frame. This can be one of three types:

We'll discuss these size options more later. For now, let's focus on frames given as a percent of the total window size.

After you have set up the layout of the frames, you need to tell the browser where to find the web page that goes into each one. This is done using the <FRAME> tag. The tag works as follows:

<FRAME SRC = "URL">

In place of URL, give the URL of a page, image, newsgroup, telnet session, or whatever you want.

Let's look at an example. I've written two simple web pages, called wpage1.html and wpage2.html, that have a picture and a link back to this spot. I'll put each one in a frame. The example gives the HTML source of the page that defines the frame layout. This example is designed to show the basic use of <FRAMESET> and <FRAME>.

Example 1: Two frames


<HTML>
<HEAD>
<TITLE>Example 1</TITLE>
</HEAD>

<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "wpage1.html">
<FRAME SRC = "wpage2.html">
</FRAMESET>

</HTML>


View Example 1



Nested Frames

Frames may also be nested. Once you have divided the window into frames, you may then divide each frame into smaller frames. This is again accomplished by using the <FRAMESET> tag, and is illustrated in Example 2. In this example, a single page is divided into two column frames, and then the second column is further split into two row frames. I'll recycle my wpage1.html and wpage2.html files for two of the frames, and put an image in the third.

Example 2: Nested frames


<HTML>
<HEAD>
<TITLE>Example 2</TITLE>
</HEAD>

<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "wlogo.gif"> -
This is the first frame

<FRAMESET ROWS = "50%, 50%"> - The second frame is itself a set of two more frames
<FRAME SRC = "wpage1.html">
<FRAME SRC = "wpage2.html">
</FRAMESET>

</FRAMESET>

</HTML>


View Example 2



As noted in the introduction, not all browsers support frames. You should make provisions for those people. The FRAMESET tag has a complementary NOFRAMES tag. A browser that does support frames will ignore everything between <NOFRAMES> and </NOFRAMES>, and browsers in general ignore tags that they do not recognize, so you can put the HTML definition of a standard web page between the two for other viewers to use.

Let's look at a brief example of this. To see the NOFRAMES section, you will have to use a non-frames browser. Note that the NOFRAMES section must be within the FRAMESET section.

Example 3: HTML for non-frame browsers


<HTML>
<HEAD>
<TITLE>Example 3</TITLE>
</HEAD>

<FRAMESET COLS = "50%, 50%">

<NOFRAMES>
<BODY>
If you can see this, your browser does not support frames.<P>

Some new links can be added to here </BODY>
</NOFRAMES>

<FRAME SRC = "wpage1.html">
<FRAME SRC = "wpage2.html">
</FRAMESET>

</HTML>


View Example 3


More on sizing:

As described earlier, each frame is given a size in one of three ways. First, it may be given set number of pixels. Second, it may be given a percent of the remaining space. Third, it may be given a share of the leftover space in the window. Let's look at each one in a bit more detail.

Pixel sizes: All frames that ask for a set number of pixels are given those sizes, if possible. If not, the browser will override the specifications so that the frames fit into/fill the window. These sizes are allocated first.

Percent sizes: Next, all of the frames that ask for a percent of the available window are given their respective percentages of the space that is left. If the total of the percent frames is greater than 100, all numbers are scaled back so that they total 100. For example, if the sizes "40%, 80%, 80%" are requested, Netscape will divide all numbers by 2 so that they total 100. The first frame will get 20% of the available space, etc. If the sizes total less than 100, and no relative-sized frames are present, the numbers will be scaled up in a similar manner so that they total 100.

Relative sizes: Last, relative frames are given the remaining space. If the pixel-sized frames do not take all of the available space, and the percent-sized frames do not ask for 100 percent (or more) of the available space, the rest is given to the relative-sized frames. Each * counts as one share of this remaining space. If there is one frame, with size *, it gets all of the remaining space. Two frames sized * and * share it evenly. If two frames are sized * and 2*, the second frame gets twice as much of the remaining space as the first.

Other modifications:

The individual frames may be modified in several ways. First, scrollbars may be added or removed. Normally this is done automatically; if a web page doesn't fit into its frame, Netscape adds scrollbars. When the frames are defined, the author may choose to force scrollbars to be present at all times, or prevent them from ever appearing, by using the SCROLLING modifier to the FRAME tag, as follows:

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

If this tag were used in one of the previous examples, the frame containing the web page wpage1.html would always have scrollbars. Replacing the "YES" with "NO" would prevent scrollbars from ever appearing in the frame, regardless of how small the user resized the window.

Viewers may also be prevented from resizing the frames within the window (but not the window itself) by adding the NORESIZE modifier to the FRAME tag. Note that this fixes all edges of the frame, so it will also prevent some parts of the adjacent frames from being manually resized. To use this modifier, just add NORESIZE to the FRAME tag in the following manner:

<FRAME NORESIZE SRC = "wpage1.html">

The frames may also be named, by using the NAME modifier to the FRAME tag. The syntax is very simple; to create a frame named "frame1", use the following tag:

<FRAME NAME = "frame1" SRC = "wpage1.html">

Names become useful when you begin to use TARGETs in your documents.


Targets

Targets are the complement to links. A link tells the browser what file to display. A target tells the browser where to display it. You can use targets to specify a frame in a current window, for example, or call up a new window when a link is selected.

There are two primary ways to specify the target of a link. First, a target may be given for an individual link. Second, a default target may be specified. Let's look at each of these in turn.

Targets for individual links: The TARGET modifier is added to the <A HREF> tag in the following manner:

<A HREF = "url" TARGET = "targetname">Hit me</A>

Here url is the URL of the new web page or file. targetname is the name of the target. If it matches the name of an existing frame, whatever is stored at URL will be displayed in that frame. If the targetname does not match any frame names, a new window will be created.

Default target for all links: The BASE tag is used at the beginning of a document to specify a target for all links that do not have a target already given in the manner shown above. The syntax is very simple, but note that this tag belongs in the header section of your HTML document:

<HEAD>
<BASE TARGET = "maintarget">
</HEAD>

If no TARGET is given in a particular link, the link will behave as if TARGET = "maintarget" had been added to it.

Time for an example. I've created another page with three frames, as in Example 2. On the left are two links. One link specifies a frame as a target. The other does not; it thus uses the BASE target.

Example 4: Default and specific targets


<HTML>
<HEAD>
<TITLE>Example 4</TITLE>
<BASE TARGET = "frame3">
</HEAD>

<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "frame4a.html">

<FRAMESET ROWS = "50%, 50%">
<FRAME NAME = "frame2" SRC = "blank.html">
<FRAME NAME = "frame3" SRC = "blank.html">
</FRAMESET>

</FRAMESET>

</HTML>


View Example 4


The name of targets must begin with a number or letter. There are four special target names that may always be used. They all begin with the underscore ( _ ) character. The syntax is the same: TARGET = "specialname", where specialname is one of the following four special target names:

_blank - causes the link to be loaded into a new blank window.

_self - causes the link to be loaded into the same window or frame in which it was clicked on by the user. This comes in handy when a default target was specified using the BASE tag.

_parent - causes the link to load in the parent document. This is useful if more than one window has been created.

_top - causes the link to load in the full window. This is useful for wiping out a frameset without creating a new window.

 


Lab

Part a:
Create a web page that will have a frame cell at the bottom for advertisement or special notices.

Part a Example/Solution

Part b:
Using the basic construct of part a, create a web page that has a table of content on the left hand side and a frame cell for advertisement in the bottom.

Part b Example/Solution