HTML Tutorials: Frames
Frames can organize your shoddy links into a neat navigation
system.
Frames can create a professional looking sidebar at the
side of your page. They can split a web page into precise
parts while keeping it neat. Frames work like this: you
split a web page into as many equal parts as you like,
and each part contains a separate page. Click on this link to see what I mean.
Now that you know what frames look like, you can start
understanding the concept behind them. The different pages
(main, menu, and bottom) are all different pages. You can
put whatever content you want in any page. Notice, too,
that the borders are resizable and have a scroll bar with
a border. We will now manipulate all of these elements
and show you how it's done.
First, we will go through how to make the frames on the
previous page. Here is the script used for that page:
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="120,*">
<frame src="menu.html" name="menu">
<frameset rows="*,50">
<frame src="main.html" name="main">
<frame src="bottom.html" name="bottom">
</frameset>
</frameset>
</html>
The <frameset cols="120,*"> tag defines
the columns (menu and main). This says that the first column
will be 120 pixels wide, and the second column will fill
in the rest. (The asterik means that the rest of the page
should be taken up.) The width number can be expressed
as pixels as well as percentages.
The next line, <frame src="menu.html" name="menu">,
gives us the page that should be inserted in the first
column (menu). The following line, <frameset rows="*,50"> defines
the rows. The asterik means that the first row (main),
takes up all the pixels other than the 50 reserved for
the bottom column. The next two lines, <frame src="main.html"
name="main"> and <frame src="bottom.html" name="bottom">,
give the source of these two frames. The last two lines
are standard closing tags for the two framesets, </frameset> and </frameset>.
The last bit of frame knowledge you will want to know is
how to change the default borders and spacing attributes.
The three attributes you can add to the <frameset> tags
are illustrated below:
<frameset border="0" bordercolor="0" framespacing="0">
They are pretty self explanatory. Border sets the width
of the borders. Bordercolor sets the color of the border
(you may use words or hexadecimal codes). Framespacing
defines the spacing between the frames.
|
