| Dreamweaver's Code view options are available only when the code is visible, either in Code view or Split view. You can set preferences for all your code, but you can also override these choices and use different options for a selection of code. In addition to using Code or Split view for viewing code, you can use a separate coding window called the Code Inspector. The Code Inspector window is very similar to Code view, but you can use it to retain a fullscreen view of the Design window without having to split the available screen space between Code and Design views or view two different parts of the code at the same time. The first step in selecting Code view options is to open a Dreamweaver document and choose Code or Split view. To choose a Dreamweaver document view: From the main menu bar, choose View > Code or View > Code and Design. or On the Document toolbar, click the Code or Split button (Figure 3.1). (To display the Document toolbar if it is not visible, choose View > Toolbars > Document.) Figure 3.1. The Code, Split, and Design view buttons on the Document toolbar. 
To choose code viewing options: 1. | On the Document toolbar, click the View Options button (Figure 3.2); or, from the View menu, choose Code View Options.
Figure 3.2. The View options button and the Code View Options menu. 
| 2. | Select any of the six options in this menu:
Word Wrap wraps your code to a new line without inserting a line break and makes it easier to view your code without horizontal scrolling. Line Numbers displays line numbers to the left side of your code. Hidden Characters displays formatting marks in your code for spaces, tabs, and paragraph markers. Highlight Invalid Code adds yellow highlights to all invalid HTML code. Syntax Coloring adds color to code for each tag type. Auto Indent automatically indents code to the same level as the previous line when you press Enter (Windows) or Return (Mac) while writing code.
|
 Tip
To make quick edits to a code selection: 1. | In the Code view, select some code and right-click (Windows) or Control-click (Mac) to open the contextual menu. Choose the Selection submenu (Figure 3.3).
Figure 3.3. Right-click in Code view to open the contextual menu and access the Selection submenu. 
| 2. | Choose any of the options in the Selection submenu:
Collapse and Expand options are for applying and removing Code Collapse, a Dreamweaver feature that collapses selected sections of code so that you can view as much or as little of the code as you choose. See "Using Code Collapse," later in this chapter, for more details. Comment options are for using comments in your code. You can use these options to add or remove different types of comments from lines of code in the selection. Tabs, Spaces, and Indent/Outdent options are for converting tabs to spaces, converting spaces to tabs, and indenting or outdenting the selected code. The Remove All Tags option removes any tags in the selected code. The Convert Lines to Table option wraps the selected code in a table tag. The Add Line Breaks option adds a br tag to the end of each line of code in the selection. Case-change options convert the entire selection to upper- or lowercase, or convert tags in the selection to upper- or lowercase.
|
Tips You can set specific indent and tab sizes in Dreamweaver Preferences. From the Edit menu (Windows) or the Dreamweaver application menu (Mac), choose Preferences (Ctrl-U or Command-U) > Code Format. You can also indent a selection of code by pressing the Tab key, or choose Edit > Indent Code (Ctrl-Shift-> or Command- Shift-.). You can outdent a selection of code by pressing Shift-Tab, or choose Edit > Outdent Code (Ctrl-Shift-< or Command-Shift-,). Two other comment options are available from the Selection submenu: the Caio Hack and the Backslash-comment Hack. These options are work-arounds for code issues with certain browsers. The Caio Hack adds /*/*/ to your code. Netscape 4 ignores whatever follows /*/*/, so you can include code that would otherwise cause an error in Netscape 4. The Backslash-comment Hack adds /*\*/ to your code to hide code and prevent errors in the Mac version of Microsoft Internet Explorer 5.
To open the Code Inspector window: 1. | From the main menu, choose Window > Code Inspector, or press F10 (Windows) or Option-F10 (Mac).
The Code Inspector window appears on top of the current active document, allowing you to have a full-screen view of the Design window without having to split the available space between Code and Design views or to view two sections of the code at the same time (Figure 3.4).
Figure 3.4. Choose Window > Code Inspector to display the Code Inspector window. 
| 2. | If you're editing a page that contains JavaScript or VBScript functions, you can click the Functions button on the Code Inspector toolbar to access the Functions menu (Figure 3.5). This menu enables you to jump to the code for any named function in your page.
Figure 3.5. The Functions menu can be used to access any named functions in your document. 
|
Tip
|
