Dreamweaver 8[c] The Missing Manual

9.2. Code View

Dreamweaver provides several different ways to view a page's HTML code:

The rest of this chapter assumes that you're using Code view for HTML editing.

To move between Dreamweaver's different views, use the buttons in the Document toolbar (Figure 9-2) or choose a name from the View menu: Code, Design (the "regular" visual mode), or Code and Design (Split view).

Figure 9-2. In Split view (also called Code and Design view), the top half shows your page's HTML; the bottom half shows the WYSIWYG Design view. Selecting an object in the visual half (circled) also selects the corresponding HTML in the code half (the highlighted paragraph tag)a great way to identify an object in your HTML. As you work in one half of the Split view, Dreamweaver updates the other half. Use the buttons (labeled) in the Document toolbar to jump between the different views. (Notice that the tag selector at the bottom of the document window [circled] also identifies the selected tag.)


Tip: You can quickly jump between Code and Design view by pressing Control+` (on both Windows and the Mac). In Split view, this shortcut jumps between the two views, so you could insert an image in the design half of Split view and then press Control+` to jump right into the HTML for that image in the Code half of the window.

Code view functions just like a text editor. You can click anywhere inside the window and start typing HTML, JavaScript, Cascading Style Sheet, or other programming code (such as ASP, ColdFusion, or PHP).

That doesn't mean you have to type out everything by hand; the Insert bar, Insert menu, and Property inspector also function in Code view. Using these sources of canned HTML blobs, you can combine hands-on HTML work with the easy-to-use, rapid action of Dreamweaver's objects. This trick can be a real time-saver when you need to add a table, which would otherwise be a multiline exercise in typing accuracy. You can also select a tag (an image's <img> tag, for example) in Code view and use the Property inspector to modify it.


Tip: When you add HTML to Code view, Dreamweaver doesn't automatically update Design view, which can be disconcerting when you're working in Split view. (After all, how would Dreamweaver display a halffinished tag like this: < table border="? ) Click the Refresh button in the Property inspector (see Figure 9-3), or press F5, to update the visual display.
Figure 9-3. After changing code in Split view, click Refresh on the Property inspector to update Dreamweaver's visual display.

To help you navigate your code, Code view provides several visual cues. They include:

You can also control Code view display by using the View Options pop-up menu in the toolbar (see Figure 9-6), or by using the View Code Options submenu:

9.2.1. Coding Toolbar

Dreamweaver 8 introduces a handy toolbar that makes many basic hand-coding tasks go much more quickly. While working in Code view, the Coding toolbar appears on the left edge of the document window (see Figure 9-6). If you don't see it, you can turn it on by choosing View Toolbars Coding, or by right-clicking (Control-clicking) on another toolbar such as the Insert or Document toolbar, and turning on the Coding option in the pop-up menu. Use the same technique to close the toolbar, if you dont use it.

The toolbar contains buttons that duplicate tasks and preference settings that you can control from other parts of Dreamweaver. Here's a quick rundown of the buttons listed in Figure 9-6, with a quick explanation of what they do and, when applicable , a cross-reference to a more detailed description of the tool or action: