| 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.
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>
|
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>
| Special Linking with Frames |
| Okay, so let’s go back to our original example, the side menu bar.
In file index.htm:
<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>
</html>
Now, we are going to need to create our menu_bar.htm page, and our main.htm page. Each of these must be edited separately. Each of these pages is almost exactly like a regular HTML page, except that there is an advanced linking option called the target attribute.
If you added regular links in menu_bar.htm and clicked on them, each page would load into the small, side frame! To get around this, you’ll want to add a target attribute to each link you want to load in the main window.
inside menu_bar.htm:
<a href="oranges.htm" target="mainwindow">Load oranges</a><br>
<a href="apples.htm" target="mainwindow">Load apples</a><br>
<a href="kiwis.htm" target="mainwindow">Load kiwis</a><br>
Now, when you click on any of those links, they will end up loading in the larger window instead of the smaller window.
If you wanted to change the menu, to say animals instead of fruits from the main window, you could do something like <a href="animals.htm" target="sidemenu">Load animals into side menu bar</a> in main.htm.
There are three important target attributes you should be aware of:
target="_blank" – link is loaded into a new blank browser window (and your old window stays open).
target="_self" – link is loaded into frame that link was clicked in. (this is the default selection. Leave it out if you so please.)
target="_top" – link is loaded into current full browser window, and all frames disappear, leaving the new linked page to occupy the entire window
|
| Special attributes of <frame> |
There are two special attributes you should be aware of for the <frame> tag. Let’s go back to the side menu example.
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="main.htm" name="mainwindow">
</frameset>
Say you wanted to lock in the sidemenu frame (the menu bar frame) so that the user couldn’t resize it. (Imagine the user moving the divider bar so that half the browser has the menu, and half has the main window. Wouldn’t that look silly?)
In order to lock the size, add the words noresize to the frame you want to lock:
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu" noresize>
<frame src="main.htm" name="mainwindow">
</frameset>
This does not prevent you from changing the pages inside the windows, it just prevents the user from modifying the frame size when the page loads.
The other useful attribute is scrolling. Say you always want a scrollbar to appear in the main window. Add scrolling="yes". Want there to never be a scrollbar? Add scrolling="no".
Example:
<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu" noresize>
<frame src="main.htm" name="mainwindow" scrolling="yes">
</frameset>
|
| |
| More Advanced Frames |
You can embed a frameset anywhere there is a frame if you want to split that section further. Want a special, fixed area for your logo graphic at the top of the menu bar? Try this:
<frameset cols="15%,85%">
<frameset rows="20%,80%">
<frame src="logo.htm" noresize>
<frame src="menu_bar.htm" name="sidemenu" noresize>
</frameset>
<frame src="main.htm" name="mainwindow" scrolling="yes">
</frameset>
Now, here are some things to think about. How would you get four even frames in two rows?
You could do:
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
Three even columns?
<frameset cols="33%,33%,33%">
<frame>
<frame>
<frame>
</frameset>
How about three rows, the first one 1/4 of the screen, the second 1/2 of the screen, and the third 1/4 of the screen?
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame>
</frameset>
Same as above, but the very bottom frame split into two equal columns?
old…
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame> <-- replace this
</frameset>
new…
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
</frameset>
|
Click topic to view:
Getting Started
Working on Tags
Working on Headings
Working on Paragraphs
Working on Links and Images
More on Tags
Clean Code, Escape Codes and Comments
Working on Lists
Fonts and Colors
Tables
Adding Sounds
Frames
Meta Tags
|
