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.

Code hints

The code hints feature helps you insert and edit code quickly and without mistakes. As you type characters in Code view, you see a list of candidates that automatically complete your entry. For example, when you type the first characters of a tag, attribute, or CSS property name, you see a list of options beginning with those characters. This feature simplifies the insertion and editing of code. You can also use it to see the available attributes for a tag, the available parameters for a function, or the available methods for an object.

Code hints are available for several kinds of code. When you type the beginning character of a particular code type, you see a list of appropriate candidates. For example, to display a list of code hints for HTML tag names, type a right angle bracket (<). Similarly, to display JavaScript code hinting, type a period (dot operator) after an object.

Note:

For best results, especially when using code hints for functions and objects, set the Delay option in the Code Hints preferences dialog box to 0 seconds.

The code hinting feature also recognizes custom JavaScript classes that are not built in to the language. You can write these custom classes yourself or add them through third-party libraries like Prototype.

The list of code hints disappears when you press Backspace (Windows) or Delete (Macintosh).

For a video tutorial on code hinting, see www.adobe.com/go/lrvid4048_dw.

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

Supported languages and technologies

Dreamweaver supports code hinting for the following languages and technologies:

  • Adobe ColdFusion

  • Ajax

  • ASP JavaScript

  • ASP.NET C#

  • ASP.NET VB

  • ASP VBScript

  • CSS2 and CSS3

  • DOM (Document Object Model)

  • HTML4 and HTML5

  • jQuery (CS5.5 and later)

  • JavaScript (includes custom class hinting)

  • JSP

  • PHP MySQL

  • Spry

Display a code hints menu

The code hints menu appears automatically as you type in Code view. But you can also display the code hints menu manually, without typing.

  1. In Code view (Window > Code), place the insertion point inside a tag.
  2. Press Control+Spacebar.

Insert code in Code view by using code hints

  1. Type the beginning of a piece of code. For example, to insert a tag, type a right angle bracket (<). To insert an attribute, place the insertion point immediately after a tag name and press Spacebar.

    A list of items (such as tag names or attribute names) appears.

    Note:

    To close the list at any time, press Esc.

  2. Scroll through the list by using the scroll bar or the Up Arrow and Down Arrow keys.
  3. To insert an item from the list, double-click it, or select it and press Enter (Windows) or Return (Macintosh).

    Note:

    If a recently created CSS style doesn’t appear in a code hints list of CSS styles, select Refresh Style List from the code hints list. If Design view is visible, sometimes invalid code appears in Design view temporarily after you select Refresh Style List. To remove that invalid code from Design view, press F5 to refresh after you finish inserting the style.

  4. To insert a closing tag, type </ (slash).

    Note:

    By default, Dreamweaver determines when a closing tag is needed and inserts if automatically. You can change this default behavior so that Dreamweaver inserts a closing tag after you type the final angle bracket (>) of the opening tag. Alternatively, the default behavior can be to insert no closing tag at all. Select Edit > Preferences > Code Hints, and then select one of the Close Tags options.

Edit a tag by using code hints

  • To replace an attribute with a different attribute, delete the attribute and its value. Then add an attribute and its value as described in the previous procedure.

  • To change a value, delete the value, and then add a value as described in the previous procedure.

Refreshing JavaScript code hints

Dreamweaver automatically refreshes the list of available code hints as you work in JavaScript files. For example, suppose you are working in a primary HTML file and switch to a JavaScript file to make a change. That change is reflected in the list of code hints when you return to the primary HTML file. However, automatic updating works only if you edit your JavaScript files in Dreamweaver.

If you edit your JavaScript files outside Dreamweaver, press Control+period to refresh the JavaScript code hints.

Code hinting and syntax errors

Code hints sometimes don’t work properly if Dreamweaver detects syntax errors in your code. Dreamweaver alerts you to syntax errors by displaying information about them in a bar at the top of the page. The Syntax Error Information Bar displays the first line of code on which Dreamweaver encounters the error. As you fix errors, Dreamweaver continues to display any errors that occur later.

