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.

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.

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