|
Frames are a means of presenting more than one XHTML
document at a time in a browser window. Each document in a
frame-based webpage appears to be in its own window within the browser.
Caution should be utilized when using frames for a variety of reasons.
The most important reason to avoid frames is that text-based browsers
cannot deal at all with frames and text-readers for the visually handicapped
may not be able to interpret them correctly either. The other reasons
have to do with webpage design. Frames can be overused, resulting in a
page that is confusing or difficult to interpret. The user can experience
problems when trying to print the back, bookmark a page, or navigate
using the "Forward" and "Back" buttons of the browser (Lynch & Horton, 2001).
Frames, when done well, can present a good interface for a variety of webpages.
However, the current consensus among
Web design and usability experts is that frames should be used only in the
rare instances when their limited advantages clearly outweigh the many
problems they can cause.
A frame-based page requires at least one XHTML page for each
frame as well as a separate XHTML page that defines the frame layout for the main page.
-
In order to demonstrate frames, we will create a main page,
a page that contains a list of CIS courses and a couple of pages
that have the course descriptions in them. The main page will
contain two frames; one on the left and one on the right. In the
left frame, the page containing the list of CIS courses. When
the user clicks on a course name, the course description will
appear in the right frame. For now, just create a webpage
that contains a bulleted list of four CIS courses. We will
define the links later. Save this XHTML file as "CIScourses.htm".
The file should look like this:
<html>
<head>
</head>
<body>
<h3>CIS courses</h3>
<ul>
<li>CS101 Survey of Computers and Computing</li>
<li>CS110 Computing and Information Science I</li>
<li>CS111 Computing and Information Science II</li>
<li>CS221 Data Structures</li>
</ul>
</body>
</html>
-
Next, create four separate XHTML files that contain the
course number and name as a level 3 heading and the
course descriptions for each of the four courses in the course
list in step 1. Save each of these files with the course number
replacing the n's, such as "CSnnn.htm". For example, one of the files
I created a was called "CS101.htm"and looks like this:
<html>
<head>
</head>
<body>
<h3>CS101 Survey of Computers and Computing</h3>
This course presents an overview of current concepts and
terminology related to computers and information
processing. It is designed for students who have had no
previous college-level computing courses. It covers the
use of graphical user interfaces, applications software,
and telecommunications in a laboratory environment. The
course is currently using Windows 2000 and Office 2000.
Not open to CIS majors without departmental approval.
Three credits.
</body>
</html>
-
Next, create a new XHTML page. In the
<head> section of the file, define
the title of the page to be "CIS Course Descriptions". Save this file
as "CISDescriptions.htm". XHTML files which define a set of frames
DO NOT contain a <bodu> section. The frameset takes the place of
the <body> section in a page using frames. In place of the body of this
XHTML page, we will define the two frames. Defining frames begins with the
<frameset>…</frameset> tags. In the beginning <frameset>
tag, we will specify that the frames will be in columns and left frame will take
up 30% of the browser window. Add the following after the <head> section
of this file:
<frameset cols="30%, *">
</frameset>
-
The asterisk after the 30% indicates that the second
frame should take up the rest of the browser window.
This is equivalent to
<frameset cols="30%, 70%">,
where the second column width is explicitly written. If we
wanted to have three frames across the screen, two occupying
20% each and one occupying the remaining 60%, we could use
<frameset cols="20%,20%, *"> or
<frameset cols="20%,20%,60%">.
Column widths can also be specified using an absolute
number of pixels instead of percentages of the browser window.
If we wanted the window to be split into rows instead of columns,
we could use the rows attribute instead. The rows attribute
accepts values in percentages or number of pixels, just as the
cols attribute does.
-
After specifying the layout of the frames with the
<frameset> tag,
we must define the two frames themselves using the <frame /> tag.
There are two very important attributes of the <frame /> tag. The src
attribute specifies the XHTML page that should be displayed in the frame
and is required. The name attribute lets us identify the frame as the
"target" for a link. In this example, when the user clicks on a course in
the left frame, we want the XHTML file containing that course description
to appear in the right frame. So, in the link for each course in the left frame,
we will specify that the target (where we want the linked file to appear) is the
right frame.
There are four attributes which define the appearance of the frame.
The marginheight and marginwidth take pixel values that
define the side, top and bottom margins of the frame. The scrolling
attribute controls whether or not the frame should always ("yes") or never
("no") use scrollbars. If the scrolling attribute is "auto", the browser
window will add scrollbars, if needed. The noresize attribute tells the
browser whether the frame can be re-sized (or scaled) if the frame does not
fit the indicated dimensions.
We will display the list of CIS courses in the left frame and the course
descriptions in the right frame. Since the src attribute, which indicates
which file to display in the frame, is required, we will put the course
description for the first course in the list in this frame to start. In between
the beginning and ending <frameset> tags, add the following <frame /> tags.
If the first file in your list is CIS101, then the value for the src attribute in the
second <frame /> tag should be "CS101.htm" as it is below. If you have a different
course as the first one in your list, indicate the file containing the course description
for that course instead.
<frame src="CIScourses.htm" name="left" />
<frame src="CS101.htm" name="right" />
-
Save your file and view it in a browser. The links on the left will not be
active yet, because we have not defined them as links yet.
-
The final step is to define the links in the course list as links.
Open the "CIScourses.htm" file in Notepad. Make each course
in the list a link by surrounding it with anchor
<a>…</a> tags.
The value for the href attribute should be the corresponding
XHTML file containing the description of the course. For each
the target attribute should be the name of the frame in which
you want the linked file to appear. In this case, we want the linked
file to appear in the right frame, which we named "right". For
example, the list item for the first course in my file looks like this:
<li>
<a href="CS101.htm" target="right">CS101 Survey of Computers and Computing</a>
</li>
Make each item in your list a link to the corresponding course description and specify the target as "right".
Save your file and view it in a browser. Try making the browser window
smaller and see the scrollbars appear as needed. Try each link in the left frame
and make sure the correct course description appears in the right frame.
- A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
- HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html
- HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/
- HTML and XHTML Information www.w3c.org/markup
- HTML reference including browser suppport http://www.w3schools.com/html/html_reference.asp
|