Simple Frames
| HTML frames give you a way to display two or more HTML documents at once. Each frame in the browser window displays its own HTML document. Those documents can link to each other or remain completely separate entities. Frame
Most often, as in Figure 10.1, you'll see frames used as a navigation bar on a Web site. The navigation frame can appear on any side of the document, but you'll find it most often on the top or left margins because English (the language of the majority of Web pages) is oriented from top to bottom and left to right. Figure 10.1. A simple two-frame document as it appears in the browser. The left frame contains the site's navigation bar and the right frame contains the pages to which the navigation buttons link. To create frames, you'll need to create a new type of HTML document, called a frameset. A frameset is a special type of HTML document that defines how many frames will be displayed and which HTML documents will appear in each frame. The frameset document for the page is displayed in Figure 10.1. <!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 cols="20%,*"> <frame src="/books/1/174/1/html/2/toc.htm" name="left" /> <frame src="/books/1/174/1/html/2/latin.htm" name="main" /> <noframes> <body> <p><a href="toc.htm">Table of Contents</a></p> </body> </noframes> </frameset> </html> Tip
If you compare this document with a regular HTML document, you should notice right away that the <body> tag is missing. A frameset document uses a new tag, <frameset>, to replace the <body> tag. Within the <frameset> tag, you'll see the <frame /> tag, which is used to describe the contents of each frame, and the <noframes> tag, which is used to instruct the browser what to display in the event the viewer's browser does not support frames, including adding the <body> tag again. Confused? Let's take a closer look at each of these tags. <frameset>Within the <frameset> tag, you will need to define the orientation of the framesin vertical columns, cols, or in horizontal rows, rows. This orientation attribute also requires you to define the size of each of your frames. For example, if you have three vertical frames in your frameset, you will need to specify three size attributes. Look again at the <frameset> tag in the preceding HTML sample. <frameset cols="20%,*"> This tag defines two vertical columns. The first column is 20% of the screen width; the second column fills the remainder of the screen80%. The asterisk (*) tells the browser to fill the remainder of the screen. You can use the same trick if you are defining more than two frames. Although it shows only two values, the following <frameset> tag will actually be used to define three horizontal rows. The first row has been set to 20% of the length of the screen; the asterisk forces the browser to equally divide the remainder of the screen between the other two rows. <frameset rows="20%,*"> You don't have to let the browser figure out the size of your frames. If you are a perfectionist, you can do your own math and specify the size yourself. Just remember that the total value of the sizes can't be more than 100% of the screen. Now that makes sense, doesn't it? Tip
<frame />Like the <img /> tag you learned about in Lesson 8, "Using Graphics," the <frame /> tag uses the src (source) attribute to tell the browser where to find the document to display. The important thing to remember when you are setting up your frameset document is that you are defining the start page for your Web site, or the first framed page in your site. You don't have to figure out every possible combination of pages that might appear, you only have to specify the first one. The <frame /> tag also requires the name and id attributes. Most people name their frames by their location on the browser window. The <frame /> tags in the following example, for instance, call the frame that appears on the left of the screen, left, and the other frame main because it will hold the main pages of the Web site. <frame src="/books/1/174/1/html/2/toc.htm" name="left" /> <frame src="/books/1/174/1/html/2/latin.htm" name="main" /> Tip
Following are a few more attributes of the <frame /> tag that might come in handy:
<noframes>The <noframes> tag that appears in the preceding example tells the browser what to do if it doesn't know how to display frames, or if your visitor has adjusted his browser's settings to refuse frames. <noframes> <body> <p><a href="toc.htm">Table of Contents</a></p> </body> </noframes> The <noframes> tag is not required and many Web page authors choose to ignore it, but it takes very little effort to add it and it makes good sense if you want to be certain that everyone will be able to view your Web site. While it's true that many authors ignore the <noframes> tag, you'll find that just as many authors choose to create an entire non-framed version of their Web site. I happen to think that's overkill. If you are using frames as a navigation bar, you could make a couple simple changes to your main HTML pages to help people who can't see the frames navigate your site. In Figure 10.3, I've made the same frameset document from Figure 10.1 work for people who can't see frames. By adding a simple one-row table to hold a duplicate set of navigation elements, someone who stumbles upon your page, but can't see the frame on the left, can still navigate the site. Figure 10.3. Adding a navigation bar to the top of each of the main pages will make this site work for those people who can't view framed pages. |
EAN: 2147483647
Pages: 151