Modify Your Frames

Both the <frameset> and the <frame /> elements can be modified with attributes that allow you to control how your frames are displayed and how much your visitors can modify them. For example, you can add or remove borders, select border colors, determine whether your visitors can resize the frames on their browsers, and much more. These attributes give you the ability to fine-tune your layout.

Use Attributes with the <frameset> Element

You used the cols and rows attributes to create your frame layout. There are also a number of additional attributes you can choose from. These allows you to control general frame appearance:

• Turn borders on and off with frameborder. The values are “1” for on and “0” for off. (Netscape 3 and higher and IE 4 and higher also support “yes” for on and “no” for off.)

• Set the thickness of frame borders with border. With this attribute, you set the thickness of the border in pixels. For example, border="5" sets a border that is five pixels thick.

• Add space between frames with framespacing. This also is specified in pixels. Thus, framespacing="20" adds a 20-pixel–wide space between frames. (This attribute is limited to Internet Explorer browsers.)

• Add color to your borders with bordercolor. Specify colors for your frame borders with either color names or hexadecimal code. This affects all the frames on the page. You can also specify border colors for individual frames by placing this attribute in the <frame /> element.

  Note

  The bordercolor=" " attribute works only in Internet Explorer 4 and higher and in Netscape 3 and higher.

The following example shows how the previous illustration would look with added color, framespacing, and border thickness added. The modified <frameset> tag would look like this: <frameset bordercolor="navy" framespacing="10" border="5">.

Use Attributes with the <frame /> Element

In addition to the src="/books/4/238/1/html/2/ " attribute, the frame element takes a number of other attributes. Most of these relate to how the frame functions when displayed, although a few deal with general appearance. The attributes you can use with the <frame /> element are as follows:

• Add white space with marginheight and marginwidth. As their names imply, these attributes control the margins in your frames. You can use them in individual <frame /> elements to specify different margins for each. The values for these attributes can be given in pixels or percentages.

• Prevent resizing with the noresize attribute. To prevent viewers from resizing your frames according to their own tastes, use the noresize attribute. When you insert this intoa <frame /> element, it acts like a toggle switch, fixing your frames at the proportions you set. This attribute should be written as noresize="noresize".

• Add a scrolling bar with the scrolling attribute. You actually have three options where scrolling bars are concerned. If you supply a “no” value here, your frame will never display a scrolling bar, no matter how much content the page has. If you put “yes” as a value, your frame will always display a scrolling bar. By choosing “auto” for the value, the browser will determine when a scroll bar is needed and insert one automatically.

  Shortcut

  The default setting for scrolling is auto. There’s no need to use the scrolling attribute unless you want to turn scrolling off or ensure that it’s always on.

• Add a description with longdesc. To make your Web site more accessible to those using nonvisual browsers, consider using this attribute. With the long description attribute, you can provide a link to a URL containing a description of the frame’s contents. For example, <frame longdesc="description.htm" />.

• Control individual frame borders with frameborder. Used in the <frame /> element, this attribute enables you to turn individual frame borders on and off. If you want to turn off the borders for some, but not all of your frames, this is a useful attribute.

• Control individual frame border colors with bordercolor. With this attribute, you can specify a different color for a particular frame border.

• Turn borders on and off with frameborder. This attribute works the same way as it does in the <frameset> element, by toggling borders on and off. Here you can control an individual frame.

• Assign names to your frames with the name attribute. This is probably the most important of all the attributes you can use with the <frame /> element. By assigning a name to a particular frame and using the target attribute in your hyperlinks, you can direct any number of different pages to display in that frame.

To see some of these attributes at work, modify your framesample.htm code to look like the following code. These changes will remove all the borders, except around the bottom-right frame. A scroll bar will be added to the bottom-left frame.

<html>    <head>       <title>Frame Sample</title>    </head>    <frameset rows="50%, 50%" cols="50, 50%" frameborder="0"           framespacing="0" border="0">      <frame src="/books/4/238/1/html/2/frame1.htm" marginheight="100"            marginwidth="100" />      <frame src="/books/4/238/1/html/2/frame2.htm" noresize="noresize"/>      <frame src="/books/4/238/1/html/2/frame3.htm" scrolling="yes"/>           <frameset cols="50%, 50%" frameborder="0">                <frame src="/books/4/238/1/html/2/frame4.htm" />                <frame src="/books/4/238/1/html/2/frame5.htm" frameborder="1"/>           </frameset>    </frameset> </html> 

By using the different frame attributes, you can control many aspects of your frames’ display. Try experimenting with the framesample.htm page by adding some of the attributes yourself and seeing what changes they make as the page is displayed.

