Note:

In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.

(Creative Cloud users only): Seven new semantic tags are available when you select Insert > Layout. The new tags are : Article, Aside, HGroup, Navigation, Section, Header, and Footer. For more information, see Insert HTML5 semantic elements from the Insert panel.

Insert and edit div tags

You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag is a tag that defines logical divisions within the content of a web page. You can use div tags to center blocks of content, create column effects, create different areas of color, and much more.

If you’re unfamiliar using div tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but are familiar with using tables, you can also try using tables.

Note:

Dreamweaver treats all div tags with an absolute position as AP elements (absolutely positioned elements), even if you didn’t create those div tags using the AP Div drawing tool.

Insert div tags

You can use div tags to create CSS layout blocks and position them in your document. This is useful if you have an existing CSS style sheet with positioning styles attached to your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it.

  1. In the Document window, place the insertion point where you want the div tag to appear.
  2. Do one of the following:
    • Select Insert > Layout Objects > Div Tag.

    • In the Layout category of the Insert panel, click the Insert Div Tag button .

  3. Set any of the following options:

    Insert

    Lets you select the location of the div tag and the tag name if it is not a new tag.

    Class

    Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style sheet appear in the list. Use this pop‑up menu to select the style you want to apply to the tag.

    ID

    Lets you change the name used to identify the div tag. If you attached a style sheet, IDs defined in that style sheet appear in the list. IDs for blocks that are already in your document are not listed.

    Note:

    Dreamweaver alerts you if you enter the same ID as another tag in your document.

    New CSS Rule

    Opens the New CSS Rule dialog box.

  4. Click OK.

    The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of the box, Dreamweaver highlights it.

    If the div tag is absolutely positioned, it becomes an AP element. (You can edit div tags that aren’t absolutely positioned.)

Edit div tags

After you insert a div tag, you can manipulate it or add content to it.

Note:

Div tags that are absolutely positioned become AP elements.

When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS Layout Outlines is selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag, Dreamweaver highlights the tag. You can change the highlight color or disable highlighting.

When you select a div tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the div tag by simply placing your insertion point inside the div tag, and then adding content just as you would add content to a page.

View and edit rules applied to a div tag

  1. Do one of the following to select the div tag:
    • Click the border of the div tag.

    Note:

    Look for the highlighting to see the border.

    • Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice.

    • Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window.

  2. Select Window > CSS Styles to open the CSS Styles panel if it is not already open.

    Rules applied to the div tag appear in the panel.

  3. Make edits as necessary.

Place the insertion point in a div tag to add content

  • Click anywhere inside the tag’s borders.

Change the placeholder text in a div tag

  • Select the text, and then type over it or press Delete.

    Note:

    You can add content to the div tag just as you would add content to a page.

Change the highlight color of div tags

When you move the pointer over the edge of a div tag in Design view, Dreamweaver highlights the borders of the tag. You can enable or disable highlighting as necessary, or change the highlight color in the Preferences dialog box.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Highlighting from the category list on the left.
  3. Make either of the following changes and click OK:
    • To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).

    • To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.

    Note:

    These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.

CSS layout blocks

Visualizing CSS layout blocks

You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhere on your page. More specifically, a CSS layout block is either a div tag without display:inline, or any other page element that includes the display:block, position:absolute, or position:relative CSS declarations. Following are a few examples of elements that are considered CSS layout blocks in Dreamweaver:

  • A div tag

  • An image with an absolute or relative position assigned to it

  • An a tag with the display:block style assigned to it

  • A paragraph with an absolute or relative position assigned to it

Note:

For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text), or simple block elements like paragraphs.

Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you float the mouse pointer over the layout block.

The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:

CSS Layout Outlines

Displays the outlines of all CSS layout blocks on the page.

CSS Layout Backgrounds

Displays temporarily assigned background colors for individual CSS layout blocks, and hides any other background colors or images that normally appear on the page.

Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks.

CSS Layout Box Model

Displays the box model (that is, padding and margins) of the selected CSS layout block.

View CSS layout blocks

You can enable or disable CSS layout block visual aids as necessary.

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.

Work 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:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Sample AP Div Page</title> 
<style type="text/css"> 
<!-- 
    #apDiv1 { 
        position:absolute; 
        left:62px; 
        top:67px; 
        width:421px; 
        height:188px; 
        z-index:1; 
    } 
--> 
</style> 
</head> 
<body> 
    <div id="apDiv1"> 
    </div> 
