PDF (adobe.com)

Insert code with 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.

    Collapse Full Tag
    Collapses the content between a set of opening and closing tags (for example, the content between <table> and </table>). You must place the insertion point in the opening or closing tag and then click the Collapse Full Tag button to collapse the tag.
    You can also collapse the code outside a full tag by placing the insertion point in an opening or closing tag and Alt‑clicking (Windows) or Option-clicking (Macintosh) the Collapse Full Tag button. Additionally, Control-clicking this button disables “smart collapse” so that Dreamweaver doesn’t adjust the content it collapses outside full tags. For more information, see About collapsing code.

    Collapse Selection
    Collapses the selected code.
    You can also collapse the code outside a selection by Alt‑clicking (Windows) or Option-clicking (Macintosh) the Collapse Selection button. Additionally, Control-clicking this button disables “smart collapse” so that you can collapse exactly what you selected without any manipulation from Dreamweaver. For more information, see About collapsing 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.

    Highlight Invalid Code
    Highlights invalid code in yellow.

    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.

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