Frames
HTML Lab 6
Using Frames

What is a frame? This lesson is in a frame. The Editor is in another frame, and the toolbar (where the PREVIEW button and the Mode select box are located) are in a third frame. To see some more frames, click here.

Ready to give it a try??

Good!! In order to create a page that uses frames we will have to create four separate files. Let's get started!

Creating your own Frames

The first file we create will define the frameset. It will contain all the information necessary to organize our frames.

WARNING! In order for you to see your frames when you use the PREVIEW button, you must include this line in your document:

<base href=http://your domain/>

This should look familiar to you from lesson 3. If my domain was johndoe.onza.net I would use:

<base href=http://johndoe.onza.net/>

In HTML mode, type the following into the Editor below 

<head>
<base href=http://your domain/>
<title>
Frames
</title>
</head>

<frameset rows=20%,*>
   <frame src=redpage.html name=redpage>

   <frameset cols=100,*>
      <frame src=greenpage.html name=greenpage>
      <frame src=bluepage.html name=bluepage>
   </frameset>

</frameset>

NOTE: The page you just created does not have a body tag. This is not an error. An HTML document that contains a frameset tag cannot contain a body tag. In other words, an HTML document can contain either the frameset element or the body element, but not both.
Click PREVIEW. You should have see a page with three separate areas, each with messages that say:

It should look something like this:

File Not Found


You got those messages because you haven't made those pages (redpage.html, greenpage.html, and bluepage.html) yet.

Let's make the pages that will fill the frames. Perform the following steps:
   
  • Save the frameset page as frameset.html. (Really you can call this page whatever you want...)
    •    
  • Make a web page and save it as redpage.html. You can put whatever you like on this page. I suggest including <body bgcolor=red> in your document.
    •    
  • Make another web page and save it as greenpage.html. Again, you can put whatever you like on this page.
    •    
  • Make a third page and save it as bluepage.html.
    •    
  • Open the original file we created together, frameset.html, so that you can see the code in the Editor below.
    •    
  • Click PREVIEW.

    • You should see something that looks like this.

    How did we do that? Let's take a closer look at the frameset page.

    Observe: 
    
<html>
<head>
<title>
Frames
</title>
</head>

<frameset rows=20%,*>
   <frame src=redpage.html name=redpage>

   <frameset cols=100,*>
      <frame src=greenpage.html name=greenpage>
      <frame src=bluepage.html name=bluepage>
   </frameset>

</frameset>

    A frameset is a lot like a table. The purpose of a frameset tag is to define how many rows or columns of frames there will be and to specify the size of each frame. In our example, the first <frameset> tag uses the rows attribute to specify that the frameset has two rows. The first row will occupy the top 20% of the window. An asterisk (*) means "as much space as possible." This means that the second row will occupy the remaining 80% of the window. I could have accomplished the same thing using rows=20%,80%.

    A frameset can have as many rows as you want. For example, you would use rows=20%,30%,50% to create a frameset with three rows.

    The next step defines what goes in these rows. We can use either a frame or a frameset. In our example we use one of each!

    The first row uses a frame. You can think of a frame as a window within a window. Each frame has a distinct URL that determines the content displayed by the frame. The URL is specified using the src attribute, so redpage.html will be displayed here. The frame is also give a name. Take note of this fact as it will become important later.

    The second row uses a frameset. The cols attribute is used to specify that this frameset has two columns. We used the cols attribute to define our columns. The first row will occupy the left 100 pixels of the window. The second row will occupy the remainder of the window.

    Notice that we did not use the percent sign (%) to define the size of our columns here. This was done to show you that you can define the size of rows and columns using either percentages or pixels. If you want to use pixels, you should not include units with your value.

    Next, we specify what should go in these columns. As you learned above, you can use either frames or framesets. We used two frames here -- greenpage.html will be displayed in the left column and bluepage.html will be displayed in the right column.

    You must always close your frameset tags. If you forget to close it, your frameset will not be displayed if you are using Netscape to view your page.

    Attributes of <frameset>

    You've already used the rows and cols attributes for frameset.

    There are three other attributes that can be used with the frameset tag. border, frameborder, and bordercolor are all used to change the border between the frames.

    The border attribute controls the spacing between all frames in the outermost frameset. The higher the number, the more space there is between the frames. This attributes can only be used on the outermost frameset. Try using it with a variety of numbers and see what happens.

    In HTML mode, type the following into the Editor below 
    
<head>
<base href=http://your domain/>
<title>
Frames
</title>
</head>

   <frameset rows=20%,* border=12>
   <frame src=redpage.html name=redpage>

   <frameset cols=100,*>
      <frame src=greenpage.html name=greenpage>
      <frame src=bluepage.html name=bluepage>
   </frameset>

</frameset>

    The frameborder controls the border between all frames. You cannot specify the size of this border but you can specify whether or not this border exists. The possible values of this attribute are yes or no.

    In HTML mode, type the following into the Editor below: 
    
<head>
<base href=http://your domain/>
<title>
Frames
</title>
</head>

   <frameset rows=20%,* border=0 frameborder=no>
   <frame src=redpage.html name=redpage>

   <frameset cols=100,*>
      <frame src=greenpage.html name=greenpage>
      <frame src=bluepage.html name=bluepage>
   </frameset>

</frameset>

    Can you guess what bordercolor does? The bordercolor attribute controls the color of the border between all frames.

    In HTML mode, type the following into the Editor below: 
    
<head>
<base href=http://your domain/>
<title>
Frames
</title>
</head>

   <frameset rows=20%,* border=12 frameborder=yes bordercolor=yellow>
   <frame src=redpage.html name=redpage>

   <frameset cols=100,*>
      <frame src=greenpage.html name=greenpage>
      <frame src=bluepage.html name=bluepage>
   </frameset>

</frameset>

    You can also use the frameborder and bordercolor attributes with the frame tag.

    Other Attributes of <frame>

    There are four more attributes that can be used with the frame tag.

    marginheight
    specifies a margin, in pixels, between the top and bottom edges of the frame and the frame contents

    		 <frame src=redpage.html name=redpage marginheight=50>
    marginwidth
    specifies a margin, in pixels, between the left and right edges of the frame and the frame contents

    		 <frame src=redpage.html name=redpage marginwidth=50>
    noresize
    specifies that users cannot resize the frame. If a frame adjacent to an edge is not resizable, the entire edge is not resizable, and consequently other frames adjacent to that edge are not resizable

    		 <frame src=redpage.html name=redpage noresize>
    scrolling
    specifies whether scrollbars are available on a frame
         
    • yes specifies that scrollbars are always available
      •    
    • no specifies that scrollbars are never available
      •    
    • auto specifies that the browser determines whether to display scroll bars based on the size of the frame and its content; if you do not specify a value for scrolling, the default value is auto

    		 <frame src=redpage.html name=redpage scrolling=yes>

    Experiment with these to see the results yourself!

    Targeting a frame

    Wouldn't it be cool if we could select a hyperlink in one frame and the page would be displayed in another frame? To see an example of this, click here.

    This is why we gave a name to each frame! When we create our hyperlink we will target the frame in which to show the destination document. Like this:

    <a href=thepage.html target=framename>

    You can actually target the whole window as opposed to targetting just a frame within the window by setting the target attribute equal to _top:

    <a href=thepage.html target=_top>

    And you can also target a brand new window by setting the target attribute equal to _blank:

    <a href=thepage.html target=_blank>

    These can come in handy, so be sure to experiment with them a bit!




    Copyright © 1997-2001 Useractive, Inc.     Useractive is a registered trademark of Useractive, Inc.     All rights reserved.