Note:

The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

About coding preferences

You can set coding preferences such as code formatting and coloring, among others, to meet your specific needs.

Note:

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

Set the code appearance

You can set word wrapping, display line numbers for the code, highlight invalid code, set syntax coloring for code elements, set indenting, and show hidden characters from the View > Code View Options menu.

  1. View a document in Code view or the Code inspector.
  2. Do one of the following:
    • Select View > Code View Options

    • Click the View Options button  in the toolbar at the top of Code view or the Code inspector.

  3. Select or deselect any of the following options:

    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.

    Hidden Characters

    Displays special characters in place of white space. For example, a dot replaces each space, a double chevron replaces each tab, and a paragraph marker replaces each line break.

    Note:

    Soft line breaks that Dreamweaver uses for word wrapping are not displayed with a paragraph marker.

    Highlight Invalid Code

    Causes Dreamweaver to highlight in yellow all HTML code that isn’t valid. When you select an invalid tag, the Property inspector displays information on how to correct the error.

    Syntax Coloring

    Enables or disables code coloring. For information on changing the coloring scheme, see Set the code colors.

    Auto Indent

    Makes your code indent automatically when you press Enter while writing code. The new line of code indents to the same level as the previous line. For information on changing the indent spacing, see the Tab Size option in Change the code format.

Change the code format

You can change the look of your code by specifying formatting preferences such as indentation, line length, and the case of tag and attribute names.

All the Code Format options, except the Override Case Of option, are automatically applied only to new documents or additions to documents that you subsequently create.

To reformat existing HTML documents, open the document, and select Commands > Apply Source Formatting.

  1. Select Edit > Preferences.
  2. Select Code Format from the Category list on the left.
  3. Set any of the following options:

    Indent

    Indicates whether code generated by Dreamweaver should be indented (according to the indentation rules specified in these preferences) or not.

    Note:

    Most of the indentation options in this dialog box apply only to code generated by Dreamweaver, not to code that you type. To make each new line of code that you type indent to the same level as the previous line, select View > Code View Options Auto-Indent option. For more information, see Set the code appearance.

    With

    (Text box and pop‑up menu) Specifies how many spaces or tabs Dreamweaver should use to indent code that it generates. For example, if you type 3 in the box and select Tabs in the pop‑up menu, then code generated by Dreamweaver is indented using three tab characters for every level of indentation.

    Tab Size

    Determines how many characters wide each tab character appears in Code view. For example, if Tab Size is set to 4, then each tab is displayed in Code view as a four-character-wide blank space. If, additionally, Indent With is set to 3 Tabs, then code generated by Dreamweaver is indented using three tab characters for every level of indentation, which appears in Code view as a twelve-character-wide blank space.

    Note:

    Dreamweaver indents using either spaces or tabs; it doesn’t convert a run of spaces to a tab when inserting code.

    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. 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 use CR (Macintosh) if SimpleText is your external editor.

    Note:

    For servers that you connect to using FTP, this option applies only to binary transfer mode; the ASCII transfer mode in Dreamweaver ignores this option. 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.

    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 Design view, but they are not applied to the tags and attributes that you enter directly in Code view, or to the tags and attributes already in a document when you open it (unless you also select one or both of the Override Case Of options).

    Note:

    These preferences apply only to HTML pages. Dreamweaver ignores them for XHTML pages because uppercase tags and attributes are invalid XHTML.

    Override Case Of: Tags and Attributes

    Specifies 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 and click OK to dismiss the dialog box, all tags or attributes in the current document 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 in the Quick Tag Editor are also converted to the specified case, as are tags or attributes you insert using the Insert panel. For example, if you want tag names always to be converted to lowercase, specify lowercase in the Default Tag Case option, 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.

    Note:

    HTML allows either uppercase or lowercase tag and attribute names, but XHTML requires lowercase for tag and attribute names. 

    TD Tag: Do Not Include A Break Inside The TD Tag

    Addresses a rendering problem that occurs in some older browsers when white space or line breaks exist immediately after a <td> tag, or immediately before a </td> tag. When you select this option, Dreamweaver does not write line breaks after a <td> or before a </td> tag, even if the formatting in the Tag Library indicates that the line break should be there.

    Advanced Formatting

    Lets you set formatting options for Cascading Style Sheets(CSS) code and for individual tags and attributes in the Tag Library Editor.

    White Space Character

    (Japanese version only) Lets you select either &nbsp; or Zenkaku space for HTML code. The white space selected in this option will be used for empty tags when creating a table and when the “Allow Multiple Consecutive Spaces” option is enabled in Japanese Encoding pages.

Set the code rewriting preferences

Use the code rewriting preferences to specify how and whether Dreamweaver modifies your code while opening documents, when copying and pasting form elements, and when entering attribute values and URLs using tools such as the Property inspector. These preferences have no effect when you edit HTML or scripts in Code view.

