HTML and CSS Reference
In-Depth Information
Introduction
A
frame
is a rectangular area of a Web page — essentially, a window — in which a separate
Web page can be displayed. Frames allow a user to display several Web pages at one time
in a single browser window. Each frame displays a different, individual Web page, each of
which is capable of interacting with other Web pages. Web pages that include frames look
and act differently from Web pages created in previous projects. Frames are not used in
the projects in this topic because HTML5 does not support the frame tags. Web pages
with frames will therefore not validate with an HTML5 doctype. Additionally, and just
as importantly, many screen readers, such as those used by visually impaired people, have
difficulty displaying a Web site that uses frames. The Americans with Disabilities Act (ADA)
standards recommend that frames not be used for Web sites. In addition to problems with
devices for the disabled, there are other potential problems with the use of frames for Web
development. Frames can cause problems when people bookmark or add the Web page as a
favorite. It is the frame definition that is stored, and that may not be the page that the user
wants to save. Search engines may also have problems indexing a Web site that uses frames.
Finally, when users print a Web page with frames, they may not get what they see on the
screen. However, many Web sites do utilize a frame structure, and as a Web developer, you
may be responsible for maintaining Web sites based on frames. This Special Feature explains
frames and how they are used, and shows you how to convert Web sites from a frame
structure to better accommodate ADA standards and to address other frame-related issues.
Americans with
Disabilities Act
Review the Web site
dedicated to this act,
ada.gov. It contains a
wealth of information
on the standards related
to this act, including
information about Web
site functionality.
Project — Converting Frames
The Web site presented in this Special Feature is based on a frame structure. In order to
understand the frame structure, you have to know what the frame definition is and how it
works. You also have to understand how the other Web pages in a Web site are related to
the frame definition file.
In this Special Feature, you review frame-based Web pages provided in the Data Files
for Students. See the inside back cover of this topic for instructions on downloading the Data
Files for Students, or contact your instructor for information about accessing the required files.
Figure 1a shows the initial Web site using frames. A blue dashed line indicates where the Web
page is divided into frames. You can see that the top frame (the section of the Web page above
the blue dashed line) contains a dance studio logo and a navigation bar. The bottom frame (the
section of the Web page beneath the blue dashed line) contains the Web page content. You will
look at the frame definition file (Figure 1b) and see how it works with the other files in the Web
site. You are then introduced to options that can take the place of a frame structure. Finally, you
will redesign the Web site to look similar but remove the frames (Figures 1c and 1d).
Overview
As you read through this feature, you will learn how to assess the frame definition
file that creates the Web site shown in Figure 1a. You will then convert the Web site
structured with frames (Figure 1b) to a Web site structured without frames, using
techniques that you have previously studied (Figures 1c and 1d). You will complete this by
performing these general tasks:
Determine the use of a frame definition file to structure a Web site.
•
•
Identify what Web design methods could be used to restructure the Web site.
•
Make the changes necessary to the Web pages provided to restructure the Web site.
•
Validate and test the Web pages.
