• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Editing Code > Code Options

Code Options

The Document toolbar and the Code inspector toolbar both include a View Options menu (Figure 4.20). The Code view options include Word Wrap, for viewing long lines of code; Line Numbers, for quickly locating a line of code; Highlight Invalid HTML, which marks up bad syntax; Syntax Coloring, for marking types of tags with different colors; and Auto Indent, for formatting chunks of code with indenting. Let's look at each option in turn.

Figure 4.20. The View Options menu for formatting HTML appears on the Code inspector toolbar (shown) and the Document toolbar (see Figure 4.21).

About Word Wrap

In the Code inspector, you can turn on Word Wrap so that the text wraps to the window width. This is soft wrapping—no line breaks are inserted. You can toggle wrapping on and off by selecting Word Wrap from the View Options menu. Unwrapped code is shown in Figure 4.21, and Word Wrap is turned on in Figure 4.22. For more on wrapping preferences, see Setting HTML Preferences, later in this chapter.

Figure 4.21. I unchecked the Wrap option. Even in Code view, really, really wide, long lines of code scroll offscreen horizontally. Word wrapping is applied to this page in Figure 4.22.

Figure 4.22. When text is wrapped, long lines of code, such as lines 15, 21, 23, and 27 here, may wrap over onto unnumbered lines.

About line numbers

When you turn on line numbering, each line of code is numbered in the Code inspector. A line of code may wrap over into an unnumbered line (Figure 4.22). Line numbers can be useful for discussing pages with your colleagues, as in, “Hey, Steph, the table I'm having trouble with starts on line 47.” Line numbers—sans wrapping—should be the same in Dreamweaver as in line editors such as vi.


  • To select an entire line of code, wrapped or unwrapped, click on its line number. Line 15 is selected in Figure 4.22.

About Syntax Coloring

You can turn on Syntax Coloring so that specific tags are instantly marked by particular colors as soon as you insert an object or type some code (Figure 4.23). These colors appear only in Dreamweaver—they won't show up in a browser or text editor. You must turn on Syntax Coloring in the Code inspector's View Options menu in order for Dreamweaver's Reference feature to work properly (see Using the Code Reference, later in this chapter). You can toggle coloring on and off by selecting Syntax Coloring from the View Options menu. To pick the colors for a tag or family of tags, see Setting HTML Preferences, later in this chapter.

Figure 4.23. Although it's hard to see in black and white, the tags for table elements, tag attributes such as URLs, link tags, and other tags are all marked with different colors in Code view.

About Auto Indent

As you add code in Dreamweaver, either by creating in the Document window or by hand-coding in Code view, Dreamweaver can automatically indent blocks of code. For example, you probably want your code for the rows and cells in a table to appear indented so that you can spot them easily when checking out the code (Figure 4.24). You can toggle auto-indenting on and off by selecting Auto Indent from the View Options menu.

Figure 4.24. The tags within this table are indented so that you can find table rows <tr> and table cells <td> easily.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint