Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

Adobe Dreamweaver CS4 How-Tos: Using Framesets

  • Print
  • + Share This
Learn how to generate and format at frameset and define links between frames.
This chapter is from the book

Frames allow you to display more than one Web page in a browser window. You can accomplish this by generating a special kind of Web page that has no content of its own but simply serves as a container to display other Web pages that are embedded in frames within that container page. The whole set of HTML pages that work together to present more than one page in a browser is referred to as a frameset.

There are distinct advantages to designing with frames. Since each frame within a frameset is a separate Web page, visitors can scroll (usually vertically) within one frame while continuing to view content undisturbed in a separate frame.

There are also real disadvantages to designing with frames. One is that search engines do not organize pages by framesets but instead produce page results that direct searchers to a page, not a frameset. This means that people will come to pages that were intended to be displayed within a frameset, but those pages will be individual pages.

Another disadvantage to framesets is that they can pose accessibility issues for visitors using screen reader software, usually vision-impaired people who rely on devices other than a mouse to navigate online. A solution to these accessibility issues is to provide a “frameless” alternative to any frameset at your site.

#26. Generating a Frameset

A typical and useful implementation of frames is a two-frame page design in which the left frame serves as a navigation section of the page and the right (and larger) frame displays page content.

One advantage of this setup is that it allows visitors to scroll vertically down a long set of navigation links while much larger content displays in a wider frame on the right side of the page (Figure 26a).

Figure 26a

Figure 26a Digital designer Bruce K. Hopkins uses a frameset to allow visitors to scroll through thumbnails in one frame and see larger images in another.

One downside to designing with frames is that managing files is at least three times as confusing as working with a normal page. That’s in part because each frameset includes at least three HTML pages: one to serve as the overall frameset and at least two framed pages embedded in the frameset. The best way to manage this challenge is to generate framesets from a set of sample pages.

To see the set of sample frames, choose File > New, and then choose Page from Sample in the category list on the left side of the New Document dialog. In the Sample Folder column, choose Frameset. Preview predesigned framesets in the preview area in the upper right of the dialog (Figure 26b).

Figure 26b

Figure 26b Selecting the Fixed Left sample frameset.

After you generate a frameset from a sample in the New Document window, the Frame Tag Accessibility Attributes dialog appears. Here, you assign names to all the frames in the frameset. Naming frames is different than naming the HTML files in a frameset. You’ll be prompted to do both, so don’t get confused by this. The frame name is useful in defining link targets and other frame attributes, and must be defined separately. Normally, the default frame names in the dialog are fine (these names are not visible in browsers), so go ahead and OK each Frame Tag Accessibility Attribute dialog that appears when you generate a frameset (Figure 26c).

Figure 26c

Figure 26c Assigning a frame name to frames.

To save a frameset, choose File > Save All from the main Dreamweaver window. You will be saving at least three files: the frameset file and each embedded page within the frameset.

You can edit the content of that frameset, and you can edit the formatting of the frameset. That process is explained in #27, “Formatting Framesets.”

  • + Share This
  • 🔖 Save To Your Account