Working with ap elements – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 283
View CSS layout block outlines
Select View > Visual Aids > CSS Layout Outlines.
View CSS layout block backgrounds
Select View > Visual Aids > CSS Layout Backgrounds.
View CSS layout block box models
Select View > Visual Aids > CSS Layout Box Model.
You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.
Use visual aids with non-CSS layout block elements
You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t normally considered CSS layout
blocks. To do so, you must first create a Design-time style sheet that assigns the display:block attribute to the appropriate page element.
1. Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting CSS in the Basic page
column, and clicking Create.
2. In the new style sheet, create rules that assign the display:block attribute to the page elements you want to display as CSS layout blocks.
For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet with the following
rules:
p{
display:block;
}
li{
display:block;
}
3. Save the file.
4. In Design view, open the page to which you want to attach the new styles.
5. Select Format > CSS Styles > Design-time.
6. In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box, select the style sheet
you just created, and click OK.
7. Click OK to close the Design-time Style Sheets dialog box.
The style sheet is attached to your document. If you had created a style sheet using the previous example, all paragraphs and list items
would be formatted with the display:block attribute, thereby allowing you to enable or disable CSS layout block visual aids for paragraphs
and list items.
Working with AP elements
About AP elements in Dreamweaver
An AP element (absolutely positioned element) is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position
assigned to it. AP elements can contain text, images, or any other content that you can place in the body of an HTML document.
With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind each other, hide some AP
elements while showing others, and move AP elements across the screen. You can place a background image in one AP element, then place a
second AP element, containing text with a transparent background, in front of that.
AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts by default.) But remember,
you can classify any HTML element (for example, an image) as an AP element by assigning an absolute position to it. All AP elements (not just
absolutely positioned div tags) appear in the AP elements panel.
HTML code for AP Div elements
Dreamweaver creates AP elements using the div tag. When you draw an AP element using the Draw AP Div tool, Dreamweaver inserts a div tag
in the document and assigns the div an id value (by default apDiv1 for the first div you draw, apDiv2 for the second div you draw, and so on).
Later, you can rename the AP Div to anything you want using the AP elements panel or the Property inspector. Dreamweaver also uses
embedded CSS in the head of the document to position the AP Div, and to assign the AP Div its exact dimensions.
The following is sample HTML code for an AP Div: