Frames: the good, the bad and the confusing

We've already seen how you can use CSS-P to split the text in an xHTML file so it shows up in different parts of the browser window, even with independent scrollbars for different parts if you so desire.

In xHTML, you can also split the browser window into multiple smaller windows called frames, each of which displays the contents of a separate HTML document. The contents within some of these frames can remain constant even when the user is using hyperlinks to change the contents of another frame.

The use of frames in Web design remains somewhat controversial.

        On one hand, frames increase the ways you can display information, and let you combine the contents of two or more separate files into a single browser window. For example, frames are used in this site to keep the navigation ever-present while the user clicks through content.

        On the other hand, frames can often be an impediment to users.

    • Frames make it difficult to figure out quite how to print Web pages, because you are actually dealing with multiple pages displayed in the frames.
    • Frames increase download time because you are actually loading multiple pages, each requiring a separate trip to and from the Web server.
    • Frames defeat a user's efforts to bookmark a page (the browser saves the location of the frameset, not the actual frames' contents).
    • If a search engine leads a user to a single frame page instead of the entire frameset, the user won't be able to see the site in its full context. For example, if one frame has navigation and another has content, the user coming from a search engine directly to the content page will have no way to navigate through the site.

Examples of Frames

Example 1
Example 2
Example 3

 

 

Inline frames

Frames are mostly on the outs; they have a lot of drawbacks. However, the newer inline frame, or iframe, is of interest.

The iframe element inserts a frame within a block of text on a regular html page--there is no separate frameset page. Inserting an inline frame within a section of text allows you to insert an HTML document in the middle of another, to align it with surrounding text, etc.

Because we're working within a regular html page, the doctype is the same one we've been using all along. This differs from frameset pages, which, as you'll read on the next page, require a different doctype.