Address Noncompatible Browsers with <noframes>

Although the numbers are small, there still are browsers in use that do not support frames. If someone tries to access your site with one of these, they will not be able to view your pages. As a courtesy to people using these older browsers, it is wise to include special directions inside the <noframes> element. You can either provide alternative content between these or offer directions or even a link to a nonframes version of your site. A sample <noframes> instruction is given here:

<html>    <head>       <title>No Frames</title>    </head>    <frameset>        <frame src="/books/4/238/1/html/2/ "/>        <frame src="/books/4/238/1/html/2/ "/>     </frameset>    <noframes>      <body>        <h1 style="text-align: center">      Your browser does not support frames.<br /> Click this           link for an alternate <a href="noframes.htm">non frames          version</a> of this site.</h1>      </body>    </noframes> </html>

The content in the <noframes> element will be displayed only on browsers that do not support frames. Frame-supporting browsers will ignore it.

Project 14: Create an Inline Frame

Frames were first incorporated by Netscape. Not to be left out, the developers of Internet Explorer threw their own version of frames into the mix. However, IE’s concept is quite different from Netscape’s. Instead of dividing a single window into multiple frames, IE developed the concept of the inline or floating frame. And, like its predecessor, the inline frame has been incorporated into the XHTML recommendation.

An inline frame is more like a mini-window that you can place inside a block of text or the layout of a page. Like regular frames, floating frames draw their content from a separate XHTML document; unlike them, the page they are placed on can have its own content. The easiest way to picture how a floating frame works is to think of it as a sidebar in a magazine article. It provides its own content, but in the context of other content.

To create an inline frame, you use the <iframe> element. This element is a bit of an anomaly because even though it functions as an empty element (you don’t put anything between the two tags), you still must have the closing tag. All the frame attributes given earlier can be applied to inline frames. You also can use the align attribute to position it on the page and cause text to wrap around it (although align has been deprecated in favor of style sheets). To create a sample page that uses a floating frame, follow these steps:

1. Open template.htm and save it as iframe.htm.

2. Set the body backgroundcolor to white with the <style> element and the CSS background-color property

3. Add the following line just below the first <body> tag:

   <iframe src="/books/4/238/1/html/2/frame1.htm" width="200" height="300"> 
   </iframe>

4. Add some text below this line to simulate content for the iframe.htm page.

5. Save the file in your Framesample directory and display iframe.htm on your browser.

The following illustration was created from this code.

<html>       <head> <title>Inline Frames</title>       </head>       <body>          <!-- Comment: notice that the iframe references               lorem.htm as its source. Any HTML file can               go there. -->          <iframe src="/books/4/238/1/html/2/lorem.htm"           width="200" height="300">           </iframe>       <pstyle="font-size: 1.5em"/>  <!-- Comment: lorem.txt was pasted in here.     Supply your own text or go to the author's Web site:www.jamespence.com, 
and download the lorem.txt file. -->>       </p>    </body> </html>

Inline frames can be very useful, but they do have one big disadvantage. Until recently, Internet Explorer was about the only browser that supported them, even though they have been made part of the HTML 4.01 standard. Things are changing, though, as both Netscape and Opera now display inline frames. If you decide to use them, keep in mind the people who visit your site; be sure to provide alternatives for those who won’t see your floating frames.

Project 15: Create a Frame-Based Web Site

Perhaps the best use of frames is in providing an efficient and easily updated means of site navigation. Many sites that use frames will have a column of links on one side of the page and offer content on the other. Although this can be done with tables, as you learned in Chapter 8, you must insert the links on every page where you want the navigation bar to appear. The key to making this work is in using the name attribute with each of your frames and the target attribute with your links.

In Chapter 8 you learned how to design a table-based page with a banner at the top, a navigation bar on the left, content on the right, and a copyright notice at the bottom. For this project, you will duplicate that layout with a frameset, which helps you to compare and contrast frames layout with table layouts. To begin, you need to create four XHTML documents that will make up the “substance” of your layout. You’ll need a banner page, a navigation page, a content page, and a copyright page. The following steps give you the specifics:

1. Create an XHTML page named banner.htm. The only other thing you need to do on this page is to insert the banner.gif image that you used in Chapter 8. Your code for the banner.htm page should look something like the following code listing:

   <html>    <head>       <title>Banner Page</title>    </head>    <body>       <div style="text-align: center">          <img src="/books/4/238/1/html/2/banner.gif" />       </div>    </body> </html>

