|< Day Day Up >|
10.2 Code View
Dreamweaver provides several different ways to view a page's HTML code:
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.
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 half梐 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.)
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 document桯TML, ASP, CSS, or whatever梐nd click Edit Coloring Scheme. In the Edit Coloring Scheme window, select an item whose color you wish to change桳ibrary Item or HTML Form tag, for example梐nd 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 tag梩he characters <, b, and >, for example梚n front of a bright yellow background.)
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.
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.
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.
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.
If you don't work in Code view frequently, you may not care a whit how your HTML is formatted in the file梐nd 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 (EditPreferences 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:
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:
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 browser梠nly 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.
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.
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.
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.
|< Day Day Up >|