</body> 
</html>

You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z‑index (also called the stacking order), and visibility.

Insert an AP Div

Dreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.

When you insert an AP Div, Dreamweaver displays an outline of the AP Div in Design view by default, and highlights the block when you move the pointer over it. You can disable the visual aid that shows AP Div (or any AP element) outlines by disabling both AP Element Outlines and CSS Layout Outlines in the View > Visual Aids menu. You can also enable backgrounds and the box model for AP elements as a visual aid while you design.

After you create an AP Div, you can add content to it by simply placing your insertion point in the AP Div, and then adding content just as you would add content to a page.

Draw a single AP Div or multiple AP Divs consecutively

  1. In the Layout category of the Insert panel, click the Draw AP Div button .
  2. In the Document window’s Design view, do one of the following:
    • Drag to draw a single AP Div.

    • Control‑drag (Windows) or Command-drag (Macintosh) to draw multiple AP Divs consecutively.

      You can continue to draw new AP Divs as long as you do not release the Control or Command key.

Insert an AP Div at a particular place in the document

  • Place the insertion point in the Document window, and then select Insert > Layout Objects > AP Div.

    Note:

    This procedure places the tag for the AP Div wherever you clicked in the Document window. The visual rendering of the AP Div may thus affect other page elements (like text) that surround it.

Place the insertion point in an AP Div

  • Click anywhere inside the AP Div’s borders.

    The AP Div’s borders are highlighted, and the selection handle appears, but the AP Div itself is not selected.

Show AP Div borders

  • Select View > Visual Aids and select either AP Div Outlines or CSS Layout Outlines.

    Note:

    Selecting both options simultaneously has the same effect.

Hide AP Div borders

  • Select View > Visual Aids and deselect both AP Div Outlines and CSS Layout Outlines.

Work with nested AP Divs

A nested AP Div is an AP Div that has code contained within the tags of another AP Div. For example, the following code shows two AP Divs that are not nested, and two AP Divs that are nested:

<div id="apDiv1"></div> 
<div id="apDiv2"></div> 
<div id="apDiv3"> 
    <div id="apDiv4"></div> 
</div>

The graphical depiction for either set of AP Divs might look as follows:

Graphical depiction for either set of AP Divs
Graphical depiction for either set of AP Divs

In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually inside of the apDiv3 div. (You can change AP Div stacking order in the AP Elements panel.)

Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to inherit visibility from its parent.

You can enable the Nesting option to automatically nest when you draw an AP Div starting inside another AP Div. To draw inside or over another AP Div, you must also have the Prevent Overlaps option deselected.

Draw a nested AP Div

  1. Make sure Prevent Overlaps is deselected in the AP Elements panel (Window > AP Elements).
  2. In the Layout category of the Insert panel, click the Draw AP Div button .
  3. In the Document window’s Design view, drag to draw an AP Div inside an existing AP Div.

    If Nesting is disabled in AP Elements preferences, Alt‑drag (Windows) or Option-drag (Macintosh) to nest an AP Div inside an existing AP Div.

    Note:

    Nested AP Divs may appear differently in different browsers. When you create nested AP Divs, check their appearance in various browsers frequently during the design process.

Insert a nested AP Div

  1. Make sure Prevent Overlaps is deselected.
  2. Place the insertion point inside an existing AP Div in the Document window’s Design view, then select Insert > Layout Objects > AP Div.

Nest AP Divs automatically when you draw an AP Div inside another AP Div

  • Select the Nesting option in the AP Elements preferences.

View or set AP element preferences

Use the AP Elements category in the Preferences dialog box to specify the default settings for new AP elements you create.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select AP elements from the Category list on the left and specify any of the following preferences, and then click OK.

    Visibility

    Determines whether AP elements are visible by default. The options are default, inherit, visible, and hidden.

    Width and Height

    Specify a default width and height (in pixels) for AP elements you create using Insert > Layout Objects > AP Div.

    Background Color

    Specifies a default background color. Select a color from the color picker.

    Background Image

    Specifies a default background image. Click Browse to locate the image file on your computer.

    Nesting: Nest When Created Within An AP Div

    Specifies whether an AP Div that you draw starting from a point within the boundaries of an existing AP Div should be a nested AP Div. Hold down Alt (Windows) or Option (Macintosh) to temporarily change this setting while you’re drawing an AP Div.

View or set properties for a single AP element

