HTML Advanced Topics: Frames

You may have noticed, while surfing the web, that when you click on a link in some webpages only part of the page loads something new. That is because the page was built with frames. Frames have a very specific use. They are meant to used on pages where there is a stationary navigational menu that does not change. This saves loading time. Excessive use of frames throughout a site is a sure sign of an amateur webpage designer or someone who used bloatware to code their page. (The use of Java for navigational menus is also the sign of an amateur or someone who used bloatware.)

Coding frames is relatively easy. First, divide your webpage into blocks. Create a separate webpage to fill each block. Then create a frame page that loads all of the webpages you created into one page.

Lets say you want create a web page with three blocks (this is the most common use of frames). Here is a picture of our three blocks:

Here are the names of the three webpages we created:

1. Title Bar.html
2. Navigational bar.html
3. Page Content.html

Notice that the box is divided both into columns and into rows. Frame pages can only deal with rows or columns not both, so to achieve the layout we want we will have to nest the frames. Below is a picture of the way this will happen.

Top Box Bottom Box

+

Navigation Content

=

Top Navigation Content

First we are going to build the frame shown in the picture on the left. (**We save this document as framepage.html.**) Here is the code for this frame.

<frameset rows="18%,*" border="0" frameborder="0" framespacing="0">

<frame name="titlebar" src="Title Bar.html" NORESIZE scrolling="No"
 marginwidth="0" marginheight="0">

<frame name="bottom" src="nestframe.html" NORESIZE scrolling="auto"
 marginheight="0" marginwidth="0">
</frameset>

Whew! Complicated looking isn't it?! Let's work through this one line-by-line.

1. <frameset rows="18%,*" border="0" frameborder="0" framespacing="0">
   
   Creates a frame with two rows. The first row takes up 18% of the page. The second row uses the wild card character * to take up the rest of the page. The attributes border and frameborder are set to zero. These attributes are essentially the same thing, however bot must be listed so that Internet Explorer and Netscape can understand them. The attribute framescaping is set to zero, so that there is no space between the frames



2. <frame name="titlebar" src="Title Bar.html" NORESIZE scrolling="No" marginwidth="0" marginheight="0">
   
   The name attribute sets the name of the top frame to TITLEBAR. The src attribute loads Title Bar.html in the top frame. The NORESIZE attribute prevents the user from resizing this frame. The scrolling attribute is set to zero to prevent the scrollbar from appearing. The marginwidth and marginheight being set to zero prevents space between frames in Internet Explorer.



3. <frame name="bottom" src="nestedframe.html" marginheight="0"marginwidth="0">
   </frameset>
   
   The name attribute sets the name of the bottom frame to BOTTOM. The src attribute loads nestedframe.html, the next frame page, into the bottom frame. The NORESIZE and scrolling attribute have been removed which allows the browser to adjust these as needed. The marginwidth and marginheight being set to zero prevents space between frames in Internet Explorer.

Now we are going to build the frame shown in the picture in the middle. Here is the code for this frame.

<frameset cols="30%,*" border="0" frameborder="0" framespacing="0">

<frame name="Navigation" src="Navigational Bar.html"
 NORESIZE scrolling="No" marginwidth="0" marginheight="0">

<frame name="Content" src="Page Content.html"
 NORESIZE marginheight="0"marginwidth="0">

</frameset>

Here the only difference is the direction of the frame being built. By changing the frameset tag to cols= we make the frames vertical rather than horizontal. All of the other coding is the same. We save this frameset as nestedframe.html

Now, if you have coded correctly, when you open framepage.html the computer loads the following:

Title Bar.html:			loaded into frame TITLEBAR
nestedframe.html: 		loaded into frame BOTTOM
Navigational Bar.html: 		loaded into frame NAVIGATION
Page Content.html: 		loaded into frame CONTENT

This work is licensed under a Creative Commons License.