Home > Tutorials > Dreamweaver > Intermediate

Dreamweaver Tutorial 0004 - Using Frames

This tutorial will introduce you to using the frame capabilities of Dreamweaver. Frames are not a generic, all-purpose HTML element that can be used in every site successfully. In fact, most web sites do not need frames at all. At the end of this article, I will go into more detail about the Pros and Cons of using frames in your web site.

You will need a couple of things for this tutorial. If you already did the first Dreamweaver tutorial, and still have the related files, you can use them with this tutorial. If you do not have those files, you can download this archive:

dw0004-archive.sit --- 28K

1. Locate the dw0004-archive folder on the hard drive. Duplicate the item named index.html and rename it index2.html (select the file, go to the FILE menu and choose Duplicate. To rename, click on the filename to highlight it, and type the new name).

2. Open index2.html in Dreamweaver. Go to the MODIFY menu and select FRAMESET > Split Frame Down. This will divide the page into two equal frames.

3. Open the FRAMES palette (WINDOW > FRAMES, or command-F10). Select the top frame by clicking in the top frame of the Frames palette. We need to name each frame. Open the Properties Inspector. In the Frame Name area, name the frame "topnav".

4. Select the bottom frame. Name this frame "main".

5. Select the top frame again. In the Properties palette, set Scroll to NO, the Borders to NO, check the No Resize box, and set the border color to 3333CC (the background color). Now we need to pick the frame source. In the Src area, click the browse button. Locate navsource.html and select it. Whatever appears on this page (in this case a navigation bar) will appear in the top frame of the frameset.

6. Save the frameset. You will need to go to the FILE menu and select SAVE FRAMESET rather that just SAVE.

7. Select the bottom frame. Set the Src to homepage.html. Set the Scroll to Auto, check the No Resize button, the Border to No and the Border color to the background color (3333CC).

8. Save the Frameset again.

9. Now we need to make a few more changes. Select the entire frameset by clicking the outer border in the Frames palette. In the Page Properties dialog (under the MODIFY menu), set the page title to "It's a Site!" and set the background to 3333CC and the text color to FFFFFF. If you do not set the title attribute for this frameset, Untitled Document will appear as the title in the Browser window and in Bookmarks (or Favorites). In the Properties palette, set the Borders to No, the Border Width to 0, the color to 3333CC, and the Row value to 50 pixels.

10. Save the FRAMESET again.

Next, we need to link our pages. Linking when using frames is a little more complicated than normal linking between pages. When you use links in a page with frames you need to specify the Target frame, or the frame that will contain the linked page. In a normal page, you do not need to specify the target, since all pages will open in the same window. In pages with frames, if left unspecified, the links will also open in the same window. This can create big problems, especially in the case of frames designed specifically to hold just a navigation bar.

11. Select the Bio button in the navigation bar located in the top frame. In the Properties inspector, notice the area directly below the link box. It is labeled Target. Click the back triangle to reveal a pull-down list of options. This is why you need to name your frames. Choose the item named "main". This button will open the page in the main frame.

12. Select each button and change the target to "main". If you are working from the dw0001 tutorial files, select the Home button and change the link to homepage.html from index.html. Set the target to main.

13. Save your frameset, the Preview it (F12 key). Try some of your links. Do the pages open as you expect? If not, go back and make sure that each button has the target set correctly.

14. If you have links to any outside sites, change the target to _blank in order to open the site in a new window. It is considered a breach of Netequette (not to mention copyright) to open material that is not yours within your site framework.

That's all there is to it! The key items to remember are the frame source and the target option for links.

Now for a few words about the Pros and Cons when using frames:

1. - Accessibility. It is a lot harder for persons with disabilities to use sites with frames. For example, text browsers such as Lynx are not frames capable. Therefore, users with this browser cannot access your site. It is essential that you provide a non-frames version for browsers that do not support frames.

2. - Search Engine Access. Search engines cannot index sites with frames very well. Most only index the frameset document itself rather than the actual homepage document that contains keywords and actual material. Things have gotten better, but it is still far from perfect.

3. - Annoyance factor. Frames used to be the most annoying element of web sites. They were big, bulky, and gray with scrollbars. Yuck. Webmasters that use frames unsuccessfully usually try to incorporate too much information into each frame, assume that everyone has a 1600 x 1200 resolution monitor, don't provide for resizing vertical navigation bars, and don't provide non-frames content. Keep any navigation within the minimum horizontal and vertical size to reduce the appearance of scrollbars (which really mess up a design).

4. + Frames are good for providing consistent navigation that does not have to load every time a page is accessed on your site. You can save load time by putting image intensive navigation in a frame. Just remember to provide alternate text navigation on each individual page.

5. + Frames are good for providing a place to put advertisements. Providing adspace in a frame minimizes the overall effect on the design of the site. The Macromedia and WebMonkey sites handle this very well.

So, it is really up to the designer to decide if a site can benefit by using frames, or if frames are not necessary. In any case, you now know how to create frames in Dreamweaver. Happy site making!