Dreamweaver provides additional help by highlighting (in red) the line numbers where syntax errors occur. The highlight appears in the Code view of the file that contains the error.

Dreamweaver displays syntax errors not only for the current page but also for related pages. For example, suppose you are working on an HTML page that uses an included JavaScript file. If the included file contains an error, Dreamweaver displays an alert for the JavaScript file as well. You can easily open the related file containing the error by clicking its name at the top of the document.

You can disable the Syntax Error Information Bar by clicking the Syntax Error Alerts button in the Coding toolbar.

Set code hints preferences

You can change default preferences for code hints. For example, if you don’t want to show CSS property names or Spry code hints, you can deselect them in code hints preferences. You can also set preferences for code hint delay time and closing tags.

Note:

Even if code hints are disabled, you can still display a pop-up hint in Code view by pressing Control+Spacebar.

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

    Close Tags

    Specifies how you want Dreamweaver to insert closing tags. By default, Dreamweaver inserts the closing tag automatically after you type the characters </. You can change this default behavior so that the closing tag is inserted after you type the final angle bracket (>) of the opening tag, or so that no closing tag is inserted at all.

    Enable Code Hints

    Displays code hints while you enter code in Code view. Drag the Delay slider to set the time in seconds before appropriate hints are displayed.

    Enable Description Tooltips

    Displays an extended description (if available) of the selected code hint.

    Menus

    Sets exactly which type of code hints you want displayed while typing. You can use all or some of the menus.

Site-specific code hints

Dreamweaver CS5 lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code hints as they write in Code view. To display these code hints, you first need to create a configuration file using the Site-Specific Code Hints dialog box. The configuration tells Dreamweaver where to look for code hints that are specific to your site.

For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_en.

Create the configuration file

Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in Dreamweaver.

By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory.

Note:

The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the code hints to display, the page you are working on must reside in the currently selected site.

  1. Select Site > Site-Specific Code Hints.

    By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and Wordpress.

    The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework structures.

    Note:

    You cannot delete or rename the existing default framework structures.

  2. In the sub-root text box, specify the sub-root folder where you store your framework’s files. You can click the folder icon next to the text box to browse to the framework files’ location.

    Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and/or files you want to scan are all displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps.

  3. Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add Files/Folders dialog box, you can specify particular file extensions that you want to include.

    Note:

    Specifying particular file extensions speeds up the scanning process.

  4. To remove files from the scan, select the files you don’t want scanned, and then click the minus (-) button above the Files window.

    Note:

    If Drupal or Joomla is the selected framework, the Site-Specific Code Hints dialog box displays an additional path to a file within your Dreamweaver configuration folder. Don’t delete this—it’s required when using these frameworks.

  5. To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do one of the following:

    • Select Scan This Folder to include the selected folder in the scan.

    • Select Recursive to include all files and folders within a selected directory.

    • Click the Extensions button to open the Find Extensions dialog box, where you can specify the file extensions you want included in your scan for a particular file or folder.

Save site structure

You can save the customized site structure you’ve created in the Site-Specific Code Hints dialog box.

  1. Create the structure of files and folders as you want it, adding and deleting files and folders as necessary.

  2. Click the Save Structure button in the upper right-hand corner of the dialog box.

  3. Specify a name for your site structure and click Save.

Note:

If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.

Rename site structures

When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word “custom”.

  1. Display the structure that you want to rename.

  2. Click the Rename Structure icon button in the upper right-hand corner of the dialog box.

  3. Specify a new name for the structure and click Rename.

Note:

If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.

Add files or folders to a site structure

You can add any files or folders that are associated with your framework. After that, you can specify the file extensions of the files you want to scan. (See the next section.)

  1. Click the plus (+) button above the Files window to open the Add File/Folder dialog box.

  2. In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon next to the text box to browse to a file or folder.

  3. Click the plus (+) button above the Extensions window to specify the file extensions of files you want to scan.

    Note:

    Specifying particular file extensions speeds up the scanning process.

  4. Click Add.

Scan a site for file extensions

