Site Development Foundations
Download
Report
Transcript Site Development Foundations
Site Development
Foundations
© 2004 ProsoftTraining
All rights reserved
Lesson 9:
Frames
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="160,*">
</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 fl-second.html.
<frameset rows="160,*">
<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 in
iframe.html</strong><p/>
<iframe src="embedded.html" scrolling=”yes">
Your browser does not support frames.
</iframe>
<p><strong>This text is also 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