Frames can divide the screen into seperate windows.
Each of these
windows can contain a HTML-document.
A file that specifies how the
screen is divided into frames is called a frameset.
This means that if you want to make a homepage that uses frames you
should:
1) make a html-document with the frameset and
2) make the normal html-documents that should be loaded into each of these frames.
When a frames-page is loaded
the browser automatic loads each of the pages associated with the frames.
Example
of code for a frameset
A frameset is simply a
HTML-document that tells the browser how to divide the screen into split windows.
Below is the
code used to produce the framest shown in the above example:
//THIS IS THE STANDARD
HEAD OF A HTML-DOCUMENT:
<html>
<head>
<title>My Frames Page</title>
</head>//HERE'S THE
FRAMESET DECLARATION
<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm"
name="main">
<frame src="bottombanner.htm"
name="bottom">
</frameset>
</frameset>
//HERE'S THE USUAL END OF HTML-DOCUMENTS
</html> |
Note that the frameset is only seven lines!
Lets split it all up and add
the lines one by one:
Creating
a frameset
If the frameset looked like
this:
The code would
be:
<frameset
cols="120,*">
</frameset> |
The screen is
divided into two coloumns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).
The frame-windows would have
no names, so the frameset really couldnt be used for any purpose.
Windownames and
default pages
If we add these two lines:
<frameset
cols="120,*" >
<frame src="menu.htm"
name="menu" >
<frame src="frontf.htm" name="main" >
</frameset> |
The entire
frameset will look like this:
Now
we still have the screen divided in two columns, the left being 120 pixels the right using
the rest of the screen. (some screens are set to 640 pixels across, some to 800 and
some to 1024, thats why the * is needed).
But
now we also have told that the left framewindow should load a HTML-page called menu.htm
and that the right window should load a HTML-document called frontf.htm.
In
addition we have assigned the names menu and main to the
two framewindows, so now we're even able to link to specific windows.
We
called the framewindows menu and main, but you could
name them whatever you pleased.
The
frameset with a menu-window to the left and a main-window to the right is the most common
frameset seen on the web.
If you
want to be really nerdy you can add some more details to it.
For
instance you might want the frameborders to be invisible.
To
make borders invisible you simply need to add these parameters to the frameset cols-line:
<frameset
cols="120,*" frameborder="0"
border="0" framespacing="0">
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset> |
The
entire frameset would now look like this:
We
could add a few more parameters.
If you
don’t want the framewindows to be resizeable you should add the parameter
"noresize" to the frame src-lines:
<frameset
cols="120,*" frameborder="0" border="0"
framespacing="0">
<frame src="menu.htm" name="menu" noresize>
<frame src="frontf.htm" name="main" noresize>
</frameset> |
Now let's proceed with even more
parameters
Lets
say you don’t want a scrollbar in the menu-window.
Furthermore the main-window should have a scrollbar
if needed (if the html-document doesn’t fit in the window).... but if not needed....
there should be no scrollbars.
Then
the code should look like this:
<frameset
cols="120,*" frameborder="0" border="0"
framespacing="0">
<frame src="menu.htm" name="menu"
noresize scrolling=no>
<frame src="frontf.htm" name="main"
noresize scrolling=auto>
</frameset> |
If you
have a HTML-document with a hyperlink on the text "Analysis" for instance, that
links to a page called "analysis.htm" then it appears in the HTML-document as:
| Jump to the <a
href="analysis.htm">Analysis</a> of the project |
Now
if the link was in the menu-window of our example, and we wanted it to
load a page in the main-window, then the HTML-code should be:
| Jump to the <a
href="analysis.htm" target="main">Analysis</a> of the project |
We
simply added the parameter target="main" to
the <a href>-part.
Now
the link will be opened in the main-framewindow instead of the menu-framewindow
where the link itself
was located.
Four
target-names are reserved, and will be interpreted by the browser in this way:
| _blank |
Load the page into a new
browser-window |
| _self |
Load the page into the
current window. |
| _parent |
Load the page into the
frame that is superior to the frame the hyperlink was in. |
| _top |
Cancel all frames, load in full
browserwindow. |
Examples
of different framesets
<frameset
rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset> |
<frameset
rows="16%,84%">
<frameset cols="50%,50%">
<frame src="tl.htm" name="tl">
<frame src="tr.htm" name="tr">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset> |
<frameset
rows="16%,84%">
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset> |
topleft
|
topright
|
botleft |
botright |
<frameset
rows="50%,50%" cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset> |
topleft
|
topright
|
botleft |
brtl |
brtr |
|
<frameset
rows="50%,50%" cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.htm" name="brtl">
<frame src="brtr.htm" name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset> |
topleft
|
topright
|
botleft |
botright |
<frameset
rows="240,240" cols="320,320">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset> |
topleft
|
topright
|
botleft |
botright |
<frameset
rows="50%,*" cols="320,*">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset> |
Tell a friend about this site!!!
|