2. Create a second page named nav.htm. All of your links will go on this page. The easiest way to get them there is to open index.htm and then just copy and paste them into the new page. However, you will need to make one small addition to each link. You’ll need to add the target attribute to point the link to the proper frame. Because your primary frame will be named “content,” modify your links to look like the ones in the code that follows:

   <html>    <head>       <title>Navigation Document</title>       <style>           body {background-color: aqua}       </style>    </head>    <body>      <ul> <li><a href="headings.htm" target="content">Headings</a></li> <li><a href="text.htm" target="content">Text Elements</a></li> <li><a href="sup.htm" target="content">        Superscript &amp; Subscript</a></li> <li><a href="del.htm" target="content">Deleted Text</a></li> <li><a href="pre.htm" target="content">        Preformatted Text</a></li> <li><a href="ulist.htm" target="content">Unordered List</a></li> <li><a href="ulist2.htm" target="content">Multi-level         Unordered List</a></li> <li><a href="olist.htm" target="content">Ordered List</a></li> <li><a href="olist2.htm" target="content">Ordered List        with Start Attribute</a></li> <li><a href="olist3.htm" target="content">Outline List</a></li> <li><a href="dlist.htm" target="content">Definition        List</a></li> <li><a href="text-format.htm" target="content">Text         Formatting</a></li> <li><a href="generic-fonts.htm" target="content">Generic         Fonts</a></li> <li><a href="font-colors.htm" target="content">The Color        Property</a></li> <li><a href="16colors.htm" target="content">The Sixteen         Basic Colors</a></li> <li><a href="css-color.htm" target="content">CSS Color</a></li>      </ul>    </body> </html>

3. Next you need to create a page that will be loaded when the frameset loads. Name this page welcome.htm. This can be a welcome page, a simple orientation to your site, or whatever you wish. For this project, all you need to do is add a paragraph that says, “This is a frames-based layout.” The code for this page is as follows:

   <html>    <head>       <title>Welcome Page</title>    </head>    <body>       <h1 style="text-align: center">This is a            frames-based layout.</h1>    </body> </html>

4. Finally, you need to create your copyright line. Name this page copyright.htm. Again, this requires very little in the way of coding. Just a line that has your name, perhaps some contact information, and a copyright notice. Your page should look like the following code:

   <html>    <head>       <title>Copyright Page</title>       <style>           body {text-align: center}        </style>    </head>    <body>    <p>Web Design by Me! &copy; Copyright 2050.          All Rights Reserved.</p>    </body> </html>

After you have your content pages written, it’s time to put together your frameset. You can create your frame page by following the steps below. If you get confused, check the completed code below the numbered instructions:

1. Open template.htm and save it as framesite.htm.

2. Add a title such as <title>Mini Frames Site</title>.

3. Delete the <body> tags; in their place add a set of <frameset> tags.

4. Modify the opening <frameset> tag to read

   <frameset rows="20%, 70%,  *">

5. Create a frame and link it to banner.htm as follows:

   <frame src="/books/4/238/1/html/2/banner.htm" /> (This will be your banner space.)

6. Now, to construct the navigation bar and content frames, you need to nest another frameset in the existing one. Just below the frame element you just typed, add another set of <frameset> tags.

7. Modify the opening <frameset> tag to read

   <frameset cols="20%, *">

8. Define a frame for your navigation bar:

   <frame src="/books/4/238/1/html/2/nav.htm" />

9. Now comes the part that makes the whole system work. You want to define another frame, this time for your content. However, this frame needs to have a name so you can “target” links at it. For the sake of simplicity, name this frame content. The <frame /> element will look like this:

   <frame src="/books/4/238/1/html/2/welcome.htm" name="content" />

10. Finally, add a closing frameset tag to complete this nested frame.

11. Now, add one more <frame /> element to the main frameset. This one will hold your copyright notice. The element should look like the following line:

    <frame src="/books/4/238/1/html/2/copyright.htm" />

12. Make sure you have properly nested all of your tags and that you have closing tags for both framesets. Save and close this document.

13. Now you’re ready to try out your miniframes site. Load framesite.htm in your browser. The window should resemble the following illustration. (For the illustration, frame1.htm was modified to read “This is your banner frame.”)

    <html> <head> <title>Mini Frames Site</title> </head> <frameset rows="20%, 70%, *">         <frame src="/books/4/238/1/html/2/banner.htm" />             <frameset cols="20%, *">                 <frame src="/books/4/238/1/html/2/nav.htm" />                 <frame src="/books/4/238/1/html/2/welcome.htm" name="content" />             </frameset>         <frame src="/books/4/238/1/html/2/copyright.htm" />    </frameset> </html>