9.2 Creating Frames

     

9.2 Creating Frames

Before you begin creating frames, think about how they might best serve your Web site's structure. For instance, if you want a banner with the Web site's logo or name to appear at the top of each page, you could create a frame at the top to hold it. Or, to help your visitors get around, you might include a navigation bar in a frame at the left of the page consisting of a list of links to the site's main sections.

To create frames:

1. Open or create a Web page.

   This may be a new, blank page, or a page you've already created. This is the page you want to appear within a frame ”for example, a page with a banner or a row of navigation buttons . Next, you'll create a frameset page around the current page.

   This may seem backward ”you'd think you'd start with the frameset and then put pages into each frame. But you'll quickly get used to Dreamweaver's ways.

2. Choose View Visual Aids Frame Borders.

   You can also turn on the Frame Borders from the View Options menu in the document toolbar, as shown in Figure 9-3. A thick border appears around the edges of the document window, indicating that you're now working with frames.

   You can show and hide the frame borders that appear in the document window using the Options menu in the toolbar. Making them visible can be an enormous help when trying to understand what you've done with your frame layout.

   

3. Create your frames within the window.

   You can do so in any of three ways.

   First, you can drag one of the frame borders that now sit at the edges of the document window (Figure 9-4). To create a frame at the left edge of your page, for example, drag the left border inward toward the page center. To add a frame on top, drag the top border down.

   

   You can create four frames at once ”at the top, bottom, and both sides of the current page ”by dragging one of the border corners.

   
   

   Second, you can choose Modify Frameset Split Frame Left, Right, Up, or Down. This command may seem confusing at first, but it's worth learning if you want to make more complicated frame designs such as nested frames (Section 9.2.1). Just remember to make your choice based upon where you want the current page to end up. If you want the current page to appear in the left frame, choose Left. If you'd like it to appear at the bottom, choose Down.

   Finally, you may prefer to use one of Dreamweaver's one-click, canned frame designs. These options appear on the Layout tab of the Insert bar, as shown in Figure 9-5. (You can also get to them from the Insert menu; choose Insert HTML Frames. The submenu lists the framesets available from the Frames tab, plus four other options: Frameset, Frame, Floating Frame, and NoFrames. These last four choices, are available only when you're working in Code view [Chapter 10]. To add NoFrames content while working in Design view, see the box in Section 9.2.1.)

When you finish splitting or dragging, borders appear around the frames you've just created. Behind the scenes, some strange things have just happened . First, Dreamweaver has created a frameset page ”a new, untitled Web page that describes how a Web browser should draw the frames and which Web pages load into these frames ” around the Web page you started with.

Second, Dreamweaver creates new, untitled documents for each frame you added to the page. For example, in Figure 9-4, the current page was split into two frames, side by side. In the process, Dreamweaver created two new documents: a blank document for the right-side frame, and a blank document for the left-side frame. You wind up with three pages (counting the frameset page).

Dragging one of the frame borders around the outer edge of a document is a quick way to create frames. When the cursor is correctly positioned to begin dragging, it changes shape (as shown here). To create additional frames within the page, Alt-drag (Option-drag) one of the inner frame borders. As you might have guessed, you can resize your frames by simply dragging the borders. But for greater precision, and to avoid some potential problems, see "Frame Size " on Section 9.5.2.

For proof, try this experiment: Click a visible portion of the original Web page you opened in step 1; note that the title bar of your window identifies its original name. Now, if you click inside one of the blank areas around your original document (that is, one of the other frames), the title bar changes to say Untitled Document . That's because you haven't yet saved or named the new Web pages that make up the new frames. You'll do that in a later step (see Section 9.4).

To eliminate a frame, just drag its border back to the closest edge of the document window.

NOTE

If you use XHTML for your Web pages and you want to use frames, you have a little extra work in store. Even if you've set Dreamweaver to use XHTML for all pages (Section 0.2.2), this feature doesn't work for framesets. As soon as you create one, Dreamweaver switches to regular HTML for both the frameset and any frames within it. You can convert these pages to XHTML, but it's a bit time-consuming : You have to select each page (including the frameset and all other frames) in turn and choose Edit Convert XHTML. (See Section 9.3 to learn how to select frames and framesets.)

9.2.1 Nested Framesets

Although there's no limit to the number of frames you can have in a single frameset page, there are some restrictions on how you can arrange them. You can't, for instance, merge one frame into another, setting up a single frame that spans multiple columns or rows. In other words, a design like that pictured in Figure 9-6 is impossible using just a single frameset: the sidebar navigation spans the entire left side of the window, while the right side has two horizontal frames.

WORKAROUND WORKSHOP
Don't Leave Anyone Out

Some very old, off-brand Web browsers can't display frames at all. For the unlucky people who use these, a Web site with frames is rather useless. In fact, a browser that doesn't understand frames simply displays a blank page when it loads a frameset.

You don't have to leave these visitors in the lurch, however. The <noframes> tag lets you add Web page content that's especially for, and can be viewed by, these old browsers; frames-capable browsers simply ignore the <noframes> content. Choose Modify Frameset Edit NoFrames Content. The document window changes to an empty window, where you can add text, images, and other HTML.

Remember, what you put here is only for people who can't view frames, so don't feel you have to duplicate your entire Web site. One simple approach is to include a short message ”"This site requires a frames-capable browser" ”with a link to the Netscape, Microsoft, or Opera Web page, so the person can download a newer browser.

Alternatively, you could link to a non-frames version of your Web site. Of course, in that case, you'd have to do the extra work of building an entire frame-free version of the site.

If you're looking for publicity for your site, there's one other advantage to the <noframes> material. Many search-engine "spiders" search and index this information. In other words, you could add a detailed description, complete with juicy keywords, to the <noframes> tag for the sole purpose of letting search engines know what the page offers the world.

When you're finished adding content for the <noframes> page, choose Modify Frameset Edit NoFrames Content again to return to the document window.

To overcome this limitation, you can insert a frameset inside of a frame. Nesting framesets like this gives you much greater flexibility in your designs.

To nest one frameset inside another, just click inside the frame where you wish to insert a new frameset. Then choose Modify Frameset Split Frame Up, Down, Left, or Right.

Or, if you'd rather, you can use the Insert menu to insert frames. Choose Insert HTML Frames and select the location (for example, left or top) where you wish the new frame to go. (You can't drag frame borders to create a nested frameset.)

Dreamweaver offers some common, canned frame designs that you can apply with a click of the mouse. They're on the Layout tab of the Insert bar (Figure 9-5). Some of these designs include complex, nested framesets.

The Frames button gives you one-click access to canned frameset designs. Click a design to create the frameset, complete with blank pages for additional frames. One frame in each button of the Frames panel is light blue; that's where Dreamweaver will put the current Web page.

The new frameset appears inside the original frame. (Because the borders of a nested frame look just like regular frame borders, use the Frames window, as shown in Figure 9-7, to keep track of what you're doing.)