Use of Property inspector files in Dreamweaver

Dreamweaver has several built-in interfaces for the Property inspector that let you set properties for many standard HTML tags. Because these built-in inspectors are part of the core Dreamweaver code, you cannot find corresponding Property inspector files for them in the Configuration folder. However, custom Property inspector files let you override these built-in interfaces or create new ones to inspect custom tags. Custom Property inspector files reside in the Configuration/Inspectors folder inside the Dreamweaver application folder.

The Property inspector HTML file must contain a comment (in addition to the doctype comment) immediately preceding the opening HTML tag. It is shown in the following example:

 <!-- tag:serverModel:tagNameOrKeyword,priority:1to10,selection:¬ exactOrWithin,hline,vline, serverModel--> 
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//pi">

This comment has the following elements:

  • The serverModel element specifies that Dreamweaver must load this Property inspector only when the server model specified is active.

  • The tagNameOrKeywordelement is the tag that is inspected or one of the following keywords: *COMMENT* (for comments), *LOCKED* (for locked regions), or *ASP* (for ASP tags).

  • The 1to10 element is the priority of the Property inspector file. 1 indicates that this inspector is used only when no others can inspect the selection. 10 indicates that this inspector takes precedence over all others that can inspect the selection.

  • The exactOrWithin element indicates whether the selection can be within the tag (within) or must exactly contain the tag (exact).

  • The hline element (optional) indicates that a horizontal gray line must appear between the upper and lower halves of the inspector in expanded mode.

  • The vline element (optional) indicates that a vertical gray line must appear between the tag name field and the rest of the properties in the inspector.

  • The serverModel element (optional) indicates the server model of the Property inspector. The server model of the Property inspector must be the same as the Property inspector of the document. If not, Dreamweaver does not use the Property inspector to display the properties of the current selection. For example, consider, the server model of a document is Adobe ColdFusion. But, the server model of the Property inspector is ASP. Then, Dreamweaver does not use that Property inspector for selections in the document.

The following comment is appropriate for an inspector that is designed to inspect the happy tag:

 <!-- tag:happy, priority:8,selection:exact,hline,vline,serverModel:ASP -->

In some cases, specifying that your extension uses only Dreamweaver extension rendering and not the previous rendering engine is a must. You can do it by inserting the following line immediately before the tag comment, as shown in the following example:

 <!--DOCTYPE HTML SYSTEM “-//Adobe//DWExtension layout-engine 10.0//pi”-->

The body section of a Property inspector file contains an HTML form. Instead of displaying the form contents in a dialog box, Dreamweaver uses the form to define the input areas and layout of the Property inspector.

The head section of a Property inspector file contains JavaScript functions or a reference to the JavaScript file or files.