Creating and Managing Framesets in Dreamweaver
Author's Site: FourLevel.com
Reference ID: 15624
Framesets are popular for many reasons. One of the main reasons
one uses them is because it allows you to display banner and navigation
areas that never leave the viewers sight while linking through the
rest of the pages. This can be an asset if your pages are heavy
and take a while to load. The viewer has something to look at and
is less likely to leave.
In this tutorial were going to take a straightforward approach
to creating and managing Framesets in Dreamweaver. We will start
from scratch and create one of the most common frameset layouts.
The three frame Frameset.
Creating the Frameset
The Frames Objects Palette
Here you have the option of the most commonly used framesets.
You can select any of these to have Dreamweaver premake the
frameset for you. For this tutorial we have chosen "Insert
Top and Nested Left Frame" The outdented button
in the example to the left.
- Create a new page. File »
- Click the down arrow at the top right in the Objects
- Select Frames from the list.
- Select the "Insert Top and
Nested Left Frame" icon
Here is the frameset portion of the HTML generated inside the frameset.htm:
<frameset rows="90,*" cols="*"
frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="banner.htm" >
<frameset cols="150,*" frameborder="NO">
<frame name="leftFrame" noresize src="navigation.htm" scrolling="NO">
<frame name="mainFrame" src="content.htm" scrolling="AUTO">
The Frameset Title
- Go to Modify » Page Properties
- Enter "Frameset" into
the Title field.
- Click OK
On a frame based site, the outer Framesets title will always be
displayed for the pages title no matter what you have named each
individual frame or page in the rest of the Frameset.
Since this is a 3 Frame Frameset, it will consist of 4 HTML pages.
One for the frameset..and one for each of the other content areas.
Naming The Frames
The Dreamweaver Frames Panel
- Open the Frames Panel (Window »
- Click inside the Panel area where it says mainFrame
- In the Property Inspector under Frame Name, replace the
word mainFrame with "ContentFrame" (without
- In the Frames Panel, click
inside of the topFrame area and name it "BannerFrame"
- Do the same for the leftFrame naming it "NavFrame"
Saving the Frameset
With our Frameset created, and all of the Frames named we can now
When saving a frameset for the first time you will be saving the
Frameset .htm first, then the rest of the frames .htm pages (one
Dreamweaver displays a thick black and white border around the Frame
that you are about to save. After you save the first one, the border
will switch to the next Frame to be saved until they have all been
In the Frames Panel select the outermost border of the Frameset
with your mouse. It will highlight in black as shown in the screenshot
above. This the outer Frameset.
- Go to File » Save All Frames.
The Save As dialog box appears. (Remember - You
will be saving the Frameset first)
- Save the first file as "frameset"
and browse to where your site will be. Click Save
- The thick border now moves to the ContentFrame. Save the this
one as "content" and save it in the same folder as the
- Next the thick border will move to the NavFrame. Name this one
- Next the BannerFrame. Name this one "banner"
Now the Frameset and all of its frames have been saved. Here are
the .htm files that were created
The Difference between the Frames and the .htm files
Before we go any further I would like to explain the difference
between the Frames and the .htm files that reside inside of them.
Even though we have named our .htm pages similar to that of the
Frames, there really is no connection to this. You can, while saving
the initial frameset, name the .htm files whatever you like.
The Main Frameset.htm holds all of the data for the structure of
the Frameset and the Frames themselves. That's really its only purpose.
The .htm files (pages) just reside inside of these Frames and can
be replaced with other ones at any time. Basically, any time you
go into the Frames Panel and make adjustments to any of the frames
you are editing the Main Frameset.htm
We are ready to make some adjustments of the layout of our new
Frameset to suit our needs.
This picture should help you understand a little better how the
inner Frameset is nested inside of the Main (outer) Frameset. The
inner Frameset sits inside of the lower row of the outer Frameset.