Macromedia Dreamweaver MX 2004 Demystified

Everything you do to customize Dreamweaver affects the Configuration folder. But not everything requires that you climb into the Configuration folder and tinker with it. The following sections look at different reconfiguring tasks you might want to perform, starting from simple changes with a friendly interface and working toward the more geeky (and potentially scary) changes that can be done only in the guts of the machine. Have fun in there!

Modifying Keyboard Shortcuts

Keyboard shortcuts are a great way to quickly access Dreamweaver functions and commands. The default Dreamweaver setup includes keyboard shortcuts for most menu commands, as well as various shortcuts for selecting, scrolling, and editing in Design or Code view. And in case your favorite command or operation doesn't have a shortcut, or if you just don't like the shortcuts Macromedia has chosen for you, the shortcuts are completely customizable. You can add, subtract, and reassign shortcuts as you like. You can even create different sets of shortcuts for different purposes and switch between them at will.

Working with the Keyboard Shortcuts Editor

The main interface for working with keyboard shortcuts is the Keyboard Shortcuts editor, shown in Figure 28.2. You access it by choosing Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Mac). In this window, you can choose from one of the predefined sets of shortcuts supplied with Dreamweaver, or create and customize your own set.

Dreamweaver ships with four sets of keyboard shortcuts:

• Macromedia Standard shortcuts The default set, for best integration with the rest of the Macromedia MX 2004 programs (Fireworks MX 2004, Flash MX 2004).

• Dreamweaver 3 shortcuts For upgrading users who don't want to memorize a whole new set of commands every time there's an upgrade.

• HomeSite shortcuts Very helpful for Windows users who switch frequently between Dreamweaver and the HomeSite+ text editor.

• BBEdit shortcuts Equally helpful for Mac users who switch between Dreamweaver and the BBEdit or BBEdit Lite text editors.

