Make your Web page picture perfect with frames

Summary:  Despite the presence of frames in HTML 4.0, Web designers still rely on tables for page layout. However, tables are not as resource efficient as frames and they do not present information as effectively as frames can. Frames minimize unnecessary page reloads, load common parts of your site once, and reduce the amount of page scrolling. Find out the benefits of frames and learn the secret to your pages rendering quickly and efficiently.

Related Tags Website Tips and tricks Website Marketing Website HTML coding Search Engine Optimization Free SEO Tools, Webmaster

Look at the HTML source of many Web pages today and you will find a vast number of tables nested one inside another with various inline colors and fonts defined. Besides adding an unnecessary amount of HTML to a Web page, these tables can make a page difficult to maintain. Further, tables typically require that each Web page on a site contain site navigation and other common pieces of site information, which means that if you want to make changes to these elements on one page, you must make that change on every page.

When you use frames, one frame can contain an HTML file with your site's navigation and a second frame can contain your content. The frame containing the navigation is only loaded into the browser once, and the navigation remains visible when users scroll through your content.

This article shows how to use frames to keep your Web pages clean and efficient. I will explain the use of frames, show you how to plan your Web page to work with frames, walk you through common frame tags, and provide some examples of frames in action.

An introduction to frames

Frames provide an entirely new way of looking at Web pages. HTML frames were first introduced by Netscape. Although the frame tags did not make it into the HTML 3.2 specification (frame tags are in the HTML 4.0 spec), they were supported in Netscape Navigator 2 and in all later versions of Netscape as well as Microsoft Internet Explorer version 3 and higher. And this marks the only limit to using frames: Do not use frames with Web content that will be primarily viewed in old browser versions. However, keep in mind that most Internet users today are either using or have access to Netscape Navigator or Microsoft Internet Explorer 4.x or higher. Often these have been provided with either their operating system or through their Internet service provider.

The best way to explain frames is to look at an example. Figure 1 illustrates a sample Web page that uses four frames. The four frames are:

1. The header, which contains the blue and black banner.
2. The footer, which is colored black and contains some standard site information.
3. The left-hand side navigation area (in blue).
4. The right-hand side frame (in white) that contains the site's welcome information.

Each of these four frames can be updated without the contents of another frame being affected.

For example, in Figure 1, if you were to click on any of the links in the blue navigation area on the left, the contents in the right frame change to display the appropriate information. However, using frames means that the other three sections do not change and, thus, prevent resources from being spent to reload them. Also, since these frames do not change, when a user scrolls through the content in the right white frame, the information contained in the three remaining frames does not change and is always ready for use.

The same Web page could be designed using tables, but the contents of the header, footer, and navigation area would have to be loaded repeatedly as users go to different parts of the site. Also, since everything would be in one page (and one frame), the navigation and header would likely be scrolled out of view, and if the users do not scroll, they would not see the footer at all.

Figure 1: A sample Web page using frames

 

The basics

Some of what I described above, such as clicking on a link in one frame to load content in another frame, may seem a bit mysterious at this point. To explain, let's look at a basic Web page that uses two frames and go over the creation of a frameset.

Whenever you see frames in a Web site there are many HTML files being used. There is always one HTML file for each frame as well as an HTML file defining the layout of the frames. For example, FIgure 2 is made up of three HTML files: framessample1.html (this is the frames file that manages the layout of the two remaining files), bannerfile.html, and contentfile.html.

Figure 2: A sample Web page using frames

 

Minimal planning needs to be done when creating just two frames. You need two HTML files for the source of each frame. You also need to choose the size of the two frames, and decide whether you want to split the screen horizontally or vertically. The HTML in Listing 1 was used to create the frames shown in Figure 2.

Listing 1. Sample two frame HTML file

<html> <head> <title>Sample two frame HTML file</title> </head> <frameset rows="18%,82%"> <frame src="bannerfile.html"> <frame src="contentfile.html"> <noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer 3 or higher is required to view frames.</noframes> </frameset> </html>

The best way to explain the HTML used to create the two-frame Web page shown in Figure 2 is to look at each tag individually. These tags are the minimum required to create frames. (See the section Customize your frames, found later in the paper, for additional frame attributes.)

1. <html>...</html>

Use the <html> tags as you would with any HTML file.

2. <head>...</head>

