GREATINTERNETPROOFING.COM

military drown proofing - www.greatinternetproofing.com

Menu


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. [View full size image]   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. [View full size image]   Setting Scroll Properties