Understanding Your Coding Environment:

You can adapt the coding environment in Macromedia Dreamweaver MX so it fits the way you work. For example, you can change the way you view code, set up different keyboard shortcuts, or import and use your favorite tag library.

We will be covering the following topics:

Viewing your code...
Setting viewing preferences...
Setting coding preferences...
Customizing keyboard shortcuts...
Setting code formatting preferences...
Customizing keyboard shortcuts...

Viewing Your Code:

Note: Code view and Code inspector share the same functionality.

This section contains instructions for changing the way you view your code.

To view code in the Document window:

• Choose View > Code.

To view code in a separate window:

• Choose Window > Others > Code Inspector.

To code and visually edit a page in the Document window at the same time:

• Choose View > Code and Design.
  The code appears in the top pane and the page Document window appears in the bottom pane.

To display the page Document window on top:

• Choose View > Design View on Top.

To adjust the size of the panes in the Document window, drag the splitter bar to the desired position.

The splitter bar is located between the two panes.

Code view is updated automatically when you make changes in Design view. However, after making changes in Code view, you must manually update the document in Design view by clicking in Design view and pressing F5.

Setting Viewing Preferences:

To set options for Code view and the Code inspector:

Display at least one page in Code view or the Code inspector.

• Choose View > Code View Options.
  
  A pop-up menu appears with a check mark beside each option that is already set.

Select any of the following options from the menu:

• Word Wrap wraps the code so that you can view it without scrolling horizontally.
  This option doesn’t insert line breaks; it just makes the code easier to view.
  
• Line Numbers displays line numbers along the side of the code.
  
• Highlight Invalid HTML causes Dreamweaver to highlight in yellow any invalid HTML that browsers don’t support. When you select an invalid tag, the Property inspector displays information on how to correct the error.
  
• Syntax Coloring turns code coloring On and Off. To change the coloring scheme, see Setting code coloring preferences.
  
• Auto Indent makes your code indent automatically when you press the Enter key while writing code. To change the indent spacing or tags that automatically indent, see Setting code formatting preferences.

If you selected a checked option, the option is turned off. Otherwise, the option is set.

Setting Coding Preferences:

• Code formatting preferences determine common code formatting options, such as line length and indentation. See Setting code formatting preferences.
  
• You can also apply your new formatting preferences to existing HTML documents. See Applying new formatting preferences to existing documents.
  
• Code Hints preferences let you enable or disable Code Hints, and let you customize the hints you see.
  
• Code Hints give you inline assistance while you type in Code view.
  For example, if you type an opening tag bracket (<), a menu appears listing possible tags. Instead of typing the rest of the tag by hand, you can select one of the hints listed in the menu and press Enter to enter it automatically. See Setting Code Hints preferences.
  
• Code rewriting preferences determine what changes, if any, Dreamweaver makes to your code when you open an HTML or script document. See Setting code rewriting preferences.
  
• Code coloring preferences lets you set special formatting and syntax coloring for code elements such as tags, comments, and scripts. See Setting code coloring preferences.

To set advanced preferences, use the Tag Library Editor (see Managing tag libraries)

Setting Code Formatting Preferences:

Note: that all the preferences except “Override Case Of” affect only new documents and new additions to existing documents. That is, when you open a previously created HTML document, these formatting options are not applied to it; to reformat existing HTML documents, use the Apply Source Formatting command. For more information, see Applying new formatting preferences to existing documents.

To set code formatting preferences:

1. Select Edit > Preferences > Code Format or Dreamweaver > Preferences > Code Format (Mac OS X).
The Code Format dialog box appears.

2. Adjust any of the following settings in the dialog box:

• Use specifies whether to indent using spaces or tabs.
  
• Indent Size determines the size of indents. The size is measured in spaces if Use is set to spaces, or in tabs if Use is set to tabs.
  
• Tab Size determines the size of tabs (measured in character spaces).
  
• Automatic Wrapping adds “hard” returns once a line reaches the specified column width.
  (Dreamweaver inserts hard returns only in places where they don’t change the appearance of the document in browsers, so some lines may remain longer than the Automatic Wrapping option specifies.) By contrast, the Wrap option in Code view adds a “soft” return for lines that extend beyond the width of the window.
  
• Line Break Type specifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site. Choosing the correct type of line break characters ensures that your HTML source code appears correctly when viewed on the remote server. (For FTP, this setting applies only to binary transfer mode; Dreamweaver ASCII transfer mode ignores this setting. If you download files using ASCII mode, Dreamweaver sets line breaks based on the operating system of your computer; if you upload files using ASCII mode, the line breaks are all set to CR LF.) This setting is also useful when you are working with an external text editor that recognizes only certain kinds of line breaks. For example, use CR LF (Windows) if Notepad is your external editor, and CR (Macintosh) if SimpleText is your external editor.
  