Use the <head> tags as you would with any HTML file. It is not necessary to add style or reference a cascading style sheet because there is no content to format.

3. <title>...</title>

The title you enter in the frames file is the one that appears in the caption at the top of the browser window. The title in each frame's HTML file does not appear while displayed within frames.

4. <body>...</body> and other formatting tags and links

Use of the <frameset> tag in an HTML file means that you cannot include a <body> tag, any other formatting tags, or links outside of the tags described here.

5. <frameset>...</frameset>

Creates a set of frames that are laid out based on the rows and cols attributes you define. When you define a <frameset> tag you must also include one of two sizing attributes (rows or cols) as part of the tag.

• rows="percent, pixels, or *" attribute The rows attribute splits the browser window into horizontal frames. The height of these frames is defined by row height values separated by commas. You can define the row height in one of three ways: in pixels, as a percentage of the total height of the frameset, or with an asterisk (*), using as much remaining space as possible.
  For example, in Listing 1, <frameset rows="18%, 82%"> splits the frameset horizontally with the top frame taking up 18% of the browser window and the second frame occupying the remaining 82%.
• cols="percent, pixels, or *" attribute The cols attribute splits the browser window into vertical frames. The width of these frames is defined by column width values separated by commas. You can define the column width in one of three ways: in pixels, as a percentage of the total width of the frameset, or with an asterisk (*), using as much remaining space as possible.
  For example, see Listing 3, <frameset cols="25%, 75%"> splits the frameset vertically with the first column taking up 25% of the browser window and the second column occupying the remaining 75%.
• Another rows and cols example It is also acceptable to mix units, for example, <frameset rows="50,50%,*">. This creates a window with three frames. The first frame is 50 pixels, the second frame is 50% of the screen, and the third uses the rest of the space on the screen.

6. <frame>

Used to define the Web page to display in each frame. When you define a <frame> tag you must also include the src attribute as part of the tag.

• src="source URL" attribute This attribute is required to define the file to display in each frame.
  Usage example: <frame src="filename.html">

7. <noframes>...</noframes>

Allows you to enter text that is displayed if your frames file is loaded into a Web browser that does not support frames.

Nested framesets

Now that we have covered some basic frame tags and layout, let's go over some more complex frame layouts. Figure 3 uses frames that go in more than one direction, not just columns or rows. When designing a layout like this, it is helpful to have a clear idea of how you want your frames layed out. In this case, you need three HTML files for the source of each frame and, of course, an HTML file to define the frames.

Figure 3: Sample three-frame Web page

 

To make this Web page, start by creating one frameset containing two horizontal frames or rows, similar to the Web page shown in Figure 2. Then you'll need to split the bottom frame vertically, creating two columns. To create the two vertical frames, another frameset must be created within the first one. Listing 2 shows the code that was used to create the two-frame Web page in Figure 2 with the additional code needed to add the second frameset added. The changes are in bold.

Listing 2. Sample three-frame HTML file

<html> <head> <title>Sample three frame HTML file</title> </head> <frameset rows="18%,82%"> <frame src="bannerfile.html"> <frameset cols="25%,75%"> <frame src="navigationfile.html"> <frame src="contentfile.html"> </frameset> <noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer 3 or higher is required to view frames.</noframes> </frameset> </html>

Naming your frames

Earlier I explained that if you were to click any of the links in the navigation frame in Figure 1, only the material in the content frame changes and the material found in the header, navigation, and footer frames remains unchanged. This is accomplished by giving each frame a name.

The name attribute is an identifier for the frame. A frame's name is used as a link's target, telling the browser where to display the page. Listing 3 shows the sample code that was used to create the three-frame Web page above with the name attribute added to each frame tag. The changes are in bold.

Listing 3. Sample three-frame HTML file containing the name attribute

<html> <head> <title>Sample three frame HTML file</title> </head> <frameset rows="18%,82%"> <frame src="bannerfile.html" name="banner"> <frameset cols="25%,75%"> <frame src="navigationfile.html" name="nav"> <frame src="contentfile.html" name="content"> </frameset> <noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer 3 or higher is required to view frames.</noframes> </frameset> </html>

The name and target attributes are described in greater detail below.

1. name="framename" attribute

Each frame can have a name but it is not required. The name attribute is an identifier for the frame. It allows you to define a specific frame in which a page can be loaded. Usage example: <frame src="filename.html" name="name">

2. target="framename" attribute

