Cop: "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:
l 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
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.
You can devise many ways to slice and dice the web page area:
Each of the sub-divided areas will be associated with an HTML file that defines what goes into that particular box.
Therefore, the first step is to sketch out how the page should be divided up and how much relative space each area
needs.
Once you have a visual idea, you must define it in terms of rows and columns, similar to the approach for designing
tables
Each collection of rows and columns makes up an HTML frameset and the HTML "blueprint" document for the framed
page can have one or more framesets. The HTML format is slightly different from the ones we've created so far-- it lacks
a set of <body>...</body> tags. This make sense from what we learned way back in lesson 1 since none of the
frameset definitions actually specify the content that appears on the web page (normally everything inside the
<body>...</body> tags,) but rather the structure of how they are arranged.
Below is a generalized format for a "blueprint" HTML document:
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Title of this Whole Page</title>
</head>
<FRAMESET ROWS/COLS="X,Y,...Z">
<FRAME SRC="frame_source1.html">
<FRAME SRC="frame_source2.html">
:
:
<FRAME SRC="frame_sourceN.html">
</frameset>
<NOFRAMES>
This is what someone would see who does not have a web
browser that can display frames.
</NOFRAMES>
</html>
NOTE: Each frameset defines either a set of rows or columns (either <FRAMESET ROWS=...> or
<FRAMESET COLS=...>). The values of X, Y, and Z indicate the amount of screen area each
row/column will occupy, either in percentages of the browser window size, or an absolute number of
pixels. The number of items in this list defines the number of rows or columns. For each
row/column specified, this dimension is associated with the HTML document specified in the
subsequent list of <FRAME SRC=...> tags.
A browser that cannot display frames will ignore everything between the <FRAMESET> ...
</frameset> tags and display what is inside of the <NOFRAMES> ... </NOFRAMES> tags. On
the other hand, web browsers that can display framed content will ignore what is inside the
<NOFRAMES> ... </NOFRAMES> tags.
The most challenging part of designing framed web site is developing the layout structure of this main document. To
repeat, the numbers that you provide in the <FRAMESET...> tag, indicate the number of and the dimensions of a set of
rows or columns in the page. You can use either percentages (i.e. ROWS=10%,30%,60%) or absolute numbers of
screen pixels (i.e. COLS=100,300,80,200). The choice of this depends on whether the design requires a particular
frame to always be the same size (use absolute pixels) or if it can scale to the proportions of the viewer's browser
window (use precentages). You will see more examples as we go along.
NOTE: Each frameset defines either a set of rows or columns (either <FRAMESET ROWS=...> or
<FRAMESET COLS=...>). The values of X, Y, and Z indicate the amount of screen area each
row/column will occupy, either in percentages of the browser window size, or an absolute number of
pixels. The number of items in this list defines the number of rows or columns. For each
row/column specified, this dimension is associated with the HTML document specified in the
subsequent list of <FRAME SRC=...> tags.
A browser that cannot display frames will ignore everything between the <FRAMESET> ...
</frameset> tags and display what is inside of the <NOFRAMES> ... </NOFRAMES> tags. On
the other hand, web browsers that can display framed content will ignore what is inside the
<NOFRAMES> ... </NOFRAMES> tags.
The most challenging part of designing framed web site is developing the layout structure of this main document. To
repeat, the numbers that you provide in the <FRAMESET...> tag, indicate the number of and the dimensions of a set of
rows or columns in the page. You can use either percentages (i.e. ROWS=10%,30%,60%) or absolute numbers of
screen pixels (i.e. COLS=100,300,80,200). The choice of this depends on whether the design requires a particular
frame to always be the same size (use absolute pixels) or if it can scale to the proportions of the viewer's browser
window (use precentages). You will see more examples as we go along.
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.
