Creating and Managing Framesets in Dreamweaver

Author: Trent Pastrana
Author's Site: FourLevel.com
Reference ID: 15624

A Closer Look at the Frameset Structure

Here we will define the properties of the Frameset inside of the Dreamweaver interface.

1. In the Frames Panel, select the outermost Frameset by clicking on its border.
2. The Property Inspector will display the properties of this Frameset (below).

The Outer Frameset

You will see by the example above that this is a 2Row, 1Column Frameset.

• The top row is your "Banner" .htm
• The bottom row contains the inner nested Frameset (below)

The Inner (nested) Frameset

You will see by the example above that this is a 1Row, 2Column Frameset.

• The left column is your "Navigation" .htm
• The right column is the "Content" .htm
• This entire Frameset is inside of the bottom row of the outer Frameset.

Frame Space Allocation

Here you can allocate how the frames fit, and are resized in relation to the browser window and each other. For this example we want the NavFrame and BannerFrame to always remain a constant size. The remaining area should be "flexible".

Here are the options we can set and what they do:

• Pixels: Sets the frame to always remain an exact pixel size no matter what. (precedence over Percent and Relative)
• Percent: Sets the Frame to always occupy a given percentage of the Frameset (precedence over Relative)
• Relative: Sets the Frame to occupy any remaining space not occupied by the other Frames.

Changing the Outer Framesets Properties

In the Property Inspector example below is where you determine how big each area will be and how they relate to each other when a page is resized. Here are the visible areas in our tutorial example:

• The Banner area
• The Content area
• The Navigation area

By clicking inside one of the rows or columns in the RowCol Selection box the Panel will display the properties for that particular row or column. We will start with the outer Frameset and make the banner area a little bigger.

1. In the Frames Panel, select the outer Frameset by clicking its border
2. In the Property Inspector, click into the top row of the RowCol Selector box (shown above)
3. In the Row's value field replace the default 80 to 90
4. Press Enter on your keyboard.

This banner area will now expand to a height of 90 pixels.

The bottom row (area containing the inner Frameset)

1. Click into the bottom row of the RowCol Selector box in the Property Inspector
2. Leave this at the default settings of Value = 1 , Units = Relative

We want the bottom row set to relative so it will flex to occupy the rest of the browser window vertically when resized.

Changing the Inner Framesets Properties

The inner Frameset consists of 1Row and 2columns and is nested in the bottom row of the outer Frameset.

The left column (Navigation Frame)

1. In the Frames Panel, select the inner Frameset (clicking the border)
2. In the Property Inspector, click into the left column of the RowCol Selector box
3. In the Column's value field replace the default 80 to 150
4. Leave the Units to Pixels
5. Press Enter on your keyboard.

The Navigation area will now expand to a width of 150 pixels.

The right column (Content Frame)

1. In the Property Inspector, click into the right column of the RowCol Selector box
2. Leave this at the default settings of Value = 1 , Units = Relative

We want this set to relative so that it will flex to occupy the rest of the browser window horizontally when resized.

Borders

Before you get frustrated trying to understand how borders work, I will tell you now that you can not set border properties for the four outermost edges of the window. You can only set border properties for the inside bordering Frames. This is not a limitation of Dreamweaver. This is just how it is in HTML.

When you first create a Frameset in Dreamweaver, all border properties are set to 'No" with the border widths set to "0".

To set the Frameset borders

In the Frames Panel select the Frameset you wish to apply a border to.

• Border - Determines the border thickness. (Must be set to "0' to eliminate unwanted borders).
• Yes - produces a flat border with your color and size settings.
• No - produces a gray border at the width you have set.
• Default - permits the browser to define the color (usually white) and the thickness you chose.

To set the Frames borders

In the Frames Panel select the Frame you wish to apply a border to by clicking in the frame.

• Border - Yes, No, or Default.
• Color - The border color - (In order for the color to appear the parent frameset must be set to Border = Yes).

•  Creating Framesets in Dreamweaver
•  A Closer Look at the Frameset Structure
•  Setting the Frame Properties
•  Targeting Links