Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

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:

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 framefor 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 backwardyou'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.

Choose ViewVisual AidsFrame 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.

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 onceat the top, bottom, and both sides of the current pageby dragging one of the border corners.

Second, you can choose ModifyFramesetSplit 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 InsertHTML
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 pagea new, untitled Web page that describes
how a Web browser should draw the frames and which Web pages load into these
framesaround 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 EditConvertXHTML. (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.

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 ModifyFramesetSplit Frame Up, Down,
Left, or Right.

Or, if you'd rather, you can use the Insert menu to insert frames. Choose Insert
HTMLFrames 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.)