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

Chapter 4. Editing Code > Working with Code

Working with Code

The Code inspector (Figure 4.12) (formerly the HTML inspector) lets you both view and edit the HTML code for a page. The Code inspector displays the code that tells the page how to come together in a Web browser or in the Document window.

Figure 4.12. The Code inspector is one view of Dreamweaver's built-in HTML code editors.

To view the Code inspector

  • From the Document window menu bar, select Window > Code Inspector


    Press F10.

✓ Tips

  • You can also view code in Code view or Split view, but personally I would rather pop the Code inspector open for a quick check of a specific piece of code. For one thing, it seems to take less memory and refresh time to display the Code inspector than it does to switch views. For another, it's sometimes necessary to resize the Document window to see both the code and the page at the same time, which I don't want to take the time to do if I don't have to. Finally, those of us who use laptops or like to look at our code and design side by side (Figure 4.11) instead of squished up into one window may prefer to use the Code inspector, available with a quick press of the F10 key.

  • Dreamweaver's context-sensitive code editing tools that appear on the HTML panel of the Insert bar do not work in the Code inspector if only Design view is showing; they become available when Code view or Split view are open.

About the Tag selector

In any view in the Document window, the Tag selector shows the tags wrapped around the current selection, all the way up to <body> (which envelops all tags on the visible page). The Tag selector appears in the status bar of each Document window on the Mac. In Windows, the same is true when you have more than one Document window open and the Document windows are minimized to float within the Dreamweaver window (Figure 4.13). If your Document windows are maximized, the Tag selector for the currently displayed window appears in the status bar, and you'll see different Tag selectors when you switch windows using the Document tabs. Figure 4.14 shows the Document window maximized within Dreamweaver.

Figure 4.13. When Document windows are minimized within Dreamweaver, the Tag selector appears in the status bar for each window.

Figure 4.14. Windows users: When the Document window is maximized within Dreamweaver, the Tag selector appears in the status bar and displays tags only for the visible window.

Either way, the Tag selector lets you select any tag surrounding the current object. You can choose to show the tags around any text or object by clicking on that text or object. Then, to select a specific tag, click on that tag in the Tag selector (Figure 4.15).

Figure 4.15. The Tag selector displays the tags surrounding whatever you've clicked on last. Click on any of these tags to select it and modify it. The currently selected tag—b, in this case—is highlighted as though it's a pushed-in button.

After you select a specific tag, you can modify it in Design view or Code view; you can remove the tag; you can add attributes to it; and you can modify it in the Property inspector or the Tag Inspector panel. All these tasks are described later in this chapter.

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