Computer Science Illuminated, Third Edition: Goin

Computer Science Illuminated, Third Edition

Lab #10

Frames

10.1 Frame-Based Web Sites

Frames (in HTML) allow the designer of a web site to present information in multiple regions of the screen. Each region can act independently and display different information (web pages) at the same time. For example, we could choose to break up our web pages for the pet store into a series of framed regions. One region might contain the store logo and basic information about our store. Another region may be a navigational page, linking to each product we offer. (This is the most common use for frames.) Finally, a third region would contain information about the selected product.

The regions can work together or interact. That is, a user could click on a link in our navigational region and have the corresponding product page displayed in an entirely separate region. For example, that's exactly what PrivacyExchange.org did with their site. There are three framed regions on their site as depicted in the following screen capture (red boxes surrounding regions were added to indicate where the regions are). Note that sometimes the regions appear to be one contiguous web page, by having no distinguishing border lines (as is the case in Figure 1).

The largest region (second column, lower area) extends beyond the view of the web browser and thus has a scroll bar attached to it (the browser added it automatically). However, the navigation region on the left side of the browser window fits nicely in the window and thus does not need a scroll bar.

Figure 1: An example of frame regions in a web page.

When a user's web browser accesses the main web page for a site that contains HTML frames, the first page details how the browser window is to be broken into regions, and which names are assigned to each region. Next, each region is (generally speaking) loaded with an existing web page, giving the site an initial look.

10.2 Frame Layout

When using frames, a web developer must design their web pages very carefully. Frames can be complex structures and with the interaction you can create with them, careful though must go into which frame will contain what content.

We will take this opportunity to redesign our web site by using frames. Rather than having one main page with links to each product page as we did before, we will change our layout to be similar to the one described above.

The main page of the site will be a four region area with one region containing the store graphic logo, another containing a navigational panel for linking to our products, a third (and largest the area) being the region which contains our welcome message, store information, and where each product will be displayed, and a final region to display copyright and store contact information. The table below approximates the new look of the site we intend to implement.

Navigation area - links to each product links to pages of interest	Header area - contains the logo for our store and a marketing slogan
	Content area - contains a single page displaying a welcome message, product information, or details about the shopping cart
Footer area - contains copyright and contact information for the web site

Lab Activity #1:

Create a design (on paper) for a new version of your web site. Use HTML frames to organize your content. Create your new design using five regions.

10.3 Frame Tags

The main document for our new web site must first tell the browser how to divide the browser's display area and what content to initial display in each region. To accomplish this, we will use the frameset tags to provide this information. The frameset tags appear in the source code for a web page following the head tag, and in place of the body tags.

First, we will use the frameset tags to create the two rows of our frames (the top row contains the navigation area, header area, and content area, while the bottom row contains the footer area). The upper region will consume 95% of the vertical space of the displayed browser area, and the lower region the remaining 5%. By using the row attribute with the frameset tag, we can create the two regions as follows:

<html>
 <head>
 <title>Pete's Pet Store</title>
 </head>

 <frameset rows="95%, 5%">
 </frameset>
</html>

Alternatively, we can also use the cols attribute with the frameset tag to specify the desired column layout. Both the rows and cols attributes have the following characteristics:

both attributes accept a comma separated list of pixel widths or percentages which determine the quantity of regions to create and the size of each region
columns are created left-to-right, and rows are created top-to-bottom
both of the attributes may be used simultaneously in the frameset tag to create a grid-like layout

Lab Activity #2:

Write the HTML code that will begin the underlying frame structure for your new web pages. We have not yet covered nested frames, so constrain yourself to only rows, columns, or both, but not nesting.

What is the resulting source code?

10.4 Frame Content

Within the frameset tags, we will use the frame tag (<frame>) to define the contents and other characteristics of each region. In our example, we will focus more on the lower region, since the upper region will be the subject of a nested frame in Section 10.5.

Each frame tag can utilize the following attributes. A short description of each is provided along with details on what values each attribute accepts, as well as a brief example of each.

name - assigns the specified name value to the frame (so that it may be the target of links). This attribute accepts a character string. E.g. name="main_body"
src - specifies the location of the initial contents of this frame. This attribute accepts a character string in the form of a URL. E.g. src="navigation.html" or src="http://www.cnn.com"
noresize - informs the web browser that this frame is not resizable by the user. This attribute accepts no value and appears by itself. E.g. noresize
scrolling - specifies if scrollbars are permitted for this frame. Possible values include:

auto - web browser provides horizontal and/or vertical scrollbars when necessary; scrolling="auto"
yes - web browser always provides scrollbars; scrolling="yes"
no - web browser never provides scrollbars; scrolling="no"

