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.
- In the Frames Panel, select the
outermost Frameset by clicking on its border.
- 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.
- In the Frames Panel, select the outer Frameset by clicking its
border
- In the Property Inspector, click into the top row of the RowCol
Selector box (shown above)
- In the Row's value field replace the default 80 to 90
- 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)
- Click into the bottom row of the RowCol Selector box in the
Property Inspector
- 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)
- In the Frames Panel, select the inner Frameset (clicking
the border)
- In the Property Inspector, click into the left column of the
RowCol Selector box
- In the Column's value field replace the default 80 to 150
- Leave the Units to Pixels
- Press Enter on your keyboard.
The Navigation area will now expand to a width of 150 pixels.
The right column (Content Frame)
- In the Property Inspector, click into the right column of the
RowCol Selector box
- 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).
|