ptg 248 Chapter 10 Once you've created one or more styles with AP elements, it's a simple matter to apply those styles to existing elements within a Web page. For example, you can create a navigational system, and then attach an AP element style that would control the element’s position, width, height, and Z-index. You can apply AP element styles to text, groups of text, images, or virtually anything on a standard Web page. Not only can the dimensions and position of an AP element be controlled by CSS-P styles; in addition there are options for controlling fonts, sizing, styles; even the insertion of a color or background image into the AP element. Applying a CSS-P Style Apply a CCS-P Style Open the Web page that contains text and/or graphics you want to apply an AP element style. Select a group of text, or a graphic element on the page. Click the Format menu, point to CSS Styles, and then select the appropriate style you want. The selected CSS-P style is applied to the selected Web object. 3 2 1 1 3 Did You Know? You can create styles by using the ID of the AP element. You can name an AP element HeadLine (AP elements’ IDs are changed in the Properties panel), and then create a customized style named, #HeadLine (remember to begin the name of the style with the # sign). Any AP elements with the name HeadLine (case is important) takes on the style of the #HeadLine CSS-P style. 2 From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 249 Apply a Z-Index to an AP Element Open the Web page that contains multiple AP elements you want to modify. Open the Properties panel. Select one of the AP elements, and then enter a value of 1 into the Z-index box in the Properties panel. Select another AP element, and then enter a value of 2 into the Z- index box in the Properties panel. Drag one of the AP elements so that it overlaps the other AP element. The AP element with the higher Z- index is positioned on the top of the other AP element. 5 4 3 2 1 5 1 4 3 Did You Know? The Z-index option works only when AP elements overlap. A single Web page can contain any number of AP elements. So long as the AP elements do not overlap, the Z-index is not uti- lized. However, when they overlap, the Z-index determines what AP element is on top of another. 2 From the Library of Wow! eBook ptg 250 Chapter 10 After you create a style, it's not locked in stone. For example, you might create a style using a particular font, and later change your mind. Or you might create a style using a color or background for the AP ele- ment, and later wish to change the style. Editing CSS-P styles is a snap in Dreamweaver, mainly because Adobe knows that sometimes you want to change your mind. The easiest way to change the properties of the style is through the CSS Styles panel, and that's exactly where we're headed. When you change a style, all elements currently assigned that style change to reflect the modifications. Modifying CSS-P Properties Modify CSS-P Properties Open the Web page that contains one or more styles you want to modify. Open the CSS Styles panel. Click the All button. Select the style you want to modify. Click the Edit Style button. TIMESAVER Double-click the style you want to modify in the CSS Styles panel. Use the categories to change the following options: ◆ Type . Click the Type category to define basic font and type settings for a CSS style. ◆ Background. Click the Background category to define background settings for a CSS style. ◆ Block. Click the Block category to define spacing and alignment settings for tags and attributes. ◆ Box. Click the Box category to define settings for tags and attributes that control the placement of elements on the page. You can change width and height, float, clear, padding, and margins. 6 5 4 3 2 1 5 3 4 6 Categories 2 From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 251 ◆ Border. Click the Border category to define settings, such as width, color, and style, for the borders around elements. ◆ List. Click the List category to modify list settings, such as bullet size and type, for list tags. ◆ Positioning. Click the Positioning category to modify the tag or block of selected text into a new AP element using the default tag for defining AP elements as set in the AP Elements preferences. ◆ Extensions. Click the Extensions category to modify filters, page break, and pointer options, most of which aren't supported in any browser or are supported only in Internet Explorer 4.0 and above. Click OK to save the changes, or click Apply to view how the changes impact the style before saving. 7 7 6 Did You Know? It’s important to preview AP element positioning. Dreamweaver only pre- views relative positioning when you're working with a nested AP element or have not set any top or left attributes. Therefore, always preview your pages to visually verify that the positioning is accurate. Using the CSS Box Model for Page Layout The CSS Box model says that every HTML element in a document is a rectangle box. You can create CSS styles that make boxes, one inside the other by using the Box category in the CSS Rule Definition dialog box. This allows you to create a web page layout (multi-column) inde- pendent of tables. Each box controls display properties, including Width and Height, Float, Clear, Padding, and Margins. The Float prop- erty moves an element left or right and wraps content around it, while the Clear property prevents an element from wrapping. The Padding property is the gap that separates the content of the style, such as space between an image and its border. The Margin property is the outer space surrounding an element. For Your Information From the Library of Wow! eBook ptg 252 Chapter 10 After you create the AP elements you want, you can use the AP Elements panel and other commands to manage and work with AP ele- ments. You can change the stacking order and place one AP element in front or behind another, hide some AP elements while showing others, move and align AP elements across the screen, and resize them indi- vidually or together. Working with AP Elements Work with AP Elements in the AP Elements Panel Open the Web page that contains one or more AP elements you want to modify. Click the Window menu, and then click AP Elements to display the AP Elements panel. Use the AP Elements panel to change the following options: ◆ Show or Hide. Click the Eye icon column to show (open eye) and hide (closed eye) elements. TIMESAVER Click the header Eye icon at the top of the column to show or hide all the elements. ◆ Stacking Order. Drag an element up or down in the list. A line appears as you drag to indicate the position. 3 2 1 1 3 Stacking order Show or hide 2 Did You Know? You can prevent AP elements from overlapping. Select the Prevent over- laps check box in the AP Elements panel or click the Modify menu, point to Arrange, and then click Prevent AP Element Overlaps to select it. From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 253 Move, Resize, and Arrange AP Elements Open the Web page that contains one or more AP elements you want to modify. Select the AP element you want. Use the AP Elements panel to change the following options: ◆ Move. Drag the AP element handle (tab in the upper-left corner) or the edge of the AP element. TIMESAVER Use the arrow keys to move an AP element one pixel at a time. ◆ Resize. Drag one of the selection handles or type values for width (W) and height (H) in the Properties panel. TIMESAVER Use Ctrl (Win) or Option (Mac) and the arrow keys to resize an AP element one pixel at a time. Use Shift+Ctrl (Win) or Shift+Option (Mac) and the arrow keys to resize by the grid snapping increment. ◆ Make Same Width or Height. Select two or more AP elements, click the Modify menu, point to Arrange, and then click Make Same Width or Make Same Height. ◆ Align. Select two or more AP elements, click the Modify menu, point to Arrange, and then select an alignment option. All the AP elements align themselves to the last selected AP element. ◆ Stacking Order. Click the Modify menu, point to Arrange, and then click Bring To Front or Send To Back. 3 2 1 1 2 3 From the Library of Wow! eBook . only can the dimensions and position of an AP element be controlled by CSS-P styles; in addition there are options for controlling fonts, sizing, styles; even the insertion of a color or background. would control the element’s position, width, height, and Z-index. You can apply AP element styles to text, groups of text, images, or virtually anything on a standard Web page. Not only can. element. 5 4 3 2 1 5 1 4 3 Did You Know? The Z-index option works only when AP elements overlap. A single Web page can contain any number of AP elements. So long as the AP elements do not overlap, the