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 No—a 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).

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 example—one frame above another—you 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 example—two frames side by side—only the width of each frame can be modified. In the last example—four frames—you 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 bigger—on 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 frames—banners and navigation bars, for example—that 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 height—say, 30 pixels—and 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 scripts—specifically, 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 path—and the Web page that appears in that frame—by 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.)

9.5.3.3 Scroll

To create scroll bars for a frame—or hide them—use 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.

POWER USERS' CLINIC Frames from the Inside Out The Src property provides an alternative method for building a frames-based design, preferred by some designers who learned to build frames-based pages before WYSIWYG programs like Dreamweaver came on the scene. Imagine that you want to build a page with two frames: top and bottom. You could create a new page, add text and graphics, and then save it as, say, top.html. Now you create a second page, called bottom.html, and save it for use as the bottom frame. Finally, you need a third page, one that will serve to hold the first two; split this third page into two frames. Set the source (the Src property) for the top frame to top.html, set it to bottom.html for the bottom frame, and save the frameset using any name you like (like frameset.html, or if it will be the home page to the site, index.html). Using this technique, you make and save the frame pages first, and then create and save the frameset page: two frames, three files.

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 frame—giving 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).