|
HTML Code MiniChapter 14: Using Frames Tutorial
What are Frames?
Frames are a way to divide the browser screen to allow easier
navigation under some circumstances. Frequently, frames are used to
add a side menu bar to a web site where the constant back and forth
clicking would become tedious in a single page. In this example, the
side menu bar would allow the user to just click in the side menu
bar, and their choice would load into the main window.
Example: Side Menu Bar
This is what the index.htm would look like:
<html>
<head><title>title here</title></head>
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="main.htm" name="mainwindow">
</frameset>
<noframes>
Your browser does not support frames.
<a href="frameless_main.htm">Please visit the frameless page.</a>
</noframes>
</html>
Notice that there is no actual <body> coding. It is common courtesy,
however, to place a <noframes> area after the frameset, but this is
completely optional. This <noframes> area only displays in browsers
that are not able to show frames.
If you create a special page for those without frames, you may be
doubling your work. It is best, with effort and practice, to create
a page, in this case, main.htm, that will work in both frames and
noframes browsers. Then your noframes would read:
<noframes>
Your browser does not support frames.
<a href="main.htm">Please visit the frameless page.</a>
</noframes>
About <frameset> and <frame>
The frameset tag is used to declare multiple frames. As you can see
in our first example, the menu bar side, there was one frameset. It
read:
<frameset cols="15%,85%">
This tells the browser, we are creating column of framed pages, the
first one is to take up 15% of the total browser screen, and the
second is to take up 85% of the total browser screen. Then, we
introduced <frame>, which is what actually loads the pages. Each
frame must have a src, such as src="some_page.htm". So, because we
used two framed areas within the frameset, we need two frame tags,
each of them to load a page.
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="main.htm" name="mainwindow">
</frameset>
If we would like to add a third column, we would need to add a third
size definition in the cols (so that all would add up to 100%) and
another frame tag inside the frameset.
Likewise, we can use a rows definition instead of a columns
definition. If we wanted the menu to be a bottom menu bar, we would
do something like:
<frameset rows="80%,20%">
<frame src="main.htm" name="mainwindow">
<frame src="menu_bar.htm" name="bottommenu">
</frameset>
If you wanted the menu at the top, just switch it around a little
bit:
<frameset rows="20%,80%">
<frame src="menu_bar.htm" name="topmenu">
<frame src="main.htm" name="mainwindow">
</frameset>
|