When you select an AP element, the Property inspector displays AP element properties.

  1. Select an AP element.
  2. In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded, to see all properties.
    See all properties in the Property inspector
    Click the expander arrow to see all properties in the Property inspector.

  3. Set any of the following options:

    CSS-P Element

    Specifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements panel and in JavaScript code.

    Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods. Every AP element must have its own unique ID.

    Note:

    The CSS-P Property inspector presents the same options for relatively-positioned elements.

    L and T (left and top)

    Specify the position of the AP element’s upper-left corner relative to the upper-left corner of the page, or of the parent AP element if nested.

    W and H Specify the width and height of the AP element.

    Note:

    If the content of the AP element exceeds the specified size, the bottom edge of the AP element (as it appears in the Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP element appears in a browser, unless the Overflow property is set to Visible.)

    W and H

    The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

    Z‑Index

    Determines the z‑index, or stacking order, of the AP element.

    In a browser, higher-numbered AP elements appear in front of lower-numbered AP elements. Values can be positive or negative. It’s easier to change the stacking order of AP elements using the AP Elements panel than to enter specific z‑index values.

    Vis

    Specifies whether the AP element is initially visible or not. Select from the following options:

    • Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.

    • Inherit uses the visibility property of the AP element’s parent.

    • Visible displays the AP element contents, regardless of the parent’s value.

    • Hidden hides the AP element contents, regardless of the parent’s value.

      Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP element contents.

    Bg Image

    Specifies a background image for the AP element.

    Click the folder icon to browse to and select an image file.

    Bg Color

    Specifies a background color for the AP element.

    Leave this option blank to specify a transparent background.

    Class

    Specifies the CSS class used to style the AP element.

    Overflow

    Controls how AP elements appear in a browser when the content exceeds the AP element’s specified size.

    Visible indicates that the extra content appears in the AP element; effectively, the AP element stretches to accommodate it. Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should add scroll bars to the AP element whether they’re needed or not. Auto causes the browser to display scroll bars for the AP element only when needed (that is, when the AP element’s contents exceed its boundaries.)

    Note:

    The overflow option has uneven support across browsers.

    Clip

    Defines the visible area of an AP element.

    Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the AP element (counting from the upper-left corner of the AP element). The AP element is “clipped” so that only the specified rectangle is visible. For example, to make an AP element’s contents invisible except for a 50‑pixel-wide, 75‑pixel-high visible rectangle at the upper-left corner of the AP element, set L to 0, T to 0, R to 50, and B to 75.

    Note:

    Although CSS specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.

  4. If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

View or set properties for multiple AP elements

When you select two or more AP elements, the Property inspector displays text properties and a subset of the full AP element properties, allowing you to modify several AP elements at once.

Select multiple AP elements

  • Hold down Shift while selecting AP elements.

View and set properties for multiple AP elements

  1. Select multiple AP elements.
  2. In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded, to see all properties.
    Property inspector
    Property inspector

  3. Set any of the following properties for multiple AP elements:

    L and T (left and top)

    Specify the position of the AP elements’ upper-left corners relative to the upper-left corner of the page, or of the parent AP element if nested.

    W and H Specify the width and height of the AP elements.

    Note:

    If the content of any AP element exceeds the specified size, the bottom edge of the AP element (as it appears in the Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP element appears in a browser, unless the Overflow property is set to Visible.)

    The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

    Vis

    Specifies whether the AP elements are initially visible or not. Select from the following options:

    • Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.

    • Inherit uses the visibility property of the AP elements’ parent.

    • Visible displays the AP elements’ contents, regardless of the parent’s value.

    • Hidden hides the AP element contents, regardless of the parent’s value.

      Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP element contents.

    Tag

    Specifies the HTML tag used to define the AP elements.

    Bg Image

    Specifies a background image for the AP elements.

    Click the folder icon to browse to and select an image file.

    Bg Color

    Specifies a background color for the AP elements. Leave this option blank to specify a transparent background.

  4. If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

AP Elements panel overview

You use the AP Elements panel (Window > AP Elements) to manage the AP elements in your document. Use the AP Elements panel to prevent overlaps, to change the visibility of AP elements, to nest or stack AP elements, and to select one or more AP elements.

Note:

An AP element in Dreamweaver is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position assigned to it. The AP Elements panel does not display relatively-positioned elements.

