Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 14 -- Using Netscape Frames

Chapter 14

Using Netscape Frames


One of the most significant developments that Netscape has contributed is the introduction of frames. Using frames gives you the power to divide the reader's browser window into multiple panes. You can display different HTML documents in each. More importantly, you can control the display of one frame from another.

This allows you to create banners, menus, and button bars that don't scroll off the page. For example, you could create a frame for your company logo at the top of the page and a frame for a button bar for navigation at the bottom. A third frame in the middle of the page would display the actual contents of the HTML documents. The top and bottom frames would never disappear from view.

There are a lot of possibilities with frames, and in this chapter, you'll learn the basics of using frames with Netscape browsers. Understanding how to use frames requires some new ways of thinking about HTML documents. If things start to get a little confusing, be patient and take time to reread each section. With a little practice, you'll be working wonders with HTML and frames.

How to Create Frame Documents

The first thing to understand about frames is that they use an entirely new kind of HTML document, called a frame document. Frame documents control the layout and appearance of the frames. Frame documents don't contain any other HTML content.

Once you've built your frame document, you can fill the frames with regular HTML documents. But before we get too far ahead of ourselves, let's concentrate on creating a very simple set of frames.

In this section, we'll create an empty frame document. Actually, the frame document is not empty. It will only appear empty when viewed with the browser, because we won't be putting any regular HTML documents inside. This section will give you a chance to understand how frame layout works.

Tip Sheet

  1. Open a new document in Notepad, and type in <HTML>. Press Enter, then type in <HEAD>. Press Enter again.

    Figure 14.2 :

  2. Type <TITLE>My First Frame Document</TITLE>, then press Enter. On the next line, type </HEAD> and press Enter one more time.

    Figure 14.3 :

  3. So far, this looks just like a normal HTML document. Here's where things get different, though. Instead of typing <BODY>, type <FRAMESET>. The <FRAMESET> tag instructs Netscape that this is a frame layout document.

    Figure 14.4 :

  4. Place the cursor inside the <FRAMESET> tag and type ROWS="*,*,*". This creates three horizontal frames of equal relative height. The asterisk character instructs the browser to give the frame all the remaining space in the window. Because there are three asterisks, Netscape will give each frame one-third of the available space.

    Figure 14.5 :

  5. On the next line, type <FRAME NAME=frame1 SRC="blank.html">. This assigns the name frame1 to the first frame in your document. The SRC attribute tells the browser to display the HTML document named blank.html in this frame. Normally, you would place a real HTML document in the SRC attribute. For this example, we'll just use blank.html, a made-up file name that doesn't really exist. Press Enter when you're finished.

    Figure 14.6 :

  6. Type <FRAME NAME=frame2 SRC="blank.html"> and then press Enter. On the next line, type <FRAME NAME=frame3 SRC="blank.html"> and press Enter again. Now we've created three empty named frames.

    Figure 14.7 :

  7. Type <FRAMESET> and press Enter. Then type < /HTML>.

    Figure 14.8 :

  8. Save your document in Notepad as myframe.html.

    Figure 14.9 :

  9. You have now created a very simple frame document that contains three empty frames. If this document were viewed in Netscape, it would look exactly like the document shown in the monitor in the center of the page. It may not look like much right now, but in the next section, you'll learn how to make your frames come alive.

How to Use Targets in Frames

Now that you've created a frame document, you're ready to start filling those frames with HTML content. In this section you'll learn how to place HTML documents in frames. More importantly, you'll learn how to update frames with new documents, including how to update the contents of one frame from another.

