The first area of the General category, Document Options, determines how you work with HTML and other files.

Update Links option

As your site grows in complexity, keeping track of the various links is an increasingly difficult task. Dreamweaver has several enhanced features to help you manage links, and the Update Links When Moving Files option is one of them. Dreamweaver can check each link on a page when a file is moved — whether it is the Web page you're working on or one of the support files, such as an image, that goes on the page. The Update Links option determines how Dreamweaver reacts when it notes an altered link.

By default, the Update Links When Moving Files option is set to Prompt, which causes Dreamweaver to alert you to any link changes and requires you to verify the code alterations by clicking the Update button, as shown in Figure 3-2. To leave the files as they are, click the Don't Update button. You can elect to have Dreamweaver automatically keep your pages up-to-date by selecting the Always option from the Update Links drop-down list. Finally, you can select the Never option, and Dreamweaver ignores the link changes necessary when you move, rename, or delete a file.

As a general rule, I keep my Update Links option set to Always. It is a very rare circumstance when I intentionally maintain a bad link on my Web page. Likewise, I recommend using the Never option with extreme caution.

Figure 3-2. Dreamweaver offers to update all links when a file is moved or renamed.

The second main section of the General category of the Preferences dialog box consists of numerous checkbox options you can turn on or off. Overall, these options fall into the user-interaction category, reflecting how you like to work. Take the Show Dialog When Inserting Objects option, for example. Some Web creators prefer to enter all their attributes at one time through the Property inspector and would rather not have dialog boxes appear for every inserted object. Others want to get their file sources in immediately and modify the rest later. The choice depends on how you want to work. The following sections describe various other options.

Maximum Number Of History Steps option

Almost every Dreamweaver action, except the mouse click, is listed in the History panel. These steps can be undone by moving the slider on the History panel or choosing Edit

Although 50 history steps are more than enough for most systems, you can alter this number by changing the Maximum Number Of History Steps value. When the maximum number of history steps is exceeded, the oldest actions are wiped from memory and made unrecoverable. The history steps are not discarded when a file is saved.

The Window Sizes list at the top of the Status Bar category shows the current options for the Window Size pop-up menu. This list is completely user-editable and enables you to add new window sizes, modify existing dimensions, add descriptions, or delete rarely used measurements.

As discussed in Chapter 2, the Window Size pop-up is a Dreamweaver feature that enables you to instantly change your screen size so that you can view and build your page under different monitor conditions. To change any of the current dimensions, simply click the measurement you want to alter and enter a new value. You can also change any description of the existing widths and heights by clicking in the Description column and entering your text. Although you can enter as much text as you like, it's not practical to enter more than about 15 to 20 characters.

Figure 3-5. Use the Status Bar category to evaluate your real-world download times and control the size of your Document window.

To enter a new set of dimensions in the Window Sizes list box, follow these steps:

Dreamweaver understands that not all access speeds are created equal, so the Connection Speed option enables you to check the download time for your page (or the individual images) at a variety of rates. The Connection Speed setting evaluates the download statistics in the status bar. You can choose from seven preset connection speeds, all in kilobits per second: 14.4, 28.8, 33.6, 56, 64, 128, and 1,500. The lower speeds (14.4 through 56) represent various dial-up modem connection rates — if you are building a page for the mass market, you might still consider selecting 56. Use the 128 setting if your audience connects through an ISDN line. If you know that everyone will view your page through a direct LAN connection, change the connection speed to 1,500. You are not limited to these preset settings. You can type any desired speed directly into the Connection Speed text box. If you find yourself designing for an audience using DSL or cable modems, change the Connection Speed to 150 or higher.

It's not just an HTML world — many code types are commonly found on a Web designer's palette such as XML, XSL, PHP, and Perl. Dreamweaver's internal code is full-featured enough to handle a wide variety of code and, with the Open In Code View option, you can determine which types you'd like it to handle. By default, JavaScript (.js), text (.txt), and Active Server Application (.asa) files are automatically opened in Code view. Dreamweaver attempts to open any other selected file type in Design view.

If you find yourself hand-editing other file types, such as XML files, you can add their extension to the Open In Code View field. Separate extensions with a space, and be sure to begin each one with a period.

Dreamweaver recognizes the importance of your choice of a text editor. Although Dreamweaver ships with two extremely robust code editors — as well as its excellent built-in code editor — you can opt to use any other program. To select your editor, enter the path in the External Code Editor text box or click the Browse button to choose the appropriate executable file.

Two editors, BBEdit for Macintosh and HomeSite for Windows, are integrated with Dreamweaver to varying degrees. Both of the editors can be called from within Dreamweaver, and both have Dreamweaver buttons for returning to the main program — switching between the editor and Dreamweaver automatically updates the page. Like Dreamweaver's internal HTML editor, BBEdit highlights the corresponding code to a selection made in Dreamweaver; this property does not, however, extend to HomeSite. You specify and control your external editor selection with the options listed in the sections that follow.

Dreamweaver for Macintosh ships with this option activated. If you prefer to use another editor, deselect this option. Clear this box to enable the External Code Editor fields.

The drop-down list for the Reload Modified Files setting offers three choices for working with an external editor:

Personally, I prefer to have Dreamweaver always update my files. I find that it saves a couple of mouse clicks — not to mention time.

Any external HTML editor — even the integrated HomeSite or BBEdit — opens and reads a previously saved file. So, if you make any changes in Dreamweaver's visual editor and switch to your editor without saving, the editor shows only the most recently saved version. You have three options to control this function:

Here, again, as with Reload Modified Files, I prefer to always save my files when switching back and forth.

Dreamweaver enjoys a tight integration with its sister graphics program, Adobe Fireworks. To empower Dreamweaver with Fireworks capabilities, such as Launch and Edit, Dreamweaver has to know where Fireworks is installed. If you install Studio 8, the path to Fireworks is prefilled for you and shown in this option. If you install Fireworks separately, you'll need to click Browse and locate the Fireworks executable.

Dreamweaver has the capability to call an editor for any specified type of file at the click of a button. For example, when you import a graphic, you often need to modify its color, size, shape, transparency, or another feature to make it work correctly on the Web page. Rather than starting your graphics program independently, you load the image, make the changes, and resave the image. Dreamweaver enables you to send any selected image directly to your editor. After you've made your modifications and saved the file, the altered image appears automatically in Dreamweaver.

The capability to associate different file types with external editors applies to more than just images in Dreamweaver. You can link one or more editors to any type of media — images, audio, video, even specific kinds of code. The defined external editor is invoked when the file is double-clicked in the Files panel. Because the editors are assigned according to file extension, as opposed to media type, one editor can be assigned to GIF files and another to JPEGs. The selection is completely customizable.

When you double-click a file in the Files panel, that file type's primary editor runs. Dreamweaver offers the capability to define multiple editors for any file extension. You might, for instance, prefer to open certain JPEGs in Fireworks and others in Photoshop. To choose an alternative editor, right-click (Control+click) the filename in the Files panel and select the desired program from the Open With menu option. The Open With option also enables you to browse for a program.

To assign an editor to an existing file type, follow these steps:

To add a new file type, click the Add (+) button above the Extensions list and enter the file extension — including the period — in the field displayed at the bottom of the list. For multiple file extensions, separate each extension with a space, as shown here:

.doc .dot .rtf

Finally, to remove an editor or a file extension, select it and click the Delete (−) button above the corresponding list. Note that removing a file extension also removes the associated editor.

