LESSON 4: FRAMES
< Back to table of contents
<Previous lesson Next
lesson >
|
TODAY'S
SUGGESTED GOALS
Understand
the following concepts and terms: |
HTML RESOURCES MATERIAL FOR GETTING STARTED:
Online HTML Reference Guide
On the Web:
· Webmonkey (www.webmonkey.com)
· HTML writer's guild (www.hwg.org)
· CNET's Builder.com (builder.cnet.com)
· World Wide Web Consortium (www.w3c.org)
· Lynda.com (www.lynda.com)
Printed material:
Elizabeth Castro, HTML 4.0 for the World Wide Web:
Visual QuickStart Guide, PeachPit Press.
Frames in HTML
· Frames allow designers to put HTML pages inside other HTML pages. The
primary benefit of this is that they give designers the flexibility to create
dynamic fast-loading sites that allow users to access additional information
by updating a partial page.
· With frames, you ask the browsers to format several Web pages simultaneously
and put them together to look like a single Web page. To do this, you much create
a primary page, or Frameset, that will be very small. It will basically consist
of the outline for the windows that will hold the other pages.
· Frames are controversial and many designers will not consider designing
with them at all. Primarily this is because if they're used inappropriate, they
are confusing. But, users can't print an entire frameset - they must print each
frame at a time. Also, people can't bookmark individual frames, which also makes
it hard for browsers to find individual pages on a Web site outside the Frameset
page.
THE FRAMESET TAGS
<FRAMESET>
<FRAMESET> is the initial tag that alerts the browser to your intention
to divide your page into frames. The individual frames will be part of the set.
The frameset tag is where you tell the browser the dimensions of the frame windows.
You do this using the standard height and width attributes (remember that a
"*" within an HTML tag denotes the remainder of the available space.)
NOTE: A frame document has NO BODY, and any tags that would normally appear
in a <BODY> tag should appear before the <FRAMESET> tag.
<FRAME>
The individual frame tag is nested below the <FRAMESET> tag, and gives
the individual window its attributes. These include:
SRC="URL":
This attribute tells the browser the source of the page to fill the window of
the frame. Frames without source attributes are displayed as a blank space.
NAME="Window_name":
The NAME attribute is a crucial one when using frames. It names the window of
the frame, and allows you to target that window for future loading of new pages.
SCROLLING="no" or "yes":
Scrolling is also a very important control. You may want certain windows to
have scroll bars, such as those containing large blocks of text. Others, such
as left-hand navigational windows, you probably won't want to scroll, as you
will not want scroll bars to appear in the middle of your page.
Each frame contains a Web page. Any page that uses frames should have the Doctype
header at the top:
<!DOCTYPE HTML Public "-//W3C/DTD HTML 4.0 Frameset//EN">
Other FRAME and FRAMESET attributes:
MARGINWIDTH="w": where w is the desired amount of space in
pixels between the left and right edges of the frame and the frame's content.
MARGINHEIGHT="h": where h is the desired amount of space in
pixels between the top and bottom edges of the frame and the frame's content.
DEFAULT for both MARGINWIDTH and MARGINHEIGHT is 8 pixels
BORDER="n" where n is the size in pixels. (DEFAULT is five
pixels)
BORDERCOLOR="color" (hex or accepted color)
NO FRAMES
You should use <noframes> to set up your page for people with older browsers
or who turned frames off under their browser's preferences. Anything you type
inside this tag will be seen by the person who's got frames turned off. For
example:
<NOFRAMES>
<body>
This site uses frames. You will not be able to see the content of this site
unless you turn on frames.
</body>
</noframes>
</html>
LINKING WITH FRAMES
Say you want to add a link in the table of contents and have a new HTM doc open
up in the frame area:
The initial contents of the frame is given in the original frameset page with
the src tag. But, you can have other page appear in that same frame. First,
you need to make sure the target frame has a name. Then you add a pointer -
or target - to the links to those pages. The target says "open this link
in frame NAMED THIS."
On the page where the link should appear, type <a href= "page.htm">.
Then add target="name" where name is the reference given to the target
frame within the frame tag. The frame must have a name to be targeted.
Other types of targets besides names:
Target=_blank:
will have the link open a new blank window.
Target= _self
will open the link in the same frame that contains the link.
Target=_top:
opens the link in the current browser window but independently of the rest of
the frameset
Target=_parent:
to open the link in the frame that contains the current frameset.
Nesting Framesets
To nest a frameset to make a smaller set of frame windows within one of the
frames - you should insert a second complete frameset beneath the particular
frame you want to fragment. For example,
<HTML>
<HEAD>
<TITLE>Here's your first frame page</TITLE>
</HEAD>
<FRAMESET rows="100,600">
<FRAME SRC="cell01.htm" SCROLLING="NO" NAME="Cell
1" NORESIZE>
<FRAMESET COLS="33%,33%,33%">
<FRAME SRC="cell02.htm" SCROLLING="NO" NAME="Cell
2" NORESIZE>
<FRAME SRC="cell03.htm" SCROLLING="NO" NAME="Cell
3" NORESIZE>
<FRAME SRC="cell04.htm" SCROLLING="NO" NAME="Cell
4" NORESIZE>
</FRAMESET></FRAMESET>
</HTML>
