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 DocumentA 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="/books/4/158/1/html/2/banner.html" name="top" /> <frame src="/books/4/158/1/html/2/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.
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).
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(back.gif)"> <div> <a href="greeting.html" target="main"><img src="/books/4/158/1/html/2/eatiny.gif" alt="" style="border-style:none" /></a> <a href="news.html" target="main"><img src="/books/4/158/1/html/2/news.gif" alt="" style="border-style:none" /></a> <a href="facts.html" target="main"><img src="/books/4/158/1/html/2/facts.gif" alt="" style="border-style:none" /></a> <a href="tales.html" target="main"><img src="/books/4/158/1/html/2/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(back.gif)"> <div style="text-align:center"> <img src="/books/4/158/1/html/2/easmall.gif" alt="" /><br /> <img src="/books/4/158/1/html/2/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>
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 FramesWithin 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.
|
EAN: 2147483647
Pages: 345