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

Chapter 4. Editing HTML > Code Options

Code Options

The Code Inspector toolbar includes a View Options menu (Figure 4.17). The 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.17. The View Options menu for formatting HTML appears on the Code inspector and Code view toolbars.

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.18, and Word Wrap is turned on in Figure 4.19. For more on wrapping preferences, see Setting HTML Preferences, later in this chapter.

Figure 4.18. I unchecked the Wrap option. Even with the Code inspector, really, really wide, long lines of code scroll offscreen horizontally. Word wrapping is applied to this page in Figure 4.19.

Figure 4.19. When text is wrapped, long lines of code, such as lines 15 and 21 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.19). 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.19.

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.20). 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.20. Although it's hard to see in black and white, the tags for the table cells, the paragraphs, and the links 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.21). You can toggle auto-indenting on and off by selecting Auto Indent from the Options menu.

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


You can set indent for only tables or only framesets, or for particular tags. To decide the space per indent or to select which tags get indented automatically, see Setting HTML Preferences, later in this chapter.

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