Dreamweaver HTML rendering control

In earlier versions of Dreamweaver (up to Dreamweaver 4), Dreamweaver rendered more space around form controls than Microsoft Internet Explorer and Netscape Navigator do. Form controls in extension UIs are rendered with extra space around them because Dreamweaver uses its HTML rendering engine to display extension UIs.

In later versions of Dreamweaver, the form-control rendering more closely matches the browsers. To take advantage of the rendering improvements, use one of three new DOCTYPE statements in your extension files, as shown in the following examples:

1
2
3
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//floater">
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//pi">

In most cases, DOCTYPE statements must go on the first line of a document. However, to avoid conflicts with extension-specific directives, DOCTYPE statements and directives can now be in any order. But, they must appear before the opening HTML tag. In previous versions, extension-specific directives were required to be on the first line of a file. For example, the comment at the top of a Property inspector file, or the MENU-LOCATION=NONE directive in a command.

The new DOCTYPE statements let you view your extensions in the Dreamweaver Design view. You can see them as they would appear when viewed by users.

You can see three examples where the dialog case is used in the following files in the Configuration/Commands folder: CFLoginWizard.htm, TeamAdminDlgDates.html, and TeamAdminDlgDays.html.

The following examples show the Base Property inspector without the DOCTYPE statement, which improves form-control rendering, and then with the DOCTYPE statement.

Base Property inspector without the DOCTYPE statement
Base Property inspector without the DOCTYPE statement

Base Property inspector with the DOCTYPE statement
Base Property inspector with the DOCTYPE statement