|
Frames
Frames allow you to display more than
one HTML page at the same time. Clicking on a link in one
frame can change the contents of another frame. Here are
some examples of pages with frames:
How Frames Work
Instead of the <BODY> tag that
introduces the content of the HTML page, a page in Frames
uses the tag <FRAMESET> to split the browser window
and display 2 or more HTML pages at the same time.
In this example, the HTML page left.htm
contains navigation links, while the page frontpage.htm
is a separate HTML file that is displayed next to left.htm
in the browser window.
The file default.htm is the file with
the code for the frameset. So, for a 2 page frameset like
this one, you really need 3 pages. You need left.htm for
the navigation, frontpage.htm for the page content and then
you need a third page (in this case default.htm) that first
puts the pages into the frameset.
Frameset Tags
A Frame Document has a basic structure
very much like your normal HTML document, except
the BODY container is replaced by a FRAMESET container which
describes the sub-HTML documents, or Frames, that will make
up the page.
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
- The tag <frameset> is
the main container for a Frame.
- It has 2 attributes ROWS and
COLS.
- A frame document has no BODY,
and no tags that would normally be placed in the BODY
can appear before the FRAMESET tag, or the FRAMESET will
be ignored.
- The FRAMESET tag has a matching
end tag, and within the FRAMESET you can only have other
nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.
See examples
of different framesets and the HTML code.
Building an example site
with frames
A
Web Site Dedicated to Fine Cheeses
If you were to build a site in frames,
first you would make the separate HTML pages that make up
the frameset. In the above example, we would create left.htm
as our navigation page that hold links to all of the pages
in the site. Then we would create the splash page, or whatever
content we would like to display as part of the first page
viewers see.
 Create
the navigation page, left.htm
that will contain links to all of the pages in the site.
 Next,
create the "front page" or whatever you want to
show when the viewer first visits the site's home page.
In this example, the main content page, firstpage.htm
is a picture of wine and cheese and a heading describing
the site.
 Now
you will create the frameset page. Since this page will
contain the code that sets up the frameset, it is called
default.htm because it is the first page. The other pages
left.htm and firstpage.htm are the pages displayed within
default.htm.
This is the HTML for default.htm
<html>
<head>
<title>Fine Cheeses Web Site</title>
</head>
<frameset cols="140,*" rows="*"
frameborder="YES">
<frame src="left.htm" name="left"
scrolling="NO">
<frame src="firstpage.htm" name="right">
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">Sorry,
you can't view frames with your browser.</body></noframes>
</html>
In this code, the frameset tag specifies
columns (this will split side by side or left and right)
instead of rows (which splits top and bottom).
<frameset cols="140,*" rows="*"
frameborder="YES">
This line splits the page into 2 side
by side columns. The asterick means "whatever is left
over" so in this case, the left frame will be 140 pixels
wide and the right frame fills whatever portion is left
of the window. There will also be a border to this page.
The next 2 lines point to the HTML pages
that will occupy the space defined by the frameset (140
pixels wide for one page, whatever is left over for the
other).
Each frame must have a name! Frames
work by targetting other windows within the browser. This
is only possible if you name them.
<frame src="left.htm" name="left"
scrolling="NO">
<frame src="firstpage.htm" name="right">
There is also the tag <NOFRAMES>
and you will notice that the body tag comes after. This
is used in case someone is using a browser that cannot recognize
frames. Perhaps someone is surfing the Web with a palm pilot
or cell phone, for example and it cannot display the content.
After you have set up your frameset
page, you can continue making all of the pages in the site
that will load into the right window after clicking a link
on the left. These are all regular HTML pages without the
navigation.
 To
make your links, open the navigation page (left.htm in this
case) and create links like you normally would with the
exception of an additional attribute. To open a page in
a blank browser window you would use target="_blank"
so to open a page in your targeted window, the target name
must be the same as the name you gave to that frame in the
frameset page. In this case, the frame was named "right"
<a href="firstpage.htm" target="right">Home</a>
<a href="swiss.htm" target="right">Swiss</a>
<a href="feta.htm" target="right">Feta</a>
What would happen if you linked to the
Home page by linking to default.htm instead of firstpage.htm?
<a href="default.htm" target="right">Home</a>
 Click
on Home and see
what happens
Customizing the way framed
pages appear
If a page in a frameset, like all HTML
pages, is too long to fit in the browser window, then a
grey scrollbar to the right of the page will appear. Just
by making a page long, you can force a scrollbar to appear.
You can also force a scrollbar to not appear. Say you don't
want a scrollbar on your navigation frame, you can add an
attribute:
<frame src="left.htm" name="left"
scrolling="NO">
You can also prevent the user from being
able to resize your frameset
<frame src="left.htm" name="left"
scrolling="NO" noresize>
Advantages and Disadvantages
to using Frames
One advantage to making a site in a
frameset is that you only have to make one page with the
navigation and then just load content pages into the other
frame.
However, there are plenty of disadvantages,
such as:
- Search engines will pick up
all of the pages in the site, so if someone searches for
Provolone they might access this
page. Seeing a page outside of its frameset is useless,
there is no way to navigate.
- The URL of a frameset doesn't change,
so you can't book mark or link to specific pages in a
frameset.
Dreamweaver makes it easier to create
a page in frames.
Maybe you can find a way to use frames
in a creative or non-traditional way for your Web Art and
JavaScript assignment
|