Tip Sheet

  1. Frames are updated using targets. Targets are simply hyperlink tag extensions that contain a frame name. Targets specify which frame the hyperlink should update.
  2. Before we go any further, we'll need to create a few HTML documents that contain hyperlinks using targets. Launch Notepad and open a new document. Then type <HTML> and press Enter.

    Figure 14.11 :

  3. Type <HEAD> and press Enter. Then type <TITLE>Document A</TITLE> and press Enter. Finally, type </HEAD> and press Enter again.

    Figure 14.12 :

  4. Type <BODY> and press Enter. Then type <H1>Document A</H1> and press Enter.

    Figure 14.13 :

  5. Type <P> to start your first paragraph. Then type Top Frame: and press Enter.

    Figure 14.14 :

  6. Here's where we'll start placing hyperlinks with target attributes. These three hyperlinks will allow the user to display different documents in the top frame. Type <A HREF="a.html" TARGET="frame1">A</A>. This link will load a.html (the document you're creating right now) into the frame named frame1. In the frame document you created in the last section, frame1 was the top frame.

    Figure 14.15 :

  7. Press Enter, then type <A HREF="b.html" TARGET="frame1">B</A>. This link will load a document named b.html into the top frame. Press Enter again and then type <A HREF="c.html" TARGET="frame1">C</A>. As you've probably guessed by now, this hyperlink will load c.html into the top frame. Press Enter again.

    Figure 14.16 :

  8. Type <BR> to force a line break and press enter. Then type Middle Frame: and press Enter again.

    Figure 14.17 :

  9. Type in all three hyperlinks again, only this time, change the target to frame2. This will instruct the browser to load the documents into the middle frame.

    Figure 14.18 :

  10. When you're finished, type <BR> to force another line break and press Enter. Then type Bottom Frame: and press Enter again. Type in the hyperlinks again, with the target set to frame3. When you're finished, press Enter and type </P> to close the paragraph. Then press Enter again.

    Figure 14.19 :

  11. Type </BODY> and then press Enter. Then type </HTML>.

    Figure 14.20 :

  12. Save this document as a.html. Make sure that you save it in the same folder as myframe.html, which you created in the last section.

    Figure 14.21 :

  13. Repeat this process two more times, and save the files as b.html and c.html. To save a lot of typing, you can simply change the <TITLE> and <H1> tags at the top of the document and save the existing file under a new name. Just choose Save As from the File menu and type in the new file name.

    Figure 14.22 :

  14. Open myframe.html in Notepad. Place the cursor inside the SRC attribute of the first <FRAME> tag, and change the URL from blank.html to a.html. Change the URLs for the next two <FRAME> tags to b.html and c.html, respectively.

    Figure 14.23 :

  15. Choose Save from the File menu to save the changes to myframe.html.

    Figure 14.24:

  16. Launch Netscape and open myframe.html. Three frames will appear. Each of your three HTML documents, A, B, and C, will appear in a different frame.

    Figure 14.25:

  17. Now try clicking on the different hyperlinks and see what happens. You can load A, B, and C into any of the three frames. You can even fill all three frames with the same document.

    Figure 14.26:

Extending Your Frames

In the beginning of this chapter, you learned how to create a very simple frame document. Now we'll take a look at the attributes you can include inside the <FRAMESET> and <FRAME> tags to gain finer control over the layout and appearance of your frames.

Tip Sheet

  1. Open your frame document, myframe.html, in Notepad.

    Figure 14.27:

  2. The current <FRAMESET> tag specifies that three horizontal frames, also known as Rows, of equal relative size should be created. You can change the horizontal frames to vertical ones by replacing ROWS with COLS.

    Figure 14.28:

  3. The asterisks indicate relative sizes for each frame. Currently, each frame has a relative size of 1. You can change the relative size of any frame by placing a number in front of the asterisk for that row. For example, replace ROWS="*,*,*" with ROWS="*,2,*" to make the middle frame twice as big as the other two frames.

    Figure 14.29:

  4. You can specify an absolute size for each frame by replacing the asterisk with a number. This number specifies the size of the frame in pixels. The browser will attempt to size the row to your specification, but it may adjust the size in order to fit all of the frames into the browser window. To specify an absolute size for the middle frame, type ROWS="*,25,*".

    Figure 14.30:

  5. You can also specify the frame size as a percentage of the overall window size. For example, you can set the three frames using percentages by typing ROWS="10%,60%,30%".

    Figure 14.31:

  6. Frames automatically appear with scroll bars inside when necessary, so that users can scroll through the contents of each frame. If you want a frame to be nonscrolling, type SCROLLING="no" inside the individual <FRAME> tag. If scroll bars are disabled, the user may not be able to read all of the contents in the frame.

    Figure 14.32:

  7. Frames are also usually resizeable. The user can ad-just the size of the frame by clicking and dragging on the frame's border. You can prevent frame resiz-ing by including the NORESIZE attribute inside the <FRAME> tag.

    Figure 14.33:

  8. Frames are also usually resizeable. The user can adjust the size of the frame by clicking and dragging on the frame's border. You can prevent frame resizing by in-cluding the NORESIZE attribute inside the <FRAME> tag.

    Figure 14.34:

How to Create Nested Frames

You have already learned how to create frame documents, fill them with HTML content, and target them with hyperlinks. However, there is still one cool frame trick that we haven't covered yet-nesting frames. It is possible to nest <FRAMESET> tag pairs to create frames within frames. In this section, you'll learn how it's done.

Tip Sheet

  1. Open a new document in Notepad, and type in the lines as shown.

    Figure 14.36:

  2. Type <FRAMESET ROWS="*,*"> to divide the screen into two frames. Then press Enter.

    Figure 14.37:

  3. Type <FRAME SRC="a.html" NAME=frame1>. This will place the document a.html in the top frame. Now press Enter again.

    Figure 14.38:

  4. Instead of inserting another <FRAME> tag, we'll nest another <FRAMESET> tag pair, using COLS instead of ROWS. This will have the effect of splitting the bottom frame into two separate frames. Type <FRAMESET COLS="*,*"> and press Enter.

    Figure 14.39:

  5. Now, we'll create the frame declarations for the two nested frames. Type <FRAME SRC="b.html" NAME=frame2>. Then press Enter and type <FRAME SRC="c.html" NAME=frame3>. Then press Enter again.

    Figure 14.40:

  6. Close the nested <FRAMESET> tag by typing </FRAMESET>, and then press Enter. Then close the first <FRAMESET> tag by typing <FRAMESET> again and pressing Enter. When you're finished, type </HTML>.

    Figure 14.41:

  7. Close the nested <FRAMESET> tag by typing </FRAMESET>, and then press Enter. Then close the first <FRAMESET> tag by typing <FRAMESET> again and pressing Enter. When you're finished, type </HTML>.

    Figure 14.42:

  8. If you open newframe.html in Netscape, you'll notice that it looks a lot like the first frame document you created, but with one major difference: The bottom two frames are now aligned side by side instead of one on top of the other.