adobe dreamweaver cs5 on demand part 40

Creating Page Layouts Using CSS-P Introduction 10 What You’ll Do 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. 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 APElements Create a Rollover Using AP Elements Convert AP Elements to Tables 241 Introducing CSS Layouts and AP Elements 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 following: Although it`s not the only way to create the code, AP elements are usually placed between or … 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 move an AP element to a different position 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. The Code When you use Dreamweaver to create an AP element, the HTML code looks something like 242 Chapter 10 Creating AP Elements 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. Create an AP Element Manually 1 Open the page you want to add an 1 3 4 2 AP element. 2 Click the Layout tab on the Insert panel, and then click the Draw AP Div button. 3 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. 4 Click the edge of the AP element 5 to select it. Selection handles appear around the edges of the AP element. 5 To adjust the width and height of the new AP element, drag one of the selection handles. 6 To adjust the position of the AP element, drag the AP element handle (tab in the upper-left corner) or the edge of the AP element. Chapter 10 Creating Page Layouts Using CSS-P 243 Nesting AP Elements 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. Nest an AP Element 1 Open the page you want to add an 1 3 2 AP element. 2 Click the Layout tab on the Insert panel, and then click the Draw AP Div button (formally called the Layer button). 3 Create an AP element in the Design view window of the current document. 4 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. 5 Drag the parent AP element and the nested AP element moves at the same time. 6 To reposition the nested AP element relative to the parent AP element, drag the nested AP element. 5 6 Did You Know? You can show or hide AP element bor-ders. To show AP element borders, 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. 244 Chapter 10 Setting AP Element Preferences Set AP Element Preferences 1 Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. 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. 2 2 Click the AP Elements category. 3 Select from the following AP Elements style options: 3 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. 4 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. 4 Click OK. Chapter 10 Creating Page Layouts Using CSS-P 245 ... - tailieumienphi.vn