1. What are frames?
2. Uses for frames.
3. Websites using frames.
4. Creating frames.
5. Inserting a predefined frameset.
6. Frames panel.
7. Setting frameset properties.
8. Creating a nested frameset.
9. Sample frameset code.
10. Here's what the frames look like in Dreamweaver.
11. To add frames to your website.

1. What are frames?

Frames are used in a Web page to divide it into multiple HTML pages. For example, a Web page consists of three frames. One thin frame on the side that contains a scrolling menu, one frame that runs along the top that contains the logo and title of the Web site, and one large frame that takes up the rest of the page and contains the main content. Each of these frames is an independent HTML page. They all work together on the page through the use of one or more framesets, which is an HTML page that defines the structure and properties for the Web page, including information about the number of frames displayed on a page, the size of the frames, the source of the page loaded into a frame, and other definable properties. The frameset page isn’t displayed in a browser; it simply stores information about how the frames on a page will display.

2. Uses for frames

Frames can be confusing to implement, however, and you can often create a Web page without frames that accomplishes the same goals as a page using frames. For example, if you want the navigation on the left side of your page, you can either split your page into two frames, or just include the left navigation on every page in your site. The difference is that with frames you only have to create the navigation one time. If you do decide to go ahead and use frames in your Web site, make sure that you understand the relationship between frames and framesets because linking with frames can be confusing.

3. Websites using frames Back to top

http://www.usahistory.com/frames.htm

http://www.commrex.com/

http://www.astrology-online.com/frames.htm

There are two ways to create a frameset in Macromedia Dreamweaver: you can design it yourself, or you can select from several predefined framesets. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to quickly insert a frame layout into your page. You can only create frames in the document window's Design view. Back to top

Predefined framesets make it easy for you to select the type of frameset you want to create.

The predefined frameset icons in the Frames category of the Objects panel provide a visual representation of each frameset as applied to a selected document.

The selected frameset surrounds the current document—the document in which the insertion point is located. The blue area of a predefined frameset icon represents the currently selected page or frame in a document, and the white area represents the new frame or frames.

To insert a predefined frameset:

1. Place the insertion point in the document.
2. Then do one of the following:
   In the Frames category of the Objects panel, select a predefined frameset. To insert the frameset, you can click an icon or drag an icon directly to the document.
   To select a predefined frameset, choose Insert > Frames > Left, Right, Top, Bottom, Left and Top, Left Top, Top Left, or Split. Back to top
   

The Frames panel provides a visual representation of the frames within a document. You can click a frame or frameset in the Frames panel to select that frame or frameset in the document, and then you can view or edit the properties of the selected item in the Property inspector. See About frame and frameset properties.

The Frames panel shows the hierarchy of the frameset structure in a way that may not be apparent in the document window. In the Frames panel, a thick three-dimensional border surrounds a frameset; frames are surrounded by a thin gray line, and each frame is identified by a frame name.

To display the Frames panel, do one of the following:

Choose Window > Frames.
Press Ctrl+F10 (Windows).

To select a frame in the Frames panel:
Click the frame in the Frames panel.

To select a frameset in the Frames panel:
Click the border that surrounds the frames in the Frames panel. Back to top

Use frameset properties to set borders and frame size. Setting a frame property overrides the setting for that property in a frameset. For example, setting border properties in a frame overrides the border properties set in the frameset.

Predefined framesets are used to quickly apply a frameset to a document. Predefined framesets share the following default property values: no borders, no scroll bars, and no resizing of frames when viewed in a browser. To change the default values, select the options you want in the Property inspector.

To view frameset properties:

1. Choose Window > Properties to display the Property inspector, if it isn't already open.
2. Do one of the following:
   Click a border between two frames in the Document window.
   Click the border that surrounds the frames in the Frames panel.
3. To see all the frameset properties, click the expander arrow in the lower right corner of the Property inspector.
Back to top

To specify frameset properties:

1. Select a frameset.
2. In the Borders pop-up menu, select whether you want to display borders around frames when the document is viewed in a browser.
   If you want to display borders, select Yes.
   If you don't want to display borders, select No.
   If you want the user's browser to determine how borders are displayed, select Default.
3. In the Border Width field, type a number to specify the width of the borders in the current frameset.
4. In the Border Color field, use the color picker to select a color for the border, or type the hexadecimal value for a color.
5. To select frame size options, click the tabs on the RowCol Selection box to select a row or the tabs on top to select a column. Then in the Value field, type a number to set the size of the selected row or column, and in the Units pop-up menu, set the unit of measure for the number in the Value field.
   

A frameset inside another frameset is called a nested frameset. Each new frameset you create includes its own frameset HTML document and frame documents. Most Web pages that use frames are actually using nested frames, and several of the predefined framesets in Dreamweaver also use nesting. For example, a document with three frames might display a company's logo in a frame at the top of the document, navigation controls in a frame on the left side of a document, and content in a third frame.
To create a nested frameset:

1. Place the insertion point in the frame where you want to insert a nested frameset.
2. Do one of the following:
   Choose Modify > Frameset > Split Frame Up, Down, Left, or Right.
   In the Frames category of the Objects panel, select a frameset icon.
   Choose Insert > Frames > Left, Right, Top, Bottom, Left and Top, Left Top, Top Left, or Split. Back to top
   
   

9. Sample frameset code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

10. Here's what the page looks like in Dreamweaver:

As you can see the page is divided into 3 sections or frames.

Back to top

11. To add frames to your website:

1. Start with a new Web frameset page. Select FILE/NEW.
2. In the dialog box that appears select FRAMESETS.
3. In the framesets OPTION BOX to the right select the type of frames layout you need.
4. The sample above was created using FIXED RIGHT, NESTED TOP.
5. In code view you will see the code for the frameset. Each frame has been filled with nonexistent default file names of something similar to this:
   <frame src=file:///C|/Program%20Files/Macromedia/Dreamweaver%20MX/UntitledFrame-11
6. Replace the default frame file names with the name and location of the files you would like to appear in the frames.
7. Once the frameset has been created you can resize the frames by dragging the frame borders while in Design View.
8. You can view and select individual frames by using the frame inspector in the lower right hand corner of the Dreamweaver interface.
   Back to top