Adjusting Frame Attributes | Macromedia Dreamweaver 8 Unleashed

With the frameset now created and open, you're ready to begin adjusting attributes for the three frames in the frameset. Many of the attributes associated with frames exist so that you can set frame names, which ultimately determine the target of the frame, whether content within a frame should scroll, whether frame borders appear, and so on. Here is a complete list of frame properties exposed in the Properties Inspector for frames:

Page properties
Frame name
Frame scroll
Borders and border width
Frame resize
Margin width and height

To modify these frame properties, you use the Properties Inspector. To see the frames-based Properties Inspector, simply select one of the frames in the Frames panel. As you can see from the callouts in Figure 8.7, the Frames panel includes the modifiable properties just listed and described in the following sections.

Figure 8.7. The frames-based Properties Inspector becomes available when you select a frame from the Frames panel.

Changing Page Properties

Changing page properties for a frame is no different than changing the properties for an individual page as we've done throughout the book thus far. It's important to remember that frames are individual HTML files wrapped together using a frameset. To modify the page properties for a frame, simply place your cursor in the frame and select the Page Properties option from the Modify menu:

1.	Place your cursor in the top frame (don't select it from the Frames panel) and choose the Page Properties option from the Modify menu. The Page Properties dialog appears.
2.	Set the background image by browsing to the file `header_bg.gif` located in the Images folder of our project.
3.	Click OK.

This action effectively creates a new document-wide style with one tag redefinition for the <body> tag in this frame. You're probably asking yourself, "Why didn't we modify the <body> tag redefinition in our external style sheet file with this background property, and then just attach the style sheet?" Although this seems like a viable solution, think about the rest of the frames. Had we redefined the <body> tag in the external style sheet file for the top frame, all frames would have had their backgrounds set to the same imagenot the effect we want, right? Now let's attach the style sheet to this frame as well. To do that, follow these steps:

1.	Open the CSS Styles panel if it's not open by choosing Window, CSS Styles.
2.	Click the Attach Style Sheet icon in the CSS Styles panel. This is the first icon in the icon group at the bottom right of the CSS Styles panel. The Attach External Style Sheet dialog appears.
3.	Browse to your `styles.css` file located in the root of your project.
4.	Make sure that the Link option is selected in the Add As category. Leave the Media menu unchanged.
5.	Click OK.

Notice that the external style sheet now appears in the CSS Styles panel below the document-wide style sheet. Also notice that we've redefined two <body> tags. This is cascading at its finest. Although we redefined the <body> tag in our external style sheet, we didn't set the background image there. That would give us unwanted results on every page that uses that external style sheet file. Instead, we redefined the <body> tag again using a document-wide style. This style, combined with the style in the external style sheet file, gives us a combination of properties we can be happy with for this frame only. Now place your cursor in the left navigation frame and repeat the process of attaching the style sheet. Finally, place your cursor in the right content frame and attach the style sheet one more time. Remember, these are three different filestherefore the style sheet must be imported three times. When you've done that, you're done! Notice that all page margins are now set, the default font and size are set, and the top frame even has its background image set independently of the other frames. When you're finished, the frameset should resemble Figure 8.8.

Figure 8.8. Set the background image of the top header frame and attach the style sheet to every frame individually.

Setting Frame Names

The next property you'll want to set is the frame name. A required property, the frame name is important because it creates a new target for links in other frames. In Chapter 3, "Building a Web Page," we discussed four targets: _blank, _parent, _self, and _top. When working with frames however, frame names also count as targets. What this means is that if you create three frame names (such as Header, Nav, and Content), you can effectively establish links in the nav frame that target (open their contents in) the content frame. Creating a frame name is easy, and this is where the Frames panel really comes into play. To name a frame, follow these instructions:

1.	Select the top frame currently labeled `topFrame` in the Frames panel. The Properties Inspector changes to accommodate the editing of frame properties.
2.	In the Frame Name text box, enter the text `Header.`
3.	Press Enter.

That was easy right? Notice that the new frame name is given to the frame and is visible in the Frames panel. Now repeat steps 13 for the left frame, naming it Nav, and again for the right frame, naming it Content. When you're finished, your Frames panel should resemble mine (see Figure 8.9).

Figure 8.9. Name the three frames Header, Nav, and Content.

Setting Scroll Properties

The next property you'll want to set is the Scroll property. Represented by the Scroll menu in the Properties Inspector, you can set this property to enable or disable the appearance of scrollbars in a frame. The following options appear in this menu:

Yes: Enables scrolling for a frame. When this option is selected, a scrollbar always appears in the frame, even if the content does not exceed the size of the frame.
No: Disables scrolling for a frame. When this option is selected, a scrollbar never appears in the frame, even if the content exceeds the size of the frame.
Auto: Enables scrolling for a frame only when the content exceeds the size of the frame.
Default: Choosing Default excludes the Scroll property from appearing in code. Setting this option to Default doesn't set a value for the corresponding attribute, allowing each browser to use its default value, which is typically Auto.

Setting the scrollbars for a frame is as simple as selecting a frame from the Frames panel and choosing an option from the Scroll menu. For our project, choose No for the Header frame, No for the Nav frame, and Auto for the Content frame.

Frame Resize

The next property you want to set is the frame No Resize property. Enabling this check box guarantees that users cannot grab the border (if it exists) and drag to resize the frame. Set this property by selecting each frame in the Frames panel and enabling the check box in the Properties Insppector. For our example, make sure that the box is enabled for all three frames.

NOTE

Earlier I mentioned that the ability to resize frames was one of the advantages to using frames. Although this is certainly the case, we'll prevent our users from resizing our Dorknozzle frame because the navigation items in the Nav frame are short and do not warrant allowing the user to resize.

Adjusting Borders and Border Color

Another useful set of properties you can set are the Borders and Border color properties. Use the options in the Borders menu in the Properties Inspector to enable or disable borders within a frame in the browser. The following options are listed in this menu:

Yes: Choose this option to show borders for a frame.
No: Choose this option to hide borders for a frame.
Default: Choosing the Default option doesn't set a value for the corresponding attribute, allowing each browser to use its default value, which is typically Yes.

NOTE

It's important to note that a border is hidden only when all frames that share the border have the Borders option set to No, or when the frameset's Borders property is set to No and the frames sharing the border have Borders set to Default.

The Border color picker allows you to set a border color for all of the frame's borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset.

For our example, set the Borders property to No for all frames and don't pick a color from the color picker.

Margin Width and Height

The last frames-based properties you can set in the Properties Inspector are the Margin Width and Margin Height options. These properties, represented by text boxes, function similar to the margin properties in the Page Properties dialog in that they allow you to specify how much of a margin width or height the frame should have. For our project, we set the top, left, bottom, and top margins in the external style sheet file, so setting these options in the Properties Inspector is not necessary. (If you do set these properties in the Properties Inspector, the style sheet settings take precedence.)