If you disable the rewriting options, invalid-markup items are displayed in the Document window for HTML that it would have rewritten.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Code Rewriting from the Category list on the left.
  3. Set any of the following options:

    Fix Invalidly Nested and Unclosed Tags

    Rewrites overlapping tags. For example, <b><i>text</b></i> is rewritten as <b><i>text</i></b>. This option also inserts closing quotation marks and closing brackets if they are missing.

    Rename Form Items When Pasting

    Ensures you don’t have duplicate names for form objects. This option is enabled by default.

    Note:

    Unlike the other options in this preferences dialog box, this option does not apply when you open a document, only when you copy and paste a form element.

    Remove Extra Closing Tags

    Deletes closing tags that have no corresponding opening tag.

    Warn When Fixing Or Removing Tags

    Displays a summary of technically invalid HTML that Dreamweaver attempted to correct. The summary notes the location of the problem (using line and column numbers) so that you can find the correction and ensure that it’s rendering as intended.

    Never Rewrite Code: In Files With Extensions

    Allows you to prevent Dreamweaver from rewriting code in files with the specified filename extensions. This option is particularly useful for files that contain third-party tags.

    Encode <, >, &, And " In Attribute Values Using &

    Ensures that attribute values that you enter or edit using Dreamweaver tools such as the Property inspector contain only legal characters. This option is enabled by default.

    Note:

    This option and the following options do not apply to URLs that you type in Code view. Also, they do not cause existing code already in a file to change.

    Do Not Encode Special Characters

    Prevents Dreamweaver from changing URLs to use only legal characters. This option is enabled by default.

    Encode Special Characters In URL Using &#

    Ensures that when you enter or edit URLs using Dreamweaver tools such as the Property inspector, those URLs contain only legal characters.

    Encode Special Characters In URL Using %

    Operates the same way as the preceding option, but uses a different method of encoding special characters. This encoding method (using the percent sign) may be more compatible with older browsers, but doesn’t work as well with characters from some languages.

Set the color theme for Code View

Use the code coloring preferences to specify a theme for Code View. You can customize the theme by choosing different color shemes for backgrounds, foregrounds, and hidden characters.

For each listed document type, you can customize the colors for different categories of tags and code elements, such as form-related tags or JavaScript identifiers. For example, with the Raven theme applied to all document types, you can choose to have a blue color for form-related tags in only HTML documents.

All custom settings in a theme are saved when you click Apply and the customized theme is available for use across Dreamweaver sessions.

Note: To set color preferences for a specific tag, edit the tag definition in the Tag Library editor.

Customize themes

The default theme is Classic. To change the theme or to customize a theme, peform the following steps:

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Code Coloring from the Category list on the left.
  3. Select a theme from the Themes list.

    Out-of-the-box themes for Code View
    Out-of-the-box themes for Code View

  4. If you want to customize the theme, perform the following steps:

    1. To change the background colors, use the following options:

      Default background

      sets the default background color for Code view and the Code inspector.

      Hidden characters

      sets the color for hidden characters.

      Live Code background

      sets the background color for Live Code view. The default color is yellow.

      Live Code changes

      sets the highlighting color of code that changes in Live Code view. The default color is pink.

      Read only background

      sets the background color for read only text.

      Selection background

      sets the background color for the selected code.

      Selection foreground

      sets the foreground color for the selected code.

    2. To change the coloring scheme of specific tag categories or code elements, select a document type from the Document type list. Then, click Edit Theme Colors.

      Note: Any edits you make to code coloring scheme of a selected document type will affect all documents of this type.

      In the Edit Coloring Scheme dialog box, select a code element from the Styles For list, and set its text color, background color, and (optional) style (bold, italic, or underline). The sample code in the Preview pane changes to match the new colors and styles.
      Editing color scheme for HTML document type
      Editing color scheme for HTML document type

    3. To revert to the factory default settings of a theme, click Restore Defaults.

  5. Click Apply to save the changes.

Note:

You can keep the customized code themes synchronized between your Dreamweaver instances using the Sync Settings option in Preferences. For more information, see Synchronizing Dreamweaver settings with Creative Cloud.

Add themes to the default list

If you want a customized theme to appear in the default theme list, perform the following steps:

  1. Copy and paste Themes.xml to your desktop from the following location:

    • On Win: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes
    • On Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/
  2. Open Themes.xml in Notepad and add the following line before the closing tag <theme>:

    <theme name="MyTheme"></theme>

  3. Replace the Themes.xml file in the following location with the file you edited:

    • On Win: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes
    • On Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/
  4. To specify the color scheme for your theme, reuse the XML files for the existing themes in the following locations:

    • On Win: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes 
    • On Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/

    For example, copy Raven.xml and defaultColorsRaven.xml, and then rename the copied files to MyTheme.xml and defaultColorsMyTheme.xml.

  5. Relaunch Dreamweaver and check the default themes list (Preferences > Code Coloring) to see if your theme is listed.

Use an external editor

You can specify an external editor to use for editing files with specific filename extensions. For example, you can start a text editor such as BBEdit, Notepad, or TextEdit from Dreamweaver to edit JavaScript (JS) files.

You can assign different external editors for different filename extensions.

Set an external editor for a file type

  1. Select Edit > Preferences.
  2. Select File Types/Editors from the Category list on the left, set the options, and click OK.

    Open In Code View

    Specifies the filename extensions that automatically open in Code view in Dreamweaver.

    External Code Editor

    Specifies the text editor to use.

    Reload Modified Files

    Specifies the behavior when Dreamweaver detects that changes were made externally to a document that is open in Dreamweaver.

    Save On Launch

    Specifies whether Dreamweaver should always save the current document before starting the editor, never save the document, or prompt you to ask whether to save or not each time you start the external editor.

    Fireworks

    Specifies editors for various media file types.

Start an external code editor

  • Select Edit > Edit with External Editor.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy