Lesson 9:
Frames
© 2007 Prosoft Learning Corporation
All rights reserved
ITD 110 Web Page Design
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
• Define frames and the purpose of the frameset
document
• Use the <frameset> and <frame> tags
• Identify the purpose of the <noframes> tag
• Target links from one frame to another
• Specify default targets using the <base> tag
• Create borderless frames, and control margins
and scrolling in frames
• Identify the purpose of inline frames
The <frameset> Tag
• A container tag, requires a closing </frameset>
tag
• Determines the frame types and sizes on the
page
• Two frame types:
– Columns
– Rows
Columns Example
• This frameset was created by the following
code: <frameset cols="35%,65%">
</frameset>
Rows Example
• This frameset was created by the following
code: <frameset rows="180,*"> </frameset>
The <frame> Tag
• Defines the content in each frame
• Placed between the <frameset> </frameset> tags
• The src attribute specifies the file that will appear
in the frame
• In the following example, the page that will appear
in the top frame is the file fl-toc.html, and the page
that will appear in the lower frame is flsecond.html.
<frameset rows="180,*">
<frame src="fl-toc.html"/>
<frame src="fl-second.html"/>
</frameset>
The Frameset Document
• Contains the the <frameset>, <frame> and
<noframes> elements
• The <frameset> and <frame> tags will create frames
only if they are placed correctly into this document
– In the frameset document, the <frameset>
element takes the place of the <body> element
– The opening <frameset> tag follows the closing
</head> tag
– The <frameset> tag must contain either the rows
attribute or the cols attribute, or both
Viewing Source with Framesets
• Click on the frame you want to view
• Take the necessary steps to view source
• The same instructions apply to printing from a
frame
The <noframes> Tag
• For user agents that cannot render frames
• Displays alternative text or images
– In some ways, similar to the alt attribute for
the <img> tag
• Code:
<noframes>
<body> If you had a frames-capable browser, you
would see frames here.
</body>
</noframes>
Targeting Frames with Hyperlinks
• Use the name attribute to name a frame, then target
the frame name with hyperlinks
• The syntax for naming a frame is as follows:
<frame src="url" name="framename"/>
• The following code names a frame:
<frame src="james.html" name="authors"/>
• The following code targets this frame:
<a href="james.html" target= "authors"> Visit James </a>
• If a user clicks the Visit James link, the James page
will open in the Authors frame
Base Target
• A base target automatically sets a default
target frame for all links in a page
• Created using the <base> tag
• Code:
<base target="main" href="page.html"/>
• This code will cause all linked pages to open
in the frame named Main
• The href attribute is optional
Borders, Margins and Scrolling
• To create borderless frames, add the
frameborder attribute to the <frame> tag
– frameborder= "1" causes borders to display
(the default)
– frameborder= "0" hides borders
• Example:
<frame src="home.html" name="main" frameborder="0"/>
Borders, Margins
and Scrolling (cont’d)
• Frame margin width and height
– The marginheight attribute designates the space,
in pixels, between the top and bottom margins
– The marginwidth attribute designates the space,
in pixels, between the left and right margins
Borders, Margins
and Scrolling (cont’d)
• Scrolling frames
– The scrolling attribute to the <frame> tag controls
whether the scrollbar appears
– The scrolling attribute values:
• "yes" — enables scrolling (the default)
• "no" — disables scrolling
• "auto" — allows the browser to decide
• Example:
<frame src= "ex.html" name= "ex" frameborder="0" scrolling="no"/>
Inline Frames
• Inserts an HTML or XHTML document inside
another
• Also called "floating frames"
• Created with the <iframe> tag
• The browser reads the <iframe> tag from the
file, then makes a separate request to the
server for the embedded file
Inline Frames (cont’d)
• Simple XHTML page with inline frame:
<h1>iFrame Example</h1>
<p><strong>This text is found in
iframe.html</strong><p/>
<iframe src="embedded.html" scrolling= "yes">
Your browser does not support frames.
</iframe>
<p><strong>This text is also found in iframe.html.
</strong></p>
• The next slide shows the results of this code…
Inline Frames (cont’d)
Inline Frames (cont’d)
• Inline frames are useful for:
– Web documents in which all content will
remain stable, except for one section (e.g.,
a weekly special) -- the frequently changed
section can be an inline frame, which can
be quickly modified when necessary
without editing the entire page
– Documents that you prefer to embed in a
page instead of placing on a separate page
or providing as a download (such as text or
a PDF)
Appropriate Use of Frames
• Frames are useful only in specific situations
• Consider the following issues:
– Function
– Appeal
– Development challenges
– Accessibility limitations
– Usability with the browser Back button
Lesson 9 Summary
• Lesson 9 Frames
• See Skills Review
