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.

9.1 A Frame Page

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.

  1. 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>
    <h3>CIS courses</h3>

    <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>
  2. 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>
    <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.
  3. 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%, *">

  4. 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.
  5. 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" />
  6. 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.
  7. 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>
    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.

    Image of Frame Page in Browser


  1. A Beginner's Guide to HTML
  2. HTML: A Guide For Beginners
  3. HTML: An interactive guide for beginners.
  4. HTML and XHTML Information
  5. HTML reference including browser suppport

Introduction to Web Design by Cynthia J. Martincic :: Credits