Learn how to work in code view and get the best out of Dreamweaver's coding features.

There are multiple ways you can work with code in Dreamweaver. 

You can open a new code file using the New Document dialog and just start typing in your code.

Creating a new code file in Dreamweaver
Creating a new code file in Dreamweaver

As you type, code hints appear to help you select code and avoid typos. Get help with CSS when you need it using Dreamweaver's helpful Quick Docs.

You can also insert code using the Insert panel or use coding shortcuts such as Emmet abbreviations

If you find yourself copying and pasting the same piece of code multiple times, then try these time-saving features:

  • The Snippets panel is invaluable for quickly creating and inserting pre-formatted code snippets into your code.
  • Multiple cursors allow you to create and edit multiple lines of code all at once.

Dreamweaver also provides a strong set of editing tools that make navigating through and making changes to your code a smooth process.

  • Use Dreamweaver's find and replace feature to search for tags, attributes, or text in code.
  • Use the Code Navigator to navigate to related code both within and outside the current file. Even better, use the Quick Edit feature to edit code in related files without even opening up the file in a new tab.
  • Right-click the code to bring up a simple, relevant context menu that allows you to edit the code directly.
  • Use the Wrap Tag to wrap text in tags.

Read on to get more information on all these code features.

Insert code using the Insert panel

  1. Position the insertion point in the code.
  2. Select an appropriate category in the Insert panel.
  3. Click a button in the Insert panel or select an item from a pop‑up menu in the Insert panel.

    When you click an icon, the code appears in your page immediately, or a dialog box appears requesting for more information to complete the code.

    The number and type of buttons available in the Insert panel varies depending on the current document type. It also depends on whether you’re using Code view or Design view.

Use the Emmet toolkit with Dreamweaver

Emmet is a plug-in that allows high-speed coding and generation of HTML and CSS code.

Use Emmet abbreviations in Code View or Code Inspector in Dreamweaver and press the Tab key to expand these abbreviations into HTML markups or CSS.

HTML abbreviations expand in HTML and PHP pages. CSS abbreviations expand in CSS, LESS, SASS, SCSS pages, or within the style tag in an HTML page.

Here are a few examples that demonstrate how you can use Emmet abbreviations in Code View. For detailed information and reference, see the Emmet documentation.

Note:

Dreamweaver currently supports Emmet 1.2.2 abbreviations.

Example 1: Inserting HTML code using Emmet

To quickly add HTML code for an unordered list with three elements, open the HTML file and type the following Emmet abbreviation in Code view within <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Now, ensure that the cursor is placed right after the Emmet abbreviation and press Tab to expand the abbreviation. Alternatively, select the entire abbreviation and then press Enter.

The abbreviation expands to the following code:

 

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Example 2: Inserting CSS code using Emmet

To insert CSS code for creating border radius with vendor prefixes, open your CSS file and type the following Emmet abbreviation inside a class:

-bdrs

When you press Tab, the abbreviation expands to the following code:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Work with code comments

A comment is descriptive text that you insert in HTML code to explain the code or provide other information. The text of the comment appears only in Code view and is not displayed in a browser.

Add comments to your code

To add comments, first type in the comment text. You can then place your cursor at the insertion point and click the Insert icon from the toolbar to open the Apply Comment submenu.

You can also select the text and make it a comment. The selected text is wrapped in a comment block.

Adding comments
Adding comments

You can add comments using various syntax options. Select the appropriate syntax and Dreamweaver inserts the tags for you. All you need to do is enter your comment text.

You can also use the Ctrl+/ (on Windows), or Cmd+/ (on Mac) keyboard shortcuts to add comments.

If you you use the keyboard shortcut without selecting any text, the comment is applied for the current line. If you select text and use the keyboard shortcut, the comment is applied for the selected text.

Remove comments from your code

To remove code comments, select the code, and click the Remove comment icon in the toolbar. You can also use the Ctrl-/ (on Windows), or Cmd-/ (on Mac) keyboard shortcuts to remove comments.

