Frames: Allow a way to multiple URL's on a
"single" web page. There are
three main tags: <frameset>, <frame> and <noframes>. Note: The proper nesting of commands is
important. Don't forget to check out
the example f-main.html
in the EECS 101 web directory.
<frameset>
</frameset>
- attributes: rows, cols
The main purpose of this tag is to divide the screen into
multiple areas. The screen can be
divided into multiple rows or multiple columns. In order to get both rows and columns, we would need to nest
multiple <frameset> tags. One to
divide into rows/columns, the other to divide each row/column into
columns/rows. The rows and cols
attribute takes list of an integer values, a percent values or an *, which will
specify the number of rows or columns and the height of each rows or the width
of each columns. The * is used to
indicates the remaining space for the last row or column.
<frame> - attributes: src, name (plus
others that will not be covered here)
This tag allows you to assign a URL to an area and also
to assign a name to that area. The name
is only referenced with the target attribute of the <a> tag (see below).
<noframes>
</noframes>
- attributes: none
This tag allows a "warning message" to be
displayed if the user's web browser doesn't accept frames.
<a></a> - new attribute: target
This new attribute allows a link in one frame to change
the content in another frame. The value
of the target attribute should be the value of the name attribute from the
<frame> tag of the frame in which you wish the URL to appear. There are also four predefined target
values:
• _blank Load
the URL into a new unnamed window.
• _self Load
the URL into the current frame (this is the default).
• _parent Remove
the most recent frames and load the URL.
This only makes sense if you have
a framed page inside of another framed page.
• _top Remove
all existing frames and load the URL.
In the WWW directory of the i101 account, there are six
files: red.html, green.html, blue.html, white.html, black.html and gray.html. You may wish to copy these files over to
your own WWW directory.
• Create a frameset with two frames, one
context area and one menu area.
• The menu area is to control the color
displayed in the context area. To do
this, create two HTML files for the menu area.
Each of these HTML menu files will have five links:
• The first three links in the first menu
file will cause the context area to display the file red.html, green.html or
blue.html respectively.
• The first three links in the second menu
file will cause the context area to display the file white.html, black.html or
gray.html respectively.
• The fourth link in the first menu file will
cause the menu area to display the second menu file, while the fourth link in
the second menu file will cause the menu area to display the first menu file.
• The fifth link on both menu files should
replace all of the frames with your own home page (or some other web page of
your choice).
• It doesn't matter which color is initially
displayed in the context area, nor which menu is initially displayed in the
menu area.
Lab Assignment
Using
the Digital Drop Box in CourseInfo, turn in the three hmtl files that were
described above (the file with the <frameset> tag(s) and both menu
files). These files should be zipped
together.
To
zip files together when submitting to the Digital Drop Box, use the following
steps:
Further things to try:
• Copy the frameset page that you created for
the lab assignment. Edit the
<frameset> tag so that if the frames originally appeared side-by-side,
they should now appear above and below.
If the frames originally appeared above and below each other, they
should now appear side-by-side. Which
layout looks better to you?