You may read the
following sections in their entirety
or use
these choices to go directly to a section.
INTRODUCING FRAMES and FRAMES IN ROWS
This page has two frames. They are:
(1) the top frame with only "LESSON THIRTEEN - FRAMES" written in it; and
(2) the larger frame that you are reading in now.
Since all browsers do not support fancy fonts, the title
"LESSON THIRTEEN - FRAMES" in the top frame is a simple .gif image
created using Paint Shop Pro and choosing one of its fonts.
Frames will be easier to understand if you understand how HTML TABLES work. I
will assume that you have read or know the material in Lessons 11 and 12
on tables. On this browser screen, the frames are set up like a table
with two rows as in:
With frames you are not writing web pages in the traditional sense. What
you are in fact doing is creating a template where more that one web page
can sit. Frame commands allow you to display more than one web page
at the same time on the browser screen. In other words, each frame
contains its own web page. In addition, you also need a separate document
that creates the frames. So for you to view this screen, I had to make
up three pages:
(1) the HTML document that creates the frames
(that is, the document that creates the template for the frames)
(2) the document that goes into the top frame (I named it "frame1.htm")
(3) the document that goes into the lower frame (I named it "frame2.htm")
Here is the complete HTML document that created these two frames:
<HTML>
<HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<NOFRAMES>Sorry, but your browser does not support
frames. <A HREF="Normal13.htm">Please click here to see this lesson without frames.</A></NOFRAMES>
<FRAME SRC="frame1.htm" NORESIZE SCROLLING="NO">
<FRAME SRC="frame2.htm">
</FRAMESET>
</HTML>
Problem 1:What appears to be missing in these statements?
Here is a discussion on these statements:
- The FRAMESET element defines a set of frames that will make up the
browser window. The ROWS attribute defines two frames to be set up in rows
(as opposed to columns). The value of the ROWS attribute is "20%,80%".
This value states that there are to be two rows of frames (one frame
per row). The top frame is to have a "height" of 20% of the browser screen
and the bottom frame to take up the remaining 80% space. In other words,
I wanted a small frame at the top
of the screen (to only display "LESSON THIRTEEN - FRAMES") and one larger
frame below to display this lesson. Instead of using percentages,
the ROWS attribute can also be expressed in pixels or as a relative
size (*). As a relative size, it would be ROWS="20%,*". The "*" means
whatever percent is left.
- FRAMESET is a container element which means that everything
contained between the opening and closing tags (<FRAMESET> and
</FRAMESET>) is part of the frame setup.
- The FRAMESET tag is used instead of the BODY tag. Your frames will
not work if you include the BODY element (try it).
- If for some reason, a viewer is using a browser or a technology that does not support frames, you need to consider having an alternate page just
for those browsers.
If a browser does not support frames, the message between the NOFRAMES tags will be displayed. If you do not include the NOFRAMES
container element, these browsers will either give an error code
or simply display a blank page. Note: you can include the BODY element
inside the NOFRAMES tags.
- The FRAME tag denotes what goes into the frame. The SRC
attribute specifies the source file (or source document) for the frame.
Since I only have two frames in this example, I only need two FRAME
tags. Row frames are set up from top to bottom.
In our example, the web page that goes into
the top frame is called "frame1.htm" and the web page that goes into
the bottom frame is called "frame2.htm". If for some reason you want
a page somewhere in the WWW to go into a frame, be sure to include the
complete URL of the web page.
- For the top frame, I added two attributes to the FRAME tag:
- The NORESIZE attribute to prevent the viewer from resizing the frame
(try resizing the frame). Note that I did not use the NORESIZE attribute
for the bottom frame so the viewer will be able to resize this frame (try it).
- SCROLLING="NO" will prevent a scroll bar from being displayed. Note that
there is no scroll bar in the "Lesson Thirteen" title frame. Other
values are "YES" (put in a scroll bar) and "AUTO" (let the browser
determine if a scroll bar is needed). Note in the second FRAME tag,
I do not have a SCROLLING attribute and there is a scroll bar on the
right side of the frame. In other words, if you do not specify a scroll
bar, the browser will place one if needed.
- Since each frame represents a web page, you can do whatever is
allowed with web pages, such as inserting images, links to other
web pages, etc.
| top | | bottom |
LEAVING THE FRAMES PAGE
If you use links in a frames window, the web page that you are linking
to will appear in the frame when the viewer clicks on the link. For example, if you click on the
statement below, my alternate home page will load into this frame. Try it and
when you have seen enough click on the BACK button to return to this
page.
Send me to the alternate home
page
The problem is you are still in the frames window. When
you are ready to leave this web page to go on to the next
lesson or to go back to one of my home pages, you also want to leave
this frames page. In other words, you want the link to load the
web page with no frames. To do this, simply add the TARGET attribute
with the value "_top" to the URL. For example, to go to my
alternate home page and at the same time eliminate the frames, it is:
<A HREF="altern.htm" TARGET="_top">
Note the underline before the word "top". It must be there.
The TARGET attribute
targets the hypertext link to be its own web page. To see this, click
on the following sentence and the alternate home page will be loaded
with no frames. Again, click the BACK button to return here.
Send me to
the alternate home page
Problem 2: Suppose you want three rows of frames instead of two rows
with the condition that the top frame is to be 20% in height, and the
middle frame 30%. What is the FRAMESET tag for this situation?
Problem 3: Repeat Problem 2 but with the condition that each frame is
to occupy the same space on the screen (that is, each frame is take
up one third of the screen).
| top | | bottom |
FRAMES IN COLUMNS
Instead of having two (or more) rows of frames, suppose you want two
(or more) columns of frames? For example, suppose you want the layout
of frames to be:
Well, all you need to do is replace the ROWS attribute with the
COLS attribute and use whatever percentages required to suit your needs. For example,
if you want the two frames to be equal in size, it would be:
<FRAMESET COLS="50%,50%">
Columns frames are generated from left to right. So if you want
the left frame to be 30% of the width of the screen, the FRAMESET tag
would be:
<FRAMESET COLS="30%,70%">
| top | | bottom |
ROW AND COLUMN FRAMES MIXED
TOGETHER
Suppose you want the browser screen configuration to look approximately
like the following:
| frame 1 |
frame 3 |
| frame 4 |
| frame 2 |
frame 5 |
Having this many frames can be quite messy as the browser screen is
only so big. However, this is a learning experience and you can adapt
these thoughts to your particular needs. To see this configuration
in action, just click here and
then click the BACK button to return here.
Here is the complete HTML document to accomplish this. We will leave out
the NOFRAMES, NORESIZE and SCROLLING attributes. You can of course
include them in your own applications - especially the NOFRAMES attribute.
I have also numbered the lines for discussion purposes.
Line1: <HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
Line2: <FRAMESET COLS="50%,50%">
Line3: <FRAMESET ROWS="75%,25%">
Line4: <FRAME SRC="Lesson1.htm">
Line5: <FRAME SRC="Lesson2.htm">
Line6: </FRAMESET>
Line7: <FRAMESET ROWS="33%,33%,33%">
Line8: <FRAME SRC="Lesson3.htm">
Line9: <FRAME SRC="Lesson4.htm">
Line10: <FRAME SRC="Lesson5.htm">
Line11: </FRAMESET>
Line12: </FRAMESET>
Line13: </HTML>
Discussion:
- Note that there is no BODY tag. Remember that the FRAMESET tag takes
the place of the BODY tag.
- Since this configuration of frames consists of 2 equally sized columns
of frames, we will first set up the two columns of frames (line 2) with each
column one half or 50% of the screen width. We then divide
each column into row frames beginning with the left column.
- Now in the left column, we want two rows - that is, two frames.
Lines 3 to 6 take care of this. As indicated, the top frame is to take up
75% of the column and the lower frame is to take up the remaining 25% (line 3).
- Line 4 places my Lesson One in the top left frame and line 5 places
Lesson Two in the lower left frame. This completes
the first column of frames. That is, we are finished setting up the two
rows of frames in the first column as indicated in line 6.
- We are now in the second column of frames. Line 7 sets up three
frames to
go into this column, with each frame being 33% (or one-third of the column).
Although 33%+33%+33% only adds to 99%, we learned
earlier in this lesson that the browser will take the remaining 1%
and distribute it over these three sizes.
- We now need to place web pages into these three frames and they will be
placed going from top to bottom. Thus Lesson Three will be placed
in the top frame (line 8), Lesson Four in the middle frame (line 9)
and Lesson Five in the bottom frame (line 10). This completes the
three rows in this second column of frames.
- Line 11 closes these three rows of frames.
- We are now finished with setting up the two columns and line 12
ends setting up the two columns of frames that were opened in line 2. Remember
that we need an ending tag for each opening tag and that the tags
cannot overlap.
- To make any particular frame active, just click inside that frame. For
example, if you want to print out the contents of frame 2, then click
somewhere in frame 2 and then choose PRINT from the menu.
Problem 4: Make up the web page that will produce the following
configuration of frames. Make up your own filenames and use 50% for all
values.
To see this configuration in action, click
here and when you are finished observing the situation, click the BACK
button to return here.
Problem 5: Make up the web page that will set up the following
configuration of frames. Again make up your own filenames and use 50%
for all values.
To see this configuration in action, click
here and when you are finished observing the situation, click the BACK
button to return here.
| top | | bottom |
SENDING INFORMATION FROM ONE FRAME TO ANOTHER
It is not uncommon to see two frames on the screen at the same time -
a smaller frame on the
left containing mainly links and a larger frame on the right to display
the information when a link is chosen. To see this configuration at work,
click here and when you are
finished testing the situation, click the BACK button to return here
(you may have to click it a few times depending on the amount of
testing).
In this example, the configuration is two columns as in:
In order for the browser to send a document to another frame, you
first need to name the frames. Lets name the frame on the left
"A" and the one on the right "B". The
complete HTML document that generated the frames and names is:
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="links.htm" NAME="A">
<FRAME SRC="showlink.htm" NAME="B">
</FRAMESET>
</HTML>
Note that the NAME attribute names the frames.
Here is the document "links.htm":
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<P>This is frame A. In this frame you see links. If you click on any link,
that is, on any lesson, that lesson will appear in frame B. Go ahead,
choose a lesson.
<P><A HREF="lesson1.htm" TARGET="B">Lesson One</A>
<P><A HREF="lesson2.htm" TARGET="B">Lesson Two</A>
<P><A HREF="lesson3.htm" TARGET="B">Lesson Three</A>
<P><A HREF="lesson4.htm" TARGET="B">Lesson Four</A>
</BODY></HTML>
Note that the TARGET attribute points to the frame named
"B" as the target to receive any
lesson clicked on.
Here is "showlink.htm":
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
This is frame B and will display the links from frame A.
</BODY></HTML>
Note that the above example will also work for any number of frames.
If you need three frames, just name them A, B and C.
| top | | bottom |
SUMMARY OF FRAMESET AND FRAME ATTRIBUTES
We used two container elements (FRAMESET and FRAME) and each have their
own attributes. We already studied a number of them but there are
also other attributes.
FRAMESET ATTRIBUTES
- BORDER=" " specifies the width in pixels of the border drawn around the
frames.
- COLS=" " creates the frames as columns. The width of
each column may be specified as a percent (%), in pixels, or in relative
size (*).
- FRAMEBORDER=" " specifies whether or not a 3-D border
is displayed around the frames. Possible values are 0 for no frame, or 1
which is the default value. (Internet Explorer only)
- FRAMESPACING=" " specifies the amount of space between
the frames in pixels.
- ROWS=" " creates the frames as rows. The height of each
row may be specified as a percent, in pixels, or in relative
size.
- SCROLLING=" " to determine whether or not scroll bars are
to be displayed on all the frames. Values are either "yes",
"no" or "auto".
FRAME ATTRIBUTES
- BORDER=" " specifies the width in pixels of the border drawn around the
frame.
- FRAMEBORDER=" " specifies whether or not a 3-D border
is displayed around the frame. Possible values are 0 for no frame, or 1
which is the default value. (Internet Explorer only)
- MARGINHEIGHT=" " specifies the top and bottom margins of
the frame in pixels
- MARGINWIDTH=" " specifies the left and right margins of
the frame in pixels
- NORESIZE
prevents the frame from being resized by the viewer
- SCROLLING=" " determines whether or not scroll bars are
to be displayed along the frame. Values are either "yes", "no" or "auto".
- SRC=" " specifies the source document to be placed in the
frame.
Also, don't forget the following two points:
- <NOFRAMES> and </NOFRAMES> tags to be placed inside
the FRAMESET tags. Anything placed between the NOFRAMES tags
is printed only by browsers not supporting frames.
- TARGET="_top" is to be used as part of the URL of a link to ensure
that the frames page is properly exited. For example,
<A HREF="http://www.html/index.htm" TARGET="_top">
allows the browser to exit the frames screen and load the web page
called "index.htm". Without the TARGET attribute,
"index.htm" will be loaded into the current frame.
| top | | bottom |
ANSWERS
- The BODY tags are missing. This is because the FRAMESET tag replaces
the BODY tag. If you put in a BODY tag, the frames won't work. You will
receive exactly the same error message or blank page that a browser
not supporting frames displays.
- If the first frame takes up 20% of the screen and the second frame takes up 30%,
then the third frame must take up 100%-20%-30% = 50%. Therefore the
FRAMESET tag is:
<FRAMESET ROWS="20%,30%,50%">
Now if you do not want to do the arithmetic, then use relative size
(*) and let the browser do the calculating as in:
<FRAMESET ROWS="20%,30%,*">
- 1/3 of 100% means that each frame is to take up 33 1/3% space.
However, browsers will allow the percents to add to 99 as well as to 100.
For example, one solution to the problem is:
<FRAMESET ROWS="33%,33%,33%">
This only adds to 99%. What the browser then does is take the remaining
one percent and distributes it over the three sizes.
- In this solution, we first set up two columns, and then split the
second column into two frames. Here is the complete HTML document:
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="webpage1.htm">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="webpage2.htm">
<FRAME SRC="webpage3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
where "webpage1.htm" represents the complete URL of the page to be
loaded into frame 1. Similarly "webpage2.htm" will be loaded into frame 2
and "webpage3.htm" into frame 3.
- This answer is similar to the answer to Problem 4. In Problem 4,
we first set up two column frames and then split the second column into
two row frames. In this answer, we first set up two row frames and then split
the second row into two column frames. Here is the HTML document that solves
this problem:
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="webpage1.htm">
<FRAMESET COLS="50%,50%">
<FRAME SRC="webpage2.htm">
<FRAME SRC="webpage3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
The information contained in these free 21 lessons is Copyright ©, Brantford
Educational Services, 1997 - 2012 by local and international copyright laws.
All rights reserved. It is therefore illegal to copy these lessons into
another website. If you find a copyright violation, please report
it to htmltutorials@bfree.on.ca