Toggle code comments

To toggle between showing and hiding comments in code view, simply press Ctrl+/ on Windows, or Cmd+/ on Mac for the selected comment or line.

Use multiple cursors to add or change text in multiple places

Add cursors in multiple places, or select multiple sections of code and edit them simultaneously using Dreamweaver's multiple cursor feature.

Note:

Copy and paste, and find and replace operations do not work with multiple cursors or multiple selections.

Add multiple cursors or multiple selections

You can add multiple cursors in different ways depending on your requirements.

If you want to add the same text in multiple places without replacing any existing text, add multiple cursors.

If you want to replace existing text, you can do multiple selections. You can select continuous lines of text, or discontinuous lines of text, or both, and add cursors to them.

To add multiple cursors or multiple selections on the same column across continuous lines:

Hold down the Alt key, then click drag vertically. When you drag vertically, cursors are added to each line you drag across.

Text added at cursors over multiple lines
Text added at cursors over multiple lines

To select continuous lines of text, press the Alt key and drag diagonally. When you drag diagonally, Dreamweaver selects a rectangular block of text within that selection. 

Select and update multiple lines of text simultaneously
Select and update multiple lines of text simultaneously

Note:

To quickly add cursors or include multiple lines in a selection, use the Shift-Alt-Up or Down keyboard shortcut. 

Once you have added the cursors (or selected text) in multiple places, go ahead and start typing. 

If you have multiple cursors, then new text is added

If you have selected content in multiple lines of text, then the selected text is replaced with the new text you enter.

To add multiple cursors on different columns across lines: 

To add cursors to discontinuous lines of text, simply press the Ctrl key, and click the different lines where you want to place the cursor.

Adding cursors to multiple discontinuous lines of text
Adding cursors to multiple discontinuous lines of text

To select discontinuous lines of text, select some text, then press the Ctrl key (Windows), or Cmd key (Mac), and continue to make further selections. 

To add cursors at the beginning/end of each line:

Select multiple lines of text and press the Left or Right arrow keys.

To add cursors in preceding or following lines for a selection:

Press Shift+Alt+Up/Down keys and then press the right arrow key.

To select continuous and discontinuous lines of text:

You can combine these techniques to select both continuous and separate lines of text within a single selection.

First select the discontinuous lines of text, then press Ctrl-Alt (on Windows) or Cmd-Alt (on Mac) and drag to add a set of lines to the existing multiple selection.

Select both continuous and discontinuous lines of text
Select both continuous and discontinuous lines of text

Get help with CSS within Dreamweaver using Quick Docs

While working with CSS, LESS, or SCSS files in Dreamweaver, you can quickly get more information about CSS properties or values.

Place your cursor within a property or value and press Ctrl + K, Dreamweaver opens documentation from the Web Platform Docs project.

You can simultaneously open multiple inline editors and doc viewers.

CSS documentation within Dreamweaver
CSS documentation within Dreamweaver

To close a single inline editor or doc viewer, click the "X" in the upper-left or press Escape while Quick Docs is in focus.

To close all inline editors and docs, place your cursor back in the main enclosing code editor and press Escape.

Analyze code

Dreamweaver supports linting (analyzing code for potential errors) for HTML, CSS, and JavaScript.

The Output panel lists the errors and warnings detected through linting. For more information, see Lint code.

In addition, Dreamweaver also shows a quick error preview in the line number column of the erroneous line. The line number is displayed in red to indicate that it contains errors, and when you hover over it, a brief description of the error is displayed.

Note: Only the first error in the line is displayed. If the line contains only a warning, the description of the warning is displayed. If the line contains a warning and an error, only the error description is displayed.

Wrap text in code using the Wrap Tag

Use the Wrap Tag in Code view to wrap specific lines of text with a tag. In Design or Live view, you can use this feature to wrap objects with a tag.

  1. Select text in Code view or an object in Design view, and press Ctrl+T on your keyboard.

    A pop-up appears allowing you to select from a number of HTML tags.

  2. Select a tag from the menu.

    If you are working in code view, then the selected text gets wrapped with the tag. If you are working in Design or Live view, the selected object gets wrapped with the tag.