To switch between one of these default sets, just choose its name from the Shortcut Set drop-down menu. The new shortcut set goes into effect as soon as you click OK to close the dialog box. (There's no need to restart Dreamweaver!)

Although you can't modify these sets, you can duplicate any of them to create your own set, and modify that set to your heart's content. Just activate the set you want to duplicate, and click the Duplicate Set button. Name your set anything you like, and click OK to close the dialog box and create it.

To create a new shortcut in your custom set or to change an existing shortcut, search through the menu list in the editor window, and select the command you want to change. Any shortcuts assigned to it appear in the Shortcuts field. To change the existing shortcut, select it in the Shortcuts field. To add a new shortcut, click the + button above the Shortcuts field. Then click inside the Press Key field, type your desired key combination, and click Change.

Here are a few tips on working with the Shortcuts editor:

• As soon as you activate the Press Key field, Dreamweaver interprets every keystroke you make as a keyboard shortcut you're trying to assign. If you press the wrong key combination, you can't press Delete to remove it or Ctrl/Cmd+Z to undo your typing. Just remember, as long as you don't click the Change button, nothing you've entered in the Press Key field will become a shortcut.

• Only certain key combinations are considered valid for shortcuts. Function key combinations are allowed, with or without modifiers. But number and letter combinations must begin with Ctrl (Windows) or Cmd (Mac). If you enter an invalid key combination in the Press Key field, Dreamweaver warns you and won't let you assign it.

• If you enter a key combination in the Press Key field that has already been assigned to some other menu item, Dreamweaver warns you. If you click the Change button, Dreamweaver asks if you want the key combination reassigned. Of course, there's nothing wrong with that.

Any changes you make to a shortcut set are not saved until you switch to another shortcut set (at which time you're given a prompt to save changes to the previous set) or you click OK to close the Keyboard Shortcuts editor. For instance, if Dreamweaver freezes or quits before you can do either of these things, your shortcut changes won't be saved.

How Shortcuts are Configured

Thanks to the Keyboard Shortcuts editor, you don't have to know about the nuts and bolts of configuration to modify shortcuts. But in case you want to tinker around under the hood, keyboard shortcuts are controlled by several XML files located in the Configuration/ Menus /Custom Sets folder (see Figure 28.3). Each file in this folder Macromedia.xml, HomeSite.xml , and so onrepresents a set of keyboard shortcuts. The file contents look something like this:

<SHORTCUTSET name="Macromedia Standard" type="factory"> <SHORTCUT ID="DWMenu_File_Save" keys="Cmd+S"/> <SHORTCUT ID="DWMenu_File_SaveAs" keys="Cmd+Shift+S"/> <SHORTCUT ID="DWMenu_File_SaveAsTemplate" keys=""/> etc </SHORTCUTSET>

If you've created any custom shortcut sets, they appear in your user Configuration folder, each as another XML file named whatever you called your shortcut set, with the .xml filename extension. In the same folder, the Active.txt file tells Dreamweaver which set of shortcuts is currently active. If for some reason you just don't like working with the Keyboard Shortcuts editor (it's too slow, for instance, or you just can't get the hang of the Shortcut and Press Key fields, or, dang it, you just prefer typing things), you can edit the files in your user Configuration folder to make any shortcut changes you like. Just remember that your XML syntax must be correct, and it is possible to goof up Dreamweaver's functioning by doing this. If you accidentally hose your shortcut set by manually editing it, quit Dreamweaver, throw away your set's XML file, and change the Active.txt file so that it lists some other set as active. That's the price of being a code monkey .

Customizing the Favorites Category of the Insert Bar

You're working hard, creating pages, inserting content, trying to be as efficient as possible. Do you ever get tired of bouncing around from category to category in the Insert bar, skipping past all those objects you hardly ever use to get to the ones you use all the time? New to Dreamweaver MX 2004, you can easily add your favorite objects to the Favorites category of the Insert barwithout a lick of code monkeying.

Using the Customize Favorite Objects Window

The first time you visit the Favorites Insert bar, it's empty except for a message encouraging you to click to customize the category. When you click this message, Dreamweaver opens the Customize Favorite Objects dialog box, as shown in Figure 28.4.

To add a favorite, in the left portion of the window, choose a favorite object from the list. Then click the >> button to move the object to the Favorites list on the right.

Your favorite objects appear in the Favorites Insert bar in the order they appear in the Favorites list. To organize your favorites (when you have several of them), select an item in the list, and press the up or down arrow to move it up or down.

To add a vertical separator bar to the Insert bar (so that you can clump objects in logical groups), select the object that should be followed by a separator bar, and click the Add separator button.

To remove an object from the Favorites list, select it and click the trash can icon. (This doesn't delete the object from the rest of the Dreamweaver interfacesjust from your Favorites category.)

When you're done creating favorites, click OK to close the dialog box, and there are your favorites (see Figure 28.5)!

You can come back to this window at any time to update your Favorites category. Just right-click an empty part of the Favorites Insert bar, and choose Customize Favorites.

How the Insert Bar Is Configured

You don't need to know how Dreamweaver configures the Favorites category, or any of the categories in the Insert bar. But in case you're curiousor you just love to tinkerhere's how it works: In the Configuration/Objects folder, the Insertbar.xml file contains instructions for configuring the Insert bar, including categories, object buttons , object groups, and so on. The code framework looks like this:

<category> <button /> <separator /> <menubutton> <button /> <button /> </menubutton> </category>

Each pair of category tags creates an Insertbar category. Within each category, button tags create object buttons, and menubutton tags containing other button tags create object drop-down menus populated by object buttons. Vertical separator bars are created from separator tags.

The actual code includes various attributes for each tag, which ends up looking like this:

<category id="DW_Insertbar_Common" MMString:name="insertbar/category/common" folder="Common"> <button id="DW_Anchor" image="Common\Anchor.gif"MMString: name="insertbar/anchor" file="Common\Anchor.htm"/> <separator /> <menubutton id="DW_LayoutTools" MMString:name= "insertbar/layoutTools" image="Common\Table.gif" folder="Tables"> <button id="DW_Table" image="Common\Table.gif" enabled="! _VIEW_LAYOUT" MMString:name="insertbar/table" file="Common\Table.htm"/> <button id="DW_Div" image="Common\Div.gif" enabled="! _VIEW_LAYOUT" MMString:name="insertbar/div" file= "Common\Div.htm"/> </menubutton> <category>

Customizing Insertbar.xml: Creating Object Menus in the Favorites Category

What if you want to add a drop-down menu of objects to your Favorites category, like those found in the other categories? The Customize Favorite Objects dialog box doesn't give you that choice in its friendly interface. To add a custom object group or drop-down object menu to your Favorites, do the following:

1. First, of course, you have to have some objects in your Favorites category. If you don't, use the Customize Object Favorites dialog box to add them. Examine your Favorites Insert bar category, and determine which objects you'd like to group in a drop-down menu (maybe table-creating objects, or form elements, or any other grouping that makes sense to you). Make sure these objects appear together in the Insert bar so that they'll be easier to find and modify in the Insertbar.xml file.

2. Open Insertbar.xml in your favorite text editor. Remember, because you have customized the content of your Insert bar, you need to find the user-specific copy of this file in your user-specific Configuration/Objects folder.

3. Look in the code for a menubutton tag pair (it doesn't matter which one). Select the opening tag and choose Edit > Copy. You should end up copying something like this:

   <menubutton id="DW_Images" name="Images" image= "Common\Image.png">

4. Scroll almost to the bottom of the code, where you find the code for the Favorites category (it's the last category). Look for this tag, which marks the beginning of the category:

   <category id="DW_Insertbar_Favorites" name="Favorites" folder="Favorites">

5. Examine the button tags in this category, looking for the tags representing the objects you want to group. When you find them, insert a blank line immediately preceding them and another immediately following them so that they're isolated and easy to spot. Place the insertion point in the blank line preceding your buttons, and select Edit > Paste to paste the menubutton tag you copied in step 3. Place the insertion point in the blank line following your buttons, and type a closing menubutton tag:

   </menubutton>

6. Now you need to configure the menubutton tag.

   The id attribute is used by Dreamweaver, and it must be unique.

   Select the existing value and replace it with something unique to yourself, such as Fred_TableObjects . If you put your own name in there, you can use your text editor's Find command to find this group easily the next time you want to edit it.

   The name appears in the ToolTip that appears when you hover the mouse over the object menu. Change it to something that describes your group, such as Table Stuff or Form Elements.

   The image represents the object menu in the Insert bar, along with the tiny triangle indicating that it's a menu. Choose one of the image attributes specified in your button tags, and copy it here.

That's it! Save and close the file. The next time you launch Dreamweaver, check out your custom object menu in the Favorites Insert bar (see Figure 28.6).

Automating Tasks with Custom Commands

If you're one of those ultra -efficient workers who likes saving steps whenever possible, you've probably already used macros in other programs. Macros let you record all the steps involved in performing a certain task and save them to be played back later, usually triggered by a keyboard shortcut or menu command. In Dreamweaver, instead of macros, you create and deploy custom commands . Custom commands include temporary recorded commands, permanent commands saved using the History panel, and more-complex commands that must be programmed (written as scripts). The following sections look at the first two kinds of custom commands; the more-complex scripted commands are discussed in the section "Creating Command Extensions" in Chapter 29.

Recording Commands

A recorded command is a series of steps that you tell Dreamweaver to record and then tell it to play back as many times as you need those steps performed.

To record a command, follow these steps:

1. Plan out the steps you'll record, and, if necessary, set up the conditions for the recording. (For instance, if you want to record formatting a table in a certain way, you need to open a document and create a table before you can start recording the formatting steps.)

2. Choose Commands > Start Recording.

3. Perform whatever steps you want to record. To format a table, for instance, you use the Property Inspector to apply background color , cell padding or spacing, border width and color, and any other table properties. Dreamweaver can't record steps such as changing the selection or changing the active document; if you perform any of those steps while recording, they're ignored. But you can choose from the Property Inspector, type, and choose menu commands as part of your recorded steps.

4. When you're done recording, choose Commands > Stop Recording.

The command you've recorded stays in memory, ready to be played back, until you record over it or until you quit Dreamweaver.

To play back a recorded command, follow these steps:

1. Set up whatever conditions need to be in place before the command can be executed. (To replay a recorded command that formats a table, for instance, you must first select a table.)

2. Choose Commands > Play Recorded Command. The individual steps you recorded are executed.

3. Repeat this procedure as many times as you want, to execute the command as many times as needed.

As you can see, recorded commands are pretty wonderful. But they do have their limitations. They're meant to be quick, temporary aids in performing certain repetitive tasks. They can't do anything more complex or long- term than that. For example:

• Dreamweaver can store only one recorded command at a time in memory. As soon as you record a new command, whatever command was previously being remembered is overwritten.

• Recorded commands don't include dialog boxes and therefore can't be customized according to user input. Each command always performs exactly the same set of steps, with exactly the same parameters.

• Not all actions can be recorded. If you try to record a set of steps that includes changing a selection, for instance, that step won't be recorded. When the command is played back, this might lead to undesired results.

• There is no error checking. For instance, if you don't make the appropriate selection before replaying a recorded command, the command simply won't work. You won't get a nice, friendly alert message telling you what went wrong.

Saving Commands with the History Panel

If you like the idea of recording and replaying your actions, but you want more control and flexibility, the History panel offers two alternatives to recorded commands. Its Replay Steps and Save As Commands features let you save and reproduce sets of consecutive or nonconsecutive steps temporarily or permanently. Repeated steps are intended for use when you want to perform a set of actions and then immediately repeat those actions one or more times. Saved commands are for when you want to save your set of actions as a permanent item in the Dreamweaver interface, ready for replaying at any time in the future.

The procedure for repeating steps and saving steps as commands is basically the same. Just do the following:

1. Plan out the steps you want to save. If necessary, set up the conditions for them (create a table to format, for instance).

2. Open the History panel (select Window > History) so that you'll be ready to work with it. To make sure you're starting with a clean History panel and can capture as many steps as possible, choose Options > Clear History.

3. Perform whatever set of actions you want to repeat. Each action shows up as a step in the History panel, as shown in Figure 28.7). As with recorded commands, repeated or saved History steps cannot include certain kinds of actions (such as changing the selection or moving the mouse). If your actions include any of these, they appear in the History panel as a horizontal red line or black mouse-movement indicator line.

   Figure 28.7. Repeating steps from the History panel.

4. When you're finished performing your procedure and are ready to repeat it, select all the steps in the History panel that you want to repeat:

   • To select contiguous steps, Shift-click each.

   • To select noncontiguous steps (for instance, to skip over a mouse movement), Ctrl-click (Windows) or Cmd-click (Mac) each.

5. If you want to repeat these steps without saving them permanently, from the History panel choose Options > Replay Steps. Each selected step is performed again (unless it's a mouse movement or other unrepeatable action), and the History panel shows a new step called Replay Steps. Choose Replay Steps as many times as you need to. Each replay generates a new Replay Steps step in the panel.

6. If you want to save these steps as a permanent part of the Dreamweaver interface, from the History panel choose Options > Save As Command. (If your steps include any that can't be captured, Dreamweaver warns you of this and gives you the opportunity to cancel the operation.) You're prompted to give your new command a name. After you've done this and clicked OK to close the dialog box, your new saved command appears in the bottom portion of the Commands menu.

After you've saved a set of History steps as a command, you can replay those steps any time by choosing your command from the Commands menu. Unlike the recorded commands described earlier, your saved command stays saved until you get rid of it. So if you like saving commands, you'll likely end up with a variety of them. To rename or delete a saved command, choose Commands > Edit Command List (see Figure 28.8).

How Saved Commands Are Configured

Just like other pieces of the Dreamweaver interface, saved commands live in the Configuration folder. Specifically, they live in your user Configuration folder, in the Configuration/Commands folder. Each saved command exists as an HTML file with the command's name and the .htm filename extension, as shown in Figure 28.9. If you want to climb under the hood and mess with those commands, you can open the files in any text editor and tinker with them. (You'll learn more about this in the next chapter.) Of course, doing so could destabilize Dreamweaver if you don't do it right. If that happens, open the Configuration/Commands folder and delete the saved command file that's causing the trouble.

Exercise 28.1. Saving History Steps As a Custom Command

Are you already dreaming of all the commands you'd like to create? Before you get too excited, remember that mouse actions (such as selecting and drawing) can't be captured, so your commands can't include them. This limits the kinds of procedures you can turn into saved commands. In this exercise, you'll go through some procedures for working with tables, saving a few as custom commands.

1. Start by creating a new HTML document.

2. Open the History panel (select Window > History). Because you've just created this document, the panel should be empty, but if it's not, choose Options > Clear History.

3. Using the Table object in the Insert bar, create a new table. Give it three rows and three columns and whatever other properties you like. (The table is just for practicing, so what it looks like doesn't matter.)

   Look at the History panel. You should have one step called Insert Table. This is a recordable step, so there's no red x in the step icon.

4. Without deselecting the table, use the Property Inspector to change any of its properties. Then look at the History panel. For each property changed, you should have another step, without any red x's in the step icons and without any black lines between the steps (see Figure 28.10). Everything you've done so far could be recorded as one big command (macro) if you like.

   Figure 28.10. The History steps for creating a table and changing some of its properties.

5. Put the insertion point inside one of the table's cells , and change a property or two. The History panel has a black horizontal line between the changes you made to the table and those you made to the cell. That's because you changed the selection (you clicked inside a cell), and Dreamweaver can't record that. So you can't make one big command out of your steps so far. But you can make a command out of any one or more steps not separated by a black line.

6. Now for something potentially useful that you will save into a command. With the insertion point still inside a cell, choose Modify > Table > Split Cell (or click the Split Cells button in the Property Inspector). When the dialog box appears, choose to split the cell into two columns. Click OK to close the dialog box and split the cell.

7. Look in the History panel, and you'll see that this is a recordable step. Select that step and choose Options > Save as Command. When prompted, name your command Split 2 Columns and click OK. Take a peek at the Commands menu, and you'll see your new command, as shown in Figure 28.11.

   Figure 28.11. Saving a table cell-splitting action as a command.

8. Now create another cell-splitting command. Put the insertion point in another table cell, and split the cell into three columns. Then select that step in the History panel and save it as Split 3 Columns .

9. How about one or two more cell-splitting commands? Split a few more cells to create the Split 2 Rows and Split 3 Rows commands.

10. Try out your saved commands. Delete the table you created, and insert another table. Experiment with putting the insertion point in a cell and choosing one of your commands. (After doing this, check out the History panel. You'll see that executing your command counts as a History step.) Sure, it's just a macro built from one History step, but by saving it as a command, you've just saved yourself the trouble of having to use the dialog box to determine what gets split and how every time. That's a tiny little time-saver.

11. If you want to see how your custom commands are configured, go to Windows Explorer or the Macintosh Finder and open your user Configuration folder. Within it, open the Commands folder. (See the discussion earlier in this chapter on how to find this folder.) You'll see files such as Split 2 Columns.htm and Split 3 Columns.htm . Those are your commands!

Customizing Dialog Boxes Using HTML

Most objects, commands, and behaviors that provide dialog boxes store the layout information for those dialog boxes in HTML files within the Configuration folder. Input fields, check boxes, pop-up menus, and so on are created from standard HTML form elements and are formatted using tables or layers . Although you can't add or remove input fields without compromising functionality, you can change the dialog box layout by changing the HTML layout. Strange as it might seem, you can use Dreamweaver to do this editingalthough you have to quit Dreamweaver and relaunch before your changes take effect.

To customize a particular dialog box, you first need to locate its configuration file. Table 28.1 lists locations for the elements you'll be most likely to customize. Within these locations, look for an HTML file named after the object, command, or other extension you want to customize.

Table 28.1. Locations of Common Extension Types Within the Configuration Folder ^[*]

^[*] All these elements can be found in the main Configuration folder. Each piece is added to the user-specific Configuration folder only as needed (for example, as user-specific customizations occur).

^[**] Most panels, and many Inspectors, are hard-coded into the main Dreamweaver application file, so you can't customize them.

For instance, say you wanted to customize the Call JavaScript dialog box. Because Call JavaScript is a behavior, you look in Configuration/Behaviors/Actions . In that folder, you find Call JavaScript.js and Call JavaScript.htm . The JS file contains the functionality for the behavior; the HTML file contains the dialog box layout. If you open the HTML file in Dreamweaver, you see the dialog box layout as a form and table, as shown in Figure 28.12. Any changes you make to the layout here are reflected in the dialog box. Just don't rename the form or its elements, or add or subtract any form elements, or you might break the behavior.

Customizing Dreamweaver Menus with menus.xml

Every command that appears in the Dreamweaver menu systemincluding application menus, context menus, and othersis determined by the menu configuration file, menus.xml . This file governs what menus appear in the menu bars, what commands appear on each menu, and what action Dreamweaver should take when that command is chosen. (The action is usually to open and execute a configuration file, such as Objects/Common/Table.htm .)

Menus.xml is located in the Configuration/Menus folder. Like Insertbar.xml , it is a well- formed XML document. It contains a <menubar> tag pair as its root element, with various other elements (tags and tag pairs) nested within it. The main element structure is as follows :

<menubar> <menu> <menuitem/> <menuitem/> </menu> etc.; more menus </menubar>

Each tag has a set of attributes that govern how each menu and command appears and what happens when it is launched. Figure 28.13 shows a section of menus.xml and how it translates into a menu in Dreamweaver.

Although you can't add an entirely new menu item and give it functionality without scripting, you can still customize your menu system by tweaking the XML. You can move menu items, add separators between them, and even copy them so that they appear in multiple placesonce in a regular menu and once in a context menu, for instance. One caveat related to duplicating menu items is that each item in menus.xml has an id attribute that must be unique. If you duplicate an item, you must change the duplicate's id so that it differs from the original item.

Exercise 28.2. Adding a Command to a Context Menu

In this exercise, you'll climb around inside menus.xml and copy the Check Spelling command from its location at the bottom of the application menu bar's Text menu to another location at the bottom of the context menu for text items.

Before you begin this or any other exercise in this chapter, make sure that you have a backup copy of the Configuration folder so that you can restore the default Dreamweaver configuration at any time.

1. Quit Dreamweaver (if it's running), and open menus.xml in your text editor. Note that this is a big file, and it's easy to get lost! To help you out, if your text editor supports line numbers and word wrap control, turn on line numbering and turn off word wrap (called soft wrap in some programs). This makes navigating and seeing the structure of the XML tags easier.

2. The hardest part of this whole procedure is finding your way around menus.xml . You're looking for the Check Spelling menu item, which is at the bottom of the Text menu. This menu item has the unique ID DWMenu_Text_CheckSpelling , so the easiest thing to do is to search for this. (If you're doing this for any other command, you probably won't know the ID, so you'll probably have to do more-creative searching, such as looking for spelling .)

3. Select the entire Check Spelling menu item, and choose Edit > Copy. Your selected code should look like this:

   <menuitem name="Check Spelling" key="Shift+F7" enabled= "dw.getDocumentDOM() != null && dw.getDocumentDOM().getParseMode() == 'html' && (dw.getFocus() == 'textView' dw.getFocus(true) == 'html' dw.getFocus() == 'document' && dw.getDocumentDOM().getFocus() == 'body')" command=" if (dw.getDocumentDOM().getView() == 'code') {dw.getDocumentDOM().setView('split')}dw.setFocus ('document'); dw.getDocumentDOM().checkSpelling()" id= "DWMenu_Text_CheckSpelling" />

   What's all this code for? The Check Spelling command doesn't call on an extension file; instead, all the code for the spell check is contained in the menu entry itself.

4. Now you have to find the Text context menu. Search for DWTextContext , which is the unique ID for this menu. After you've found that, you can search for </menubar> because the next occurrence of that tag will be the end of this menubar. The last menuitem entry should be Page Properties.

5. You want to create a new line after the Page Properties entry, and before the </menu> entry. To create a separator line so that your new entry sits by itself at the bottom of the menu, type the following into the new line:

   <separator/>

   Create another new line, and select Edit > Paste to insert the Check Spelling menu item.

6. You need to find the new menu item's id attribute and change it slightly so that it's unique. Find the end of that very long <menuitem/> tag, and change the id to the following (the new code is in bold):

   DWMenu_Text_CheckSpelling_ Context

   Just to make sure your new id is unique, search menus.xml for this name. You should find just one occurrence of itthe one you just added.

7. Launch Dreamweaver and try out your new menu! Type some text into a document, select the text, and right-click (Windows) or Ctrl-click (Mac). The context menu that appears looks like the one shown in Figure 28.14.

   Figure 28.14. The Text context menu with a separator and Check Spelling command added.