The Default Document menu contains all the default document types in the New Document dialog box (File

You can define a default extension for each document type in Dreamweaver. This means that if your server requires all ASP files to have the .dan extension and all your ColdFusion pages to have the .joe extension, you can change the extension to fit your needs. Simply enter the desired file extension, with a leading period, in the Default Extension field.

A document type, or DTD, is a line of code found at the top of an HTML page that lets the browser know how to render the following file. DTDs are also used to validate the page against a chosen set of specifications.

The Default Document Type option enables you to select which DTD, if any, you'd like to include by default. This option is originally set to XHTML 1.0 Transitional, a standard now among many Web designers. You can choose from other XHTML and HTML selections including HTML 5. You can always change the DTD by choosing File

The Encoding options determine the character set in which you want your Web page to be displayed. The Default Encoding option for the English version of Dreamweaver is initially set to Western European. Developers of multilanguage sites may find it better to choose Unicode (UTF-8) as the encoding option. New pages use whatever choice you make from the Default Encoding list; however, the encoding can be altered in the Page Properties on a per-page basis. When opening existing pages without an encoding, the selected encoding is added if the accompanying option (Use When Opening Existing Files That Don't Specify An Encoding) is checked.

The Unicode Normalization Form list enables you to choose how the Unicode characters are converted to binary format. The Include Unicode Signature option determines whether a byte order mark (BOM) is attached to the file. Neither option has any effect unless the Default Encoding is set to Unicode (UTF-8).

If you consistently use the same document type, clear the Show New Document Dialog Box On Control+N (Command+N) box to prevent the New Document dialog box from coming up when you press Ctrl+N (Command+N). This can measurably speed up creating new documents. Leave this box checked to see the New Document dialog box every time you create a new document.

Check the box next to each tag for which you want to view additional accessible options when you insert that object into your page. If you check the box next to Form Objects, you get an expanded dialog the next time you insert any form element, such as a text field or checkbox.

Inserting a form element with the accessibility options enabled gives you a much wider range of options, including labels and the capability to set an access key and tab index. The same holds true for frames, media, and images.

When Dreamweaver opens a panel, such as the Files panel or CSS Styles panel, it typically returns focus to the Document window, either in Design view or Code view. If you're using a screen reader, you'd then need to locate and select the opened panel to work in it. Apply the Keep Focus In The Panel When Opening option to maintain selection in the opened panel.

Figure 3-9. Choose the tags where you want additional accessibility options to appear while you are coding.

Dreamweaver uses double buffering (drawing into an off-screen bitmap before drawing to the screen) to prevent flickering. Unfortunately, this confuses screen readers, devices that help blind people use applications (such as Dreamweaver). If you're using a screen reader, disable this option.

AP elements can be either visible or hidden when the Web page is first loaded. An AP element created using the default visibility option is always displayed initially; however, no specific information is written into the code. Selecting Visible forces Dreamweaver to include a visibility:visible line in your AP element code. Likewise, if you select Hidden from the Visibility options, the AP element is initially hidden.

Use the Inherit option when creating nested AP elements. Creating one AP element inside another makes the outer AP element the parent and the inner AP element the child. If the parent AP element is visible and the child AP element is set to visibility:inherit, the child is also visible. This option makes it possible to affect the visibility of many AP elements with one command — hide the parent AP element, and all the inheriting child AP elements disappear as well.

When you choose Draw AP Div from the Insert panel, you drag out the size and shape of your AP element. Choosing Insert

AP elements can have their own background colors independent of the Web page's overall background color (which is set as a <body> attribute). You can define the default background color of any inserted AP element through either the Insert menu or the Insert panel. For this preference setting, type a color, either by its standard name or as a hexadecimal triplet, directly into the text box. You can also click the color swatch to display the Dreamweaver browser-safe color picker.

Just as you can pick a specific background color for AP elements, you can select a different background image for AP elements. You can type a file source directly into the Background Image text box or select your file from a dialog box by clicking the Browse button. The AP element's background image supersedes the AP element background color, just as it does in the HTML page. Similarly, just as the page's background image tiles to fill the page, so does the AP element's background image.

The two best options regarding AP elements seem to be directly opposed: overlapping and nesting AP elements. You can design AP elements to appear one on top of another, or you can code AP elements so that they are within one another. Both techniques are valuable options, and Dreamweaver enables you to decide which one should be the overriding method. The AP Elements panel is capable of displaying both approaches, as shown in Figure 3-11.

If you are working primarily with nested AP elements and plan to use the inheritance facility, check the Nest When Created Within An AP Div option. If your design entails a number of overlapping but independent AP elements, make sure this option is turned off. Regardless of your preference, you can reverse it on an individual basis by pressing the Ctrl (Command) key when drawing out your AP elements.

Figure 3-11. Nested AP elements are shown in the AP Elements panel as child entries and unnested ones are depicted on the same level.

The full-screen Files panel is divided into two panes: one showing local files and one showing remote files on the server. By default, Dreamweaver puts the local pane on the right and the remote pane on the left. However, Dreamweaver enables you to customize that option. Like many designers, I'm used to using other FTP programs in which the remote files are on the right and the local files on the left; Dreamweaver enables me to work the way I'm used to working.

To switch the layout of your expanded Files panel, switch to full-screen mode and open the Site preferences. Select the file location you want to change to (Local Files or Remote Files) from the Always Show drop-down list or select the panel you want to change to (Right or Left) from the On The drop-down list. Be careful not to switch both options or you end up where you started!

Web pages are seldom just single HTML files. Any graphic — whether it's in the background, part of your main logo, or used on a navigational button — is uploaded as a separate file. The same is true for any additional multimedia add-ons such as audio or video files. If you've enabled File Check In/Check Out when defining your site, Dreamweaver can also track these so-called dependent files.

Enabling the Prompt checkboxes causes Dreamweaver to ask you if you'd like to move the dependent files when you transfer an HTML file. Choose to see the dialog box for Get/Check Out, Put/Check In, or both.

Figure 3-13. Options for Dreamweaver's Files panel are handled through the Site category.

You can easily forget you're online when you are busy modifying a page. You can set Dreamweaver to automatically disconnect you from an FTP site after a specified interval. The default is 30 minutes; if you want to set a different interval, you can select the FTP Connection value in the Disconnect After text box. Dreamweaver then asks if you want to continue to wait or to disconnect when the time limit is reached, but you can maintain your FTP connection regardless by deselecting this option.

Client-server communication is prone to glitches. Rather than hanging up your machine while trying to reach a server that is down or slow, Dreamweaver alerts you to an apparent problem after a set period. You can determine the number of seconds you want Dreamweaver to wait by altering the FTP Time Out value. The default is 60 seconds.

I often start a large FTP process (like uploading an entire site) and then go for my morning blast of coffee. Unfortunately, this means that I sometimes miss a prompt, such as "Do you want to overwrite this file?" or "Do you want to upload all dependent files?" With earlier versions of Dreamweaver, I'd come back an hour later (I drink a lot of coffee) and nothing would be done. Check this handy option to have Dreamweaver accept the default action for the prompt after a set number of seconds.

Dreamweaver enables users to access remote FTP servers outside their network firewalls. A firewall is a security component that protects the internal network from unauthorized outsiders while enabling Internet access. To enable firewall access, enter the Firewall Host and External Port numbers in the appropriate text boxes; if you do not know these values, contact your network administrator.

Certain site operations, such as putting a file on the remote site, are now available in the Document window. It's common to make an edit to your page and then quickly choose the Site

Every now and then sites need to be restructured. To make sure that all the appropriate dependent files are transferred when an HTML file is moved, select the Prompt Before Moving Files On Server option.

Dreamweaver offers access to your site definitions from the Preferences dialog box. Just click the Manage Sites button to open the Manage Sites dialog box. This option is the same as choosing Manage Sites from the Sites pop-up on the Files panel.

Dreamweaver gives you two ways to handle code completion. The first option, After Typing "</", works by inserting the closing tag after you enter the first two characters. This has become my preferred technique because it allows me to enter the opening tag, the enclosed code, and then to close it with just two characters.

If you prefer the legacy method, choose the After Typing The Open Tag's ">" option. With this option selected, after I type <b> into Code view, the corresponding </b> will be added as soon as I type the last > in the bold tag.

Figure 3-16. Code Hints speed your coding while keeping your entries accurate, whether you're working in HTML or CSS.

Auto Tag Completion is one of my favorite features in Dreamweaver, and it definitely keeps me from forgetting those pesky closing tags. Whichever method suits you best, I recommend you select one of them and speed up your coding.

This checkbox determines whether you get the new Dreamweaver Code Hints. If you have this box enabled, you can set the delay before the Code Hints drop-down menu appears. I leave the delay set to 0 so that Code Hints display as soon as I start typing.

When enabled, this option repairs incorrectly placed tags. For example, if a file contains the following line:

<h3><b>Welcome to the Monkey House!</h3></b>

Dreamweaver rewrites it as follows:

<h3><b>Welcome to the Monkey House!</b></h3>

Open that same file with this option turned off, and Dreamweaver highlights the misplaced code in the Document window. Double-clicking the code brings up a window with a brief explanation.

In general, static Web pages require each form element to be uniquely named; with this option selected, you can quickly insert a series of text fields with similar attributes and be assured that they are individually named. However, with dynamic applications, the names may be supplied dynamically, and you don't want that code overwritten. Uncheck this box to prevent Dreamweaver from renaming all your form elements.

When you're editing your code by hand, it's fairly easy to miss a closing tag. Dreamweaver cleans up such code if you enable the Remove Extra Closing Tags option. You may, for example, have the following line in a previously edited file:

<p>And now back to our show...</p></i>

Notice that the closing italic tag, </i>, has no matching opening partner. If you open this file in Dreamweaver with the Remove option enabled, Dreamweaver plucks out the offending </i>.

If you're editing a lot of Web pages created on another system, you should enable the Warn When Fixing Or Removing Tags option. If this setting is turned on, Dreamweaver displays a list of changes that have been made to your code in the HTML Corrections dialog box. The changes can be quite extensive when Dreamweaver opens what it regards as a poorly formatted page.

Many of the database connectivity programs, such as ColdFusion, use proprietary tags embedded in a regular Web page to communicate with their servers. Dreamweaver enables you to explicitly protect file types identified with a particular file extension.

To enter a new file type in the Never Rewrite Code options, select the In Files With Extensions field. Enter the file extension of the file type, including the period, at the end of the list. Be sure to separate your extensions from the others in the list with a space on either side.

By encoding special characters such as <, >, &, and " in attribute values, Dreamweaver ensures that the characters are interpreted correctly by the browser. This works well for static pages, but many dynamic pages use the same characters in their server-side code. If you find that your application server is misinterpreting attributes with these characters, disable the Encode <, >, &, And " In Attribute Values Using & option.

In addition to the rewriting of proprietary tags, many middleware vendors face another problem when trying to integrate with Dreamweaver. By default, earlier versions of Dreamweaver encoded all URLs so that Unix servers could understand them. The encoding converted all special characters to their decimal equivalents, preceded by a percent sign. Spaces became %20, tildes (∼) became %7E, and ampersands were converted to &. Although this is valid for Unix servers and helps to make the Dreamweaver code more universal, it can cause problems for many other types of application servers.

Dreamweaver gives you the option to disable the URL encoding, if necessary, or choose the type of encoding you prefer for special characters. If you choose to encode them using &#, Dreamweaver uses numeric character entities; this is the default option. Select the Encode Special Characters In URLs Using % option and Dreamweaver uses decimal equivalents.

In general, however, it's best to leave the URL encoding option set to the default unless you find your third-party tags being rewritten destructively.

Indenting your code generally makes it more readable. Dreamweaver defaults to indenting most HTML tags with two spaces, giving extra indentation grouping to tables and frames. All these parameters can be altered through the Code Format category of the Preferences dialog box.

The first indent option enables indenting, and you can switch from spaces to tabs. To permit indenting, make sure a checkmark is displayed in the Indent checkbox. If you prefer your code to be displayed flush left, turn off the Indent option altogether.

To use tabs instead of the default spaces, select Tabs from the drop-down list. If you anticipate transferring your code to a word-processing program for formatting and printing, you should use tabs; otherwise, stay with the default spaces.

Dreamweaver formats both tables and frames as special indentation groups. Within each of these structural elements, the related tags are indented (or nested) more than the initial two spaces. As you can see in Listing 3-1, each table row (<tr>) is indented within the table tag, and the table data tags (<td>) are nested within the table row.

<table border="1" width="75%">
 <tr>
   <td>Row 1, Column 1</td>
   <td>Row 1, Column 2</td>
   <td>Row 1, Column 3</td>
 </tr>
 <tr>
   <td>Row 2, Column 1</td>
   <td>Row 2, Column 2</td>
   <td>Row 2, Column 3</td>
 </tr>
</table>

The other two items in the indent control section of the Code Format preferences category are Indent and Tab Size. Change the value in Indent to establish the size of indents using spaces. To alter the size of tab indents, change the Tab Size value.

The browser is responsible for ultimately formatting an HTML page for viewing. This formatting includes wrapping text according to each user's screen size and the placement of the paragraph tags (<p>...</p>). Therefore, you control how your code wraps in your HTML editor. You can turn off the automatic wrapping feature or set it for a particular column through the line control options of the Code Format category.

The Line Break Type setting determines which line break character is appended to each line of the page. Each of the major operating systems employs a different ending character: Macintosh uses a carriage return (CR), Unix uses a line feed (LF), and Windows uses both (CR LF). If you know the operating system for your remote server, choosing the corresponding line break character ensures that the file has the correct appearance when viewed online. Click the drop-down arrow next to Line Break Type to select your system.

The case of HTML tags is becoming more and more important. In XHTML, all tags and attribute names must be in lowercase. If you're coding in regular HTML, case is only a personal preference among Web designers. That said, some Webmasters consider case a serious preference and insist that their code be all uppercase, all lowercase, or a combination of uppercase and lowercase. Dreamweaver gives you control over the tags and attributes it creates, as well as over case conversion for files that Dreamweaver imports. The Dreamweaver default for both tags and attributes is lowercase.

You can also use Dreamweaver to standardize the letter case in tags of previously saved files. To alter imported files, select the Override Case Of Tags and/or the Override Case Of Attributes options. When enabled, these options enforce your choices made in the Case For Tags and Case For Attributes option boxes in any file Dreamweaver loads. Again, be sure to save your file to keep the changes.

The TD Tag option ensures that there is no line break after the <td> tag in your document. Putting a line break after the <td> can create display anomalies in some browsers, such as unwanted space. I recommend leaving this one checked.

Just as the format of HTML code matters to many Web designers, so does the format of the embedded or attached CSS code. Clicking the CSS button opens the CSS Source Format Options dialog box (see Figure 3-21), which offers a range of controls to stylize your style sheets.

Most designers find that, like HTML code, CSS code is easier to read if it is indented. The Indent Properties option enables you to set the amount of tabs or spaces to use for each indentation. Readability is also enhanced by selecting the Each Property On Separate Line option, which has two related options: you can force the opening brace ({) onto a separate line if you prefer and restrict the rule to a single line if there is only one property. You'll also have the choice to keep all your selectors on the same line and to place a blank line between defined rules.

The format of your CSS, perhaps even more than your HTML, is completely up to the designer's personal preferences. I try to strike a balance between readability and compactness by selecting all the options except Opening Brace On Separate Line and Blank Line Between Rules.

Figure 3-21. Control your CSS look-and-feel with the CSS Source Format Options.