frameborder - informs the browser to draw a border between this frame and all others surrounding it. This attribute accepts either a 1 (one; indicating that the border should be rendered) or 0 (zero; indicating that the border should not be rendered). E.g. frameborder="1"
marginwidth - specifies the amount (in pixels) of space to be left between the frame's contents and it's left and right margins. This attribute accepts an integer value greater than zero. E.g. marginwidth="4"
marginheight - specifies the amount (in pixels) of space to be left between the frame's contents and it's top and bottom margins. This attribute accepts an integer value greater than zero. E.g. marginheight="3"

Now, we will modify our existing code as follows. The resulting screen capture is shown in Figure 3.

<html>
 <head>
 <title>Pete's Pet Store</title>
 </head>

 <frameset rows="95%, 5%">
 <frame noresize frameborder="0">
 <frame name="footer" src="footer.html" frameborder="0">
 </frameset>
</html>

Note that we had to apply the frameborder attributes to both frames to suppress the displaying of the border between the two frames. Without doing so, each of the frames would have had the right to display their border between itself and the adjoining frame. The frames are also set in the sense that we can not resize them. Currently only the lower frame has loaded an existing web page, and it is also the only named frame.

Figure 2: Applying two horizontal frames to our web page.

Lab Activity #3:

Use the attribute list to enhance the HTML code you have written for your frames.

Apply the noresize attribute and experiment with the scrolling attribute and its possible values.

10.5 Nesting Frames

We will now complete the changes to our pages by nesting one frameset inside of another. We will use this method to implement our design for the top portion of our web pages. To do so, change the code on the initial page as indicated below.

index.html

<html>
 <head>
 <title>Pete's Pet Store</title>
 </head>

 <frameset rows="95%, 5%">
 <frameset cols="15%, *">
 <frame name="menu" src="menu.html" frameborder="0">
 <frameset rows="60, 50%">
 <frame name="header" noresize src="header.html" marginheight="0">
 <frame name="body" noresize frameborder="0" src="about.html">
 </frameset>
 </frameset>
 <frame noresize frameborder="0" name="footer" src="footer.html" frameborder="0">
 </frameset>
</html>

Note that now we have nested two frames inside of the outer frame set. This allows us to control the division of regions in the upper region of the page (above the footer area). Several others items worth pointing out include:

we loaded an HTML page in each frame (the header page, the footer page, the menu page, the about page)
the screen capture in Figure 3 shows the results after having selected the Cat Window Lounger product
each frame (region) has a name. The "body" frame is used extensively as a link target in the menu.html code (below)

In specifying our frame sizes we used three approaches: pixel size, percentage size and the "*" value. The latter is a placeholder for "all remaining space". Thus, in the second frameset (<frameset cols="15%, *">) we create a first column that is 15% of the overall width of the remaining horizontal area, and a second column that is the remaining space (85%).

Figure 3: Integrating frames into our web site.

The HTML code for the menu area (menu.html) is quite simple. Notice that for each link we use the target="body" attribute so that the page displayed as the result of following (clicking) the link is displayed in the frame region named "body".

menu.html

<html>
<body bgcolor="white">

<center>Our Products<hr width="50%"></center>

<ul>
 <li><a href="catLounger.html" target="body">Cat Window Lounger</a></li>
 <li><a href="catnipToy.html" target="body">Deluxe Catnip Toy</a></li>
 <li><a href="litterScoop.html" target="body">Cat Litter Scooper</a></li>
</ul>
 

<center>Our Favorite Links<hr width="50%"></center>
<ul>
 <li><a href="http://www.petswelcome.com" target="body">PetsWelcome.com</a></li>
 <li><a href="http://www.petdental.com" target="body">PetDental.com</a></li>
</ul>

<center>Misc.<hr width="50%"></center>
<ul>
 <li><a href="about.html" target="body">About us</a></li>
</ul>


</body>
</html>

Finally, it's also worth showing the code for the header and the footer pages as well:

header.html

footer.html

<html>
<body bgcolor="#CCCCFF">
<center>
All content © 2002, Pete's Pet Store, Inc.    Email: <a href="mailto:pete@petespets.com">pete@petespets.com
</center>
</body>
</html>

Astute readers will not the use of our © code in the footer.html file. However, the   code may intrigue some readers. This code stands for a non-breaking space character, which is used to force a space between text in HTML. Had we inserted " " (three space characters) in our source code, it's highly likely that only one would be rendered by a web browser when the page is viewed. Thus, to force the desired three spaces, we used the   code.

Lab Activity #4:

Complete the new design of your web site using nested frames. How many frame regions did you eventually settle on? _____

About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN: 0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis.