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

9.5 Frame and Frameset Properties

After creating a frameset, it's time to take charge of the size, look, and contents of its
frames. Dreamweaver treats framesets and frames as separate objects, each with its
own set of properties. When you select a frameset or frame, using any of the methods
described above, you can view and modify its properties in the Property inspector
(see Figure 9-9).

In general, it's better to set a frameset's properties before fine-tuning its frames, since some frameset properties affect the properties of individual frames.

9.5.1 Frameset Borders

Borders are intended to visually separate one frame from another, but professional
Web designers generally shun their amateurish 3-D appearance and the boxy designs
they create (see Figure 9-2).

If you're a professional Web designer (or just want to come across as one), consider
eliminating frame borders entirely. Not only does this free up a few precious pixels
of screen real estate, it also lets you create seamless frame designs, so that all your
frames appear to be a single, unified Web page.

The Property inspector
displays different
properties when
a frame (top) or
frameset (bottom) is
selected. But all of the
frames' properties are
stored in the frameset
file: their size, border,
source, and so on.

To control frameset borders, start by selecting the frameset itself (see Section 9.3 for
selection techniques). Now consult the Property inspector, where you'll find these
options:

Borders pop-up menu. Use this pop-up menu to indicate the visibility status of
the borders. To turn off borders, choose Noa good idea, if for tastefulness' sake
alone. If you must use borders, select Yes. (The Default setting has the same effect
as selecting Yes on most browsers.)

Border Width. Specify the thickness of your border by typing a number (in pixels)
into the field. Type 0 if you want to completely eliminate any borders. (You might
think that choosing No borders would automatically eliminate any space between
frames, but that's not the case. If you don't also set the Border Width to 0, a small
gap will appear between frames on the page.)

Border Color. Use this pop-up palette to choose a color for the border (see Section 1.3.3). Of course, if you've turned off borders, you can leave this option blank.

The next time you save your document, Dreamweaver stores all of the new settings
into the frameset file (Figure 9-9).

NOTE

Nested framesets have their own border settings, but you don't have to specify them, since nested
framesets inherit the border settings of the frameset they're in. For example, suppose you created a frameset
and turned off the borders, and then you inserted another frameset into one of those frames (see Section 9.2.1).
The borders in the nested frameset are automatically turned off, having inherited the settings of the outer
frameset. You can, however, assign completely different border setting for the nested frameset, overriding
any setting inherited from the outer frameset.

9.5.2 Frame Size

You can make your frames bigger or smaller simply by dragging the frame borders
in the document window. But for more precise, numerical measurement, you'll need
the Property inspector.

Start by selecting the frameset containing the frame in question (see Section 9.3). Now
consult the Property inspector's controls, which include:

Row/Column. Dreamweaver thinks of a frameset as something like a table, with
rows and columns. For example, if your frameset has two frames, one on top of
the other, Dreamweaver thinks you have two rows of frames consisting of one "cell"
each. Dreamweaver thinks of a frameset composed of three side-by-side frames as
three columns. (Beyond this similarity, however, framesets are totally distinct from
tables.)

Use this control (or the thumbnail diagram next to it) to specify the row or column
you want to work with. Figure 9-10 shows the details.

The Property inspector's Row
and Column selector shows a
thumbnail of the frameset's rows
(top), columns (middle), or both
(bottom).

In the first exampleone frame
above anotheryou can only set
the height of each row, since the
width is the entire width of the
browser window (or the parent
frame, in the case of nested framesets).
In the second exampletwo
frames side by sideonly the width
of each frame can be modified. In
the last examplefour framesyou
can set a mixture of the two: height
for each row of frames, width for
each column of frames.

Value. Here's where you specify the height or width of the row or column. This
can be either a pixel value or a percentage, whichever you specify using the pop-up
menu next to the Value field.

If you set a row height or column width to a percentage value, its size will be a
percentage of the browser window (or the parent frame, if the frameset is nested
inside a frame). That's a handy design safeguard against the fact that every visitor
to your Web page may be using a different-sized monitor. You might set up your left-side frame so that it always consumes, say, 25 percent of the window, no matter
how big or small the window is.

Units. Using this pop-up menu, you can choose Pixels, Percentage, or Relative.

Relative is a special unit of measurement that you'll probably want to use for at
least one column or row per frameset. To understand its use, imagine this setup:
Three frames appear one on top of another. The top frame is a banner containing
the Web site's name, the middle frame is the main text, and the bottom frame holds
a navigation bar. If the heights of the top and bottom frames are 30 pixels, and the
middle frame is 300 pixels, the page will look just fine if it's viewed in a browser
window that's exactly 360 pixels tall (as shown at top in Figure 9-11).

However, if the visitor's browser is much taller, the top and bottom frames won't be
the height you wanted (see Figure 9-11, bottom). You've told it that the total height of
the frameset should be 360 pixels (30 + 300 + 30), but the window is actually much
biggeron the order of 900 pixels. In an effort to make the best of a bad situation,
the browser just divides the remaining space among the three frames, adding height
to each of the three frames.

A relative measurement, therefore, lets you give a frame a flexible size. It will grow
and shrink to accommodate changes in the browser window. In addition, it lets you
assign absolute (fixed) sizes to certain framesbanners and navigation bars, for
examplethat always remain fixed in size.

