Download Chapter 11

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Transcript
Chapter 11
Creating Framed Layouts
Principles of Web Design, 4th Edition
Objectives
• Understand the benefits and drawbacks of
frames
• Understand and use frame syntax
• Customize frame characteristics including
scroll bars, borders, and margins
• Understand and use frame targeting and
special targeting names
• Design content to fit framesets properly
• Design framesets that accommodate different
screen resolutions
Principles of Web Design, 4th Edition
11-2
Understanding Frames
Principles of Web Design, 4th Edition
11-3
Understanding Frames
• Frames allow you to divide the browser
window into independent windows, each
displaying a separate HTML document
Principles of Web Design, 4th Edition
11-4
Principles of Web Design, 4th Edition
11-5
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
Principles of Web Design, 4th Edition
11-6
Principles of Web Design, 4th Edition
11-7
Frame Drawbacks
•
•
•
•
Inaccurate bookmarking
Download overhead
Visual and navigation confusion
Poor indexing with search engines
Principles of Web Design, 4th Edition
11-8
Frame Syntax
Principles of Web Design, 4th Edition
11-9
The <frameset> Element
• The <frameset> element is the container for
the frameset code
• The cols and rows attributes let you specify
the characteristics of the frameset
• You can specify a frameset as either cols or
rows, but not both
Principles of Web Design, 4th Edition
11-10
The <frame> Element
• The <frame> element is an empty element
• The src attribute provides the location of the
file that is displayed within the frame
Principles of Web Design, 4th Edition
11-11
Rows Frameset Syntax
• Two-row frameset:
<frameset rows=”50%,50%”>
<frame src=”top.htm”>
<frame src=”bottom.htm”>
</frameset>
Principles of Web Design, 4th Edition
11-12
Principles of Web Design, 4th Edition
11-13
Columns Frameset Syntax
• Two-column frameset:
<frameset cols=”150,*”>
<frame src=”left.htm”>
<frame src=”right.htm”>
</frameset>
Principles of Web Design, 4th Edition
11-14
Principles of Web Design, 4th Edition
11-15
The <noframes> Tag
• The <noframes> tag lets you provide an
alternate page for users who do not have a
frames-compliant browser
• You can enclose the contents of a standard
Web page, contained in a set of <body> tags,
within the <noframes> element
Principles of Web Design, 4th Edition
11-16
Nesting Frames
• Nesting allows you to break the screen
into both row and column frames
Principles of Web Design, 4th Edition
11-17
Nested Frameset Syntax
• Nested frameset:
<frameset rows="40,*">
<frame src="topnav.htm">
<frameset cols="20%,80%">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</frameset>
Principles of Web Design, 4th Edition
11-18
Principles of Web Design, 4th Edition
11-19
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
Principles of Web Design, 4th Edition
11-20
Principles of Web Design, 4th Edition
11-21
Customizing Frame
Characteristics
Principles of Web Design, 4th Edition
11-22
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
Principles of Web Design, 4th Edition
11-23
Principles of Web Design, 4th Edition
11-24
Principles of Web Design, 4th Edition
11-25
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 border=“0” to
the <frameset> tag
Principles of Web Design, 4th Edition
11-26
Principles of Web Design, 4th Edition
11-27
Controlling 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
Principles of Web Design, 4th Edition
11-28
Principles of Web Design, 4th Edition
11-29
Targeting in Framesets
Principles of Web Design, 4th Edition
11-30
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
Principles of Web Design, 4th Edition
11-31
Principles of Web Design, 4th Edition
11-32
Frame Targeting (continued)
• 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
Principles of Web Design, 4th Edition
11-33
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=“main">
Principles of Web Design, 4th Edition
11-34
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
Principles of Web Design, 4th Edition
11-35
Targeting Named Frames
(continued)
• 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>
Principles of Web Design, 4th Edition
11-36
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
Principles of Web Design, 4th Edition
11-37
Principles of Web Design, 4th Edition
11-38
Principles of Web Design, 4th Edition
11-39
Using _blank
• The _blank special target name lets you load
the linked content into a new instance of the
browser
• 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
Principles of Web Design, 4th Edition
11-40
Principles of Web Design, 4th Edition
11-41
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
Principles of Web Design, 4th Edition
11-42
Principles of Web Design, 4th Edition
11-43
Designing Effective Frames
Principles of Web Design, 4th Edition
11-44
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
Principles of Web Design, 4th Edition
11-45
Mixing Fixed and Variable
Frames
• The following sample framesets
demonstrate mixing a fixed frame and a
variable frame to accommodate
different screen resolutions
Principles of Web Design, 4th Edition
11-46
Principles of Web Design, 4th Edition
11-47
Principles of Web Design, 4th Edition
11-48
Principles of Web Design, 4th Edition
11-49
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
Principles of Web Design, 4th Edition
11-50
Summary (continued)
• Frames are not the best choice for the toplevel page of your Web site
• Use the <noframes> element to contain
alternate information about your Web site
Principles of Web Design, 4th Edition
11-51
Summary (continued)
• Use the special target names to solve design
problems, choosing _top over _blank
whenever possible
• Build your framesets using a combination of
fixed and variable frame widths
• Test your work for compatibility across
browsers
Principles of Web Design, 4th Edition
11-52