"Web Page, You've Been Framed!"
Web Page: "That's Ok! Now I can really control my content! Just
keep your eye on the top of this screen as you move
down with the right side scroll bar.."
Objectives
After this lesson you will be able to:
Create a web page that consists of multiple frames
l Write hypertext links to load content into a specified area of a framed web page
l Write hypertext links that will load content into a page replacing the framed web page
l Modify the border attributes of a framed web page
Lesson
Lesson
Note: If you do not have the working documents from the previous lessons, download a copy now.
You likely have seen web pages that use frames. If you have not already figured it out, this very page uses frames-- if you scroll down through the page for this lesson, the links in the pale orange area at the top of the page stay fixed. It is in a separate frame from the bottom portion.
Frames make this web page two different HTML documents-- one document defines the layout for the top portion with the navigation links, and the other contains the remainder of this lesson. Each frame is independent of each other.
The advantage is clear for web sites that contain navigation links to many other web pages. For another example, see our Multimedia Authoring Web, a searchable database that keeps all of the navigation and control elements in the left frame while content is displayed in the right side.
Hyperlinks have special uses in framed web pages. Sometimes a hyperlink in one frame will replace the content in that frame with new content. Other times a hyperlink will load new content in another frame. And you can have links that will completely replace all of the frames with a new page. This is actually the same kind of link "targeting" we learned.
What are some disadvantages of frames? As a web designer, you must keep track of more HTML documents. When converted to a framed design, one single HTML file might end up as 3,4, or maybe 12 HTML files. For the viewer, a framed page can take longer to load and display. Poorly designed, framed web pages look crowded and sometimes amateurish. Frames also make it difficult to print paper copies of the entire page. Finally, you may be restricting some users from your site if they have a web browser that does not support frames (most browsers since NetScape 2.0 and Internet Explorer 3.0 display frames).
When should you use frames? The content should tell you. If there is a need to keep some elements on a web page visible at times while changing the content of other areas, frames can be effective. You can get a better sense by examining other web sites and see how they use frames.
Frame Basics
A web page that uses frames consists of a "master" HTML document, that we'll call the "blueprint" for the layout, that defines the framesets, or the arrangement of the framed areas on the page. This is the document that loads the frame structure and the one that represents the URL for the framed page.
Each of the sub-divided areas will be associated with an HTML file that defines what goes into that particular box. threfore, the first step is to sketch out how the page should be divided up and how much relative space each area neds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Navigation Frame</title>
</head>
<body style="background-color:#fc0;">
<p><a href="http://webdesign.about.com/od/frames/a/aa010598.htm" target=_top>Return to Frames Tutorial</a> |
<a href="http://webdesign.about.com/cs/frameshelp/ target=_top>More Frames Info</a> |
<a href="http://webdesign.about.com/" target=_top>Home</a></p>
</body>
</html>
body.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Main Body Page</title>
</head>
<body style="background-color:#66f;">
<h1>This is My Web Page</h1>
I wrote it with my own hands.
</body>
</html>
The last page you write is the frames container page. You tell the browser that this page is a FRAMESET and you define the size and number of the frames. Then you tell the browser where to find the first FRAME and subsequent frames. Then you specify what should be done with non-frame compliant browsers with the NOFRAMES tag. This is what this page looks like:
frame.html
frame.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>A Sample Framed Page</title>
</head>
<frameset rows="50,*">
<frame src="/tmc/navigate.html" />
<frame src="/tmc/body.html" />
<noframes>
<p>This is a framed page, please go to <a href="/tmc/body.html">the body page</a> for more information.</p>
</noframes>
</frameset>
</html>
Some things to note:
- Neither of the frames are named
- Frames are named so you can specify where to open links
- I used target="_top" to tell the links to go to the top level of the browser rather than opening in the same frame