Edit code with the Coding context menu

Use Dreamweaver's context menu to make quick edits to your code. 

To access the context menu, right-click (on Windows) or Command-click (on Mac). The following options are available for you to use:

Quick Edit

Click this option to enter Quick Edit mode. In this mode, Dreamweaver provides context-specific code and tools inline allowing you to quickly get to the code section you need. For more information, see Quick edit.

Cut, copy, paste

Click these options to quickly cut, copy, and paste text without having to access the Edit menu.

Find and replace, Find next, Find previous

Click these options to find, and replace text quickly without having to access the Find menu.

Create new snippet

Use this option to create code snippets that you can save for later reuse. Select the code, and click Create new snippet to make the selected code a snippet. For more information, see Work with code snippets.

Open related file

Right click over a link/script tag and click on open related file to open the file.

Attach Style Sheet

Attach an existing CSS style sheet to your page.

Selection

The Selection submenu includes various code editing options that you can use on a selected piece of code, such as toggle line and block comments, expand and collapse selection, convert inline CSS to rules, move CSS rules, and print code.

Code Navigator

Click this option to navigate to related code sources, such as internal and external CSS rules, server-side includes, external JavaScript files, parent template files, library files, and iframe source files. For more information, see Navigate to related code.

Code Hint Tools

The Code Hint Tools submenu brings the color picker, URL browser, and Font list tools at your fingertips.

Indent code blocks

As you write and edit code in Code view or the Code inspector, you can change the indentation level of a selected block or line of code, shifting it right or left by one tab.

Indent the selected block of code

  • Press Tab, or
  • Press Ctrl+], or
  • Select Edit > Indent Code.

