ptg Creating Page Layouts Using CSS-P Introduction Cascading Style Sheets-Positioning (CSS-P) is more than the perfect positioning of words and objects on a Web page, in addition, layers technology lets you create movable contain- ers (called AP elements , formerly known as layers) that allow you to precisely position Web text and objects, even going so far as to stack one AP element on top of another, or to use JavaScript to show or hide AP elements. For example, you could have several AP elements containing thumbnails of images and when you hover over a particular AP element, a JavaScript would show a previously hidden AP element with information about the image. The incorporation of AP ele- ments into a Web page gives the designer, for the first time, the use of all three dimensions: width, height, and even depth (stackable AP elements). There is, of course, in all things a good news/bad news scenario. The good news is that AP elements and CSS-P are awesome tools for the creative designer to use. The bad news is that they do not work in earlier browsers (pre 4.0). Fortunately, Dreamweaver turns that bad news on its head by giving you the ability to convert AP elements into a more compatible tables document and vise versa. This chapter covers the use of AP elements and CSS-P for the creation and implementation and total control of the design of Web pages. We'll focus in on how to create CSS-P design, and why you might want to use it. 10 10 What You’ll Do Introduce CSS Layouts and AP Elements Create AP Elements Nest AP Elements Set AP Element Preferences Use CSS Positioning Apply a CSS-P Style Modify CSS-P Properties Work with AP Elements Create a Rollover Using AP Elements Convert AP Elements to Tables 241 From the Library of Wow! eBook ptg 242 Chapter 10 In the beginning, support for Cascading Style Sheets (CSS) was a bit sketchy; however, as time when on, and CSS caught on, more and more browsers came on board. In response, Dreamweaver began giving Cascading Style Sheets complete support. Cascading Style Sheets is all about the control of the Web page, and are a designer's dream come true. Not only do you have the ability to specify and apply specific font char- acteristics; in addition you can precisely place elements on the page. Basically CSS are a set of rules encased within a style sheet. The rules are customized styles, or modified HTML tags that define the look, position, and feel of the Web page. In the previous chapter, you learned about the syntax of CSS. In this chapter you’ll learn how to use CSS to control and format Web pages, using AP elements, formally known as layers. An AP element is a movable container that allows you to pre- cisely position Web text and objects Web designers have always wanted the type of control over text and graphic elements that page designers have had, and with the advent of CSS, and the incorporation of AP elements, that day has finally arrived. CSS and AP elements give you the ability to precisely position elements on a Web page, and let you stack AP elements over each other. This addition of the third dimension is not only a new concept in Web design, but it is exactly why CSS absolute position is called AP elements. Not only can Web designers position elements using x and y (width and height) positioning, they now have z indexing (depth)… and that's what I call control. The Code When you use Dreamweaver to create an AP element, the HTML code looks something like the following: <div id="Layer4" style="position:absolute; visibil- ity:inherit; width:200px; height:175 px; z-index:6"> </div> Although it's not the only way to create the code, AP elements are usually placed between <div> …</div> or <span>… </span> tags. Creating AP elements in Dreamweaver's design window (the most common method) is as simple as a drag and release. The visible result is the creation of a square or rectangle, which becomes a floating element on the Web page. This element can be populated with text, images or any combination thereof. Think of an AP element as a floating, inde- pendent table cell, and you have the picture. To mov e an A P el e men t to a diffe ren t p osi t ion on the Web page, the designer has only to click and drag. In addition to creating and moving the AP elements about the Web page, you have the ability to stack AP elements in the third dimension. By default every AP element is assigned a z-index, or stacking order. The first AP element is assigned the stacking order of 1, and each new AP element follows the pro- gression 2, 3, 4, etc. Therefore, when two AP elements interact, they can actually slide over each other; creating Web designs that would have been impossible in straight HTML. If you've ever used AP element-intensive applications, such as Adobe Photoshop, Illustrator, or InDesign, you're ready to get started designing CSS AP elements in Dreamweaver. Introducing CSS Layouts and AP Elements From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 243 An AP element is an HTML page element that has absolute position assigned to it. An AP element can contain text, images, or other HTML body content. You can create AP elements by using styles and rules, or by drawing them on the page manually using the Draw AP Div tool. When you manually create AP elements, they are not attached to any particular style, and therefore stand on their own. If you want to change all the AP elements attached to a style, all you need to do is change the style. If you want to change all the manually created AP elements, you need to modify each one independently. While this does not impair the display of the AP element in the browser window, it does mean that creating AP elements with styles (discussed later in this chapter) helps to make modifications quick and easy. Creating AP Elements Create an AP Element Manually Open the page you want to add an AP element. Click the Layout tab on the Insert panel, and then click the Draw AP Div button. Click in the Document window in Design view, and then use one of the following methods: ◆ Draw An AP Element. Drag to create the AP element the size you want. You can also use Ctrl+drag or A+drag to draw multiple AP elements. Release the Ctrl or Command key when you’re finished drawing. ◆ Insert An AP Element. Click the Insert menu, point to Layout Objects, and then click AP Div. Click the edge of the AP element to select it. Selection handles appear around the edges of the AP element. To adj us t th e wid th an d he ig ht of the new AP element, drag one of the selection handles. To adj us t th e pos ition of the AP element, drag the AP element handle (tab in the upper-left corner) or the edge of the AP element. 6 5 4 3 2 1 5 1 4 2 3 From the Library of Wow! eBook ptg 244 Chapter 10 If you thought that creating an AP element was the greatest thing since sliced bread, then you're going to love that fact that you can nest AP elements. When you nest an AP element, you're placing an AP element within an AP element. Each AP element has its own formatting controls and gives you precise control over its position, for example, of text and graphics. Since the nested AP elements will be positioned based on the current position of the parent AP element, it’s considered to have rela- tive positioning concerning the page, and absolute or relative position- ing within the nest. Nesting AP Elements Nest an AP Element Open the page you want to add an AP element. Click the Layout tab on the Insert panel, and then click the Draw AP Div button (formally called the Layer button). Create an AP element in the Design view window of the current document. Click the Draw AP Div button a second time; hold down Alt (Win) or Option (Mac) and drag to create another AP element within the first AP element. Drag the parent AP element and the nested AP element moves at the same time. To rep os ition the ne st ed AP element relative to the parent AP element, drag the nested AP element. 6 5 4 3 2 1 5 1 6 3 Did You Know? You can show or hide AP element bor- ders. To sh ow AP element bo rder s, click the View menu, point to Visual Aids, and then select either AP Div Outlines or CSS Layout Outlines. To hide AP element borders, click the View menu, point to Visual Aids, and then deselect AP Element Outlines and CSS Layout Outlines. 2 From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 245 Setting AP Element Preferences Set AP Element Preferences Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the AP Elements category. Select from the following AP Elements style options: ◆ Visibility. Select the default option to show or hide AP elements: Default, Inherit, Visible, Hidden. ◆ Width and Height. Enter the default width and height (in pixels) when you use Insert > Layout Objects > AP Div. ◆ Background Color. Select a default background color. ◆ Background Image. Select a default background image. ◆ Nesting: Nest When Created Within An AP Div. Select to create a nested AP Div when you draw within an existing AP Div. Click OK. 4 3 2 1 You can use the AP Element section of the Preferences dialog box to specify the default settings you want for new AP elements. Whether you create a new AP element using the Draw AP Div button on the Layout tab on the Insert panel or the AP Div command on the Layout Objects submenu on the Insert menu, Dreamweaver uses the default options you set in the Preferences dialog box for visibility, width and height, and background color options to create a new AP element. 4 2 3 From the Library of Wow! eBook ptg 246 Chapter 10 Cascading Style Sheets Positioning, or CSS-P, allows for specific posi- tioning in HTML of Web elements. You can apply CSS-P to a block of text, a block element, an image, or an AP element. There are two ways to apply positioning: One is to create a style class and apply it to selec- tions of text blocks on the page (this basically converts the object to an AP element, automatically), the second way is to create an AP element, and modify it independently of creating a style. In the end, you have a fully controllable CSS-P AP element. Once an AP element is estab- lished, it is controlled using absolute or relative positioning. Relative positioning means that AP elements are given a position relative to the top-left corner of the parent container, and is considered to be part of the flow of the page, such as a normal inline element within a text flow, or an AP element, nested with another AP element. Absolute position- ing means that the AP element is positioned outside the flow of the Web page. In other words, nothing can make it move or change posi- tion. Setting the absolute positioning of the AP element does not impact the positioning of elements within the AP element. You can use the Properties panel to position and place AP elements where you want. Using CSS Positioning Change CSS-P Positioning Manually Open the Web page that contains the AP elements you want to modify. Select the AP element you want to change. Open the Properties panel, and then modify the AP element’s absolute position using the following options: ◆ L. Enter a value (in pixels) to position the AP element from the Left side of the Web page. ◆ T. Enter a value (in pixels) to position the AP element from the Top of the Web page. ◆ Z-Index. Enter a numerical value to indicate the AP element's stacking position when two or more AP elements overlap each other (higher numbers indicate a higher position within the stacking order of the active Web page). 3 2 1 1 2 L and T Z-index 3 From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 247 Create a CSS-P Style Open the Web page you want to create an AP element style. Click the Format menu, point to CSS Styles, and then click New. Click the Select Type list arrow, and then click Class. Enter a name for your new class. The style name must begin with a period. Click the Define In list arrow, and then click (This Document Only) or select an attached style sheet. Click OK. Click the Positioning category. Specify AP element positioning using the following options: ◆ Position. Click the Position list arrow, and then select an option: Absolute, Relative, Fixed, or Static. The Static option is used when you do not wish to add content to an AP element. ◆ Width. Enter a Width (in pixels) for the new AP element. ◆ Height. Enter a Height (in pixels) for the new AP element. ◆ Placement. Enter a value (in pixels) for the absolute position of the AP element box in relation to the Web page. ◆ Clip. Enter a value (in pixels) for the absolute position of the AP element content in relation to the Web page. ◆ Overflow. Click the Overflow list arrow, and then select an option when content exceeds the container. Click OK to add the embedded style to the active Web page. 9 8 7 6 5 4 3 2 1 5 3 4 6 7 8 9 From the Library of Wow! eBook . This addition of the third dimension is not only a new concept in Web design, but it is exactly why CSS absolute position is called AP elements. Not only can Web designers position elements. when on, and CSS caught on, more and more browsers came on board. In response, Dreamweaver began giving Cascading Style Sheets complete support. Cascading Style Sheets is all about the control. CSS-P Introduction Cascading Style Sheets-Positioning (CSS-P) is more than the perfect positioning of words and objects on a Web page, in addition, layers technology lets you create movable contain- ers