|
|
Examples
|
|
|
We have prepared 4 examples that will certainly help you understand how frames work and clarify some of the attributes of the FRAMESET and FRAME elements:
- Example 1 shows how to create a frameset with 3 rows.
- Example 2 creates a document with 2 columns.
- Example 3 is a little more complicated. It combines 2 framesets to create a document divided into rows and columns.
- Finally, our last example features some attributes, such as MARGINWIDTH, not yet mentioned on the other subjects treated in this section.
|
|
|
Example #1:
|
|
|
|
|
<HTML>
<HEAD>
<TITLE>Example 1 - Rows</TITLE>
</HEAD>
<FRAMESET ROWS="100,*,200">
<FRAME NAME="Frame1" SRC="doc1.html">
<FRAME NAME="Frame2" SRC="doc2.html">
<FRAME NAME="Frame3" SRC="doc3.html">
</FRAMESET>
</HTML>
The above HTML code would create a document with 3 frames, named "Frame1", "Frame2" and "Frame3", respectively. Their heights, defined by the ROWS attribute, are:
- Frame 1: 100 pixels;
- Frame 2: As we defined this frame height as relative to the window's height, it will be given by: WindowHeight - (100 + 200 pixels).
- Frame 3: 200 pixels.
|
|
|
Example #2:
|
|
|
|
|
<HTML>
<HEAD>
<TITLE>Example 2 - Columns</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%">
<FRAME NAME="Frame1" SRC="doc1.html">
<FRAME NAME="Frame2" SRC="doc2.html">
</FRAMESET>
</HTML>
This code would create a document with 2 columns. Each frame width is defined as a percentage of the total window width.
|
|
|
Example #3:
|
|
|
|
|
<HTML>
<HEAD>
<TITLE>Example 3 - Multiple framesets</TITLE>
</HEAD>
<FRAMESET ROWS="200,*,200">
<FRAME NAME="Frame1" SRC="doc1.html" SCROLLING="no">
<FRAMESET COLS="20%,80%">
<FRAME NAME="Frame2" SRC="doc2.html">
<FRAME NAME="Frame3" SRC="doc3.html">
</FRAMESET>
<FRAME NAME="Frame4" SRC="doc3.html" SCROLLING="no">
</FRAMESET>
</HTML>
This example creates a first frameset of 3 rows. The first and third are normal frames but, the second one, is in fact another frameset of 2 columns. This would result in a document with 4 frames: a row, 2 columns and another row.
Cut-and-paste the above code to a text file and view it with your browser.
You should also notice the SCROLLING attributes in the first and last FRAME tags. These will prevent the browser from displaying a scroll bar for these frames. Even if the contents are too large to fit!
|
|
|
Example #4:
|
|
|
|
|
<HTML>
<HEAD>
<TITLE>Example 4 - Other attributes</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%" FRAMEBORDER=0>
<FRAME SRC="doc1.html" MARGINWIDTH=5 MARGINHEIGHT=5>
<FRAME SRC="doc2.html" MARGINWIDTH=2 MARGINHEIGHT=2>
</FRAMESET>
</HTML>
What you should notice in this example are the FRAMEBORDER, MARGINWIDTH and MARGINHEIGHT attributes.
- FRAMEBORDER specifies if the browser should, or not, render a 3-D border around the frames. In this case, the browser would not draw it.
- MARGINWIDTH specifies the amount of horizontal space, in pixels, you want between the frame border and its contents.
- MARGINHEIGHT specifies the height of the frame margin.
|
|
|
Now you're in condition to start trying for yourself. After all, the best way to learn something, is trying to do it.
Use these simple examples as a basis and try to change the attributes to see what happens.
|
|
|
|
Related Topics
|
|
|
|
FRAMESET element - FRAME element
|
|
|
|
Index
|
|
|
|
|
 Introduction
Basic Frame Sintax
Window Control
Examples
Floating Frames
|
|