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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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,*".
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%".
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.
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.
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.
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 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.
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.
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.
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>.
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>.
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.
