Frames in Dreamweaver

Frames

Several examples of frames:

• Craig's home page
• Macromedia Dreamweaver site (uses frame for advertising and search box)
• Coos Art Museum site on how to use art in curriculum
• Padnell Junior School (UK)

Advantages:

relatively easy creation of menus
keeps user within site even when looking at external content

Disadvantages:

makes it hard for user to bookmark specific pages
takes up valuable screen real estate

Back to the top.

Key concept: To create a framed page, you need at least three documents

1. a "frameset" page that actually sets up the screen and divides it into two (or more) frames
2. at least two documents that are the content for the frames on the page when it first loads

See this working example.

To create, open a new page layout window. Then, make sure the Frames palette is visible.Here's what you get:

To create Frames, click Modify|Frameset| and the choose whether to make your new frame from the left, right, top, or bottom of the page. This is what you get if you choose Split Frame Left:

And this is what you get if you choose Split Frame Up:

 

NOTE: You can use the Insert Bar (Frames category) to create new frames on your page. Simply click and drag the icon that represents the new frame that you want.

 

Back to the top.

Once you've added a frame, the property inspector looks like this:

You use the Frame property inspector to adjust whether you want borders to be visible or not (and the width if visible), the border color, and the size of each row or column in the Frameset. (To select the specific row or column, click the picture of the Frameset on the right-hand side of the property inspector).

Here's a blank page WITH borders visible and the same one with borders NOT visible:

You can always adjust the properties of the frameset by clicking on the border of a frame.

The properties of the frameset are different from the properties of each frame. To access those properties, use the Frames palette, and click on the appropriate frame in the schematic.This is what appears.

In this dialog box, you can control the file that is the source of the frame content when the frame is first loaded, whether the borders of the particular frame are visible, whether scroll bars are there automatically (when needed) or always or never, whether the user can resize the frame by clicking and dragging its border, and the margins. You can also give the frame a "name" which is used as a target for links.

For example, in my home page the left-hand frame is called "Menu" (for obvious reasons) and the right-hand frame is called "Start." Some of the links listed in the menu open documents in the "Start" frame. This is done by using the "Target" field in the properties inspector when putting in a link. (If you don't name the target, the link will open in the same frame as the link is in. This would result in wierd effects!)

To shift between frames so you can edit their properties, use the Frames palette. (If you click on the very edge border of the Frames palette, you'll select the Frameset and can then edit the Frameset properties.

Back to the top.

ACTIVITY 1A

Now, let's build a simple frameset.

Start with a new layout window. Open the Frames palette. Choose Modify|Frameset||Split Frame Left. Here's what you get:

Just to make this example more interesting, let's add a small frame at the top of the right-hand frame. Make sure the cursor is in the right-hand frame, and choose Modify|Frameset|Split Frame Down. Click and drag the new border up to make something that looks like this:

Then, click and drag the vertical border (the one down the middle of the page) to the left to make the screen look like this:

We'll use the left-hand frame for a menu, the top-right frame for a title for the page, and the bottom-right frame for content. Now fill some things in like this:

Now, click File|Save All Frames. Be careful at this point. You need to give the frames names you'll remember. I suggest you create a new folder, called Frameset, in your local root folder. Then, save the frameset as frameset1.htm, the left frame as left.htm, the top-right frame as top.htm, and the bottom-right as bottom.htm. (While the Save As... dialog box is showing, you may notice a kind of highlighting around the specific frame that is being saved just then.)

Back to the top.

ACTIVITY 1B

Now let's name the frames. (Saving the documents is not the same as naming the frames.) Click on each frame in the Frames palette and give them names: Left, Top, and Bottom.

Now, in the same folder, create two new documents, page1.htm and page2.htm. These should be empty except for a label, "Page 1" and "page 2" These documents will be loaded into the page by the menu choices in left.htm.

Now add the links to the menu. Be sure to adjust the "target" field so that all links (home, linked to bottom.htm, page 1 linked to page1.htm, and page 2 linked to page2.htm) are targetted to the "Bottom."

NOTE: each page in the frameset has its own properties, and so can have different titles, background colors, text colors, or images. I've added some colors to mine so they are easier to distinguish.

Your result should look like this.

OKAY, that's enough about frames for now.

Back to the top.