AP elements are displayed as a list of names, in order of z‑index; by default, the first created AP element (with a z‑index of 1) appears at the bottom of the list, and the most recently created AP element appears at the top. You can, however, change the z‑index of an AP element by changing its place in the stacking order. For example, if you created eight AP elements and wanted to move the fourth AP element to the top, you could assign it a higher z‑index than the others.

Select AP elements

You can select one or more AP elements to manipulate them or change their properties.

Select an AP element in the AP elements panel

  • In the AP elements panel (Window > AP elements), click the name of the AP element.

Select an AP element in the Document window

  • Do one of the following:
    • Click an AP element’s selection handle.

      If the selection handle isn’t visible, click anywhere inside the AP element to make the handle visible.

    • Click an AP element’s border.

    • Control‑Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element.

    • Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the AP element. Press Control+A or Command+A again to select the AP element.

    • Click inside an AP element and select its tag in the tag selector.

Select multiple AP elements

  • Do one of the following:
    • In the AP Elements panel (Window > AP Elements), Shift-click two or more AP element names.

    • In the Document window, Shift-click inside or on the border of two or more AP elements.

Change the stacking order of AP elements

Use the Property inspector or the AP Elements panel to change the stacking order of AP elements. The AP element at the top of the AP Elements panel list is at the top of the stacking order, and appears in front of the other AP elements.

In HTML code, the stacking order, or z‑index, of the AP elements determines the order in which they are drawn in a browser. The higher the z‑index of an AP element, the higher that AP element is in the stacking order. (For example, an element with a z-index of 4 will appear on top of an element with a z-index of 3; 1 is always the lowest number in the stacking order.) You can change the z‑index for each AP element using the AP Elements panel or Property inspector.

Change the stacking order of AP elements using the AP Elements panel

  1. Select Window > AP Elements to open the AP Elements panel.
  2. Double-click the z-index number next to the AP element whose z-index you want to change.
  3. Change the number and press Return/Enter.
    • Type a higher number to move the AP element up in the stacking order.

    • Type a lower number to move the AP element down in the stacking order.

Change the stacking order of AP elements using the Property inspector

  1. Select Window > AP Elements to open the AP Elements panel to see the current stacking order.
  2. In the AP Elements panel or in the Document window, select the AP element whose z-index you want to change.
  3. In the Property inspector (Window > Properties), type a number in the Z‑Index text box.
    • Type a higher number to move the AP element up in the stacking order.

    • Type a lower number to move the AP element down in the stacking order.

Show and hide AP elements

While working on your document, you can show and hide AP elements manually, using the AP Elements panel, to see how the page will appear under different conditions.

Note:

The currently selected AP element always becomes visible and appears in front of other AP elements while it’s selected.

Change AP element visibility

  1. Select Window > AP Elements to open the AP Elements panel.
  2. Click in the eye icon column for an AP element to change its visibility.
    • An open eye means the AP element is visible.

    • A closed eye means the AP element is invisible.

    • If there is no eye icon, usually the AP element inherits visibility from its parent. (When AP elements are not nested, the parent is the document body, which is always visible.)

      Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).

Change the visibility of all AP elements at once

  • In the AP Elements panel (Window > AP Elements), click the header eye icon at the top of the column.

    Note:

    This procedure can set all AP elements to visible or hidden, but not to inherit.

Resize AP elements

You can resize an individual AP element, or simultaneously resize multiple AP elements to make them the same width and height.

If the Prevent Overlaps option is on, you will not be able to resize an AP element so that it overlaps with another AP element.

Resize an AP element

  1. In Design view, select an AP element.
  2. Do one of the following to resize the AP element:
    • To resize by dragging, drag any of the AP element’s resize handles.

    • To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.

      The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left borders with this technique.

    • To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while pressing an arrow key.

    • In the Property inspector (Window > Properties), type values for width (W) and height (H).

      Resizing an AP element changes the width and height of the AP element. It does not define how much of the AP element’s content is visible. You can define the visible region within an AP element in preferences.

Resize multiple AP elements at once

  1. In the Design view, select two or more AP elements.
  2. Do one of the following:
    • Select Modify > Arrange > Make Same Width Or Modify > Arrange > Make Same Height.

      The first selected AP elements conform to the width or height of the last selected AP element.

    • In the Property inspector (Window > Properties), under Multiple CSS-P Element, enter width and height values.

      The values are applied to all selected AP elements.

Move AP elements

You can move AP elements in the Design view in much the same way that you move objects in most basic graphics applications.

