Creating and Managing Framesets in Dreamweaver

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

What We Have Done

To sum up what we have done so far...

• We have created a Frameset
• Named all of the Frames
• Saved the Frameset and all of its Frames .htm files
• Resized the Banner and Navigation Frames

The frameset.htm will not need any further work at this point. It's job of containing the other three is done.

Setting the Properties of Each Frame

You are ready to define each frames basic properties and start adding content to the .htm pages inside of them.

The Property Inspector changes, displaying a few different options. The Frame Name (NavFrame) is identified.
We have used the settings above for this tutorial.

Scroll

• Yes (displays scrollbars)
• No (does not display scrollbars)
• Auto (displays scrollbars as needed)
• Default (most browsers display scrollbars as needed)

NoResize

If checked the user can not resize the frame. If unchecked it can be resized with the users mouse

Borders

• Default (most browsers display borders)
• Yes (displays borders)
• No (does not display borders)

Src

Displays the .htm file that occupies this particular Frame. You can change this at anytime.

• Margin Width
• Margin Height

You can set the page Margins here. This is the space at the top and left of the frames window usually defaulted at 10px. There are other methods to set these including using stylesheets. For this tutorial we will use the Page Properties dialog box.

Below are the settings used in this tutorial for the other two frames

The ContentFrame

The BannerFrame

Setting More Properties of the Pages (.htm files) inside the Frames

Let's set some of the properties of each .htm file to make the different frames distinguishable from each other when viewed in a browser.

1. Place the cursor in the NavFrame area (on the actual page - not in the Panel)
2. Modify » Page Properties (The Page Properties dialog box will appear)
3. Change the Bg color to a dark gray color (we used #666666)
4. Set all 4 Page Margins to 0 (zero)
5. Give the page a title (Remember only the title of the "Frameset" will appear in the browser title bar)
6. Click OK

1. Repeat these steps for the BannerFrame area. Set its Bg to another color (we used #669999)
2. Do the same for the ContentFrame's .htm file but leave the Bg set to white (#FFFFFF)
3. File » Save All Frames and then press F12 to preview in a browser.

Here is what you should have so far.

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