Laying Out, Naming and Targeting Frames
When you enter a 3 framed page, you are actually opening 4
html pages. The 3 you see visibly, and one that contains the information for the frame
layout, or <FRAMESET>.
 <html><head>
<title>My Frames Page</title>
</head>
<frameset rows="70,*">
<frame name="tiptop" target="main"
src="tiptop.htm">
<frameset cols="150,*">
<frame name="left" target="main"
src="left.htm">
<frame name="main" src="main.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Anything inside the <FRAMESET> Tag contains the layout information, specifically ROWS or COLS (columns), depending on vertically or horizontally border frames.
ROWS or COLS sets are separated by commas, and are
specified in one of three ways:
| Pixels - |
x |
| Percent - |
x% |
| Relative - |
* |
Pixels and percentages work the same as they do in Tables,
while * gives it a relative value, most times saying give the frame the rest of the space.
For example, <FRAMESET ROWS=150,*,150> would set 3 frames, 150 pixels on each side, with the middle frame being as
big as the remainder of the screen, depending on what resolution you are viewing the page
at.
There are pros and cons to use pixels because of the
different resolutions people will be viewing your pages with. It can be helpful though if
you set a top navigation screen with an Imagemap that's 150 pixels high. You would set the
top frameset to 160, instead of a percentage. If you use a percentage, say 20%, it'll look
ok if your screen resolution is 640x480, but not as you intended if your screen resolution
is 1024x768.
Other FRAMESET commands include:
| |
COLS |
Divides the screen up into columns |
<frameset
cols="30%,70%"> |
| |
ROWS |
Divides the screen up into rows |
<frameset
rows="100,*,50"> |
| |
FRAMEBORDER |
Border in all frames |
<frameset
frameborder="no"> |
| IExplorer Only |
FRAMESPACING |
Sets space around the frame |
<frame
framespacing="20"> |
| Netscape Only |
BORDER |
Width of all the borders in pixels |
<frameset border="3"> |
| Netscape Only |
BORDERCOLOR |
Border color in all frames |
<frameset
bordercolor="#FF0000"> |
Next are the commands in the <FRAME> Tag. I'll add a few more attributes from the example above.
<frameset rows="70,*" border="0"
frameborder="0" framespacing="0">
<frame name="tiptop" target="main"
src="tiptop.htm" noresize>
<frameset cols="150,*">
<frame name="left" target="main" src="left.htm"
scrolling="no">
<frame name="main" src="main.htm"
marginwidth="30">
</frameset>
Each <FRAME> consists of many commands. The first <FRAME> of the 3 in the <FRAMESET> is the top row frame that is 70 pixels of the screen.
Give your frames a name that's easy to remember. A good rule
is to name them whatever the page is called, dropping the .htm. For example <frame name="main" src="main.htm">. I'll answer the question of "Why?" a little later in the
tutorial.
Other FRAME commands include:
| |
NAME |
Sets the name of the frame for targets |
<frame name="main"> |
| |
SCROLLING |
Sets scrolling of the frame |
<frame scrolling="no"> |
| |
NORESIZE |
Stops the ability to resize |
<frame noresize> |
| |
MARGINWIDTH |
Sets left/right margins in the frame |
<frame marginwidth="10"> |
| |
MARGINHEIGHT |
Sets top/bottom margins in the frame |
<frame
marginheight="15"> |
| IExplorer Only |
FRAMEBORDER |
Border in the frame |
<frame frameborder="0"> |
| IExplorer Only |
FRAMESPACING |
Sets space around the frame |
<frame
framespacing="20"> |
| Netscape Only |
BORDERCOLOR |
Border color in the frame |
<frame
bordercolor="#FFFF00"> |
<noframes>
<p>This web page uses frames, but your browser doesn't support them.</p>
</noframes>
There is one other Tag, <NOFRAMES>. Anything between <NOFRAMES></NOFRAMES> is displayed to a browser which does not support Frames.
Targeting Frames
In the <FRAME> Tag you name your frames. I gave the example of naming frames earlier,
specifically
<frame name="main"
src="main.htm">.
After you name your frames, you can target them. A Target is the
frame your links open in.
If your left frame contains navigation, for example a link
for a feedback form, the link would look like this in your left.htm HTML:
<a href="fb.htm"
target="main">Feedback</a>
After your visitor clicks on Feedback, your feedback.htm would
load in the main target, substituting main.htm.
You might be asking yourself, "Do I have to target
*every* link when using frames?"
Nope! Let's assume every link in your navigation frame goes
to the main target. All you need to do is add the <BASE> Tag to the top of your
left.htm:
<head>
<title>My Frames Page - Navigation</title>
<base target="main">
</head>
[...]
<a href="fb.htm">Feedback</a>
<a href="links.htm">Favorite Links</a>
[...]
Reserved Target Frames
- _blank
- Loads the linked document into a new blank window. Try it
- _self
- Loads the linked document into the same frame as the anchor.
Useful for overriding a global BASE target. I use this throughout the Frame tutorial for
the links at the bottom. Frames Syntax - Quick Reference
- _parent
- Loads the linked document into the immediate parent frame of
the frame containing the anchor. Acts like "_self" when the frame has no parent.
Pay attention to my top frame and how it differs from _self. I use parent targets a lot
throughout the site. For example going from here to the Table Tutorial. The source is for that link is <a href="../Tables/index.htm"
target="_parent">Table Tutorial</a>.
- _top
- Loads the linked document into the entire window. Useful for
breaking out of nested FRAMEs and for external links. Try it
Frames Introduction |
Laying Out, Naming, and Targeting Frames
Floating Frames (IE Only) | Frames Syntax - Quick Reference
Javascript & Frames | Frame
Tips
|
