Lesson 3 -- Printer Friendly Version

INSTRUCTIONS:

To print this lesson exactly as it appears on your screen, wait a minute or two for the entire page to load. The download should not be considered complete until you see the copyright notice at the bottom of the page. Once the document is ready to print, simply click your browser's File menu and choose Print.
To save a text-only version of this lesson, click your browser's File menu and choose Save As. Select a disk drive and folder to receive the file, and change the name of the file to less3.htm To view the file while you are offline, just go to the drive and folder you selected when you saved the file and double-click the file named less3.htm. Your browser will start and you will have access to the file.
If you use the Microsoft Internet Explorer browser and the Microsoft Outlook mail program, you can e-mail a text-only version of this file to yourself. To do so, click the File menu, choose Send, and then select Page by e-mail.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

Frames are used to divide a single web page into multiple, independently scrollable web pages. Frames are quite useful in that they allow you to use your screen space more efficiently.
Please go to the Supplementary Material page at the end of this lesson, and then follow the link that says 'Sgt. Pepper - before'
A quick glance at the source code will tell you that this page uses a table. In the first column of the table, you'll find a list all of the people on the Beatles' Sgt. Pepper album cover. The second column of the table displays a photograph of the album cover.
Unfortunately, the list of names is rather long. When you scroll down the page to see the names of the people on rows 2, 3, and 4, you will no longer be able to see the picture of the album cover. This is a design problem that forces the user to repeatedly scroll down and up and down the page.
Now, return to the Supplementary Material page and follow the link to 'Sgt. Pepper - after.' This page uses frames to divide the screen into two independently scrollable web pages.
Notice the scroll bar next to the list of names. The list of names is now on a web page that is completely independent of the web page containing the photograph. You can now comfortably scroll up and down through the list of names while viewing the photograph, and the photograph will not budge from your screen!
-Dislike Frames-
Many web designers have an innate distaste for frames. The percentage of 'frame-haters' in each of my classes is large enough that I feel I must address the issue in this lesson.
Your aversion to frames probably stems from the fact that frames are one of the least understood and most misused tools in the HTML command set.
We've all stumbled across poorly designed web sites that abuse frames, dividing your screen into a confused jumble of three, four, five, or even six hard-to-read, independently scrollable pages.
To make matters worse, these rogue websites often disable your 'Back' button, fire up another memory-hogging copy of your browser each time you click a link, or conveniently forget to turn their frames off when you leave their site.
Anyone who has spent time struggling to escape from frame hell is bound to develop a hatred for HTML frame tags. I can't blame you. When frames first showed up on the web, I wasn't too fond of them myself.
But remember, frames can be used to solve problems just as easily as they can be used to create problems. When frames are intelligently and judiciously applied, they're a real pleasure to use. To paraphrase John Lennon: Give frames a chance!
Cast all your biases against frames aside and answer this question honestly:
Which 'Sgt. Pepper' page was more pleasant to work with-- the table version--or the frames version?
If you think the table version works better, read no more. You won't be interested in the rest of this lesson.

Oh, good--you're still with me! I knew you'd come around. Let's learn how frames are created.

Chapter 2

Frames are displayed on a web page called a 'Frame Definition document.' The frame definition document is simply an HTML document containing tags that describe three things:
1. The frame arrangement:

You can arrange your frames in rows;

or you can arrange your frames in columns.

2. The size of each frame:

3. The filename or URL of the frame contents.

You cannot type the contents of the frames directly into the frame definition document. The content of each frame must always be stored away as a separate HTML document.

Chapter 3

In a frame definition document, the <body> tag is replaced by the <frameset> tag. The <frameset> tag should immediately follow the </head> tag (where the <body> tag would usually appear), or the <frameset> tag WILL BE IGNORED!
The <frameset> tag can have several attributes: today, we're going to learn about two of those attributes.
The 'rows' attribute
If you want to arrange your frames into horizontal rows, you will need to use the 'rows' attribute. Here's how it works:
Let's say you want a 100 pixel tall frame holding your company logo and contact information running across the top of the browser window. Below this frame, you want another frame that will occupy the remainder of the browser window.
To see an example of the page I am describing, go to the Supplementary Materials page and click the link that says 'Horizontal Frames.' You will see two frames positioned one above the other. The uppermost frame is 100 pixels tall. The lower frame occupies the rest of the browser window.
In the frame definition document, the <frameset> tag that would create such a structure would look like this:
  <FRAMESET ROWS="100,*"> 
