DREAMWEAVER CS3
User Guide
151
To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save
your HTML file with the .htm extension.
2
Add the HTML page to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder.
3
(Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe Dreamweaver
CS3\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x
193 pixels high PNG files.
Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example,
if your HTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.
4
(Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver CS3\Configu-
ration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, and
renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename
it myCustomLayout.htm.mno.
5
(Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout
name, description, and preview image.
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:
September 4, 2007