Use the Find Extensions dialog box to view and edit file extensions that are included in the site structure.

  1. In the Site-Specific Code Hints dialog box, click the Extensions button.

    The Find Extensions dialog box lists the current scannable extensions.

  2. To add another extension to the list, click the plus (+) button above the Extensions window.

  3. To delete an extension from the list, click the minus (-) button.

Insert code using the Coding toolbar

  1. Make sure you are in Code view (View > Code).
  2. Position the insertion point in the code, or select a block of code.
  3. Click a button in the Coding toolbar, or select an item from a pop‑up menu in the toolbar.

    To find out what each button does, position the pointer over it until a tooltip appears. The Coding toolbar displays the following buttons by default:

    Open Documents

    Lists the documents that are open. When you select one, it is displayed in the Document window.

    Show Code Navigator

    Displays the Code Navigator. For more information, see Navigate to related code.

    Expand All

    Restores all collapsed code.

    Select Parent Tag

    Selects the content and surrounding opening and closing tags of the line in which you’ve placed the insertion point. If you repeatedly click this button, and your tags are balanced, Dreamweaver eventually selects the outermost html and /html tags.

    Balance Braces

    Selects the content and surrounding parentheses, braces, or square brackets of the line in which you placed the insertion point. If you repeatedly click this button, and your surrounding symbols are balanced, Dreamweaver eventually selects the outermost braces, parentheses, or brackets in the document.

    Line Numbers

    Lets you hide or show numbers at the beginning of each line of code.

    Word Wrap

    Wraps all the text in Code view so that it appears within the defined space of the view.

    Highlight Invalid Code

    Highlights invalid code in yellow.

    Note:

    This option is not available for HTML, CSS, and JS files. Use linting in these files to find potential errors in code.

    Syntax Error Alerts in Info Bar

    Enables or disables an information bar at the top of the page that alerts you to syntax errors. When Dreamweaver detects a syntax error, the Syntax Error Information Bar specifies the line in the code where the error occurs. Additionally, Dreamweaver highlights the error’s line number on the left side of the document in Code view. The info bar is enabled by default, but only appears when Dreamweaver detects syntax errors in the page.

    Note:

    This option is not available for HTML, CSS, and JS files. Use linting in these files to find potential errors in code.

    Apply Comment

    Lets you wrap comment tags around selected code, or open new comment tags.

    • Apply HTML Comment wraps the selected code with <!-- and -->, or opens a new tag if no code is selected.

    • Apply // Comment inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single // tag if no code is selected.

    • Apply /* */ wraps the selected CSS or JavaScript code with /* and */.

    • Apply ' Comment is for Visual Basic code. It inserts a single quotation mark at the beginning of each line of a Visual Basic script, or inserts a single quotation mark at the insertion point if no code is selected.

    • When you are working in a ASP, ASP.NET, JSP, PHP, or ColdFusion file and you select the Apply Server Comment option, Dreamweaver automatically detects the correct comment tag and applies it to your selection.

    Remove Comment

    Removes comment tags from the selected code. If a selection includes nested comments, only the outer comment tags are removed.

    Wrap Tag

    Wraps selected code with the selected tag from the Quick Tag Editor.

    Recent Snippets

    Lets you insert a recently used code snippet from the Snippets panel. For more information, see Work with code snippets.

    Move or Convert CSS

    Lets you move CSS to another location, or convert inline CSS to CSS rules. For more information, see Move/export CSS rules and Convert inline CSS to a CSS rule.

    Indent Code

    Shifts the selection to the right.

    Outdent Code

    Shifts the selection to the left.

    Format Source Code

    Applies previously specified code formats to selected code, or to the entire page if no code is selected. You can also quickly set code formatting preferences by selecting Code Formatting Settings from the Format Source Code button, or edit tag libraries by selecting Edit Tag Libraries.

    The number of buttons available in the Coding toolbar varies depending on the size of the Code view in the Document window. To see all of the available buttons, resize the Code view window or click the expander arrow at the bottom of the Coding toolbar.

    You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Hidden Characters, and Auto Indent) or hide buttons that you don’t want to use. To do this, however, you must edit the XML file that generates the toolbar. For more information, see Extending Dreamweaver.

    Note:

    The option to view hidden characters, which is not a default button in the Coding toolbar, is available from the View menu (View > Code View Options > Hidden Characters).

