Once you have mastered basic HTML including tables, a next logical step would be to learn about frames. Frames offer the advantage of loading several webpages into the same browser window. Using frames correctly with purpose can lead to simplified navigation on the part of the viewer. Conversely, using frames just to show others that you are capable of creating them frustrates and annoys viewers searching with a purpose.

Background

Frames can be tricky to create and and maintain. They may be created in columns or rows. Each frame you create should have a name. Naming each frame is highly recommended as you may wish to target that area at a later date. Additionally, it is critical to have a fundamental knowledge of the anchor (or link) tag. For instance, it is essential to include within your anchor tag a target frame into which a webpage can load. This target must match the name you provided in your frame HTML. If these terms seem strange, don't worry, you will learn their meaning as we progess.

Building Frames

It would probably be best to describe the progress of building frames in steps.

1) Choose a topic.

2) Determine an appropriate layout using columns, rows, or both.

3) Write your code for the webpages you wish to load into frames.

4) Write the code for your frames.


The basic code for frames is similar to regular HTML. You should include all tags included in creating basic webpages except the body tag. These tags will be assumed.

<frameset cols="see note1" or rows ="see note1">

Note1: You should begin your frame code with the <frameset> tag. The frameset tag carries with it a number of attributes that further define your layout. The most fundamental attributes are col and rows followed by the size that these areas should include. You may define a size in terms of pixel width or percentage. An example might be:

<frameset cols="200,*,100">

This would instruct the browswer to create columns of 200, remaining space, 100 pixels in width. Remaining space is defined as illustrated using the * character. It will cover any space which is not included in the defined areas... in this case the 200 and 100 pixel areas. Notice that I have included the numbers in quotes. This is not required but recommended.

<frame src="somepage.html">

The next tag to include would be the <frame src="somepage.html">. This will determine the webpage you wish to load into your first frame assuming the order: top to bottom and/or left to right. For example, if I wanted to load three webpages named "menu.html", "main.html" and "banner.html" into the layout (frameset) I created above, I would use these tags and attributes:

<frameset cols="200, *,100">

<frame src="menu.html">
<frame src="main.html">
<frame src="banner.html">

</frameset>

Notice that I must close the <frameset> using the familar / in order for it to display properly. The image illustrates the end result.


Some other examples: Example 1 Example 2 Example 3 Example 4

Targeting Frames

Once you have built the webpages that you want to put into your frames you must consider the way(s) that your viewers will move from one webpage to another. For example, assume that a surfer wishes to access a link that is visible in the "My menu page" frame. If that surfer were to click on a link that was not properly targeted, the webpage would load in the "My menu page" frame instead of the "My main page" frame. To avoid this difficulty, you should follow the guidelines listed below:

  • Name each frame in your "frames" webpage - <frame src="page.html name="main">
  • Target each link in your "menu" webpage - <a href="newplace.html" target="main">

It should be noted that for the purpose of this demonstration, you may consider the "frames" webpage as a shell structure used to the generate divisions as shown above. The webpage referred to as "My links page" will be referred to as the "menu" webpage to direct the viewer to other websites.

You should also note the difference between the location where the name and target attributes appear. The name attribute should appear in the <frame src="somepage.html"> tag within the "frames" webpage, and the target attribute should appear in the <a href="somelink.html"> tag within the "menu" webpage.

Nesting Frames

There may come a point in time where you wish to include both columns and rows as shown in example5 or example6. These layouts require the you use both <frameset col=""> and <frameset rows=""> within the same frame based webpage.There are two ways to declare the row and col attributes. You may declare both cols and rows in the same frameset tag. This can get real confusing. Alternatively, you may first declare either <frameset rows=""> or <frameset cols=""> and subsequently include the other tag in the proper location. The HTML for example5 is shown below:

<HTML>
<HEAD>
<TITLE>frames example #5</TITLE>
</HEAD>

<FRAMESET COLS="125,*">

<FRAME NAME="menu" SRC="menuexam.html" SCROLLING="AUTO">

<FRAMESET ROWS="50,*">
<FRAME NAME="top" SRC="topexam.html" SCROLLING="NO" NORESIZE>
<FRAME NAME="main" SRC="mainexam.html" SCROLLING="AUTO">
</FRAMESET>

</FRAMESET>

</BODY>
</HTML>

It is important to remember that frame based webpages load their source files from left to right and top to bottom. In the above example "menuexam.html" would load first in the left column followed by "topexam.html". The last page to load would be "mainexam.html".

If you understand how to target and nest frames you may easily build frame based webpages.


Go to Web Design Go back to Tables Go Home

Copyright - M. Molino (coachmol@lightlink.com)