Use the link attribute "target" to define where you want the browser to display a page. A frame or window name is used as the value of the target. A typical use of the target attribute is to have a list of links in one frame and have the linked pages open in the defined target or window.

For example, an HTML page in the "nav" frame contains a link to another page that you want to open in the "content" frame. When the link is clicked in the "nav" frame, the "content"frame file changes. Usage example: <a href="newpage.html" target="content">New page</a>

Similarly, if you do not want a page to load in or replace your frameset, define the link target as "_blank";. This will open another instance of the browser and load the page there. Usage example: <a href="http://www.ibm.com" target="_blank">IBM</a>

Customize your frames

There are additional frame and frameset attributes that can be used to further customize each frame's appearance and function. Compare Figure 4 with Figure 3 and you'll see that the frame borders are gone, there is no longer a scroll bar in the banner, and the document in the content frame has increased margins between the document and the edges of the frame. Listing 4(additional attributes are in bold) shows the code used to create the frames shown in Figure 4.

Figure 4: Sample three-frame Web page using additional attributes

 

Listing 4. Sample three-frame HTML file with additional attributes

<html> <head> <title>Sample three frame HTML file</title> </head> <frameset rows="18%,82%" frameborder="no"> <frame src="bannerfile.html" name="banner" scrolling="no"> <frameset cols="25%,75%"> <frame src="navigationfile.html" name="nav" noresize> <frame src="contentfile.html" name="content" marginheight="50" marginwidth="50"> </frameset> <noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer 3 or higher is required to view frames.</noframes> </frameset> </html>

Using the attributes, you can control the appearance of the frameset by removing the raised borders between the frames. You can control the scrolling and resizing for each individual frame, as well as the margins around each frame's HTML source.

1. frameborder="yes or no" attribute

Defines whether the frameborder is visible or not. Typically the browser default for frameborders is yes, so if you want frameborders you do not need to use this attribute. Usage example: <frameset rows="50%, 50%" frameborder="no">

2. scrolling="yes, no, or auto" attribute

You can control whether you want the user to be able to scroll the frame. Typically the browser default for scrolling is either yes or auto. Usage example: <frame src="filename.html" scrolling="auto">

3. noresize attribute

By default, frames can be resized by the user regardless of the frameset rows and cols attributes you define. Add the noresize attribute to the <frame> tag if you want to block resizing. Usage example: <frame src="filename.html" noresize>

4. marginheight="pixels" attribute

Number of pixels above and below a document within a frame. Different browsers have different margin defaults. It confirms the appearance of your frames in the target browsers. Usage example: <frame src="filename.html" marginheight="0">

5. marginwidth="pixels" attribute

Number of pixels to the left and right of a document within a frame. Different browsers have different margin defaults. It confirms the appearance of your frames in the target browsers. Usage example: <frame src="filename.html" marginwidth="5">

Adding some style

Chances are that once you have your frames set up you will want to customize each frame's appearance. Cascading style sheets make it easy to manage the overall appearance of your whole frameset. If you are unfamiliar with cascading style sheets, check the Resources section for a helpful article.

When using a style sheet, apply the default style to the frame with the most changes. This way you do not have to continually reference the style sheet class in all your tags (<body> versus <body class="nav">). Then define a class (BODY.nav, where"nav" is the class) for each frame that remains constant or has little change (for example, a banner or site navigation). This makes it easy to alter the overall appearance of your whole frameset by changing colors or adding background images with just one file.

Listing 5 shows the style sheet that was used with the sample Web pages in this article. Each frame's HTML file links in this style sheet and references the appropriate class.

Listing 5. Sample cascading style sheet to use with frames

/* Frames sample cascading style sheet */ /* BANNER FRAME STYLE */ BODY.banner {font-family: Arial, sans-serif;background-color: #006699;color: #FFFFFF;} /* NAVIGATION FRAME STYLE */ BODY.nav {font-family: Arial, sans-serif;background-color: #99ccff;color: #000000;} /* CONTENT FRAME STYLE FOR PAGE CONTENT */ BODY {font-family : Arial, sans-serif;background-color : #FFFFFF;color: #000000;}

Now you know enough to be popping frames up all over the place. I really enjoy working with frames because they're easy to maintain, they create a user-friendly environment, and above all they tend to reduce Web page reloading. I hope you find frames to be as useful as I have.

Partner site : online news