This chapter is from the book
This chapter is from the book
This chapter is from the book
Using the Coding Toolbar
To the left of the Code View window is the Coding toolbar ( Figure 3.19 ), which provides quick access to several coding features. You can also access each of these items via other Dreamweaver menus, but the Coding toolbar offers you quick access in Code view.
)
Figure 3.19 The buttons on the Coding toolbar.
To access the Coding Toolbar:
- From the View menu, choose Toolbars > Coding to display the Coding toolbar. You can also hide the toolbar by deselecting it from this menu.
TIP
- The number of buttons viewable in the Coding toolbar depends on the size of the Code View window. If all of the buttons aren't displayed, resize the Code View window or click the double expander arrow (
Figure 3.20
) at the bottom of the toolbar to display the hidden buttons.
Figure 3.20 A double expander arrow appears at the bottom of the Coding toolbar if the Document window isn't large enough to display the entire toolbar.
)
The Coding toolbar contains 15 buttons for rapid access to coding features:
- Open Documents lets you toggle between any open documents in the Dreamweaver workspace.
- Collapse Full Tag, Collapse Selection, and Expand All let you access Code Collapse features. For more details, see "Using Code Collapse," above.
- Select Parent Tag lets you quickly select a complete tag.
- Balance Braces helps you troubleshoot your code for balanced braces. When braces are balanced, every opening parenthesis ((), brace ({), or bracket ([) in your code has a matching closing parenthesis ()), brace (}), or bracket (]). See the task "To check for balanced braces," later in this chapter, for more details.
- Line Numbers displays line numbers to the left of your code.
- Highlight Invalid Code highlights invalid HTML in yellow.
- Apply Comment and Remove Comment add and remove comments. For more details, see "To make quick edits to a code selection," earlier in this chapter.
-
Wrap Tag wraps a selection from your page with an HTML tag that you choose from the drop-down list in the Quick Tag Editor, which appears when you click the Wrap Tag button (
Figure 3.21
). The Quick Tag Editor is most often used in Design view to add or edit HTML tags without leaving Design view. In Code view, it's easier to use Code Hints or type the tag name than to use the Quick Tag Editor. For more information about the Quick Tag Editor, see Dreamweaver Help (F1).
Figure 3.21 Click the Wrap Tag button to open the Quick Tag Editor and wrap a selection with tags chosen from the Quick Tag Editor list.
- Recent Snippets inserts a recently used code snippet from the Snippets panel. For more details, see "Using Code Snippets," later in this chapter.
- Indent Code and Outdent Code let you indent and outdent code selections. For more details, see "To make quick edits to a code selection," earlier in this chapter.
- Format Source Code applies new formatting preferences to existing documents. For more details, see "Using Commands for Editing Code," later in this chapter.
)
Verifying that your code is balanced
Two coding features accessible on the Coding toolbar verify that your code is balanced. You can use Select Parent Tag to verify that all your tag sets (pairs of opening and closing tags) are complete, and you can use Balance Braces to verify that all of your parentheses, braces, and brackets occur in balanced pairs. Unbalanced tag sets and unbalanced braces are common sources of code errors.
To select a parent tag:
- In Code view, place the insertion point within a line of code.
- On the Coding toolbar, click the Select Parent Tag button to select the parent tag, which includes the opening and closing tags, as well as all the content between them.
To check for balanced braces:
- In Code view, place the insertion point within a script.
- On the Coding toolbar, click the Balance Braces button. Dreamweaver starts from the line where you put the insertion point and checks for parentheses, braces ({ }), and square brackets ([ ]) and then highlights all the code in between parentheses, braces, or square brackets. If you click the Balances Braces button again, all the code between the next set of parentheses, braces, or square brackets, moving from the innermost set outward, will be highlighted. You can repeatedly click this button, and if parentheses, braces, and brackets are balanced, you will eventually reach the outermost set. If a parenthesis, brace, or bracket is missing, the code will not be highlighted after you click the button. This provides a quick way of troubleshooting scripts to ensure that unbalanced braces, parentheses, or brackets are not a source of syntax errors.