Selector Type option and enter the name #Header in the Selector text box. Remember that the pound symbol represents ID (thus, the ID selector name is Header). When you finish making your modifications, the dialog should resemble Figure 11.11. Figure 11.11. Create a new selector ID called Header. 5. Click OK. You're now ready to start defining the properties that will make up the Header rule and ultimately define the Header layer at the top of the page. 6. Switch over to the Positioning category. Set the property for Type to absolute, the width to 100%, the height to 177 pixels, the Visibility to Visible, and Top and Left Placement properties to 0. When you finish, the Positioning screen resembles Figure 11.12. Figure 11.12. Modify the Positioning attributes for the Header rule. [View full size image] 7. Set the background image that will appear within the Header layer. You can do this by switching to the Background category. Browse to the header_bg.gif file from the Background Image field. Finally, choose the Repeat-x option from the Repeat menu to guarantee that the background image will tile only horizontally and not vertically. 8. When you feel comfortable with the attributes you've set, click OK. The new ID appears in the CSS Styles panel. That's it! You're now ready to define the style rules for the remaining layers. To define the Nav rule, follow these steps: 1. Create a new CSS style by clicking the New CSS Style icon in the CSS Styles panel. The New CSS Style dialog appears. 2. Choose the Advanced Selector Type and enter the name #Nav in the Selector text box. 3. Click OK. You're now ready to start defining the properties that will make up the Nav rule and ultimately define the navigation layer. 4. Switch over to the Positioning category. Set the property for Type to absolute, the Width to 190 pixels, the Visibility to visible, the Top Placement property to 178, and the Left Placement property to 0. 5. So that our navigation items don't run up against the left edge of the browser window, let's add some padding to this style rule. To do this, switch to the Box category. Disable the Same For All check box in the Padding category and enter a value of 10 pixels for the Left property. When you finish, the Box screen resembles Figure 11.13. Figure 11.13. Modify the Box attributes for the Nav rule. [View full size image] 6. When you feel comfortable with the attributes you've set, click OK. The new ID appears in the CSS Styles panel. To finish up the design, let's define the Content style rule: 1. Create a new CSS style by clicking the New CSS Style icon in the CSS Styles panel. The New CSS Style dialog appears. 2. Choose the Advanced Selector Type and enter the name #Content in the Selector text box. 3. Click OK. You're now ready to start defining the properties that will make up the Content rule and ultimately define the content layer. 4. Switch over to the Positioning category. Set the property for Type to absolute, the Width to 440 pixels, the Height to 250 pixels, the Top Placement property to 178, and the Left Placement property to 201. 5. When you feel comfortable with the attributes you've set, click OK. The new ID appears within the CSS Styles panel.