User Guide Cancel

Write and edit code

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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 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 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 selections.

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

  1. 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

Refactoring code

Code refactoring is the process of restructuring existing computer code without changing its external behavior so that the code becomes more readable, maintainable, and easier to understand and debug. It is used when you have duplicate code, long methods, or large classes in the code. Debugging code saves time because of small functions and proper replacement.

With JavaScript refactoring, you can rename functions and set the scope of a variable so that you can call it from within a block of code in which it is defined.

Note:

Refactoring code is now available only in .js files. 

Refactoring JavaScript

You can refactor code in html, php, and javascript document types. When you right-click on the code area in Dreamweaver, Refactor option appears on the drop-down menu. Refactor consists of the following options:

  • Rename
  • Extract to Variable
  • Extract to Function
  • Wrap in Try Catch
  • Wrap in Condition
  • Convert to Arrow Function
  • Create Getters/Setters
Refactor
Refactor

To understand the functionality of each refactoring option, refer to the following sections:

Rename

Rename is used to change all the occurrences of a variable name or function name in a JavaScript code. Selection of a variable by click and drag is not necessary to refactor.

Perform the following steps to rename in JavaScript:

  1. Highlight or place the text cursor in the code that requires a change.

  2. Right-click the selected text and then select Refactor > Rename. You can also use the Ctrl + Alt + R on Windows OS, or Command + option + R  on macOS keyboard shortcuts to Rename.

  3. A multi-cursor view appears on the screen, allowing you to change all the occurrences of the variable. Multicursor improvements selects the next occurence of the current selection. Retype a unique variable or function name to replace the current name.

    Before: Rename
    Before: Rename

    After: Rename
    After: Rename

Extract to variable

Use Extract to Variable to replace an expression with a variable, local variable, or constants in JavaScript by selecting an expression and right-clicking it. Then, select Refactor > Extract to Variable. You can also use Ctrl + Alt + V on Windows OS and Cmd + Alt + V on macOS.

Before: Extract to Variable
Before: Extract to Variable

After: Extract to Variable
After: Extract to Variable

Extract to function

Use Extract to Function to replace an expression in the calls of a function within a parameter. The default value of the new parameter can be initialized inside the function body or passed through function calls.

Perform the following steps to refactor using Extract to Function:

  1. Select any expression or a set of expressions in JavaScript.

    Extract to function
    Selection of an expression

  2. Right-click, and select Refactor > Extract to Function. You can also use Ctrl + Alt + M on Windows OS or Cmd + Alt + M on Mac OS.

  3. Select the destination scope to extract the function from the pop-up menu that is displayed on screen.

    Types of scope
    Types of scope

    The output varies depending on the destination scope that was selected. For example, the destination scope can be a constructor, the selected class, or a global function.

    The characteristics of Extract to function are:

    • It identifies the parameters to pass based on identifiers available in the selection or in the extracted scope.
    • It identifies the return parameters to return from the function based on identifiers whose values are changed in the selection.
    • It also creates a function with a unique name.

    The following screenshots display the output based on the respective destination scope selected. 

    Destination scope: Constructor
    Constructor

    Destination scope: Class Name
    Class

    Destination scope: Global
    Global

Wrap in try catch

Use Wrap in Try Catch to an exception in a block of code that appears as an error after compiling the program. This function wraps the block of code in a try catch block. This block of code is marked as an exception while executing the program.

Select or place cursor at the code, right-click, and select Refactor > Wrap in Try Catch. If you place the cursor at a position, then it finds the surrounding statements, else it checks whether the code consists of statements or not. If there are statements, then it wraps the code in a Try Catch block.

Before: Wrap in try catch
Before: Wrap in Try Catch

After: Wrap in try catch
After: Wrap in Try Catch

Wrap in condition

Use Wrap in Condition to an expression in a code to compile only for a specific condition.

Select an expression in the code, right-click, and select Refactor > Wrap in Condition.

Before: Wrap in condition
Before: Wrap in Condition

After: Wrap in condition
After: Wrap in Condition

Convert to arrow function

An arrow function is an expression that does not have its own function expressions such as this, arguments, super, or new.target. These function expressions are for non-method expressions, and they cannot be used as a constructor.

Place cursor in a function, right-click, and select Refactor > Convert to Arrow Function.

Before: Convert to arrow function
Before: Convert to Arrow Function

After: Convert to arrow function
After: Convert to Arrow Function

Note:
  •  If the statement selected has one parameter, then the parameter structure appears as param => {statements}.
  • If the selected statement has zero or more than one parameter such as param (param1, param2) then the parameter structure appears as param (param1, param2) => {statements}.

Create getters/setters

In JavaScript, a setter can be used to execute a function where a specified property requires a change. Setters are most often used along with getters to create a type of pseudo property. You cannot create a setter to a property that has an actual value.

Place the cursor at a member of an object expression, right-click, and select Refactor > Create Getters/Setters.

Before: Create getters/setters
Before: Create Getters/Setters

After: Create getters/setters
After: Create Getters/Setters

Troubleshooting tips

The following table provides troubleshooting tips for corresponding error messages that are displayed on screen, due to incorrect selection of code:

Function name

Error message

Troubleshooting tip

Rename

No expression at the given position

Place the cursor on or before a variable or function name.

Extract to Variable

Selection does not form an expression

Select an expression in the code before refactoring the code.

Extract to Function

Selected block should represent set of statements or an expression

Ensure that you select block with a set of statements or expression.

Wrap in Try Catch

 Select valid code to wrap in a Try-catch block

Ensure that you select any code before applying try catch refactoring option.

Wrap in Condition

Select valid code to wrap in a Condition block

Ensure that you select an expression before applying Wrap in Codition refactoring option.

Convert to Arrow Function

 Place the cursor inside a function expression

Ensure that you place the cursor inside a function expression before applying the refactoring option.

Create Getters/Setters

Place the cursor at a member of an object expression

Ensure that you place the cursor at a member of an object expression before applying create getters/setters refactoring option.

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

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

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

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

Note:

To disable previews for images and colors, uncheck the option View > Code View Options > Asset Preview.

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).

 Adobe

Dapatkan bantuan lebih cepat dan lebih mudah

Pengguna baru?

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online