How to Build a Frame Page in Dreamweaver MX

The Computer Gal on Facebook
Ask to receive tips and handouts to your email.

Framed pages are different from other pages because each page isn't created with just one HTML file. Framed pages have a separate file for each frame and another file to hold them all together. The file that holds them all together is called a "frameset." This is a file with no <body></body> tags because it doesn't have its own content on the page. It just tells the browser which frame file goes where and how big it is.
Dreamweaver CS4 was designed to discourage you from using Frames (good thought.) Earlier versions of Dreamweaver assumed right in the File Menu, that you might be building a site with Frames. Those options are gone with the later versions of Dreamweaver. But, CS4 still recognizes that a site you are working on may be built with frames. In any case, you may have an old site, and your customer doesn't want to switch from frames. Or, you may have a site that you have to convert from frames. In any case, as a web developer, you should know about frames!

Frame options in Dreamweaver 8 New Document window.

Frame options in Dreamweaver CS4 New Document window.
Open a new file. Take a look at the code in Code View; notice the pattern of the code has the usual <HTML>, <BODY>, etc, then go back to Design View. Add a title to your page.

To begin building your frames, you need to be able to see the tools for building frames. They are normally hidden because they are easy to grab accidentally and put in frames when you don't want them.

To create your frames, go to View -> Visual Aids -> Frame Borders. It might seem like nothing happened, but if you look at the edges of the page, you will see borders that look like gray table borders. These are the Frame Borders - the tools you will use to tell Dreamweaver how you where you want the frame divisions.
Click and drag the border to create your frame(s). You can drag from the top or side to create two frames. First, we will drag from the side to see the effect on the Code and on saving your frames. While we do steps 4 and 5, please be sure not to click in the page.

Look at the code in Code View. Notice that there are no longer <body></body> tags, but <frameset></frameset> tags. The frameset is the container. The <frameset> tag also shows how many columns (vertical frames) and/or how many rows (horizontal frames) there are in the page and how wide/high they are.

Also notice that there is a set of <noframes></noframes> tags, which do have <body></body> tags inside. This set of tags is for browsers that can't translate frame information. If you don't design an alternative page and put it in the noframes area, anyone with a browser that can't translate frames will just see a blank white page.
Click in the left side; type Left Frame. Now go to Code View. All of your FrameSet code has disappeared because you are actually working in a different file from the Frameset. (Of course, you haven't saved the files yet; so they are just in the computer's memory.) When you go back to Design View, however, you are still in the whole Frameset. Because your cursor is in the left frame, that is the code that showed.
There is another palette that will help you with your Frames. Go to Window -> Frames.
Saving your framed page is somewhat different from saving a regular HTML file. You can Save Frame or Save All Frames. Click in the left frame again and name the file LeftFrame.html. Click in the right frame and save it. Now close the file. Dreamweaver asks you if you want to save the frameset. Remember that this will be another file. Call the frameset, FramesetAids.html.
Open each frame individually. Open the frameset. Notice that it opens everything.some of the work for you.

Another way to create frames is through the Objects Palette. The Frames palette shows pre-defined frame patterns that will do.