The file to be inserted inline is designated by the src attribute of the iframe tag. The contents of the iframe container (in other words, the stuff between the <iframe> and the </iframe> serves the same purpose as the value of an alt attribute in an image tag--it will only be displayed by browsers that don't display frames. The text between the opening and closing <iframe> tags works exactly like the contents of a <noframes> container in a frameset, which wil be covered soon.

For browsers that support frames, the following example will place an inline frame surrounded by a border in the middle of the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An Inline frame with news</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Important information</h1>
<table>
<tr>
<td>
<h2>My favorite links</h2>
<ul>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.cnn.com">CNN</a></li>
</ul>
</td>
<td>

<iframe src="newsfeed.html" width="400" height="500" title="Today's news"
scrolling="auto" frameborder="1">
[Your browser does not support frames or is currently configured not to display frames. However, you may <a href="newsfeed.html">visit the newsfeed page</a> to read the latest news.]
</iframe>

</td>
</tr>
</table>
<hr />
<p>That's all, folks.</p>
</body>
</html>

Inline frames may not be resized, so they never take the noresize attribute that you'll see available in frameset pages.

The <frameset> Tag

A frameset is the container that holds a frame document together. Frames allow one to take content from several separate html files and display their content in multiple windows on the same document in a single browser instance. The document that contains the <frameset> determines how the multiple content windows will be organized on the page, including the number of rows and columns and whether or not borders will be displayed between each frame.

A basic <frameset> document some of the same structure as a basic HTML document--<html>, <head>, and <title> containers. However, instead of a <body>...</body> container after the closing </head>, there is a <frameset>...</frameset> tag. The <body> can only exist within the <noframes>...</noframes> container, which holds content for those people whose browsers can't see frames.

Notice that the frameset page takes a different doctype declaration at the top than we've used so far in this class. Otherwise, the html validation tools will hate your work.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<frameset cols="*,*" frameborder="NO" border="0" framespacing="0">
<frame src="page1.html" name="thing1" title="site navigation" />
<frame src="page2.html" name="thing2" title="course content" />
</frameset>
<noframes>
<body><p>Can't see frames? <a href="page1.html">Go here.</a></body>
</noframes>
</html>

vertical frames

Columns and Rows

Create columns and rows in the <frameset> document by using the cols and rows attributes.

vertical frames

horizontal frames

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<frameset cols="50%,50%">
<frame src="page1.html" name="thing1" title="site navigation" />
<frame src="page2.html" name="thing2" title="course content" />
</frameset>
</html>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<frameset rows="50%,50%">
<frame src="page1.html" name="thing1" title="site navigation" />
<frame src="page2.html" name="thing2" title="course content" />
</frameset>
</html>

Frames are listed in the same order that we read the English alphabet: top to bottom and left to right. The <frameset> columns in the example above are 50% each, meaning that each column (or row) will take up 50% of the screen. In addition to percentages, size can also be set by using pixel values and the * value. The pixel and percentage values function exactly the same way as they do in tables. The * value allows you to set a relative value. For example, <frameset cols="*,*"> will create two framed columns of equal width. <frameset cols="150,*"> would create two framed columns, with the first one always being 150 pixels wide and the other expanding to fill whatever space is left.

To create a page with frames in both rows and columns, it's necessary to nest one frameset inside another.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<frameset cols="20%,80%">

<frame src="page1.html" name="thing1" title="site navigation" />

<frameset rows="50%,50%">

<frame src="page2.html" name="thing2" title="section navigation" />

<frame src="page3.html" name="thing3" title="course content" />

</frameset>

</frameset>
</html>

nested frames

 

 

Controlling Frame Borders

The border attribute for frames allows one to turn off the border for frames, much like you would with a table or image. Completely turning off the borders in a framed Web page is a nice way to give that page a seamless look. Unfortunately, until recently this attribute was supported differently by the two major browsers, Netscape Navigator and Internet Explorer. According to the powers that be, use <frameset frameborder="no" border="0"> to turn off the frame borders in both browsers.

<frameset cols="*,*" frameborder="no" border="0">

By default, the frameborder is turned on, and the border attribute can be used to specify the thickness of the border in pixels. The border color can be specified by using the the bordercolor attribute with a color.

The <frame> Tag

The <frame / > tag sets up the individual frames within a <frameset> container. The attributes for <frame / > identify the URL of the document to be displayed in the frame, set the scroll bar for that window, control the margins, and determine whether or not the user will be able to resize the frame.

Notice that <frame /> is a standalone tag, so it always takes a trailing slash at the end.

src is the attribute that specifies the location of the document to be displayed in the frame. It can be a relative URL or an absolute URL, depending upon where the document is located.

The name attribute is used when linking to specific frames. Treat spaces within frame names just as you do spaces within file names--avoid them!

The scrolling attribute allows one to set the scrollbar for the frame. Use a value of yes to always turn it on, no to never have it visible. The default for the scrollbar is auto, which means that the scroll bar only appears if the content is too big to be displayed in the frame.

The title attribute is essential for those users, such as the visually impaired, who must use special software to browse the Web. It helps them know what kind of content the frame will contain.

The noresize attribute/value prohibits the user from resizing the frame. Both the attribute and the value are "noresize".

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<frameset cols="50%,50%">
< frame src="page1.html" name="page1" title="site navigation" scrolling="yes" noresize="noresize" / >
<frame src="page2.html" title="site content " name="page2" scrolling="no" / >
</frameset>
</html>

The <noframes> tag

Some browsers, such as early versions of Netscape Navigator before 2.0 and Internet Explorer before 3.0, do not support frames. Neither do text-only browsers or the text-reading browser/software combinations used by visually impaired people. Content placed within the <noframes> container tag will be displayed like normal text if the browser viewing the material does not support frames.

A common use of the <noframes> container is to tell a user that their browser does not support frames.

<noframes>Your browser does not support frames.</noframes>

This is not very helpful information for the user! Think about it. If they're cruising the Net with an 8-year-old browser, there's probably a reason, like they don't know how to download and install newer software (unlikely) or their computer won't run newer versions of the browsers. If they're blind, they already know their browser doesn't support frames. Users would be far better served if Web developers put useful information inside the <noframes> tags.

(Which would a person in a wheelchair prefer: a sign at the foot of the stairs that says, "These stairs are not handicap-accessible" or a sign that says "wheelchair entrance is in front"?)

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
< frameset cols="50%,50%">
< frame src="page1.html" title="Parts list" scrolling="yes">
< frame src="page2.html" title="Parts detail" scrolling="no">
< /frameset>
<noframes><body><p>This site uses frames, which your browser does not appear to support. You can still use the site, though; just <a href="page1.html">follow this link to the parts list</a>. Click the link on any part to get to the detailed information on that item, and use the browser's "back" button to return to the main parts list.</p></body></noframes>
< /html>

Targeting Frames

One of the biggest challenges in using frames is making sure that links make the linked documents show up in the correct windows. By default, a linked document wil load in the same window that originally held the link. (Otherwise, for example, every time you clicked a link on the Web you'd launch a new window or a new instance of the browser.) Framesets divide a single browser window into two or more frames, each of which acts as its own window within the browser. One of the benefits of frames is being able to display information (site navigation, for example) consistently in one window (frame) while the information changes in another. This can be achieved by targeting a link toward a specific, named frame.

The first thing to do is to name the frame into which you want the link to load. This provides a way to refer a link to a specific named window.

<frame src="page1.html" name="mainwindow" title="site content" / >

Now any link can load a document into this named frame if we use the target attribute.

<a href ="page3.html" target="mainwindow">

The <base> Tag

The target attribute of the <base /> tag allows one to target a default frame where all linked pages will appear. In this way, rather than providing a target inside the <a> tag for every link on a page, one can simply use the <base /> tag to specify the target window once. The <base /> tag should be placed in the <head> container of your document. The <base /> tag is easily overridden by simply specifying a different target in the <a> link tag.

In the example below, all of the links will default and appear in the frame mainwindow, with the exception of the link to page 4 which will override the default and appear in the navwindow frame. Of course, you'll have to specify a
<frame name="mainwindow" /> in the frameset; the target values won't do what you want if they don't match the name of an existing frame.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Basic Document with Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base target="mainwindow" / >
< /head>
< body>
< a href="page1.html">Go to Page 1</a> <br />
< a href="page2.html">Go to Page 2</a> <br />
< a href="page3.html">Go to Page 3</a> <br />
<a href="page4.html" target="navwindow">Go to Page 4</a> <br />
< /body>
< /html>

A frame name can be pretty much anything you choose, with the exception of four dedicated names that have special meaning. Read on...

Dedicated Target Names

There are four dedicated target names that can be used to direct a link to a particular frame without specifying the name of that frame in the <frame /> tag. They are _blank, _self, _parent and _top. Each of these names is preceded by an underscore _.

<a href="page1.html" target="_blank">

In this case, page1.html would always open in a completely new window. Each time a link is targeted to _blank it will open a new window. When used for multiple links, _blank has the potential to confuse users, leaving them with multiple windows open.

<a href="page1.html" target="_self">

In this case, page1.html would open in the same window that the link appeared. In HTML, _self is the default if you do not set a target. Because of this, it is generally used when a target has been set by the <BASE> tag.

<a href="page1.html" target="_parent">

The _parent target is used with nested frames (frames within a frame). In this case, page1.html would be opened in the parent frame of the nested frame. Nested frames can be very confusing to a user (and to you as a coder) and are not to be used lightly.

<a href="page1.html" target="_top">

In this case, the frames would disappear and the page1.html would be loaded in the window, completely without frames. _top can be a very useful target, especially when giving a user the choice to not use frames.

Terms and concepts to know

Frameset
Frame
NoFrames
NoResize
Scroll Bars

Borders
Margins
Targeting Frames
Base Target

Readings

About.com: Frames Why? and Why Not?
http://html.about.com/compute/html/library/weekly/aa111097.htm

WebMonkey: Frames Are a Picnic
http://hotwired.lycos.com/webmonkey/96/31/index3a.html?tw=authoring

WebMonkey:Linking in Framesets
http://hotwired.lycos.com/webmonkey/96/36/index2a.html?tw=authoring

More information

About.com: Help with Frames
http://html.about.com/compute/html/msubframes.htm

WebMonkey:Authoring Frames
http://hotwired.lycos.com/webmonkey/authoring/frames/index.html

 

Skip navigation linksCOURSE ID'S > W06 WEB PRODUCTION I - SSCC, SECTION 2 > COURSE MATERIALS > MODULE TEN: FRAMES > TAKE ASSESSMENT MODULE 10 HOMEWORK/QUIZ: FRAMES

End navigation links

 

Take Assessment Module 10 homework/quiz: Frames

Top of Form

Assistive Technology Tips [opens in new window]

 

Name:

Module 10 homework/quiz: Frames

Instructions:

 

Multiple Attempts:

This Test allows multiple attempts.

Force Completion:

This Test can be saved and resumed later.

Show

 Question Completion Status:

 

 

1Question Incomplete

2Question Incomplete

3Question Incomplete

 

Question 1 text  Question 1

10 points  

Save  

 

Inline frames: create two HTML pages, and use an inline frame on one to display, within that page, the contents of the other page.

Validate the html and upload both pages to the server. Open the page once it's on the server and double-check that everything works right. Copy the full URL to the page and paste it into the blank below.

Question 1 answers

Smart Text Plain Text HTML

  Insert Equation  Insert MathML Check Spelling Preview Preview

 

 

Question 2 text  Question 2

12 points  

Save  

 

Creating a Framed Document: Create three documents called page1.html, page2.html and page3.html. Give each of the documents a different background color and create an h1 header in each document listing the page number of the document. Now using the diagrams below, make framesets to create the three framed documents as shown here.

Linking within Framed Document: Using the framed documents created above, create a link on page1.html that, when clicked, will be displayed in the section 3 pane of the framed document. Next, create a link in page2.html that will change section 3 back to page3.html. Do so for all three examples.

Upload the files (the framesets and the page1-page3.html documents) to the student server and test to make sure they work. When everything looks the way you want, copy the direct URL to each of the framed documents (the ones that look like the picture below) and paste them all into the box below.


Inline image module09c.gif

Question 2 answers

Smart Text Plain Text HTML

  Insert Equation  Insert MathML Check Spelling Preview Preview

 

 

 

 

 

 

 

 

 

Bottom of Form