Using Framesets

CSS LayoutsTablesAP DivsiFrames • Framesets

Framesets are html documents that don't contain their own content, but load other html documents into them (sort of like a page containing nothing but iFrames).

The frames that make up the frameset are 2, 3, or more rectangular areas that split up the visible area and act as containers for other external documents. This can be useful when you wish to keep a document open in one frame, while reloading multiple pages in another frame.

This text you are viewing right now belongs to a document (framesets.html) that is loading into the mainFrame of a frameset (index.html).

The leftFrame loads a page (classroom.html) containing the navigation menu, which remains loaded as we surf the site. The links in this menu have targets added to their hyperlinks so that when clicked, the requested page loads inside the mainFrame.

Framesets are supported by all browsers. Their only drawback is that pages can become orphaned, as in when a visitor to your site bookmarks a frame instead of the frameset and then revisits the page outside the frameset. There are strategies for avoiding this problem, however.

Create new pre-formatted framesets in Dreamweaver

1. Start a new site project from the 'sites' menu. Call it 'Frameset Site'.
2. Click File - New - Page from Sample - Frameset.
3. Choose a frameset style and click OK.
4. A new frameset document will open.
5. Immediately go to File - Save Frameset, and save into your root folder. If this is to be your homepage, name it index.html. Do not change the default frame names.

Now open the Frames panel from the Window menu. This gives you a small display of the frameset. Selecting frames in this window gives you options for each in the Properties panel.

6a. Click inside each frame area in the main document (in design view), and then go to File - Save Frame to save those documents to the root folder.
-OR-
6b. Load pre-made pages into their respective frames by clicking each frame in the Frame window, then entering the file names of those pages into the source field of the Properties panel.

When creating hyperlinks in one frame, that will open pages in a different frame, set the target in the Properties panel. Important: Frames must be accurately referenced (note the proper syntax: leftFrame, mainFrame. These frame targets should be available in the target selector popup menu).

Example:
This Resource page, 'The Classroom', is a frameset file saved as index.html.
It has a leftFrame and a mainFrame.
The leftFrame loads 'classroom.html' (the site navigation menu, does not change)
The mainFrame loads 'introduction.html' (this page loads into the changing side of the frameset layout)
The links in the left frame ('classroom.html') use the target 'mainFrame'.
Links in all other pages that load into the mainFrame either have no targets, in which case they open in that frame,
-or- have the blank target applied, to open the requested pages into a new, separate browser window.

Note: When editing pages that load into a frameset, it is generally preferable to edit them outside of the frameset view, once dimensions and style choices have been established for those pages.

More on this in class.


back to top