Download HTML Frames

Chapter 8
HTML Frames
Principles of Web Design
Chapter 8
Objectives
• Understand the benefits and drawbacks of
frames
• Understand and use frames syntax
• Customize frame characteristics including
scroll bars, borders, and margins
• Understand and use frame targeting and
special targeting names
• Design content to properly fit framesets
2
Principles of Web Design
Chapter 8
Objectives
• Design framesets that accommodate different
screen resolutions
• Design content to properly fit framesets
• Design framesets that accommodate different
screen resolutions
3
Principles of Web Design
Chapter 8
Understanding Frames
• Frames allow you to divide the browser
window into independent windows, each
displaying a separate HTML document
4
Principles of Web Design
Chapter 8
5
Principles of Web Design
Chapter 8
Frame Benefits
• Frames allow users to scroll independently in
one frame without affecting the contents of an
adjoining frame
• Frames are an ideal way to present large
collections of information that are hard to
navigate using traditional single-page
browser display
6
Principles of Web Design
Chapter 8
7
Principles of Web Design
Chapter 8
Frame Drawbacks
•
•
•
•
Inaccurate bookmarking
Download overhead
Visual and navigation confusion
Poor indexing with search engines
8
Principles of Web Design
Chapter 8
Frame Syntax
Two-row frame set:
<FRAMESET ROWS=”50%,50%”>
<FRAME SRC=”top.htm”>
<FRAME SRC=”bottom.htm”>
</FRAMESET>
9
Principles of Web Design
Chapter 8
10
Principles of Web Design
Chapter 8
Frame Syntax
Two-column frame set:
<FRAMESET COLS=”150,*”>
<FRAME SRC=”left.htm”>
<FRAME SRC=”right.htm”>
</FRAMESET>
11
Principles of Web Design
Chapter 8
12
Principles of Web Design
Chapter 8
Frame Syntax
Nested frame set:
<FRAMESET ROWS="40,*">
<FRAME SRC="topnav.htm">
<FRAMESET COLS="20%,80%">
<FRAME SRC="left.htm">
<FRAME SRC="right.htm">
</FRAMESET>
</FRAMESET>
13
Principles of Web Design
Chapter 8
14
Principles of Web Design
Chapter 8
Restricting Resizing
• By default, the user has the option of resizing
your frames by clicking and dragging the
frame border
• In most situations you probably want to
restrict resizing, so that the user sees the
frameset the way you intended
• To restrict resizing, add the NORESIZE
attribute to the <SRC> elements in your
frameset
15
Principles of Web Design
Chapter 8
16
Principles of Web Design
Chapter 8
Controlling Scroll Bars
• By default, scroll bars in frames are set to
appear automatically when needed if the
content is not accessible within the frame
window
• Remove the scroll bar by adding the
SCROLLING=NO attribute to the <SRC>
element
17
Principles of Web Design
Chapter 8
18
Principles of Web Design
Chapter 8
19
Principles of Web Design
Chapter 8
Controlling Frame Borders
• As with tables, you can choose not to display
frame borders, or to remove the default
border spacing between frames entirely
• This technique lets you create seamless
frames with no visible dividing line (unless a
scroll bar pops up)
• To remove frame borders, add
FRAMEBORDER=NO FRAMESPACING=0
BORDER=0 to the <FRAMESET> tag
20
Principles of Web Design
Chapter 8
21
Principles of Web Design
Chapter 8
Removing Frame Margins
• Two frame attributes let you control the pixel
width of both the vertical and horizontal
margins in a frame
• MARGINWIDTH lets you control the left and
right margin, while MARGINHEIGHT affects
the top and bottom margins
• Setting these attributes to 0 lets you remove
the margins entirely, allowing your content to
touch the sides of the frame
22
Principles of Web Design
Chapter 8
23
Principles of Web Design
Chapter 8
Frame Targeting
• By default, a link loads into the same frame
from which it was selected.
• You can change this default behavior and
target the destination of a link to another
frame in the frameset
24
Principles of Web Design
Chapter 8
25
Principles of Web Design
Chapter 8
Frame Targeting
To target from one frame to another, you must
perform two tasks:
1. Name your frames using the NAME attribute
in the FRAME element
2. Target links to display their content in the
named frame
26
Principles of Web Design
Chapter 8
Naming Frames
• To name a frame, add the NAME attribute to
the <FRAME> element
• You do not have to name all of the frames
within a frameset, only the frames you want
to target
<FRAME SRC="article1.htm"
NAME="content">
27
Principles of Web Design
Chapter 8
Targeting Named Frames
• To target the named frame you must edit the
HTML document that contains the <A>
elements and provide TARGET attributes
that tell the browser which frame displays the
content
• You can use the TARGET attribute in either
the <BASE> or <A> elements
28
Principles of Web Design
Chapter 8
Targeting Named Frames
• Adding the <BASE> element lets you set the
default target frame for all of the links in the
document
<BASE TARGET="main">
• You can override a default base target by
using the TARGET attribute in the <A>
element
<A HREF="article1.htm"
TARGET=”frame2”>Article 1</A>
29
Principles of Web Design
Chapter 8
30
Principles of Web Design
Chapter 8
Using Special Target Names
• There are four special target names that you
can use with the TARGET attribute in either
the <BASE> or <A> elements
• Notice that all of these special names begin
with an underscore. Any other target name
that begins with an underscore will be ignored
by the browser
31
Principles of Web Design
Chapter 8
32
Principles of Web Design
Chapter 8
33
Principles of Web Design
Chapter 8
Using _blank
• The _blank special target name lets you load
the linked content into a new instance of
Netscape
• Notice that the Back button is not available in
the new browser window because this is the
first page in the new window. Not being able
to use Back can be disorienting to users who
rely on it for navigation
34
Principles of Web Design
Chapter 8
35
Principles of Web Design
Chapter 8
Using _top
• Using _top as a special target name displays
the linked content in a non-framed window
using the same instance of the browser
• The Back button is available if the user wants
to return to the previous page. Since the
browser maintains only one open window,
there is no additional memory overhead or
confusion for the user
36
Principles of Web Design
Chapter 8
37
Principles of Web Design
Chapter 8
Frames and Screen Resolution
• Frame scrollbars and borders add to the
screen space requirements of frames
• Small differences between the way browsers
display frames can greatly affect their look
38
Principles of Web Design
Chapter 8
39
Principles of Web Design
Chapter 8
40
Principles of Web Design
Chapter 8
Designing Effective Frames
• Build your pages to fit within the frames in
which they will display, and accommodate
different screen resolutions that can affect the
size of the frame within the frameset
• Decide whether you will use fixed or relative
framesets
• You can also choose to mix these two
measurement types within a single frameset,
which can be the best way to handle multiple
screen resolutions
41
Principles of Web Design
Chapter 8
42
Principles of Web Design
Chapter 8
43
Principles of Web Design
Chapter 8
44
Principles of Web Design
Chapter 8
45
Principles of Web Design
Chapter 8
Summary
• Use frames judiciously. Make sure that your
content demands or benefits from the use of
frames.
• Build simple framesets with no more than
two or three frames.
• Be aware of the limitations of frames,
including possibly increased download times
and potential navigation confusion.
46
Principles of Web Design
Chapter 8
Summary
• Because frameset documents contain no
content of their own, they are not the best
choice for the top-level page of your Web
site. Consider using a standard HTML page
for the top-level of the site, and then link the
user to your framed content.
• Use the <NOFRAMES> element to contain
alternate information about your Web site for
users with browsers that cannot display
frames.
47
Principles of Web Design
Chapter 8
Summary
• Use the special target names to solve unique
design problems, favoring _top over _blank
whenever possible.
• Build your framesets using a combination of
fixed and variable frame widths to
accommodate different screen resolutions.
• Test your work! Different browsers and
screen resolutions affect the look of your
framesets.
48