Chapter 14
Using Netscape Frames
CONTENTS
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.
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.
- You can divide the window into vertical frames by using COLS
in place of ROWS in the <FRAMESET> tag.
- You can nest one <FRAMESET> tag inside of another to
create more complex frame layouts. You'll learn more about extending
frame layouts later in this chapter.
Figure 14.1 :
- Open a new document in Notepad, and type in <HTML>.
Press Enter, then type in <HEAD>. Press Enter again.
Figure 14.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 :
- 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 :
- 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 :
- 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 :
- 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 :
- Type <FRAMESET> and press Enter. Then type <
/HTML>.
Figure 14.8 :
- Save your document in Notepad as myframe.html.
Figure 14.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.
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.
- For more information on hyperlinks, refer back to Chapter
6.
- You can use _SELF in place of the actual target name if the
hyperlink updates the current frame. If most of your links update
the current frame, using _SELF can be easier than having to specify
the exact frame name each time.
Figure 14.10 :
- Frames are updated using targets. Targets are simply
hyperlink tag extensions that contain a frame name. Targets specify
which frame the hyperlink should update.
- 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 :
- Type <HEAD> and press Enter. Then type <TITLE>Document
A</TITLE> and press Enter. Finally, type </HEAD>
and press Enter again.
Figure 14.12 :
- Type <BODY> and press Enter. Then type <H1>Document
A</H1> and press Enter.
Figure 14.13 :
- Type <P> to start your first paragraph. Then
type Top Frame: and press Enter.
Figure 14.14 :
- 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 :
- 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 :
- Type <BR> to force a line break and press enter.
Then type Middle Frame: and press Enter again.
Figure 14.17 :
- 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 :
- 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 :
- Type </BODY> and then press Enter. Then type
</HTML>.
Figure 14.20 :
- 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 :
- 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 :
- 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 :
- Choose Save from the File menu to save the changes to myframe.html.
Figure 14.24:
- 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:
- 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:
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.
- Avoid setting frames with absolute sizes. You have no control
over the overall size of the user's Web browser, and your specified
absolute sizes may be adjusted to values you did not anticipate.
Use relative and percentage sizes whenever possible. If you must
use an absolute size for one of your frames, be sure to use relative
sizes for the others.
- If you want to create text that can be viewed by browsers
that do not support frames, place a <NOFRAMES> and </NOFRAMES>
tag pair between the <FRAMESET> and </FRAMESET> tag
pair. Any HTML code that you place between the <NOFRAMES>
tags will be ignored by frames-capable browsers. This will allow
you to place a warning as well as a link to a version of your
HTML document that does not require frames-capable browsers.
- Open your frame document, myframe.html, in Notepad.
Figure 14.27:
- 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:
- 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:
- 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:
- 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:
- 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:
- 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:
- 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:
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.
- You can learn even more about Netscape frames by reading the
Netscape online documentation at http://home.netscape.com/assist/net_sites/frame_syntax.html.
- You can nest as many layers of frames as you like, but keep
in mind that too many frames will make the HTML documents inside
difficult to read and navigate. In practice, it's usually a good
idea to only have two frame layers at most.
Figure 14.35:
- Open a new document in Notepad, and type in the lines as shown.
Figure 14.36:
- Type <FRAMESET ROWS="*,*"> to divide
the screen into two frames. Then press Enter.
Figure 14.37:
- 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:
- 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:
- 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:
- 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:
- 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:
- 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.