When it comes to Web design, frames have been around for quite a long time. In that time they have constantly fallen in and out of favor. Some Web designers can’t live without them, and some designers would never in a million years use them. However, whether you love them or dislike them, frames are here to stay... at least for today.

Frames are an interesting way to design a Web document. Think of a window with separate panes of glass. Now, think of that window as a Web page, and each one of those separate panes of glass as a separate HTML document, and you’ve got a pretty good visualization of a Web page containing frames. For example, you can have a two-frame page with one frame containing the navigation for the site, and the other frame the contents. When you click on a link in the navigation frame, the content frame displays another HTML document, and the frame containing the navigation never changes.

There’s a certain beauty in being able to change one area of a Web page and leave another area static. Good Web designers with a good sense of how to utilize frame technology can create some pretty awesome Web sites.

A framed document is composed of a frameset page (called so because it uses the <frameset> tag), and two or more HTML documents. When the frameset page loads on the visitor’s browser, it calls and loads the HTML documents, and displays the page.

Dreamweaver makes the coding and managing of frames easy with a point-and-click interface. You control the commands for modifying the properties of the overall frames, and each individual frame. This chapter will give you the essentials of creating frames, and information for inserting and modifying frames and framesets, as well as how you might apply them in your own Web designs.

Frame documents use a <frameset>... </frameset> tag set to create documents in multiple views. The multiple view nature of frame documents lets designers keep certain information visible, while other windows within the frame are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.

If you were to design a Frame page directly in HTML, it might look something like this:

Frames divide a browser window into two or more document windows, each displaying a different document, or a different part of the same document. Frames in an HTML document cause a web page to look as if it’s divided into multiple, scrollable regions. Each separate frame has a distinct name, which the frameset uses to load specific HTML documents.

Frames in HTML documents are created and controlled through three distinct element types: FRAMESET, FRAME and NOFRAMES.

A frameset divides the browser window into two or more rectangular regions. For example the following HTML code describes a basic frameset:

This code describes a frame set divided vertically into three regions, and each region is a percentage of the width of the browser window (30%, 30%, and 40%). Since the rows attribute was not used, this frameset does not include rows.

The Frame element defines a single frame in a frameset, and can include up to seven attributes: src, name, frameborder, marginwidth, marginheight, scrolling, and noresize. Since the frame tag is not defined as a container, it has no matching end tag. The following is an example of a frame element:

The noframe element contains content that should only be rendered when frames are not displayed. Noframe is typically used in a Frameset document to provide alternate content for browsers that do not support frames or have frames disabled. The following is an example of the noframes tag.

Most of the framesets on the Web today use two or three frames. For example, a common setup is to have one narrow frame spanning the top of the page to hold a banner and some site navigation; a lower-left frame to hold a table of contents or additional navigation; and a large lower-right frame to hold the content of the site. Or it can be as simple as two frames: one small frame for navigation, and a larger frame for the main body of information. You can create a new document with frames using samples from the New Document dialog box or add frames to an existing document using the Frames button or dragging a frame border. After you create a frameset, you can enter text, images, and other content in each of the frames, as you would for any normal HTML document, or you can instruct the frame to load a previously created HTML document.

After you create a frame, you can specify the content you want to appear in it. You can insert new content in a frame the same way you insert other content, such as text or images, into a Web page or open an existing HTML Web page in a frame. If you consistently use the same Web page in a frame, you can make the page the default document when the frameset appears in a browser.

If a browser doesn’t support frames, you can provide information to visitors instead of leaving them hanging with nowhere to go. When a browser that doesn’t support frames loads the frameset document, the browser displays the information you provide in a noframes tag. The Edit NoFrames Content command makes it easy to add the information you want without inserting HTML code. However, if you are comfortable entering code, you can certainly enter the information in the noframes tag.

Before you can make any changes to a frame or frameset, you need to select it first. You can select a frame or frameset directly in the Document window, by using keyboard shortcuts, or by using the Frames panel. The Frames panel shows you the frames within a frameset. A frameset appears with a thick border and each frame appears with a thin gray link along with a frame name, which makes them easier to view and select. When a frame is selected in the Document window, the frame border appears outlined with a dotted line. When a frameset is selected, all the frame borders appear with a light dotted line.

A frameset document consists of separate frames. As a matter of fact, each one of the frames is simply a small HTML document. Frames can contain any normal HTML information, including text, tables, images, multimedia, objects, and even nested frames. When you create a Frameset document, you’re actually creating several separate documents. You have the frameset HTML document, and a separate HTML document for each of the frames. For example, if you create a frameset with two frames, you’re actually saving three separate documents: one for the frameset and one for each of the frames within the document.

When you create a frameset with two frames, you’re actually saving three separate documents: one for the frameset and one for each of the frames within the document. You can save the frameset and each document in a frame individually or you can save them all at once. Before you can preview a frameset in a browser, you need to save the frameset and all frame document first. Once the frame documents have been saved, they can be opened independently of the frameset and modified just like regular HTML documents; any changes to the page will be reflected when it’s reopened in the frameset. When you reopen the frameset document, it locates and reopens the associated pages and place them into the proper frames.

Once a frameset is created, it’s possible, and quite likely, that you will want to modify the dimensions of the frames to fit a specific design need. Remember that the frame within a frameset functions as a container for a specific HTML document. If this document is not set up correctly, you may experience problems with unwanted reformatting of the information when it displays in the browser window. Therefore, it’s important to modify the frames to give your document the best look and feel for the visitor.

As mentioned before, frameset documents are simply individual HTML documents, with all the rights and privileges of any other HTML document. They can have any content; including tables and layers, and they have the same properties of any other HTML document, such as: backgrounds, margins, headings, etc. You can change the properties of a HTML document destined to be displayed within a frameset in one of two ways. The first is to open the document directly in Dreamweaver, make any changes, and then save the document. When it’s opened within the frameset, the changes to the properties will be displayed as ordered by you. The second way is to change their properties while viewing the document within the frameset (recommended). Since the procedure is basically the same, we’ll examine the changing of page properties while viewing the document in the frameset.

In addition to setting properties for the individual frames and frame documents, you can also set properties for the frameset. After you select the frameset, you can use the Properties panel to view and set frameset properties. The available options allow you to change border and frame sizes. You can show or hide borders, change border width and color, and set the frame sizes for rows and columns of the frameset. The RowCol Selection area in the Properties panel provides tabs on the left side and top to select a frame. After you select a frame, you can set the frame height and width you want in the Value box and how much space the browser allocates to each frame in the Units popup. You can set these options for each frame you select. In the Document window, you can also change the frameset title.

Thus far, this chapter has dealt with the creation of frameset documents, and the adding and saving of Web data on the individual HTML pages. However, the real power of frames is their ability to load new pages into selected frames, based on an available link. For example, you could be a photographer that wants people to see your images (and hopefully buy them). You create a two-framed Web document that has links to your images on the left. When you click on a link, the frame on the right changes to display a large example of your photographic talent. To use a link in one frame to open a document in another frame, you need to set a target for the link. The target instructs the browser into which frame to place the new document. When a visitor clicks the link, the specified content opens in the specified frame.

This method is great for those Web sites that contain a lot of links to a lot of boring text documents. To make this process work, the name of the HTML document should be the name you want for the link; for example, formatting.html, or frame_help.html. The documents are the standard HTML type: graphics, text... the whole nine yards. You just want to create a simple, almost file folder kind of page, where a visitor clicks on a link, and it loads the appropriate page in another frame.