Home > Articles > Graphics & Web Design > Dreamweaver & Flash

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Using the Coding Toolbar

When you switch to Code or Split view, the Coding toolbar appears along the left side of the Code view pane. The toolbar provides easy access to the most common coding related commands. If the Code view pane is not large enough, an expander arrow appears, which you click to access additional buttons. Some of the tools allow you to collapse and expand the content between a set of opening and closing tags, select tags, insert and remove comments, format code, and highlight invalid code.

Use the Coding Toolbar

  • green-circle-1.jpg Open the Web page you want to view code.
  • green-circle-2.jpg Switch to Code or Split view.
  • green-circle-3.jpg Click to place the insertion point in the code or select a block of code.
  • green-circle-4.jpg Click the button you want on the Coding toolbar:
    • Open Documents. Displays a list of open documents. Click the one you want to open it.

    • Show Code Navigator. Displays the Code Navigator in the code.

    • Collapse Full Tag. Collapses the content between a set of opening and closing tags. You need to place the insertion point in the opening or closing tag.

    • Collapse Selection. Collapses the selected code.

    • Expand All. Restores all collapsed code.

    • Select Parent Tag. Selects the code tag immediately outside of the line with the insertion point.

    • Balance Braces. Selects the code tag and surrounding parentheses, braces, or square brackets of the line with the insertion point.

    • Line Numbers. Shows or hides the numbers at the beginning of each line of code.

    • Highlight Invalid Code. Highlights invalid code in yellow.

    • Syntax Error Alerts in Info Bar. Displays syntax code error alerts in the Info bar.

    • Apply Comment. Inserts comment tags around the selected code, or opens new comment tags.

    • Remove Comment. Deletes comment tags from the selected code.

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

    • Recent Snippets. Inserts a recently used code snippet from the Snippets panel.

    • Move or Convert CSS. Moves CSS to another location or converts inline CSS to CSS rules.

    • Indent Code. Shifts the selection to the right.

    • Outdent Code. Shifts the selection to the left.

    • Format Source Code. Displays options to apply source code formatting to selected code, or to the entire page if no code is selected. You can also access Code Format Settings from the Preferences dialog box or the Tag Library Editor.

  • + Share This
  • 🔖 Save To Your Account