Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

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 WindowCode 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 ViewCode 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
(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:

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.