This lesson is on how to create frames. You'll also learn why people like them and why some people (like myself) don't. Simply put, frames allow you to display multiple html documents at once on a single page. At it's best, it is a great way to put navigation on a page. At it's worst, it results in a cluttered up mess that is horrible looking.
With frames the screen is divided into frames. Each html page is within a frame. The documents provide all the usual functionality of a web page.
Most often frames are used as a navigation aid either as a menu over the top of or next to the main content.
To create a simple frames you will first need to create (or link) a total of three pages. The only one you have not seen before is the frameset.
The frameset defines how many frames will be displayed and which html documents will appear in each frame.
Here is a frameset:
Frameset Code |
My Comments |
|
<html>
<head><title>Mr. Mudd's Frameset</title></head>
<style type=text/css>
</style>
<frameset cols="25%,*">
<frame src="frame_contents.htm" name="left">
<frame src="frame_stuff.htm" name="main">
<noframes><a href="frame_contents.htm">Table of Contents</a></noframes>
</frameset>
</html> |
This better look familiar...
So should this.
Ignore this line but put it in your code.
Ignore this line but put it in your code.
Notice there is no <body> tag. It is replaced by the <frameset>
tag. The first line
Tells the browser where to find the page to display. Must include a "name"
attribute which tells where the page is going to be displayed.
If the viewers browser does not support frames then this line sets up your "frame_contents" page to display as a single unframed page.
Ends the frameset
Ends the html page.
|
This frame set calls for two other html documents, one called frame_contents and another called frame_stuff. Frame_contents is the menu that will appear at the left side of the screen. Notice that you need to set a target attribute to the <a href> tag to tell the browser which frame area to place the link in. It looks like this:
| <html> <head><title>Mr. Mudd's Frame Contents</title></head> <body bgcolor="yellow"> <a href="http://www.yahoo.com" target="main">yahoo</a><p> <a href="http://www.hp.com" target="main">Hewlett-Packard</a><p> <a href="http://www.rjmudd.com" target="main">Mr. Mudd</a><p> </body> </html> |
Finally, the file frame_stuff.htm is the first page that pops up in the main window. It can be pretty much anything you want including a link to a page out on the Internet somewhere.
|
<html>
|
There are several attributes you can use within the <frameset> tag:
|
Attributes of the<frameset> tag
|
|
| rows= & cols= | Lets you do frames either in columns or rows |
| border= | Determines the thickness of all frame borders. |
| bordercolor= | Determines the color of the frame borders. |
| framespacing= | Adds spaces between the frames |
| frameborder= | Displays or hides frame borders. Might need to be used with border= to get rid of both the border and the space for the border. |
Attributes of the <frame> tag |
|
|
frameborder
|
Value of either 0 or 1 with 0 being "frame border
off".
|
|
marginwidth= or marginheight=
|
Set the margin between the border and the text within
the frame.
|
|
scrolling=
|
Tells the browser whether to display a scrollbar within
the frame. If the content exceeds the size of the frame it will put
one in anyway.
|
| border= | Determines the thickness of all frame borders. |
| bordercolor= | Determines the color of the frame borders. |
| framespacing= | Adds spaces between the frames |
| name= | Names a frame so it can be used as a target. |
| src= | Specifies the URL of the file to be opened. |
| target= | Determine the frame the file will be opened in. |
|
noresize
|
Prevents the viewer from being able to resize your frames
by dragging the border.
|
| Done in rows instead of columns (frameset attribute) | Example |
| Large border (frameset attribute) | Example |
| Colored border (frameset attribute) | Example |
| No resize (frame attribute) | Example |
Back to the outline.