Creating and Managing Framesets in Dreamweaver

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

Introduction

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 » New Click the down arrow at the top right in the Objects Panel 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">
 </frameset>
</frameset> 

The Frameset Title

1. Go to Modify » Page Properties
2. Enter "Frameset" into the Title field.
3. 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 » Frames) Click inside the Panel area where it says mainFrame In the Property Inspector under Frame Name, replace the word mainFrame with "ContentFrame" (without quotation marks). 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 save everything.
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 by 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 saved.

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.

1. Go to File » Save All Frames. The Save As dialog box appears. (Remember - You will be saving the Frameset first)
2. Save the first file as "frameset" and browse to where your site will be. Click Save
3. The thick border now moves to the ContentFrame. Save the this one as "content" and save it in the same folder as the first
4. Next the thick border will move to the NavFrame. Name this one "navigation"
5. 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

• frameset.htm
• content.htm
• navigation.htm
• banner.htm

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.

A visual

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.

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