Insert code with 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 may appear in your page immediately, or a dialog box may appear requesting more information to complete the code.

    To find out what each button does, position the pointer over it until a tooltip appears. 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.

    Although the Insert panel provides a collection of frequently used tags, it is not comprehensive. To choose from a more comprehensive selection of tags, use the Tag Chooser.

Insert code using Emmet

Emmet is a plug-in that allows high-speed coding and generation of HTML and CSS code. You can now 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.


Following are a few examples on how to use Emmet abbreviations in Code View. For detailed information and reference, see the Emmet documentation.

Note:

Dreamweaver currently supports only Emmet 1.0 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 abreviation 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 abbrevation:

-bdrs

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

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

Insert tags with the Tag Chooser

Use the Tag Chooser to insert in your page any tag in the Dreamweaver tag libraries (which include ColdFusion and ASP.NET tag libraries).

  1. Position the insertion point in the code, right-click (Windows) or Control‑click (Macintosh), and select Insert Tag.

    The Tag Chooser appears. The left pane contains a list of supported tag libraries, and the right pane shows the individual tags in the selected tag library folder.

  2. Select a category of tags from the tag library, or expand the category and select a subcategory.
  3. Select a tag from the right pane.
  4. To view syntax and usage information for the tag in the Tag Chooser, click the Tag Info button. If available, information about the tag appears.
  5. To view the same information about the tag in the Reference panel, click the <?> icon. If available, information about the tag appears.
  6. To insert the selected tag into your code, click Insert.

    If the tag appears in the right pane with angle brackets (for example, <title></title>), it doesn’t require additional information, and it’s immediately inserted into the document at the insertion point.

    If the tag does require additional information, a tag editor appears.

  7. If a tag editor opens, enter the additional information, and click OK.
  8. Click the Close button.

Insert HTML 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.

Insert a comment at the insertion point

  • Select Insert > Comment.

    In Code view, a comment tag is inserted and the insertion point is placed in the middle of the tag. Type your comment.

    In Design view, the Comment dialog box appears. Enter the comment and click OK.

Display comment markers in Design view

  • Select View > Visual Aids > Invisible Elements.

    Make sure that the Comments option is selected in the Invisible Elements preferences or the comment marker does not appear.

Edit an existing comment

  • In Code view, find the comment and edit its text.

  • In Design view, select the Comment marker, edit the comment’s text in the Property inspector, and then click in the Document window.

Copy and paste code

  1. Copy the code from Code view or from another application.
  2. Place the insertion point in Code view, and select Edit > Paste.

Preview images and colors in Code view

After you insert the 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. For example, <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />. If Dreamweaver is unable to display the preview for remote paths, the message "Unable to load image" is displayed.

You can get a preview for the following image file 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. The following are the supported formats:

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

Note:

Press Control + Spacebar to see the color picker and change the color values quickly.

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

Color preview in Code view
Color preview in Code view

Analyze code

Dreamweaver supports linting, which is the process of analyzin code for potential errors. 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.

Edit tags with Tag editors

Use Tag editors to view, specify, and edit the attributes of tags.

  1. Right-click (Windows) or Control‑click (Macintosh) a tag in Code view or an object in Design view, and select Edit Tag from the pop‑up menu. (The contents of this dialog box change depending on the selected tag.)
  2. Specify or edit attributes for the tag and click OK.

    Note:

    To get more information about the tag within the Tag editor, click Tag Info.

