10.1 Frame-Based Web SitesFrames (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.
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 LayoutWhen 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.
10.3 Frame TagsThe 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>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:
10.4 Frame ContentWithin 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.
<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.
10.5 Nesting FramesWe 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.
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:
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".
Finally, it's also worth showing the code for the header and the footer pages as well:
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.
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis.