Building a Frameset

You might be surprised to find out that frames aren't too difficult to work with in HTML code. So how did I make the pages shown in Figure 16.1 and Figure 16.2? First, I created the contents of each frame as an ordinary HTML page. These pages don't contain any tags you haven't already seen in other hours. To put them all together, I used a special kind of page called a frameset document.

Creating a Frameset Document

A frameset document actually has no content. It only tells the browser which other pages to load and how to arrange them in the browser window. Listing 16.1 shows the frameset document for the Entropy Almanac site shown in Figure 16.1 and Figure 16.2. The pages in this example serve as somewhat of a throwback to the 1990s, when the words entropy and Internet were practically synonymous.

A frameset document is an HTML page that instructs the web browser to split its window into multiple frames, and specifies which web page should be displayed in each frame.

Listing 16.1. Frameset Document for the Site Shown in Figure 16.1

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
  <head>
    <title>The Entropy Almanac</title>
  </head>

  <frameset rows="80,*">
    <frame src="banner.html" name="top" />
    <frame src="greeting.html" name="main" />
    <noframes>
     <body>
       <h1>The Entropy Almanac</h1>
       Your browser does not support frames. Please <a href="noframes.html">click
       here</a> for the frameless version of this web site.
     </body>
    </noframes>
  </frameset>
</html>

In the listing there is a <frameset> tag instead of a <body> tag. No tags that would normally be contained in a <body> tag can be within the <frameset> tag. The <frameset> tag in this example includes a rows attribute, meaning that the frames should be arranged on top of each other like the horizontal rows of a table. If you want your frames to be side by side, use a cols attribute instead of rows .

By the Way

It's important to notice that the DTD used in this sample page is not the familiar XHTML 1.1 DTD that you've been using throughout the book. This is because frames are not supported in the standard XHTML 1.1 DTD. Therefore, to validate a page with frames you must instead use the XHTML 1.0 Frameset DTD, which is a special DTD designed just for pages that use frames.

You must specify the sizes of the rows or cols , either as precise pixel values or as percentages of the total size of the browser window. You can also use an asterisk ( * ) to indicate that a frame should fill whatever space is available in the window. If more than one frame has an * value, the remaining space will be divided equally between them.

In Listing 16.1, <frameset rows="80,*"> means to split the window vertically into two frames. The top frame will be exactly 80 pixels tall, and the bottom frame will take up all the remaining space in the window. The top frame contains the document banner.html (see Listing 16.2), and the bottom frame contains greeting.html (see Listing 16.3).

Did you Know?

After the framesets in Listing 16.1, I included a complete web page between the <body> and </body> tags. Notice that this doesn't appear at all in Figure 16.1 or Figure 16.2. All web browsers that support frames will ignore anything between the <noframes> and </noframes> tags.

All major browsers these days support frames, so the issue of frames compatibility is much less significant now than in years past. Even so, it's easy enough to include the <noframes> tag and cover the few users who may still have an ancient browser.

Listing 16.2. The `banner.html` Document Serves as a Navigation Bar for the Entropy Almanac Web Page

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
  <head>
    <title>The Entropy Almanac</title>
  </head>

  <body style="background-image:url(http://flylib.com/books/4/158/1/html/2/back.gif)">
    <div>
      <a href="greeting.html" target="main"><img
      src="eatiny.gif" alt="" style="border-style:none" /></a>
      <a href="news.html" target="main"><img
      src="news.gif" alt="" style="border-style:none" /></a>
      <a href="facts.html" target="main"><img
      src="facts.gif" alt="" style="border-style:none" /></a>
      <a href="tales.html" target="main"><img
      src="tales.gif" alt="" style="border-style:none" /></a>
    </div>
  </body>
</html>

Listing 16.3. The `greeting.html` Document Acts as a Single Content Frame Within the Entropy Almanac Web Page

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
  <head>
    <title>The Entropy Almanac</title>
  </head>

  <body style="background-image:url(http://flylib.com/books/4/158/1/html/2/back.gif)">
    <div style="text-align:center">
      <img src="easmall.gif" alt="" /><br />
      <img src="1999.gif" alt="" /><br />
      The Entropy Almanac is an eclectic compendium of philosophical
      illuminations, mathematical profundities, cutting-edge science, and
      high-tech tools. Choose a category above to begin your explorations.
    </div>
  </body>
</html>

By the Way

The pages in Listing 16.2 and Listing 16.3 use the XHTML 1.0 Transitional DTD, which is in fact the most commonly used XHTML DTD. Although the XHTML 1.1 DTD is newer and much stricter, because frames require you to stick with XHTML 1.0 for validation purposes, it made sense to also use XHTML 1.0 for the pages that appear within the frames.

{% if main.adsdop %}{% include 'adsenceinline.tpl' %}{% endif %}

Because you can't predict the size of the window in which someone will view your web page, it is often convenient to use percentages rather than exact pixel values to dictate the size of the rows and columns . For example, to make a left frame 20% of the width of the browser window with a right frame taking up the remaining 80%, you would type the following :

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

An exception to this rule is when you want a frame to contain graphics of a certain size; then you would specify that size in pixels and add a few pixels for the margins and frame borders. This is the case in Listing 16.1, in which the images in the top frame are each 42 pixels tall. I allowed 38 extra pixels for margins and borders, making the entire frame 80 pixels tall.

Whenever you specify any frame size in pixels, it's a good idea to include at least one frame in the same frameset with a variable ( * ) width so that the document can grow to fill a window of any size.

Adding the Individual Frames

Within the <frameset> and </frameset> tags, you should have a <frame /> tag indicating which HTML document to display in each frame. (If you have fewer <frame /> tags than the number of frames defined in the <frameset> tag, any remaining frames will be left blank.)

Include a src attribute in each <frame> tag with the address of the web page to load in that frame. (You can put the address of an image file instead of a web page if you just want a frame with a single image in it.)

You can include any HTML/XHTML web page you want in a frame. For smaller frames, however, it's a good idea to create documents specifically for the frames with the reduced display area for each frame in mind. The top frame in Figure 16.1, for instance, is listed in Listing 16.2, and is much shorter than most web pages because it was designed specifically to fit in a frame under 80 pixels tall.

By the Way

You may notice that the <a> and <img /> tags in the banner.html document in Listing 16.2 are arranged a bit strangely. Because I didn't want any space between the graphics, I had to make sure that there were no spaces or line breaks between any of the tags. Therefore, I had to put all the line breaks inside the tags. This makes the HTML a bit harder to read, but keeps the images right next to each other on the page.