Edit code with the Coding context menu

  1. In Code view, select some code and right-click (Windows) or Control-click (Macintosh).
  2. Select the Selection submenu, and select any of the following options:

    Expand All

    Restores all collapsed code.

    Apply HTML Comment

    Wraps the selected code with <!-- and -->, or opens a new tag if no code is selected.

    Apply /* */ Comment

    Wraps the selected CSS or JavaScript code with /* and */.

    Apply // Comment

    Inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single // tag if no code is selected.

    Apply ' Comment

    Inserts a single quotation mark at the beginning of each line of a Visual Basic script, or inserts a single quotation mark at the insertion point if no code is selected.

    Apply Server Comment

    Wraps the selected code. When you are working in a ASP, ASP.NET, JSP, PHP, or ColdFusion file and you select the Apply Server Comment option, Dreamweaver automatically detects the correct comment tag and applies it to your selection.

    Apply Backslash-comment Hack

    Wraps the selected CSS code with comment tags that will cause Internet Explorer 5 for Macintosh to ignore the code.

    Apply Caio Hack

    Wraps the selected CSS code with comment tags that will cause Netscape Navigator 4 to ignore the code.

    Remove Comment

    Removes comment tags from the selected code. If a selection includes nested comments, only the outer comment tags are removed.

    Remove Backslash-comment Hack

    Removes comment tags from the selected CSS code. If a selection includes nested comments, only the outer comment tags are removed.

    Remove Caio Hack

    Removes comment tags from the selected CSS code. If a selection includes nested comments, only the outer comment tags are removed

    Convert Tabs to Spaces

    Converts each tab in the selection to a number of spaces equal to the Tab Size value set in Code Format preferences. For more information, see Change the code format.

    Convert Spaces To Tabs

    Converts runs of spaces in the selection to tabs. Each run of spaces that has a number of spaces equal to the tab size is converted to one tab.

    Indent

    Indents the selection, shifting it to the right. For more information, see Indent code blocks.

    Outdent

    Shifts the selection to the left.

    Remove All Tags

    Removes all the tags in the selection.

    Convert Lines To Table

    Wraps the selection in a table tag with no attributes.

    Add Line Breaks

    Adds a br tag at the end of each line of the selection.

    Convert To Uppercase

    Converts all letters in the selection (including tag and attribute names and values) to uppercase.

    Convert To Lowercase

    Converts all letters in the selection (including tag and attribute names and values) to lowercase.

    Convert Tags To Uppercase

    Converts all tag and attribute names and attribute values in the selection to uppercase.

    Convert Tags To Lowercase

    Converts all tag and attribute names and attribute values in the selection to lowercase.

Edit a server-language tag with the Property inspector

Edit the code in a server-language tag (such as an ASP tag) without entering Code view by using the code Property inspector.

  1. In Design view, select the server-language tag visual icon.
  2. In the Property inspector, click the Edit button.
  3. Make changes to the tag code, and click OK.

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.

  • Select Edit > Indent Code.

Unindent the selected block of code

  • Press Shift+Tab.

  • 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, as well as 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 as well as 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 the same 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 of 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 ({ }) on 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.

You should be aware of 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 very 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 (for example, a Spry page).

  2. Select Commands > 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, as well as 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.

Work with code snippets

Code snippets let you store content for quick reuse. You can create, insert, edit, or delete snippets of HTML, JavaScript, CFML, ASP, PHP, and more. You can also manage and share your code snippets with team members. Some predefined snippets that you can use as a starting point are available.

Also, you can now keep the code snippets up-to-date across your Dreamweaver installations using the cloud sync feature. For information on synchronizing code snippets with Creative Cloud and your other Dreamweaver installation, see Synchronizing Dreamweaver settings with Creative Cloud.

Insert a code snippet

  1. Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around.
  2. In the Snippets panel (Window > Snippets), double-click the snippet.

    You can also right-click (Windows) or Control‑click (Macintosh) the snippet, and then select Insert from the pop‑up menu.

Create a code snippet

  1. In the Snippets panel, click the New Snippet icon at the bottom of the panel.
  2. Enter a name for the snippet.

    Note:

    Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or double quotes (“).

  3. (Optional) Enter a text description of the snippet. This makes it easier for other team members to use the snippet.
  4. (Optional) Select a Preview Type: Code or Design.

    Design

    Renders the code and displays it in the Preview pane of the Snippets panel.

    Code

    Displays the code in the Preview pane.

  5. Click OK.

Edit or delete a code snippet

  • In the Snippets panel, select a snippet, and click the Edit Snippet button or the Remove button at the bottom of the panel.

Create code snippet folders and manage code snippets

  1. In the Snippets panel, click the New Snippet Folder button at the bottom of the panel.
  2. Drag snippets to the new folder or other folders, as desired.

Add or edit a keyboard shortcut for a snippet

  1. In the Snippets panel, right-click (Windows) or Control‑click (Macintosh) and select Edit Keyboard Shortcuts.

    The Keyboard Shortcuts Editor appears.

  2. In the Commands pop‑up menu, select Snippets.

    A list of snippets appears.

  3. Select a snippet and assign a keyboard shortcut to it.

    For more information, see Customize keyboard shortcuts.

Share a snippet with other members of your team

  1. Find the file corresponding to the snippet that you want to share in the Configuration/Snippets folder in the Dreamweaver application folder.
  2. Copy the snippet file to a shared folder on your computer or a network computer.
  3. Have the other members of the team copy the snippet file to their Configuration/Snippets folder.

Search for tags, attributes, or text in code

You can search for specific tags, attributes, and attribute values. For example, you can search for all img tags that have no alt attribute.

You can also search for specific text strings that are within or not within a set of container tags. For example, you can search for the word Untitled contained in a title tag to find all the untitled pages on your site.

  1. Open the document to search in, or select documents or a folder in the Files panel.
  2. Select Edit > Find And Replace.
  3. Specify which files to search in, and then specify the kind of search to perform, and text or tags to search for. Optionally, specify replacement text as well. Then click one of the Find buttons or one of the Replace buttons.
  4. Click the Close button.
  5. To search again without displaying the Find And Replace dialog box, press F3 (Windows) or Command+G (Macintosh).

Save and recall search patterns

You can save search patterns and reuse them later.

Save a search pattern

  1. In the Find And Replace dialog box (Edit > Find And Replace), set the parameters for the search.
  2. Click the Save Query button (the disk icon).
  3. In the dialog box that appears, navigate to the folder where you want to save queries. Then type a filename that identifies the query, and click Save.

    For example, if the search pattern involves looking for img tags with no alt attribute, you might name the query img_no_alt.dwr.

    Note:

    Saved queries have the filename extension .dwr. Some saved queries from older versions of Dreamweaver may have the extension .dwq.

Recall a search pattern

  1. Select Edit > Find And Replace.
  2. Click the Load Query button (the folder icon).
  3. Navigate to the folder where your queries are saved. Then select a query file and click Open.
  4. Click Find Next, Find All, Replace, or Replace All to initiate the search.

Use language-reference material

The Reference panel provides you with a quick reference tool for markup languages, programming languages, and CSS styles. It provides information on the specific tags, objects, and styles that you are working with in Code view (or the Code inspector). The Reference panel also provides example code that you can paste into your documents.

Open the Reference panel

  1. Do one of the following in Code view:
    • Right-click (Windows) or Control‑click (Macintosh) a tag, attribute, or keyword, and then select Reference from the context menu.

    • Place the insertion point in a tag, attribute, or keyword, and then press Shift+F1.

      The Reference panel opens and displays information about the tag, attribute, or keyword you clicked.

       

    Reference panel
    Reference panel

  2. To adjust the text size in the Reference panel, select Large Font, Medium Font, or Small Font from the options menu (the small arrow at the upper right of the panel).

Paste example code into your document

  1. Click anywhere in example code in the reference content.

    The entire code example is highlighted.

  2. Select Edit > Copy, and then paste the example code into your document in Code view.

Browse the reference content in the Reference panel

  1. To display tags, objects, or styles from another book, select a different book from the Book pop‑up menu.
  2. To view information about a specific item, select it from the Tag, Object, Style, or CFML pop‑up menu (depending on which book you selected).
  3. To view information about an attribute of the selected item, select the attribute from the pop‑up menu next to the Tag, Object, Style, or CFML pop‑up menu.

    This menu contains the list of attributes for the item you select. The default selection is Description, which displays a description of the chosen item.

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