Inserting code quickly with the Coding toolbar

You can use the Coding toolbar to quickly add code to your page.

To insert code quickly:

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 following buttons are displayed by default in the Coding toolbar.

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

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.

Collapse Selection collapses the selected 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 will eventually select the outermost html and /html tags.

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

Show Line Numbers lets you hide or show numbers at the beginning of each line of code.

Highlight Invalid Code highlights invalid code in yellow.

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 Macromedia 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 Working with code snippets.

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.

Related topics

• The Coding toolbar
• Displaying toolbars
• Verifying that tags and braces are balanced