Unindent the selected block of code

  • Press Shift+Tab, or
  • Press Ctrl+[, or
  • Select Edit > Outdent Code.

The Code Navigator displays a list of code sources related to a particular selection on your page. Use it to navigate to related code sources, such as internal and external CSS rules, server-side includes, external JavaScript files, parent template files, library files, and iframe source files. When you click a link in the Code Navigator, Dreamweaver opens the file containing the relevant piece of code. The file appears in the related files area, if it is enabled. If you don’t have related files enabled, Dreamweaver opens the selected file as a separate document in the Document window.

If you click a CSS rule in the Code Navigator, Dreamweaver takes you directly to that rule. If the rule is internal to the file, Dreamweaver displays the rule in Split view. If the rule is in an external CSS file, Dreamweaver opens the file and displays the rule in the related files area above the main document.

You can access the Code Navigator from Design, Code, and Split views, and also from the Code inspector.

For a video overview from the Dreamweaver engineering team about working with the Code Navigator, see www.adobe.com/go/dw10codenav.

For a video tutorial on working with Live View, related files, and the Code Navigator, see www.adobe.com/go/lrvid4044_dw.

Open the Code Navigator

  • Alt+click (Windows) or Command+Option+Click (Macintosh) anywhere on the page. The Code Navigator displays links to the code affecting the area you clicked.

Click outside the Code Navigator to close it.

Note:

You can also open the Code Navigator by clicking the Code Navigator indicator . This indicator appears near the insertion point on your page when the mouse has been idle for 2 seconds.

  1. Open the Code Navigator from the area of the page that you’re interested in.

  2. Click the piece of code you want to go to.

The Code Navigator groups related code sources by file and lists the files alphabetically. For example, suppose that CSS rules in three external files affect the selection in your document. In this case, the Code Navigator lists those three files and the CSS rules relevant to the selection. For CSS related to a given selection, the Code Navigator functions like the CSS Styles panel in Current Mode.

Note:

When you hover over links to CSS rules, the Code Navigator displays tool tips of the properties in the rule. These tool tips are useful when you want to distinguish between many rules that share a name.

Disable the Code Navigator indicator

  1. Open the Code Navigator.

  2. Select Disable Indicator in the lower-right corner.

  3. Click outside the Code Navigator to close it.

To re-enable the Code Navigator indicator, Alt+Click (Windows) or Command+Option+Click (Macintosh) to open the Code Navigator and deselect the Disable Indicator option.

Go to a JavaScript or VBScript function

In Code view and the Code inspector, you can view a list of all the JavaScript or VBScript functions in your code and jump to any one of them.

  1. View the document in Code view (View > Code) or the Code inspector (Window > Code Inspector).
  2. Do one of the following:
    • In Code view, right-click (Windows) or Control‑click (Macintosh) anywhere in Code view, and select the Functions submenu from the context menu.

    Note:

    The Functions submenu does not appear in Design view.

    Any JavaScript or VBScript functions in your code appear in the submenu.

    Note:

    To see the functions listed in alphabetical order, Control‑right-click (Windows) or Option-Control-click (Macintosh) in Code view, and then select the Functions submenu.  

    • In the Code inspector, click the Code Navigation button ({ }) in the toolbar.
  3. Select a function name to jump to the function in your code.

Extract JavaScript

The JavaScript Extractor (JSE) removes all or most of the JavaScript from your Dreamweaver document, exports it to an external file, and links the external file to your document. The JSE can also remove event handlers such as onclick and onmouseover from your code and then unobtrusively attach the JavaScript associated with those handlers to your document.

Note the following limitations of the JavaScript Extractor before using it:

  • The JSE does not extract script tags in the body of the document (except in the case of Spry widgets). There is a chance that externalizing these scripts could cause unexpected results. By default, Dreamweaver lists these scripts in the Externalize JavaScript dialog box, but does not select them for extraction. (You can manually select them if you want.)

  • The JSE does not extract JavaScript from editable regions of .dwt (Dreamweaver template) files, non-editable regions of template instances, or Dreamweaver Library items.

  • After you extract JavaScript using the Externalize JavaScript and Attach Unobtrusively option, you can no longer edit Dreamweaver behaviors in the Behaviors panel. Dreamweaver cannot inspect and populate the Behaviors panel with behaviors that it has attached unobtrusively.

  • You cannot undo your changes once you close the page. You can, however, undo changes as long as you remain in the same editing session. Select Edit > Undo Externalize JavaScript to undo.

  • Some complex pages might not work as expected. Use care when extracting JavaScript from pages with document.write() in the body and global variables.

For a video overview from the Dreamweaver engineering team about JavaScript support in Dreamweaver, see www.adobe.com/go/dw10javascript.

To use the JavaScript Extractor:

  1. Open a page that contains JavaScript.

  2. Click Tools > Externalize JavaScript.

  3. In the Externalize JavaScript dialog box, edit the default selections if necessary.

    • Select Only Externalize JavaScript if you want Dreamweaver to move any JavaScript to an external file, and to reference that file in the current document. This option leaves event handlers such as onclick and onload in the document, and leaves Behaviors visible in the Behaviors panel.

    • Select Externalize JavaScript and Attach Unobtrusively if you want Dreamweaver to 1) move JavaScript to an external file and reference it in the current document, and 2) remove event handlers from the HTML and insert them at runtime using JavaScript. When you select this option, you can no longer edit Behaviors in the Behaviors panel.

    • In the Edit column, deselect any edits you do not want to make, or select edits that Dreamweaver did not select by default.

      By default, Dreamweaver lists but does not select the following edits:

      • Script blocks in the head of the document that contain document.write() or document.writeln() calls.

      • Script blocks in the head of the document that contain function signatures related to EOLAS handling code, which is known to use document.write().

      • Script blocks in the body of the document, unless the blocks contain only Spry widget or Spry data set constructors.

    • Dreamweaver automatically assigns IDs to elements that don’t already have IDs. If you don’t like these IDs, you can change them by editing the ID text boxes.

  4. Click OK.

    The summary dialog provides a summary of extractions. Review the extractions and click OK.

  5. Save the page.

