20.2 Customizing Dreamweaver Dialog Boxes

Dreamweaver dialog boxes are created using HTML forms stored in the Dreamweaver4/Configuration/Commands directory. You can modify these HTML files to alter the appearance of Dreamweaver's dialog boxes permanently. Alterations to these dialog boxes are reflected across all Dreamweaver sites.

Table 20-1 lists the files used to implement many of Dreamweaver's menu options. JavaScript within the HTML file, and in external .js files, controls the dialog boxes' functionality. You can edit these files to change the appearance and behavior of Dreamweaver's dialog boxes and menu commands. Most of these files are stored in the Dreamweaver4/Configuration/Commands directory. Files whose paths begin with Shared are located in the Dreamweaver4/Configuration/Shared directory and are used by multiple dialog boxes.

Table 20-1. Dialog box HTML and JS files

Menu command or dialog box	HTML and JS files used
File Save	_afterSave.htm _beforeSave.htm
File Open	_onOpen.htm
Commands Add/Remove Netscape Resize Fix	Add Remove NS Resize Fix.htm addNSResizeFix.htm Add Remove NS Resize Fix.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/DOM.js
Alert dialog boxes	AlertDS.htm AlterDS.js
Commands Apply Source Formatting	Apply Source Formatting.htm Source Formatting.js
Commands Check Page for Accessibility	Check for Accessibility.htm Check for Accessibility.js
Commands Clean Up HTML	Clean Up HTML.htm Clean Up HTML.js Shared/MM/Scripts/CMN/DOM.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/errMsg.js
Commands Clean Up Word HTML	Clean Up Word HTML.htm Clean Up Word HTML.js Source Formatting.js Shared/MM/Scripts/CMN/displayHelp.js Shared/MM/Scripts/CMN/UI.js Shared/MM/Scripts/CMN/DOM.js Shared/MM/Scripts/Class/classCheckbox.js Shared/MM/Scripts/Class/TabControlClass.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/errMsg.js
Confirmation dialog boxes	confirmDS.htm confirmDS.js
Commands Create Web Photo Album	Create Web Photo Album.htm Create Web Photo Album.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/UI.js Shared/MM/Scripts/CMN/string.js Shared/MM/Scripts/CMN/displayHelp.js
Insert Date	Date.htm Date.js Date_beforeSave.htm Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/UI.js Shared/MM/Scripts/CMN/dateID.js Shared/MM/Scripts/CMN/displayHelp.js
File Debug in Browser	debugSyntaxResults.htm debugSyntaxResults.js
Edit Keyboard Shortcuts	delete set.htm delete set.js duplicate set.htm duplicate set.js Keyboard Shortcuts.html Keyboard Shortcuts.js Processing.htm rename set.htm rename set.js
File Design Notes	Design Notes.js Design Notes_onOpen.htm Design Notes_onOpen.js DesignNotesMultiFile.htm DesignNotesMultiFile.js
File Export Export Table	Export Table.htm Export Table.js Shared/MM/Scripts/CMN/UI.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/displayHelp.js
Help Extension Manager	Extension Help.htm Extension Help.js Manage Extensions.htm Manage Extensions.js
Insert Interactive Image Fireworks HTML	Fireworks HTML.htm Fireworks HTML.js PasteFireworksHTML.htm PasteFireworksHTML.js Shared/MM/Scripts/CMN/string.js Shared/MM/Scripts/insertFireworksHTML.js Shared/MM/Scripts/Class/FileClass.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/displayHelp.js
Insert Interactive Image Flash Button	Flash Button.htm Flash Button.js Flash Button.xml Shared/MM/Scripts/CMN/docInfo.js Shared/MM/Scripts/Class/FileClass.js Shared/MM/Scripts/Class/ListControlClass.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/string.js Shared/MM/Scripts/CMN/displayHelp.js Shared/MM/Scripts/flashObjects.js
Insert Interactive Image Flash Text	Flash Text.htm Flash Text.js Shared/MM/Scripts/Class/ListControlClass.js Shared/MM/Scripts/Class/ImageButtonClass.js Shared/MM/Scripts/CMN/displayHelp.js Shared/MM/Scripts/flashObjects.js Shared/MM/Scripts/CMN/localText.js
Commands Format Table	Format Table.htm Format Table.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/docInfo.js Shared/MM/Scripts/CMN/displayHelp.js
File Import Import Table Data	Import Table Data.htm Tabular Data.htm TabularData.js Shared/MM/Scripts/CMN/UI.js Shared/MM/Scripts/CMN/file.js Shared/MM/Scripts/CMN/localText.js
Insert Interactive Image Rollover Image	Rollover.htm Rollover.js Shared/MM/Scripts/CMN/errmsg.js Shared/MM/Scripts/CMN/string.js Shared/MM/Scripts/CMN/localText.js
Insert Interactive Image Navigation Bar	Insert Nav Bar.htm Modify Nav Bar.htm NavigationBar.js Shared/MM/Scripts/Class/ListControlClass.js Shared/MM/Scripts/navBar.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/UI.js Shared/MM/Scripts/CMN/string.js Shared/MM/Scripts/CMN/Handler.js
Insert Special Characters Other	InsertEnt.htm InsertEnt.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/CMN/displayHelp.js
Insert Form Objects Jump Menu	Jump Menu.htm Jump Menu.js Shared/MM/Scripts/CMN/localText.js Shared/MM/Scripts/jumpMenuUI.js Shared/MM/Scripts/CMN/docInfo.js Shared/MM/Scripts/CMN/string.js Shared/MM/Scripts/CMN/form.js Shared/MM/Scripts/CMN/file.js
View Table View Layout View	Layout Cell.htm Layout Table.htm layoutViewIntro.htm layoutViewIntro.js, layoutViewIntroStandard.gif
Help Lessons	Lessions.htm
Command Optimize Image in Fireworks	Optimize Image in Fireworks.html Optimize Image in Fireworks.js
Commands Set Color Sceme	Set Color Scheme.htm colorSchemes.js Set Color Scheme.js Shared/MM/Scripts/CMN/localText.j
Commands Sort Table	Sort Table.htm Sort Table.js Shared/MM/Scripts/CMN/docInfo.js Shared/MM/Scripts/CMN/localText.js

Consider the Insert Rollover Image dialog box implemented with the Rollover.htm file shown in Figure 20-4.

Figure 20-4. The Rollover.htm file

Notice that the options in this form match those used in the Insert Rollover Image dialog box shown in Figure 20-5.

Figure 20-5. The Insert Rollover Image dialog box

Open the Rollover.htm file in Dreamweaver to see the HTML code used to implement the dialog box and the JavaScript used to manipulate the contents of this form (Rollover.htm can be found in the Dreamweaver 4/Configuration/Commands folder).

Figure 20-6 shows a modified version of the dialog box created by adding the following HTML code to the Rollover.htm file. As always, you should make a backup copy of your original files before making any changes.

<p><i><b>
   Do not place any rollover images in documents intended
   for 3.0 and earlier browsers.
</b></i></p> 

You must save the file and restart Dreamweaver before the changes will be reflected in the dialog box, as seen in Figure 20-6.

Figure 20-6. Modified Insert Rollover Image dialog box

You can modify any dialog box to add functionality, remove functionality, or add helpful information as we did in the Insert Rollover Image dialog box.

To make customization available to other users, copy the revised files manually to each computer's Dreamweaver4/Configuration/Commands folder.

20.2.1 The Extensions.txt File

The Extensions.txt file in the Dreamweaver4/Configuration folder controls the pop-up list of file types available in the Open file dialog box (accessed via File Open). The first line of the Extensions.txt file determines the file types shown by default. Each line of the file contains a comma-separated list of file extensions (in capital letters) followed by a colon and a description. For example, you can add this line to the Extensions.txt file to create a new category called Image Files:

JPG,JPE,JPEG,GIF,PNG:Image Files

Note that the All Documents category shows a more limited range of extensions than the All Files (*.*) category. Remember to back up the Extensions.txt file before making changes, and restart Dreamweaver to put the changes into effect.

As you can see, Dreamweaver's interface is extremely flexible and extensible. In Chapter 22, we'll cover some behaviors used to extend Dreamweaver. Carried to its logical extreme, you can build an entirely new application on top of the Dreamweaver platform, as was done in the case of Dreamweaver UltraDev.

The next chapter covers Dreamweaver's integration with server-side languages.