The word 'rows' indicates that we want our frames arranged in horizontal rows. Because frame rows are always created from the top of the page to the bottom of the page, the first number (100) in the example above is used to set the height of the first (uppermost) frame to 100 pixels. The second value--an asterisk (*)--is used to indicate that the second (lower) frame should grow or shrink as needed to fill the rest of the browser window. The asterisk is used as a wildcard in this example. It will take on whatever value it needs in order to ensure that the lower frame fills any portion of the browser window not occupied by the uppermost frame. If you were to try resizing your browser window--making it smaller or larger--you would find that the height of the upper frame remains fixed at 100 pixels. However, the height of lower frame will change constantly to accomodate the changing size of your browser window.
The total height of all frame rows must always equal the height of the browser window. Because there is no way you can predict how tall a visitor's browser will be, you should always set the size of at least one frame as a wildcard (*). This gives that frame the flexibility to grow or shrink as needed to fill the browser window.
Here's another example: Suppose you want to create three rows of frames. Let's say you want the uppermost frame to be 80 pixels tall, and the bottom frame to be 45 pixels tall. Furthermore, you want the middle frame to size itself as needed to fill the browser window. The following tag would create such a page:
  <FRAMESET ROWS="80,*,45"> 
Exercise 1
Write the <frameset> tag for a page that features two frames arranged into horizontal rows. The bottom frame should be 50 pixels tall. The uppermost frame should fill the rest of the browser window. You'll find the answer at the end of this chapter.
The 'cols' attribute
The 'cols' attribute is used in the <frameset> tag to arrange your frames into vertical columns. Here's how it works:
Suppose you want to create a page with two frames sitting side by side as vertical columns. The first column should be 240 pixels wide. The second column should occupy the rest of the browser window.
If you want to see an example, return to the Supplementary Material Page, and take another look at the 'Sgt Pepper - after' page. The first column is fixed at 240 pixels wide. The second column takes up whatever space is left over in your browser window.
The <frameset> tag that would create such a page should look like this:
  <frameset cols="240,*"> 
The word 'cols' indicates that we want our frames arranged in vertical columns. Because frame columns are always created from the left side of the page to the right side of the page, the number 240 in the example above sets the width of the leftmost frame to 240 pixels. The wildcard (*) is used to indicate that the rightmost frame should grow or shrink as needed to fill the rest of the browser window.
Exercise 2
Write the <frameset> tag for a page that features three frames arranged into vertical columns. The leftmost frame should be 150 pixels wide. The middle frame should be 250 pixels wide. The rightmost frame should fill the rest of the browser window. Read no further until you've written out the tag. You'll find the answers to both exercises just below.

Exercise Answers
Exercise 1.
  <FRAMESET ROWS="*,50"> 
Exercise 2.
  <FRAMESET COLS="150,250,*">

Chapter 4

The <FRAMESET> tag is used to define the number, position, and size of each of your frames. Now, all you need to do is specify the content of each frame. This is done with the <FRAME> tag.
Remember, it is not possible to specify the actual content of each frame in your frame definition document. Instead, you must store the content of each frame in another HTML file. You can then use a <FRAME> tag to specify the name of the HTML file that holds the frame content. Each frame on your page must have its own <FRAME> tag, and each <FRAME> tag must point to a unique HTML file.
For example, suppose you wanted to have two frames arranged into vertical columns. Furthermore, suppose you want the first frame, which will be 240 pixels wide, to hold a file named 'names.html.' Let's also suppose you want the second frame to hold a file named 'picture.html.'
The following tags will create the frame structure and fill the frames with the content described above.
      <FRAMESET COLS="240,*">  
      <FRAME SRC="name.html">  
      <FRAME SRC="picture.html">  
      </FRAMESET> 
Like most HTML tags, the <FRAMESET> tag comes in pairs. In between the <FRAMESET> tag and the </FRAMESET> tag, you identify the content of each frame using the <FRAME> tag.
Again, you will need one <FRAME> tag for each frame defined in your <FRAMESET> tag. Because the <FRAMESET> tag contains two values (240 and *), there will be two frames. Therefore, our frame definition document must have two <FRAME> tags.
Frames are always built from top to bottom and from left to right. The first <FRAME> tag defines the content for the first (leftmost) frame. The second <FRAME> tag identifies the content of the second (rightmost) frame.
If we had been working with frames arranged into horizontal rows, the first <FRAME> tag would have identified the content of the first (uppermost) frame, and the second <FRAME> tag would have identified the content of the second (lower) frame.
If the <frameset> tag contained more than two numbers, then you would need more <frame> tags. The first <frame> tag would identify the file containing all of the HTML needed in the first (uppermost or leftmost) frame, and you would just keep working your way down or across the page, frame-by-frame, from there.
For example, let's say you wanted to divide the screen into three frames, arranged in rows. Suppose the first row will be 30 pixels tall and will hold a file named "logo.html."
Suppose further that the last row will be 65 pixels tall and will hold a file named "links.html."
And finally, let's say that the middle row will hold a file named "products.html" the height of this frame should be set to occupy any space remaining on the screen that is not occupied by the first and third rows.
The tags below will create the structure described in the paragraph above:
      <FRAMESET ROWS="30,*,65">  
      <FRAME SRC="logo.html">  
      <FRAME SRC="products.html">  
      <FRAME SRC="links.html">  
      </FRAMESET>

