Section G.9. frameset Element

[Page 1516]

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



<?xml version =




"1.0"




?>



2



<!DOCTYPE html PUBLIC




"-//W3C//DTD XHTML 1.0 Frameset//EN"



3



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"




>



4


5



<!-- Fig. G.9: index.html -->



6



<!-- XHTML Frames I -->



7


8



<html xmlns =




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




>



9



<head>



10



<title>


Internet and WWW How to Program - Main


</title>



11



<meta

name

=




"keywords"




content =




"Webpage, design,



12



XHTML, tutorial, personal, help, index, form,



13



contact, feedback, list, links, frame, deitel"




/>



14


15



<meta name =




"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



</head>



21


22



<!-- the <frameset> tag sets the frame dimensions -->



23




<frameset cols =




"110,*"




>

[Page 1517]


24


25



<!-- frame elements specify which pages -->



26



<!-- are loaded into a given frame -->



27




<frame name =




"leftframe"




src =




"nav.html"




/>




28




<frame name =




"main"




src =




"main.html"




/>




29


30




<noframes>




31



<body>



32



<p>


This page uses frames, but your browser does not

33

support them.


</p>



34


35



<p>


Please,


<a href =




"nav.html"




>


follow this link to

36

browse our site without frames


</a>


.


</p>



37



</body>



38




</noframes>




39


40




</frameset>




41



</html>

[Page 1519]

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



<?xml version =




"1.0"




?>



2



<!DOCTYPE html PUBLIC




"-//W3C//DTD XHTML 1.0 Transitional//EN"



3



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"




>



4


5



<!-- Fig. G.10: nav.html -->



6



<!-- Using images as link anchors -->



7


8



<html xmlns =




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




>



9


10



<head>



11



<title>


Internet and WWW How to Program - Navigation Bar

12



</title>



13



</head>



14


15



<body>



16


17



<p>



18




<a href =




"links.html"




target =




"main"




>




19



<img src =




"

buttons

/links.jpg"




width =




"65"



20



height =




"50"




alt =




"Links Page"




/>



21



</a><br />



22


23




<a href =




"list.html"




target =




"main"




>




24



<img src =




"buttons/list.jpg"




width =




"65"



25



height =




"50"




alt =




"List Example Page"




/>



26



</a><br />



27


28




<a href =




"contact.html"




target =




"main"




>




29



<img src =




"buttons/contact.jpg"




width =




"65"



30



height =




"50"




alt =




"Contact Page"




/>



31



</a><br />



32


33




<a href =




"header.html"




target =




"main"




>




34



<img src =




"buttons/header.jpg"




width =




"65"



35



height =




"50"




alt =




"Header Page"




/>



36



</a><br />



37


38




<a href =




"table1.html"




target =




"main"




>




39



<img src =




"buttons/table.jpg"




width =




"65"



40



height =




"50"




alt =




"Table Page"




/>



41



</a><br />

[Page 1520]


42


43




<a href =




"form.html"




target =




"main"




>




44



<img src =




"buttons/form.jpg"




width =




"65"



45



height =




"50"




alt =




"Feedback Form"




/>



46



</a><br />



47



</p>



48


49



</body>



50



</html>

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 <frameset> 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.

[Page 1518]

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 =




"links.html"




target =




"main"




>

loads links.html in the frame whose name is "main" .

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.

Portability Tip G.1

Some browsers do not support frames. Use the noframes element inside a frameset to direct users to a nonframed version of your site.

[Page 1519]

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.

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 ).