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 containers (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 elements 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.
DW 8.1
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 characteristics; 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 precisely 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.
When you use Dreamweaver to create an AP element, the HTML code looks something like the following:
<div id="Layer4" style="position:absolute; visibility: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, independent 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 progression 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.
DW 8.1
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.
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
+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 adjust the width and height of the new AP element, drag one of the selection handles.
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.
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 relative positioning concerning the page, and absolute or relative positioning within the nest.
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 reposition the nested AP element relative to the parent AP element, drag the nested AP element.
Did You Know?
You can show or hide AP element borders. 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.
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.
Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences.
Click the AP Elements category.
Select from the following CSS style options:
• Visibility. Select the default option to show or hide AP elements: Default, Inherit, Visible, Hidden.
• Width and Height. Specifies the default width and height (in pixels) when you use Insert > Layout Objects > AP Div.
• Background Color. Specifics the default background color.
• Nesting: Nest When Created Within An AP Div. Select to create a nested AP Div when you draw within an existing AP Div.
• Netscape 4 Compatibility: Add Resize Fix When Inserting AP Element. Select to insert JavaScript code to fix a problem with Netscape 4 browsers.
Note
You can add or remove JavaScript code manually by selecting the Commands menu, and then click Add/Remove Netscape Resize Fix.
Click OK.
DW 4.4, 8.2
Cascading Style Sheets Positioning, or CSS-P, allows for specific positioning 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 selections 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 established, 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 positioning means that the AP element is positioned outside the flow of the Web page. In other words, nothing can make it move or change position. 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.
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).
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 popup, and then click Class.
Enter a name for your new class. The style name must begin with a period.
Click the Define In popup, 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:
• Type. Click the Type 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 arrow, and then select an option when content exceeds the container.
Click OK to add the embedded style to the active Web page.
DW 4.4, 8.2
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.
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.
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.
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.
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 utilized. However, when they overlap, the Z-index determines what AP element is on top of another.
DW 4.4, 8.2, 8.3
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 element, 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.
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.
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.
• 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.
Did You Know?
It’s important to preview AP element positioning. Dreamweaver only previews 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.
DW 4.4, 8.1
After you create the AP elements you want, you can use the AP Elements panel and other commands to manage and work with AP elements. 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 individually or together.
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:
Did You Know?
You can prevent AP elements from overlapping. Select the Prevent overlaps 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.
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.
• 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 Bring To Front or Send To Back.
AP Elements have several unique properties that let you design way beyond the static text and graphic Web pages of the past. You can show and hide AP elements to create effects. For example, you can create a drop-down menu, or you can display the larger version of an image when you point to, or rollover, the small thumbnail version. In this example, Dreamweaver shows or hides the AP elements with the different images.
Create a new Web page.
Click the Layout tab on the Insert panel.
Click the Draw AP Div button, and then create two AP elements.
• An AP element 60 by 60 pixels, which contains a small thumbnail graphic. Name the AP element in the Properties panel, Thumb.
• An AP element 300 by 300 pixels, which contains the larger image. Name this AP element, Main.
Move the Thumb AP element to the left in the document window, and then move the Main AP element to the right.
Drag an image to the Thumb AP element, and an image to the Main AP element (the images should have the same width and height as the AP elements).
Open the Properties panel.
Select the Main AP element and change the Visibility of the AP element to Hidden.
Click the Window menu, and then click Behaviors to display the Behaviors panel.
Select the Thumb AP element.
Click the Add Behavior button, and then click Show-Hide Elements.
Select div “Main” from the available elements.
Click the Show button.
Click OK.
Click the Event list arrow, and then click onMouseOver.
Click the Add Behavior button, and then click Show-Hide Elements.
Select div “Main” from the available elements.
Click the Hide button.
Click OK.
Click the Event list arrow, and then click onMouseOut.
Click the File menu, point to Preview In Browser, and then select a browser.
When the Web page displays, rolling over the smaller thumbnail of the image causes the larger image to display. When you roll out of the thumbnail AP element, the larger image disappears... like magic.
While the advantage to designing with AP elements is the greater flexibility it affords, one of the greatest disadvantages of using AP elements is that they are viewable in only the most recent generation of browsers. Dreamweaver enables you to get the best of both worlds by making it possible for you to use AP elements to design complex page layouts, and then to transform those AP elements into tables that can be viewed in earlier browsers. For example, you might need to convert your AP elements to tables if you need to support browsers before version 4.0. Nevertheless, Dreamweaver’s capability to convert AP elements to tables enables you to create complex layouts with ease. Designing this way has some limitations—you can’t, for example, overlap AP element items on top of one another. If you have any overlapping AP elements within the document, Dreamweaver does its best to reposition the AP elements side by side. However, it’s best if you make those corrections manually before performing the conversion. In addition, instead of using tables or Layout mode to create a document, some Web designers prefer to work with AP elements. If you need to convert a table back to AP elements, you can do it in Dreamweaver.
Open the Web page that contains AP elements you want to convert to a table.
• Make sure you don’t have any overlapping AP elements.
Click the Modify menu, point to Convert, and then select AP Divs To Tables.
Select from the following table layout options:
• Most Accurate. Attempts to convert the AP element document as close to the original as possible.
• Smallest. Choose to collapse smaller than a user-defined size.
• Use Transparent GIFs. Select this option to allow the use of transparent GIF files in empty cells.
• Center On Page. Select this option to center the table on the active Web page.
Select from the following layout tools options:
• Prevent Overlaps. Select to prevent cells from overlapping.
• Show AP Elements Panel. Select to show the AP Elements panel (displays when you click the OK button).
• Show Grid. Select to display a grid in the document window.
• Snap To Grid. Select to force the newly created table to snap to the existing grid.
Click OK.
Open the Web page that contains a table you want to convert to AP elements.
Click the Modify menu, point to Convert, and then click Tables To AP Divs.
Select from the following table layout options:
• Prevent Overlaps. Select to prevent AP elements from overlapping.
• Show AP Elements Panel. Select to show the AP Elements panel (displays when you click the OK button).
• Show Grid. Select to display a grid in the document window.
• Snap To Grid. Select to force the newly created table to snap to the existing grid.
Click OK.