You'll usually want
to assign a relative
width or height
to one frame in
each frameset. The
relative frame grows
or shrinks as the
browser window is
resized. Otherwise,
as seen here (before
the window is resized,
left, and after), all
of the frames resize,
creating distorted
banners and bottom
navigation bars.
Better: Give the top
and bottom frames
a set heightsay, 30
pixelsand assign a
relative height to the
middle frame.

If the notion of freely reflowing Web page contents doesn't sit well with your design sense, and you'd like a bit more control over your visitors' browsers, see Section 12.4.1.2 for detail on how to make browser windows open to the exact height and width you want.

9.5.3 Frame Properties

Once you've set the border properties and frame sizes in the frameset, you can modify
the properties of each frame. Select the frame and use the tools in the Property inspector,
as shown in Figure 9-10.

9.5.3.1 Name

Each frame can have its own name, but this isn't the name of the file (or the title of
the Web page) that loads into the frame. A frame's name exists solely for identification
purposes when working with links or JavaScript scriptsspecifically, when you want
to use a Dreamweaver Behavior (see Chapter 12) or target a link from one frame to
another. You'll need frame names, for example, when you wish to use a navigation
bar to load pages into another frame (see "Targeting Links," below). Otherwise, frame
names are optional.

If you create frames using the Frames tab of the Insert bar or the InsertFrame command, Dreamweaver supplies generic names for the frames it creates. But if you use any of the other methods for creating frames, such as dragging frame borders from the edges of the window, you have to supply frame names yourself.

To set the name of a frame, select the frame by clicking it in the Frames window, and
then type a name in the Frame Name field of the Property inspector.

9.5.3.2 Src

When you set a frame's source (Src) property, you're simply specifying the path to the
Web page file that loads into that particular frame. You can change the pathand
the Web page that appears in that frameby clicking the folder icon and selecting a
file from your site folder.

You can, if you like, link to a page that's on somebody else's site; just type the absolute
URL here, beginning with http://. You won't, however, be able to see the other person's
page within Dreamweaver. Instead, inside the frame you'll see only the words "Remote
File," plus the URL. You have to preview the frameset in a browser connected to the
Internet to see the remote file actually appear within the page. (If you do display
someone else's Web page inside a frameset on your site, it's proper etiquette to ask for
permission first. In fact, sites have been sued by companies whose pages have been
"framed" in this way.)

NOTE

Be careful using the Src property. One common mistake is to add the frameset page itself to one
of the frames. In other words, it's possible to click the folder icon next to the Src field, and then select the
current frameset page, thus creating a reference to itself.

When you preview the frameset, the browser loads the pagebut when it attempts to load pages into each
frame, it's trapped: It loads the frameset, which in turn has a frame, which loads the frameset again, which
has a frame that loads the frameset again, and so on, and so on. This hall of mirrors continues until the
browser crashes and your site's visitors curse your name!

9.5.3.3 Scroll

To create scroll bars for a frameor hide themuse the Scroll property. You'll see
four options in the Scroll menu in the Property inspector:

Yes adds horizontal and vertical scroll bars to the frame, even if the frame doesn't
contain enough material to require them.

No prevents scroll bars from being added to a frame, even if that means some of
its contents become inaccessible.

Auto lets the browser determine whether to display scroll bars. If the contents don't
fit inside the frame, the browser adds the appropriate scroll bar.

Default works like Auto in most browsers. Since the effect of the Default option
can vary from browser to browser, choose Auto instead.

In general, use the Auto option if you know your frame might require some scrolling,
or No if not. For example, a frame containing a Web page with a lot of text will probably
need a scroll bar, whereas a frame that simply contains the site's logo won't.

9.5.3.4 No Resize

Usually, your Web site visitors can resize the frames you've created just by dragging
their borders right in the Web browser. But if you don't want people monkeying around with your designs, turn on the frame's No Resize checkbox in the Property
inspector.

The No Resize option applies only to manual frame-edge dragging. In other words, even with No Resize turned on, your frames may still change size when the browser window is resized. If you want to prevent even that layout shift, see Section 9.5.2.

9.5.3.5 Margin Width and Margin Height

You can adjust the top and left margins of a frame by setting its Margin Width and
Margin Height properties. These settings control the position of the upper-left corner
of a page in a frame, and they work exactly like page margins in a standard Web page
do, as described in Section 1.3.3. (In fact, you can set both page and frame margins. Your
margins will be the sum of the two. For example, a 10-pixel top page margin and a
10-pixel frame margin height will create a 20-pixel margin at the top of the frame.)

Margin width is the amount of space between the left edge of the frame's border and
the left edge of the Web page; margin height is the space from the frame's top border
and the top of the Web page. These margin settings apply to every page that loads
into the affected frame.

9.5.3.6 Border and Border Color

Using these controls, you can assign a border and border color to each individual
framegiving one important frame a sky-blue border, say, but leaving all other
frames borderless.

Unfortunately, Internet Explorer, Netscape Navigator, and Opera all handle this
property differently, so you can't assume that it will work for all of your visitors.
Furthermore, this option has no effect if you've turned off borders in the frameset
(Section 9.5).