• Default Tag Case and Default Attribute Case control the capitalization of tag and attribute names. These options are applied to tags and attributes that you insert or edit in the Document window, but they are not applied to the tags and attributes that you enter directly in Code view, or to the tags and attributes in a document when you open it (unless you also select one or both of the Override Case Of options).
  
• Override Case Of: Tags and Attributes specify whether to enforce your specified case options at all times, including when you open an existing HTML document. When you select one of these options, all tags or attributes in open documents are immediately converted to the specified case, as are all tags or attributes in each document you open from then on (until you deselect this option again). Tags or attributes you type in Code view and the Quick Tag Editor are also converted to the specified case, as are tags or attributes you insert using the Insert bar. For example, if you want tag names always to be converted to lowercase, specify lowercase in Case for Tags, and then select the Override Case Of: Tags option. Then when you open a document that contains uppercase tag names, Dreamweaver converts them all to lowercase.
  
• Centering specifies whether elements should be centered using div align="center" or center. Both are part of the HTML 4.0 Transitional specification, but center is supported by a wider range of browsers.

Customizing Keyboard Shortcuts:

You can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard shortcuts—for example, Control-Enter to add a line break, Control-G to go to a specific position in the code, or Shift+F6 to validate a file—you can add them to Dreamweaver using the Keyboard Shortcut Editor.

Using the Keyboard Shortcut Editor:

Note: Charts showing all the keyboard shortcuts in the default Dreamweaver configuration are available on the Macromedia website.

To edit keyboard shortcuts:

• Choose Edit > Keyboard Shortcuts.

The Keyboard Shortcuts dialog box appears.

Set any of the following options:

• Current Set allows you to choose a set of predetermined shortcuts included with Dreamweaver, or any custom set you’ve defined. The predetermined sets are listed at the top of the menu. For example, if you are familiar with the shortcuts found in HomeSite or BBEdit, you can use those shortcuts by choosing the corresponding predetermined set.
  
• Commands allows you to select a category of commands to edit. For example, you can edit menu commands, such as the Open command, or code editing commands, such as Balance Braces.
  The command list displays the commands associated with the category you selected from the Commands pop-up menu, along with the assigned shortcuts. The Menu Commands category displays this list as a tree view that replicates the structure of the menus. The other categories list the commands by name (such as Quit Application), in a flat list.
  
• Shortcuts displays all shortcuts assigned to the selected command.
  
• Add Item (+) adds a new shortcut to the current command. Click this button to add a new blank line to the Shortcuts text box. Enter a new key combination and click Change to add a new keyboard shortcut for this command. You can assign two different keyboard shortcuts for each command; if there are already two shortcuts assigned to a command, the Add Item button does nothing.
  
• Remove Item (-) removes the selected shortcut from the list of shortcuts.
  
• Press Key displays the key combination you enter when you’re adding or changing a shortcut.
  
• Change adds the key combination shown in the Press Key text box to the list of shortcuts, or changes the selected shortcut to the specified key combination.
  
• Duplicate duplicates the current set. Give the new set a name; the default name is the current set’s name with the word copy appended.
  
• Rename renames the current set.
  
• Save as HTML File saves the current set in an HTML table format for easy viewing and printing. You can open the HTML file in your browser and print the shortcuts for easy reference.
  
• Delete deletes a set. (You cannot delete the active set.)

To remove a shortcut from a command:

1. From the Commands pop-up menu, select a Command category.
2. The Commands list displays the commands in that category.
3. In the Commands list, select a command.
4. The shortcuts assigned to the command appear in the Shortcuts text box.

Select a shortcut:

• Click the Remove Item (-) button.

To add a shortcut to a command:

1. From the Commands pop-up menu, select a command category.
The Commands list displays the commands in that category.

2 . In the Commands list, select a command.
The shortcuts assigned to the command appear in the Shortcuts text box.

3. Prepare to add a shortcut by doing one of the following:

• If there are fewer than two shortcuts already assigned to the command, click the Add Item (+) button. A new blank line appears in the Shortcuts text box and the insertion point moves to the Press Key text box.
  
• If there are already two shortcuts assigned to the command, select one of them. (That one will be replaced by the new shortcut.) Then click in the Press Key text box.

4. Press a key combination.
The key combination appears in the Press Key text box.

Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another command), an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the shortcut.

5. Click Change. The new key combination is assigned to the command.

To edit an existing shortcut:

1. From the Commands pop-up menu, select a command category.
The Commands list displays the commands in that category.

2. In the Commands list, select a command.
The shortcuts assigned to the command appear in the Shortcuts text box.

3. Select a shortcut to change.
4. Click in the Press Key text box and enter a new key combination.
5. Click the Change button to change the shortcut.

Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another command), an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the shortcut.