Online Appendix D

Setting Code Preferences: Code Colors

Dreamweaver sets colors in the Code inspector or in Code View so that you can tell different tags apart. By default, tags are given the colors pictured in Table 1. Plain text is black, generic tags are navy blue, and comments are gray.

Code Colors preferences allow you to set the background of the HTML inspector, as well as text colors for specific tags and types of tags. You can change the colors for any tag and supply colors for tags that aren't yet specified.

 

To edit HTML Color Preferences:

  1. From the Document window menu bar, select Edit > Preferences. The Preferences dialog box will appear.

  2. In the Category box at the left of the dialog box, click on Code Colors. That panel of the dialog box will appear (Figure 1).

  3. The Background color of the Code inspector is white by default. To change this color, do one of the following:
  • Type the hex code for the color in the Background text box (Figure 2).
  • Click on the Color button, and then click on a color in the Color picker (Figure 3).
  • Click on the Color button, and then click the eyedropper cursor on a color you like anywhere on your desktop.
  • Click on the Color button, and then click on the System Color button. Use the Colors dialog box to fine-tune your color choice (See Chapter 3 for more detail).

  1. Repeat Step 3 for other elements you'd like to change, including (non-tag) Text, Comments, and Tag Default.

  2. To set the color for a specific tag, such as <img> or <table>, scroll through the Tag Specific list box until you see the tag you want, and then click on it. (Type the first letter of the tag to jump through the list.) Options for your selection will appear (Figure 4).

  3. To change the color, click on the radio button next to the Color button. Then follow Step 3 to select a color.

  4. To have any text within the tag retain the regular text color, make sure the Apply Color to Tag Contents radio button is unchecked. To have all text and code between the opening and closing tags take on the new tag color, check the Apply Color to Tag Contents radio button. In my example, all text and tags between <FRAMESET> and </FRAMESET> would appear in the color I selected.

  5. When you're all finished, you can move to the next section to edit more preferences; or you can click on OK to save your changes and close the Preferences dialog box.

 

index | next
Table 1: Default Color Preferences
Tag Color Hex Code
Plain text   #000000
Default tags   #000080
Comments   #808080
A   #008000
COLW   #008080
HSPEC   #008080
IMG   #800080
OBJECT   #800000
SCRIPT   #800000
SERVER   #800000
TABLE   #008080
TBODY   #008080
TD   #008080
TFOOT   #008080
TH   #008080
THEAD   #008080
TR   #008080
VSPEC   #008080


 
Fig. 1  The Code Colors panel of Dreamweaver's Preferences dialog box.


 
Fig. 2  A close-up of the Code Colors. Click on a button to open the color picker.


 
Fig. 3 The color picker. Click on any color to choose it, or click the eyedropper anywhere on your page or your desktop.


 
Fig. 4 A close-up of the Tag Specific list box. Here, I've selected the Frameset tag.

Tips

  • Code colors are updated as you work if you have Syntax Coloring turned on. To turn on Syntax Coloring, open the Code inspector, or switch to Code View or Split View in the Document window. Then, select Syntax Coloring from the Options menu (Figure 5). For more about how Syntax Coloring works, see Chapter 4.
  • These colors appear only in Dreamweaver; there is no code in the file that would make them appear when you open the page in a different text editor.
  • It's a good idea to open the Code inspector and make sure your color choices result in readable text, particularly if you change the Code inspector's background color.

 
Fig. 5 With Syntax Coloring turned on, the colors are applied to your code as you type. Select Syntax Coloring from the Options menu on the toolbar in either the Code inspector or Code View.