The Basics of HTML
Frames
What are Frames?
Frames are a way to divide the browser screen into two or more separate pages. This will allow easier navigation under some circumstances. Often frames are used to add a side menu bar to a website where the constant back and forth clicking would become awkward in a single page.
In the following example, the side menu bar allows the user to just click in the side menu bar, and their choice loads into the main window.
Example: Side Menu Bar
This is what the index.html will look like:
<html>
<head>
<title>title here</title>
</head>
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
<noframes>
Your browser does not support frames.
<a href="frameless_main.html">Please visit the frameless page.</a>
</noframes>
</html>
Click Here to view.
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.html, that will work in both frames and noframes browsers.
Then your noframes would read:
<noframes>
Your browser does not support frames.
<a href="main.html">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 that we are creating a 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, which is short for source, such as src="some_page.html". 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.html' name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
If we would like to add a third column, we would need to add a third size definition in the cols(columns) so that all the columns would add up to 100% and add another frame tag inside the frameset.
Here is an example:
<frameset cols="15%,70%,15%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
<frame src="side_bar.html" name="rightwindow">
</frameset>
Click Here to view.
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 this:
<frameset rows="80%,20%">
<frame src="main.html" name="mainwindow">
<frame src="menu_bar.html" name="bottommenu">
</frameset>
Click Here to view.
If you wanted the menu at the top, just switch it around:
<frameset rows="20%,80%">
<frame src="menu_bar.html" name="topmenu">
<frame src="main.html" name="mainwindow">
</frameset>
Special Linking with Frames
Okay, so let's go back to our original example, the side menu bar.
Here is the original source for index.html
<html>
<head>
<title>title here</title>
</head>
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
</html>
Now we are going to need to create our menu_bar.html page, and our main.html page. Each of these must be edited separately. Both pages are 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.html 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 that you want to load in the main window.
Here is the source for menu_bar.html:
<a href="cats.html" target="mainwindow">Load cats</a>
<a href="dogs.html" target="mainwindow">Load dogs</a>
<a href="birds.html" target="mainwindow">Load birds</a>
When you click on any of the above links, they will end up loading in the larger window instead of the smaller window.
If you wanted to change the menu, to say cats instead of dogs from the main window, you could do something like <a href="cats.html" target="sidemenu">Load cats into the side menu bar</a> in main.html.
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 the frame that the link was clicked in. This is the default selection. Leave it out if you want.
target="_top" - link is loaded into the current full browser window and all the frames disappear. This leaves 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.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
If you wanted to lock in the sidemenu frame (the menu bar frame) so that the user couldn't resize it, add the words noresize to the frame you want to lock:
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu" noresize>
<frame src="main.html" 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.
You can also have no frame border by typing in this:
<frameset cols="15%,85%" frameborder="NO" border="0">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
Click Here to view.
The other useful attribute is scrolling. If you always want a scrollbar to appear in the main window. Add scrolling="yes". If you don't want a scrollbar? Add scrolling="no". If it doesn't bother you either way then add scrolling="auto".
Here is an example:
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu" noresize>
<frame src="main.html" 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.html" noresize>
<frame src="menu_bar.html" name="sidemenu" noresize>
</frameset>
<frame src="main.html" name="mainwindow" scrolling="yes">
</frameset>
Click Here to view.
Here is something 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>
Click Here to view.
Three even columns?
<frameset cols="33%,33%,33%">
<frame>
<frame>
<frame>
</frameset>
Click Here to view.
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>
Click Here to view.
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 Here to view.
There you are! Now you know how to create frames!
Your assignment is to create your own frame page with links from one frame to the other.
View The Basics of HTML Discussion
Page: 1 2 3 4 5 6 7 8 9 Next Page: A Useful ToolReprinted from http://www.webmaster-resources101.com