10.2 Code View

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

Code view. In Code view, Dreamweaver displays your page's raw code.
Split view. This shows the HTML code and the "regular" Design view simultaneously (Figure 10-2).
Code inspector. The Code inspector is a floating code window that lets you use Design view in its full glory (not cut in half as in Split view), while still providing access to the code. (To open the Code inspector, choose Window Code Inspector or press F10.)

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

To move between Dreamweaver's different views, use the document toolbar (see Figure 10-1) or choose a name from the View menu: Code, Design (the "regular" visual mode), or Design and Code (Split view).

You can quickly jump between Code and Design view by pressing Control+` (Option-Tab). 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, Cold Fusion, 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 timesaver when you need to add a table, which would otherwise be a multi-line 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.

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

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

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 also selects the corresponding HTML in the code halfa 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 in the document toolbar to jump between the different views. (Live Data view works with Dreamweaver's dynamic Web site tools; see Section 22.5.)

When you want to update Dreamweaver's visual display while in Split view, click Refresh on the Property inspector.

Syntax coloring. Dreamweaver displays different elements in different colors. Comments, for example, are gray. Text is black, and HTML tags appear in blue. You can change any of these colors, and even specify unique colors for different types of tags, using the Preferences window (see Figure 10-4). To really make a tag stand out, you can underline it, make it bold, italicize it, and even give it a background color. Dreamweaver has separate color schemes for 23 different types of documents such as ASP, CSS, and XML files. (But do you really need different colors for HTML forms in ASP pages, HTML pages, and PHP pages? You be the judge.)
Bad code highlighting. When you type incorrect code (an opening tag without a closing tag, say), it's highlighted in yellow (see Figure 10-5).

You can control the color Dreamweaver uses to display HTML and script code while in Code view, from the Preferences window. To do so, select the Code Coloring Category. Then select the type of documentHTML, ASP, CSS, or whateverand click Edit Coloring Scheme. In the Edit Coloring Scheme window, select an item whose color you wish to changeLibrary Item or HTML Form tag, for exampleand set a text and/or background color using the color boxes. You can also make the code bold, italic, or underlined using the appropriate formatting buttons.

Dreamweaver highlights incorrect HTML code with bright yellow highlighting in Code view (circled). If you click inside the yellow area, the Property inspector reveals the mistake. In this case, a closing tag is missing. (In Design view, on the other hand, Dreamweaver indicates mistakes by showing the HTML tagthe characters <, b, and >, for examplein front of a bright yellow background.)

Browser error highlighting. Not all browsers understand all the HTML tags and properties available in Dreamweaver, especially since older browsers may not be aware of current standards. This feature, which is part of the Check Browser Support tool described in Section 15.2, lets Dreamweaver identify code that doesn't work with certain browsers.

Here's how you use it: In Code view, a squiggly red underline appears under code that doesn't work with the browsers you've told Dreamweaver to check (see Section 15.2.1). Mousing over the squiggly line produces a pop-up dialog box with a description of the problem.

For example, in Figure 10-5, mousing over the class attribute generates a message saying that it isn't supported by Navigator 3.0. (In other words, that old Windows 95 machine in the Museum of Ancient Computing might have trouble displaying this page.)

Library Items. Library Items and uneditable regions in pages built from templates appear with a light yellow background, signifying that you can't edit them in Code view. You can change this color, too, as described in Section 18.3.1. (For more on Templates and the Library, see Chapters 17 and 18.)

You can also control Code view display by using the View options menu in the toolbar (see Figure 10-6), or by using the View Code Options submenu.

The View Options menu on the Toolbar lets you modify the display of code in Code view. The Word Wrap option, for example, forces all code to fit inside the width of the window. If a line of code extends off the page, Dreamweaver wraps it to the next line (the highlighted code in this illustration). Your only clue that you're looking at one long line is that the entire glob of text has only a single line number.

Word Wrap. This option makes long lines of code wrap (at the window's edge) to the next line, so you don't have to scroll horizontally to see it all. This option affects only how Dreamweaver displays the line in the document window; it doesn't actually introduce line breaks.
Line Numbers. This automatic line numbering can come in handy when you're using Dreamweaver's Check Target Browser tool (Section 15.2), or when you encounter an error in a page containing server-side code (such as the code you create in Part VI of this book). You can also click on a line number in Code view to select the entire line, which is a great way to delete or cut a line of code.
Highlight Invalid HTML. This is the on/off switch for Dreamweaver's friendly tendency to highlight bad HTML in Code view (see Figure 10-5).
Syntax Coloring. This option turns tags, comments, and text into colorful (and informative) text.
Auto Indent. When you're working with nested HTML tags, it's often helpful to press the Tab key to indent each level of nested tags, making it easier to identify large blocks of HTML (a table and all its contents, for example). The Auto Indent option carries the same size indent onto the next line when you hit the Return or Enter key. For example, suppose you hit the Tab key twice, type a line of code, and then hit Return. Dreamweaver would place the insertion point on the next line, indented using two tabs.

10.2.1 Code Hints

Typing code can be a chore, which is why even long-time hand-coders take advantage of anything that helps speed up the process. A perfect example is Dreamweaver MX's Code Hints feature (shown in Figure 10-7). It lets you select tags, attributes, and even Cascading Style Sheet styles from a pop-up menu as you type.

Code Hints work with other tags as well as scripting languages like ASP.NET, Cold Fusion, and PHP. In addition, Dreamweaver MX 2004 introduces CSS code hints, so if you write your style sheets by hand, you can take advantage of the auto-completion features of Code hints to quickly type out CSS style names .

The Code Hints feature saves your tired fingers from typing tags and tag properties. Just select the appropriate item from a pop-up list and let Dreamweaver type it for you. Dreamweaver's even thoughtful enough to show you all available CSS styles when you insert a class attribute in a tag.

Here's how it works. After you begin a new tag by typing an opening bracket (<), a menu pops up, listing all available HTML tags. Use your mouse or arrow keys to select a tag, or type the first few letters of the tag and let Dreamweaver select the closest matching item. When you press Enter, Dreamweaver automatically fills in the tag name. Even better, a second menu now pops up, listing all the properties of that tag.

If the feature annoys you, you can get it out of your way. You can turn off Code Hints completely, rein it in by setting a delay (so that pop-up lists don't appear immediately), or turn off Code Hints for only selected types of elements (such as tag properties). To make any of these adjustments, open the Preferences panel by pressing Ctrl-U ( -U) and then select the Code Hints category. Make your desired changes to the Code Hints preferences, and click OK.

If you like Code Hints, you'll love the Snippets panel, which makes reusing code a snap. See Section 17.1 for details.

10.2.2 Setting Code Formatting

Whenever you use the Insert bar, Dreamweaver adds a chunk of HTML that's preformatted for easier reading. The code for table rows, for instance, comes indented using two spaces; the code for table cells , meanwhile, is indented four spaces. If you're particular about how your HTML is written, Dreamweaver gives you plenty of control.

NOTE

If you don't work in Code view frequently, you may not care a whit how your HTML is formatted in the fileand that's fine. As long as the underlying HTML is valid (and Dreamweaver always writes valid HTML), Web browsers can display HTML formatted in many different ways. In fact, Web browsers simply ignore multiple spaces, empty lines, and other "white space" characters used to make HTML code more readable.

Dreamweaver provides several ways to control the formatting of the code it produces. Basic settings are available in the Preferences window; advanced settings for obsessive coders even let you control the formatting of individual tags (see the Power Users' Clinic box in Section 10.2.2.4). For basic formatting settings, open the Preferences window (Edit Preferences or Ctrl+U [ -U]) and click the Code Format category (see Figure 10-8). While the default settings work fine, you can still configure a number of options:

10.2.2.1 Indents

To make your code easier to read, it helps to indent nested tags and other block-level elements. But if you'd prefer that Dreamweaver quit auto-indenting such elements, turn off Use Indents. This is also your opportunity to request tabs instead of spaces for indenting lines of code; just choose Tabs from the pop-up menu.

You can also set the amount of indentation, like this:

If Spaces is selected in the Use menu, type the number of spaces you want into the Indent Size field. The default setting is two, meaning each indent will be two spaces in the code.
If you selected Tabs in the Use menu, the number in the Tab Size field indicates the size of each tab, measured in spaces. (The size you specify here affects only the display in Code view. In the code itself, Dreamweaver simply inserts a plain tab character.)

For general control of HTML code, Dreamweaver offers the Code Format category in the Preferences window. For most people, this degree of control is overkill, but if the way HTML code appears in a page's file matters to you, go wild. (These settings don't affect how the page looks in a Web browseronly how the code appears when viewed in Dreamweaver's Code view or another text editor.)

10.2.2.2 Text Wrapping

When a line gets long, Dreamweaver can break it into two or more lines by inserting a hard return. This can make your HTML more readable in Code view and free you from having to scroll to see all of your code. If that's the way you like it, turn on Automatic Wrapping and type a number in the After Column field. The number specifies how many characters long a line must be before Dreamweaver attempts to break it up.

This option doesn't affect how the page will look to your visitors , only how it looks in a text editor. But unlike the simulated word wrap option shown in Figure 10-6, this option adds real line-break characters to split your code into multiple, shorter lines. If you use the Code view's word wrap, you can skip this more intrusive form of text wrapping.

NOTE

Although Dreamweaver can shorten lines by inserting returns after a specified number of characters, it never does so if the final effect will change the appearance of the Web page. The program is smart enough not to sacrifice the quality of a page just to make the code look better in Code view. That's why some lines of HTML may be considerably longer than the limit you specify here.

10.2.2.3 Line Breaks

Windows, Mac OS, and Unix each looks for a different invisible character at the end of each line of code. This expectation can cause problems when you use one kind of computer to create a page, while another OS runs the remote server that dishes out the page. Fortunately, Dreamweaver fixes the problem when it transfers a file to a Web server.

If you plan to use another text editor to edit your Dreamweaver pages, you should select your operating system from the Line Breaks pop-up menu. Doing so assures that the program on the receiving end will properly read the line breaks in Dreamweaver- produced pages.

10.2.2.4 Case for Tags and Attributes

You can write tag and property names using either uppercase letters (<B>bold</B>) or lowercase (<b>bold</b>); Web browsers don't care. However, you may care how they appear in your HTML display. If so, choose your preference from the two Case pop-up menus. Select either the lowercase or uppercase option from the two menus .

HTML may treat capital and lowercase letters in its tags identically, but XML, an up-and-coming language, does not. Both it and the hybrid language XHTML require all lowercase tag and property names.

That's why many Web developers now use strictly lowercase characters, even in their HTML. And that's why, if you select the XHTML option when creating a new page (Section 1.3.1), Dreamweaver will ignore an uppercase setting in the Preferences paneleven if you turn on the Override Case checkbox.

POWER USERS' CLINIC
Take Control of Code Formatting

For ultimate control over tag formatting, Dreamweaver MX introduces the Tag Library Editor. Not only does it let you control exactly how Dreamweaver formats every HTML tag it inserts into a page, it also lets you dictate the formatting for nine other tag libraries such as ASP, PHP, JSP, and Cold Fusion tags.

Even if you're using some new bleeding edge tag language unfamiliar to Dreamweaver, you're not out of luck. You can create additional tag libraries, and even import custom ASP. NET and JSP tags, as well as DTD Schemas for XML. You can also add additional tags to any library; so if the HTML standard suddenly changes, you can add new or remove obsolete tags.

To control the formatting of tags in a library, choose Edit Tag Libraries to open the Tag Library Editor window. A list of all tag libraries appears. Click the + symbol to the left of a tag library name to see a list of tags for that library. Select a tag, and then select formatting options from the Tag Format area in the bottom half of the window.

You can control where a line breaks in relation to the tagno line breaks after the tag; before and after the tag; or before, inside, and after the tag. In addition, you can choose whether any formatting rules are applied to the contents of a tag and choose the caseupper, lower, mixedto be used when Dreamweaver adds the tags to the code.

If you also turn on the Override Case checkboxes, you can make Dreamweaver scan tags and properties when opening a page created by someone else (or some other program). If their case doesn't match your preferences, Dreamweaver will rewrite them to fit the wishes of you, its master.

10.2.2.5 No Break After TD

Even though adding a line break after an opening <td> (table cell) tag may look good in Code view, in most browsers, it adds an unwanted extra space character in the table cell . Because the extra space can wreak havoc on your design, make sure this box is always turned on.

10.2.2.6 Centering

The Centering buttons let you specify which HTML tag you want Dreamweaver to use when centering block-level elements (like paragraphs) on the page. Leave "Use DIV tag" turned on. The center tag won't work in future browser versions.