G.9. frameset Element

All of the Web pages we present in this book have the ability to link to other pages, but can display only one page at a time. Frames allow a Web developer to display more than one XHTML document in the browser simultaneously. Figure G.9 uses frames to display the documents in Fig. G.8 and Fig. G.10.

Figure G.9. XHTML frames document with navigation and content.

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4
 5 
 6 
 7
 8 

"http://www.w3.org/1999/xhtml"> 9

10

Internet and WWW How to Program - Main 11 "keywords" content = "Webpage, design, 12 XHTML, tutorial, personal, help, index, form, 13 contact, feedback, list, links, frame, deitel" /> 14 15 "description" content = "This Web site will 16 help you learn the basics of XHTML and Web page design 17 through the use of interactive examples 18 and instruction." /> 19 20 21 22 23 "110,*"> 24 25 26 27 "leftframe" src="nav.html" /> 28 "main" src="main.html" /> 29 30

</span> </span></span> <span>31</span> <span style="color: #000000;"><span><cke:body></span></span> <span>32</span> <span style="color: #000000;"><span><p></span></span>This page uses frames, but your browser does not <span>33</span> support them.<span style="color: #000000;"><span></p></span></span> <span>34</span> <span>35</span> <span style="color: #000000;"><span><p></span></span>Please, <span style="color: #000000;"><span><a data-cke-saved-href =</span href =</span></span> <span style="color: #999999;"><span>"nav.html"</span></span><span style="color: #000000;"><span>></span></span>follow this link to <span>36</span> browse our site without frames<span style="color: #000000;"><span></a></span></span>.<span style="color: #000000;"><span></p></span></span> <span>37</span> <span style="color: #000000;"><span></cke:body></span></span> <span>38</span> <span style="background-color: #CCCCCC;"><span style="color: #000000;"><span>

39 40 41

Figure G.10. XHTML document displayed in the left frame of Fig. G.9.

(This item is displayed on pages 1519 - 1520 in the print version)

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4
 5 
 6 
 7
 8 

"http://www.w3.org/1999/xhtml"> 9 10

11

Internet and WWW How to Program - Navigation Bar 12 13 14 15

16 17

18 <a href="</span"> "links.html" target = "main"></a><a href="</span"> 19 "buttons/links.jpg" width = "65" 20 height = "50" alt = "Links Page" /> 21 </a>
22 23 <a href="</span"> "list.html" target = "main"></a><a href="</span"> 24 "buttons/list.jpg" width = "65" 25 height = "50" alt = "List Example Page" /> 26 </a>
27 28 <a href="</span"> "contact.html" target = "main"></a><a href="</span"> 29 "buttons/contact.jpg" width = "65" 30 height = "50" alt = "Contact Page" /> 31 </a>
32 33 <a href="</span"> "header.html" target = "main"></a><a href="</span"> 34 "buttons/header.jpg" width = "65" 35 height = "50" alt = "Header Page" /> 36 </a>
37 38 <a href="</span"> "table1.html" target = "main"></a><a href="</span"> 39 "buttons/table.jpg" width = "65" 40 height = "50" alt = "Table Page" /> 41 </a>

42 43 <a href="</span"> "form.html" target = "main"></a><a href="</span"> 44 "buttons/form.jpg" width = "65" 45 height = "50" alt = "Feedback Form" /> 46 </a>
47 48 49 50

Most of our earlier examples adhere to the XHTML 1.1 document type, whereas these use the XHTML 1.0 document types.[1] These document types are specified in lines 23 and are required for documents that define framesets or use the target attribute to work with framesets.

[1] XHTML 1.1 no longer supports the use of frames. The W3C recommends using Cascading Style Sheets to achieve the same effect. Frames are still widely used on the Internet and supported by most browsers, however. The frameset element and the target attribute are still supported in the XHTML 1.0 Frameset and the XHTML 1.0 Transitional document type definitions, respectively. Please refer to www.w3.org/TR/xhtml1/#dtds for more information.

A document that defines a frameset normally consists of an html element that contains a head element and a frameset element (lines 2340). In Fig. G.9, the tag (line 23) informs the browser that the page contains frames. Attribute cols specifies the frameset's column layout. The value of cols gives the width of each frame, either in pixels or as a percentage of the browser width. In this case, the attribute cols = "110,*" informs the browser that there are two vertical frames. The first frame extends 110 pixels from the left edge of the browser window, and the second frame fills the remainder of the browser width (as indicated by the asterisk). Similarly, frameset attribute rows can be used to specify the number of rows and the size of each row in a frameset.

The documents that will be loaded into the frameset are specified with frame elements (lines 2728 in this example). Attribute src specifies the URL of the page to display in the frame. Each frame has name and src attributes. The first frame (which covers 110 pixels on the left side of the frameset), named leftframe, displays the page nav.html (Fig. G.10). The second frame, named main, displays the page main.html (Fig. G.8).

Attribute name identifies a frame, enabling hyperlinks in a frameset to specify the target frame in which a linked document should display when the user clicks the link. For example

<a href="</span"> "links.html" target = "main">
</a>

 

<a href="</span">loads links.html in the frame whose name is "main".</a>

<a href="</span">Not all browsers support frames. XHTML provides the noframes element (lines 3038) to enable XHTML document designers to specify alternative content for browsers that do not support frames.</a>

<a href="</span"></a>

<a href="</span">Portability Tip G 1</a>

<a href="</span">Some browsers do not support frames. Use the noframes element inside a frameset to direct users to a nonframed version of your site.</a>

 

<a href="</span">[Page 1519]</a>

<a href="</span">Figure G.10 is the Web page displayed in the left frame of Fig. G.9. This XHTML document provides the navigation buttons that, when clicked, determine which document is displayed in the right frame.</a>

<a href="</span">Line 27 (Fig. G.9) displays the XHTML page in Fig. G.10. Anchor attribute target (line 18 in Fig. G.10) specifies that the linked documents are loaded in frame main (line 28 in Fig. G.9). A target can be set to a number of preset values: "_blank" loads the page into a new browser window, "_self" loads the page into the frame in which the anchor element appears and "_top" loads the page into the full browser window (i.e., removes the frameset).</a>

<a href="</span"> </a>

<a href="</span">[Page 1520]</a>

<a href="</span">G 10 Nested framesets</a>