If the Prevent Overlaps option is on, you will not be able to move a AP element so that it overlaps another AP element.

  1. In the Design view, select an AP element or multiple AP elements.
  2. Do one of the following:
    • To move by dragging, drag the selection handle of the last selected AP element (highlighted in black).

    • To move one pixel at a time, use the arrow keys.

      Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping increment.

Align AP elements

Use the AP element alignment commands to align one or more AP elements with a border of the last AP element selected.

When you align AP elements, child AP elements that aren’t selected may move because their parent AP element is selected and moved. To prevent this, don’t use nested AP elements.

  1. In the Design view, select the AP element.
  2. Select Modify > Arrange, and then select an alignment option.

    For example, if you select Top, all of the AP elements move so that their top borders are in the same vertical position as the top border of the last selected AP element (highlighted in black).

Converting AP elements to tables

Instead of using tables to create your layout, some web designers prefer to work with AP elements. Dreamweaver enables you to create your layout using AP elements, then (if you want) convert them into tables. For example, you might need to convert your AP elements to tables if you need to support browsers before version 4.0. Converting AP elements to tables, however, is highly discouraged because it can result in tables with a large number of empty cells, not to mention bloated code. If you need a page layout that uses tables, it is best to create that page layout using the standard table layout tools available in Dreamweaver.

You can convert back and forth between AP elements and tables to adjust the layout and optimize page design. (When you convert a table back to AP elements, however, Dreamweaver converts the table back to AP Divs, regardless of the type of AP element you might have had on the page before the conversion to tables.) You cannot convert a specific table or AP element on a page; you must convert AP elements to tables and tables to AP Divs for an entire page.

Note:

You can’t convert AP elements to tables or tables to AP Divs in a template document or in a document to which a template has been applied. Instead, create your layout in a non-template document and convert it before saving it as a template.

Convert between AP elements and tables

You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed in older browsers.

Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View > Table Mode > Standard Mode).

Convert AP elements to a table

  1. Select Modify > Convert > AP Divs To Table.
  2. Specify any of the following options and click OK:

    Most Accurate

    Creates a cell for every AP element, plus any additional cells that are necessary to preserve the space between AP elements.

    Smallest: Collapse Empty Cells

    Specifies that the AP elements’ edges should be aligned if they are positioned within the specified number of pixels.

    If you select this option, the resulting table will have fewer empty rows and columns, but may not match your layout precisely.

    Use Transparent GIFs

    Fills the table’s last row with transparent GIFs. This ensures that the table is displayed with the same column widths in all browsers.

    When this option is enabled, you cannot edit the resulting table by dragging its columns. When this option is disabled, the resulting table will not contain transparent GIFs, but the widths of the columns may vary from browser to browser.

    Center On Page

    Centers the resulting table on the page. If this option is disabled, the table starts at the left edge of the page.

Convert tables to AP Divs

  1. Select Modify > Convert > Tables to AP Divs.
  2. Specify any of the following options and click OK:

    Prevent AP Element Overlaps

    Constrains the positions of AP elements when they are created, moved, and resized so that they don’t overlap.

    Show AP Elements Panel

    Displays the AP elements panel.

    Show Grid and Snap To Grid

    Let you use a grid to help position AP elements.

    The tables are converted to AP Divs. Empty cells are not converted to AP elements unless they have background colors.

    Note:

    Page elements that were outside of tables are also placed in AP Divs.

Prevent AP element overlaps

Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to convert the AP elements in a document to tables, use the Prevent Overlap option to constrain AP element movement and positioning so that AP elements don’t overlap.

When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing AP element. If you activate this option after creating overlapping AP elements, drag each overlapping AP element to move it away from other AP elements. Dreamweaver does not automatically fix existing overlapping AP elements in the page when you enable Prevent AP element Overlaps.

When this option and snapping are enabled, an AP element won’t snap to the grid if it would cause two AP elements to overlap. Instead, it will snap to the edge of the closest AP element.

Note:

Certain actions allow you to overlap AP elements even when the Prevent Overlaps option is enabled. If you insert an AP element using the Insert menu, enter numbers in the Property inspector, or reposition AP elements by editing the HTML source code, you can cause AP elements to overlap or nest while this option is enabled. If overlaps happen, drag overlapping AP elements in the Design view to separate them.

  • In the AP Elements panel (Window > AP Elements), select the Prevent Overlaps option.
  • In the Document window, select Modify > Arrange > Prevent AP Element Overlaps.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy