Creating a Frameset

A frameset defines the overall look of a page that uses framesthe number of frame areas on the page, the size of each frame, and the border attributes. A frameset itself does not contain any content; it specifies what HTML document will be used in each frame. The frameset document is the file that you link to when calling up a frames-based Web page. In this lesson, you create a Web page consisting of three frames. The left frame holds navigation elements that remain constant, the right frame displays pages with content relative to the links clicked in the navigation frame, and the top frame contains the title of the site.

There are two ways to create a frameset in Macromedia Dreamweaver: You can manually insert the frames or you can choose from several predefined framesets. If you choose a predefined frameset, the frameset and frames are automatically set up for you. The predefined frameset method is one of the quickest ways to create a layout using frames because most of the work is done for you. You just need to name the individual pages.

In this exercise, you will use a predefined frameset to create a Web page that uses frames.

1.	Choose File > New and select Framesets from the Category list in the General portion of the New Document dialog box. Tip You can also access the Framesets portion of the New Document dialog box by clicking Framesets in the Create From Samples list in the Start page. The New Document dialog box contains a variety of presets that you can use when creating a new frameset. As you browse the Framesets list, samples showing the basic frame structure are displayed in the preview area at the right, along with a description. Note You can also create a frameset from a standard HTML document by selecting the Layout menu on the Insert bar and choosing a frameset preset from the Frames menu.
2.	Select Fixed Right, Nested Top from the Framesets list and click Create. A frameset can be made of either rows or columns, but not both. Framesets can be nested to create a layout like the one you chose with multiple rows and multiple columns.
3.	In the Frame Tag Accessibility Attributes dialog box, use the Frame menu to select the frames and the Title text field to set the corresponding titles as follows:

Set the title of rightFrame to Right Navigation

Set the title of topFrame to Title and Navigation

Set the title of mainframe to Main Content

Note

If the Frame Tag Accessibility Attributes dialog box does not appear, you can turn on the Frames accessibility feature by choosing Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and selecting Accessibility from the Category list. Under the Show attributes when inserting option ensure that Frames is checked.

The Frame Tag Accessibility Attributes dialog box enables you to select an appropriate title for each frame. The title provides context for the content of each frame, so users can determine which frame has the information they seek. A frame title is defined through the title attribute, which is easily accessed when you first create the frames via the Frame Tag Accessibility Attributes dialog box. However, you can also apply or edit frame titles at a later time by selecting a frame and using the CSS/Accessibility portion of the Attributes section of the Tag panel to modify the title attribute.

The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. Only the title is presented to users. You'll work with frame names later in this lesson.

Accessibility and Frames

The drawbacks of using frames include the lack of full accessibility and nonfunctionality of onscreen readers and mobile devices such as PDAs and cell phones. Other issues include impaired browser back button functionality, printing problems, maintenance issues, and poor usability.

Frames are used to organize a page visually into different panes. For nonvisual users, the relationships between the content in frames must be conveyed in a nonvisual way; therefore, using the accessibility features that Dreamweaver prompts you with while creating frames is an important step in creating more accessible documents.

After you apply the accessibility attributes, you will see the frameset in the Document window. A dotted border appears around the page edges in the frameset, and lines show the frame structure.

The page is divided into three frames with the use of two framesets. Framesets can contain only horizontal frames or only vertical framesthey cannot contain both vertical and horizontal frames at the same time. To achieve the combination of vertical and horizontal frames, framesets must be nested within each other. A nested frameset is one that is contained inside a frame that was defined by a previous frameset. The initial frameset of your document contains two vertical framesone on the left and one on the right. The left frame contains a nested frameset that is divided into two horizontal frames: a short frame on the top and a longer frame on the bottom. Several of Dreamweaver's predefined framesets use nested framesets. You can use combinations of these predefined framesets to come up with any frame layout you want. Thin gray lines mark the divisions between frames.

Note

To insert frames manually, open a new HTML document and choose View > Visual Aids > Frame Borders to turn on the dotted frame border around the page edges of the Document window. Click the border and drag it into the Document window. The document becomes split horizontally (if you drag from the top or bottom of the border) or vertically (if you drag from the left or right sides of the border). If you drag the border from the corner, the document becomes divided into four frames. You can also choose Modify > Frameset > Split Frame Left, Right, Up, or Down. If you selected the wrong frames configuration or need to reduce the number of frames in your frameset, you can remove the extra frames by dragging the border of the unwanted frame to the edge of the page or atop another frame. The extra frame disappears.

Leave this file open to use in the next exercise.