Next Page
Previous Page
I was FRAMED I tell you
What are Frames? A frame is a rectangular region within your browser
window that displays a Web page alongside other pages in other frames.
It's like PIP (Picture in Picture) on your TV, where you can see two
programs at the same time, or in this case two HTML pages at the same
time. Frames are used to control static and active
content within your pages and for navigation.
There are many Pros and Cons to using frames:
PROS
- Create Web pages that look and feel coompletely different from others
- Provides both constant and active conttent on one page
- Provides placement of Graphics and othher formatting advantages
CONS
- Not supported by older browsers
- Your user can loose the Frame setup annd your Navigation with it
- Some people just plain don't like frammes
- Legal issues with linking to other useers sites within the frame
- Printing the documents get tricky as iit only prints the active frame
Framesets
Frames are made up of several parts. The "FRAMESET" is used to tell
the browser which html pages should be in which Frame.
This Frameset is defined as a seperate html document which will call
other pages as defined in the frameset. It is your primary page
and when linking, this page is the document to link to.
When used in an HTML document, the Frameset tag replaces the Body tag.
Within the <FRAMESET> tag you will use either the "ROWS" attribute
or the "COLS" attribute along with a WIDTH value to determine the
placement of your frames. Width can be in Pixels or Percentages with
the "*" value being defined as the rest of the available space. This
allows you to specify the size of one area and lets the browser
determine the space needed to complete the other area.
Along with the Frameset you will need to reference the actual
html documents which will populate your frame. This is done with
the <FRAME> tag. Within this tag you will code the attribute
"SRC" with the value as the URL of the html document which will be
shown within that frame.
Lets create a Basic Frameset document with two frames.
Code as follows:
<HTML>
<HEAD>
<TITLE>Tynette's Frameset</TITLE>
</HEAD>
<FRAMESET COLS="40%,*>
<FRAME SRC="document1.html">
<FRAME SRC="document2.html">
</FRAMESET>
</HTML>
Example:
| document 1 |
document 2 |
Other attributes which can be used with the "FRAME" tag are:
Nesting Frames
Frames can be nested so that the "FRAMESET" consists of both
Rows and Columns. This is considered a Complex Frameset. Framesets must
be defined in a logical order as you cannot split your screen both by
Row and by Column. One must be dominate. Therefore you must Nest your
frames to create the effect you require.
To create a page with two columns, one for navigation on the left
and the main body of data on the right, and then a small footer
across the bottom, we would
Code as follows:
<HTML>
<HEAD>
<TITLE>Tynette's Frameset</TITLE>
</HEAD>
<FRAMESET ROWS="80,*">
<FRAMESET COLS="30%,*">
<FRAME SRC="navigate.html">
<FRAME SRC="mainbody.html">
</FRAMESET>
<FRAME SRC="footer.html">
</FRAMESET>
</HTML>
Example:
| navigate |
main body |
| footer | |
NOFrame
If you load a document into a Browser that does not support frames
you will get a Pretty blank document. NOT GOOD. To get around this
problem you can use the "NOFRAME" tag. It allows you to include
alternate text for the client to see instead of just a blank page.
The <NOFRAME> tag is coded before the closing "FRAMESET" tag.
It can include anything you want the client to see, including images
or links to other sites. Lets add a "NOFRAME" tag to our Frameset.
Code as follows:
<HTML>
<HEAD>
<TITLE>Tynette's Frameset</TITLE>
</HEAD>
<FRAMESET ROWS="80,*">
<FRAMESET COLS="30%,*">
<FRAME SRC="navigate.html">
<FRAME SRC="mainbody.html">
</FRAMESET>
<FRAME SRC="footer.html">
<NOFRAME>
If you had a Newer Browser, you could see this page!
</NOFRAME>
</FRAMESET>
</HTML>
Targets
When using Frames it is easy to get lost. You have a link in frame1
that should bring up a document in frame2. How do you make sure that the
document gets into the right frame? It's easy, just "NAME' your frames.
The "NAME" attribute is used inside the "FRAME" tag to give each frame
a unique name. This allows you to then point to that frame by Name
in your "A HREF" statement. If you do not specify a target, then
the linked document will appear within the same frame, which may not
give you what you want.
Lets create a basic frameset with Names and then a link to
a specific frame.
Code as follows:
<HTML>
<HEAD>
<TITLE>Tynette's Frameset</TITLE>
</HEAD>
<FRAMESET ROWS="80,*">
<FRAMESET COLS="30%,*">
<FRAME SRC="navigate.html"
NAME="nav">
<FRAME SRC="mainbody.html"
NAME="main">
</FRAMESET>
<FRAME SRC="footer.html"
NAME="foot">
<NOFRAME>
If you had a Newer Browser, you could see this page!
</NOFRAME>
</FRAMESET>
</HTML>
Code the targeted Link as follows:
<A HREF="newfile.html" TARGET="main">
Base Target
If most of the links on your document point to a common frame (like
Main) then you can create a Target Base which will act as the default
within your document for all links. To create a Target Base you would
use the "BASE" tag within your <HEAD> tag. This allows you to
code your HREF without the "target" attribute as it will pickup the
destination from this "BASE" tag. You can always override the base
with the specific target reference within the "HREF" at any time.
To create a Target Base you would
Code as follows:
<HTML>
<HEAD>
<TITLE>Tynette's Frameset</TITLE>
<BASE TARGET="mainbody.html">
</HEAD>
<BODY>
Your normal document text and tags
<A HREF="newfile.html">
<!-- You no longer need a Target here -->
</BODY>
</HTML>
Magic Targets
There are four (4) special Target values which can be used in place
of the Name. You may find these more to your liking or you may never
use them.
These Target values allow you to create new windows, link outside
your frames into a new page or link back to self. They are used
within your HREF statement to tell the browser where you want your
document to appear.
Magic Target Values:
| Target Value | Description |
|---|---|
| Target="_blank" | Forces the document to be loaded into a new 'unnamed' window |
| Target="_self" | Forces the document to be loaded into the frame that held the <A HREF> tag |
| Target="_parent" | Forces the document to be loaded into the frameset parent of the current document. If there is no parent, then "SELF" will be used |
| Target="_top" | Forces the document to be loaded into the full Web browser window, replacing the current <FRAMESET> entirely. If already at the top, then "SELF" will be used. |
Chapter 9 Assignment
Next Page
Previous Page
Goto Top of Page