Chapter 5

Not all browsers support frames. Specifically, frames are only supported by Netscape Navigator version 2 (or greater) and the Microsoft Internet Explorer version 3 (or greater). Also, most search engines will not explore the documents referenced in your <FRAME> tags.
It is important, then, that you create the body of an alternate web page. This alternate page will benefit those who cannot see frames. This alternate page body should be tucked between a <NOFRAMES> tag and a </NOFRAMES> tag. If a browser can handle frames, it will ignore everything you type between the <NOFRAMES> and </NOFRAMES> tags. Such a browser would only display the frames as defined in your <FRAMESET> and <FRAME> tags.
But if a browser (or search engine) isn't frames-friendly, it will do the reverse--i.e., ignore the information between the <FRAMESET> and </FRAMESET> tags. Such a browser would only display the information you place between the <NOFRAMES> and </NOFRAMES> tags.
Because your browser probably can do frames, it will ignore everything you place between the <NOFRAMES> tags. If you want to see what the <NOFRAMES> page is going to look like, I recommend that you first create this page as a separate HTML file. Save it and view it through your browser. Once it looks good, select the body of the page with your mouse, and use your text editor's copy and paste functions to insert the body directly into your frame definition document (between the <NOFRAMES> and </NOFRAMES> tags.
Here's a very simple example of a page body that you can insert between <NOFRAMES> and </NOFRAMES> tags:
      <NOFRAMES>
      <BODY BGCOLOR="white" TEXT="black">
      <H3>Welcome!
      </H3>      
      <P><A HREF="catalog.html">      
      View our online catalog      
      </A></P>      
      <P><A HREF="prices.html">      
      Check our price list      
      </A></P>      
      <P><A HREF="contact.html">      
      Contact us      
      </A></P>      
      <P>If you're interested in our       
      products, give us a call...we're       
      in the book!</P>      
      </BODY>      
      </NOFRAMES>   
The Finished Frame Definition Document
Here's our finished page:
      <HTML>  
      <HEAD>  
      <TITLE>Super cool frames page</TITLE>  
      </HEAD> 
      <FRAMESET COLS="240,*">  
      <FRAME SRC="name.html">  
      <FRAME SRC="picture.html">  
      </FRAMESET> 
      <NOFRAMES>  
      <BODY BGCOLOR="white" TEXT="black">
      <H3>Welcome!</H3>  
      <P><A HREF="catalog.html">  
      View our online catalog  
      </A></P>  
      <P><A HREF="prices.html">  
      Check our price list  
      </A></P>  
      <P><A HREF="contact.html">  
      Contact us  
      </A></P>  
      <P>If you're interested in our   
      products, give us a call...we're   
      in the book!</P>  
      </BODY>  
      </NOFRAMES>  
      </HTML> 
That's it! In the next lesson, you'll learn how link targets and frames can help you improve site navigation. You'll also learn how to create a page with frames arranged into both rows AND columns simultaneously!

Chapter 6

-Quiz 3-
When you feel you have a grasp on all of the concepts taught within this lesson, I would like you to take a short, multiple choice quiz. To get to the quiz, click on 'Quizzes' on the menu bar. When the form comes up, input your last name, e-mail address, and password, and make sure you have 'Quiz 3' selected. Good luck!

-Bonus Assignment-

Create the <FRAMESET> and <FRAME> tags that would result in:

-Two frames, arranged horizontally in rows.

-The first frame, which should be 85 pixels tall, will hold a page named 'logo.html'

-The second frame, which should fill the rest of the browser window, will hold a page named 'main.html'

We're just talking about four lines of HTML code here. Don't worry about the HTML, HEAD, and NOFRAMES tags for this assignment.

The solution to this assignment is just below. No peeking until you're done! You don't need to turn this assignment in. Please post a message in the discussion area if you have any problems.

-Assignment Solution:-

<FRAMESET ROWS="85,*"> <FRAME SRC="logo.html"> <FRAME SRC="main.html"> </FRAMESET>

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.