Dreamweaver creates a SpryDOMUtils.js file, and another file that contains the extracted JavaScript. Dreamweaver saves the SpryDOMUtils.js file in a SpryAssets folder in your site, and saves the other file at the same level as the page from which you extracted the JavaScript. Don’t forget to upload both of these dependent files to your web server when you upload the original page.

Quick Edit

Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit mode in Dreamweaver puts context-specific code and tools inline allowing you to quickly get to the code section you need.

You can enter Quick Edit mode by:

  • Right-clicking a code snippet and select Quick Edit from the context menu that appears
  • Press Ctrl + E (on Windows) or Cmd+E (on Mac)

Using Quick Edit mode with HTML files

In an HTML file, place your cursor inside a class or id attribute (name or value) or in the tag name. Quick Edit shows you all the CSS, SCSS, and LESS rules in your project that match. You can edit these rules directly inline, without ever leaving the context of the HTML file.

Using Quick Edit mode with HTML files
Using Quick Edit mode with HTML files

When multiple rules match, navigate among them using the list on the right side (or use Alt-Up/Down).

To create a CSS rule directly from the inline editor, click New Rule or press Ctrl-Alt-N (on Windows) or Cmd-Opt-N (on Mac).

Using Quick Edit mode with JavaScript files

In a JavaScript file, place the cursor on a function name. Quick Edit shows you the function's body (even if it is present in other files referenced by a require() statement).

Using Quick Edit mode with JavaScript files
Using Quick Edit mode with JavaScript files

Using Quick Edit mode with CSS, SCSS, or LESS files

When you bring up Quick Edit with your cursor within a color value, you can access the color picker and quickly modify the colors used in your CSS code.

Accessing the color picker in a CSS file
Accessing the color picker in a CSS file

In a CSS, LESS, or SCSS file, place the cursor on a cubic-bezier() or steps() transition timing function and Quick Edit displays a graphical transition curve editor.

Pre-defined timing functions ease, ease-in, ease-out, ease-in-out, step-start, and step-end are also valid starting points.

Manipulating a Bezier curve using Quick Edit
Manipulating a Bezier curve using Quick Edit

Find and replace text

You can use Dreamweaver's find and replace features to search for any kind of text, code, or whitespace in your site, or folder.

You can search the entire markup, or you can limit the search to just the rendered text in Design view or to just the code.

You can also use powerful pattern-matching algorithms (regular expressions) for sophisticated find-and-replace operations.

Once you find the text, you can then choose to replace it with your specified text, code, or whitespace.

For more information, see Find and replace text.

Previewing images and colors in Code view

After you insert relevant code for images and colors, you can preview them right within Code view.

  • Image preview
  • Color preview

Image preview

Hover your mouse over any image URL to see a preview of the image in Code view. You can preview images that are referenced as any of the following:

  • url();
  • data-uri()
  • Src attribute value of img tag

Dreamweaver also shows image previews of remotely hosted images.

If Dreamweaver is unable to display the preview for remote paths, it displays an "Unable to load image" message.

You can preview the following image types:

  • JPEG
  • JPG
  • PNG
  • GIF
  • SVG
Image preview in Code view
Image preview in Code view

Color preview

Hover your mouse over color values to preview colors in Code View. Supported formats are:

  • 3 and 6 digits Hexadecimal color values: #ff0000;
  • RGB: rgb(0, 0, 0);
  • RGBA: rgba(0, 255, 228,0.5);
  • HSL: hsl(120, 100%, 50%);
  • HSLA: hsla(120, 60%, 70%, 0.3);
  • Pre-defined color names, such as, Olive, Teal, red.

Color preview is available in all document types for the above color formats.

Color preview in Code view
Color preview in Code view

Note:

Right-click a value and select Quick Edit to open up the color picker and select a different color.

You can print your code to edit it offline, archive it, or distribute it.

  1. Open a page in Code view.
  2. Select File > Print Code.
  3. Specify printing options, and then click OK (Windows) or Print (Macintosh).

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