Frames. You've probably seen them before, even if you don't know what they're called. For an example of frames, click here.
Frames have great possibilities, but are generally overused. They can make a site easy to navigate, but some of the older browsers are unable to read them. If you expect your site to be visited only by people with newer software, frames are a viable option. If, on the other hand, you expect people with all sorts of software to visit your site, you should either not use frames at all, or have a version of your site without frames for visitors who cannot or do not wish to use the framed version. Another downside of frames is that they make the maximum width of your webpages smaller, and you must be sure to take that into account if you use many images or tables.
If you do wish to use frames, they are relatively simple to implement.
In order to create the frames, you will first need to create a page which contains the frameset codes (in the example, the page is frames.html). The basic codes are:
<HTML>
<HEAD>
<META NAME="author" CONTENT="Your Name">
<META NAME="generator" CONTENT="Your program">
<META NAME="keywords" CONTENT="Your keywords">
<TITLE>Your Page Title</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER= ROWS="%, %" COLS="%, %">
<FRAME SRC="file1.html" name="navbar">
<FRAME SRC="file2.html" NAME="content">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR=# TEXT=#>
<p>(Message for those whose browsers don't or can't read frames.)</p>
</BODY>
</HTML>
The
FRAMESETtag creates the frames whichfile1.htmlandfile2.htmlare displayed in. The number you setFRAMEBORDERequal to will set how thick the border between the frames is. You then set a value for eitherROWS(if you want horizontal frames) orCOLS(if you want vertical frames). It's common to set the value using percentages (for example,COLS="22%, 88%), since this makes your page look approximately the same on any sized screen. The first number sets the left-hand, or top-most (depending on whether you useROWSorCOLS), frame's width, the second number sets the other frame. If you want more than one pair of frames to be displayed, you will need to nest framesets. This is rather tricky, but with some care and forethought it can be done. (for an example of nested framesets, see this page.Next, you need to set which files will be displayed in which frame. The first
FRAMEtag sets the source and name for the topmost or left-hand frame. The second tag sets the source and name for the remaining frame. The source files are the files which will be displayed in the frame. The names of the frames are important, because they allow you to have a link on one frame bring up a page in the other frame.This is done with an addition to the
<A HREF>tag. For example, if you want a link in the first frame (let's call it "navbar") to appear in the second frame (let's call it "content"), the link code would be this:If, on the other hand, you want to create a link which brings up a new page in the same frame as the one holding the link, use a regular link tag.<A HREF= TARGET="content">Sometimes you will want to link to sites other than your own. In this case, it is polite to have the link open a new browser window (by adding
TARGET="_BLANK"to the link tag). Then, when someone clicks on the link, a new browser window will open. If you don't want a new window to open, you can change theTARGETvalue to"parent". This will bring the new site up in the same window, but without the frames.Do some experimenting with the frame tags and the different kinds of links until you find a combination that you like.
This is the last lesson in this course. Fortunately, there are many Websites which contain information about HTML and related types of programming and coding. Some of them are listed on the Further Study page, which is linked below. Good luck!
