Nested Frames | Sams Teach Yourself HTML in 10 Minutes (4th Edition)

You might want to be more creative with your frame layout. You can use the <frameset> tag more than once in a single frameset document. This feature enables you to nest frames within each other. Following is an example of a nested frame. I indented the second <frameset> to make it easier to read.

<!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" lang="en"> <head> <title>First Frameset</title> <style type="text/css"> </style> </head> <frameset rows="15%,*,10%"> <frame src="/books/1/174/1/html/2/sitename.htm" name="top"  />   <frameset cols="20%,*,11%">     <frame src="/books/1/174/1/html/2/toc.htm" name="left"  />     <frame src="/books/1/174/1/html/2/latin.htm" name="main"  />     <frame src="/books/1/174/1/html/2/motto.htm" name="right"  />   </frameset> <frame src="/books/1/174/1/html/2/contacts.htm" name="bottom"  />   <noframes>     <body>     <p><a href="toc.htm">Table of Contents</a></p>     </body>   </noframes> </frameset> </html>

The first <frameset> tag defines three horizontal frames, but the second <frameset> tag divides the middle row into three column frames. Figure 10.4 shows you how this nested frameset will appear in the browser.

Figure 10.4. All the borders have been left showing to help you see where the nested frames are in this example.

`<iframe>`

You can create a frame one more way by using the <iframe>, or inline frame, tag. Rather than creating a separate frameset document, you define an inline frame within a regular HTML document because it appears in the middle of another document. Figure 10.5 shows the same content as the sample in Figure 10.4, but this page was created using an inline frame. You can see the HTML document for this page in Figure 10.6.

Figure 10.5. The scrollable document in the center of this page was added with an inline frame.

Figure 10.6. Style sheet properties are used to help define the colors and fonts for this document. The <iframe> tag is actually embedded inside a table to achieve the page layout shown in Figure 10.5.

You can apply all the same attributes for regular frames to the <iframe> tag except the noresize attribute because unlike regular frames, inline frames cannot be resized.

Caution

As of right now, the <iframe> tag only works with Internet Explorer 4 and higher browsers, so don't try to use it unless you know your audience has one of those browsers.

Tip

Throughout the book, you have been cautioned that not all browsers support all the HTML tags you've learned. For a fee, WebSideStory's StatMarket® tracks browser usage and other fun statistics on its Web site (http://www.websidestory.com/services-solutions/datainsights/statmarket/overview.html). You can use that knowledge to decide whether you are willing to take the risk of using a tag such as <iframe>, which is not supported by all browsers.