wiley adobe dreamweaver cs5 bible phần 2 doc

Enable Related Files option With the Enable Related Files option selected, Dreamweaver displays a link to any file referenced in the primary source document in the Related Files bar.. Th

extending preferences outside Dreamweaver

specifying your code formatting

everyone works differently Whether you need to conform to a

corpo-rate style sheet handed down from the powers that be or you think,

“It just looks better that way,” Dreamweaver offers you the flexibility

to shape your Web page tools and your code output This chapter describes

the options available in Dreamweaver’s Preferences and then details how

you can instruct Dreamweaver to format source code your way

Customizing Your Environment

The vast majority of Dreamweaver’s settings are controlled through the

Preferences dialog box You can open Preferences by choosing Edit ➪

Pref-erences (Dreamweaver ➪ PrefPref-erences) or by using the keyboard shortcut

Ctrl+U (Command+U) Within Preferences, you find 20 different subjects

listed on the left side of the screen As you switch from one category to

another by selecting a name from the Category list, the options available

for that category appear in the main area of the dialog box Most changes

to Preferences take effect immediately after you close the window by clicking

OK This chapter covers all the options available in each category; the

cat-egories are grouped by function rather than by order of appearance in the

Category list

General preferences

Dreamweaver’s General preferences, shown in Figure 3-1, cover the program’s appearance, user

operation, and fundamental file settings The appearance of the program’s interface may seem to

be a trivial matter, but Dreamweaver is a program for designers and coders, to whom work

envi-ronment is extremely important These user-operation options, described in the following

sec-tions, are based purely on how you, the user, work best

Figure 3-1

Dreamweaver’s General Preferences enable you to change your program’s appearance and certain overall

operations

Document options

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

and other files

Tip

In choosing all the preferences, including the General ones, you can work in two ways If you are a seasoned

Open Documents In Tabs option

This Macintosh-only checkbox tells Dreamweaver whether you want files to open in tabs instead

of separate windows Documents in tabs keep the workspace orderly and allow you to easily switch

between open files If you click the additional Always Show Tabs option, Dreamweaver will

dis-play every document with a tab, even if there is only one

Show Welcome Screen option

The welcome screen is a very helpful innovation that gets you up and running right away in

Dreamweaver — whether you’re just starting out or in the middle of editing a full site If you’re

new to the program, Dreamweaver’s welcome screen gives you quick access to tutorials and a

tour of the key features After you’ve worked with the program for a while, you’ll appreciate the

immediate access to the more recently opened files and one-click creation of static or dynamic

pages The welcome screen displays when Dreamweaver launches or when no document is

cur-rently open

The welcome screen is extremely handy, but if it doesn’t fit with your workflow, you can disable

it Clear the Show Welcome Screen checkbox and, depending on your other settings and actions,

the next time Dreamweaver opens you see either a blank, documentless environment or your

pre-viously opened files

The welcome screen changes from time to time because it includes a Flash movie (located in the

lower-right corner) that uses dynamically set parameters to display different information if you’re

connected to the Internet when running Dreamweaver

Reopen Documents On Startup option

In an ideal world, a Web designer works on one page at a time, carefully crafting each and

every detail Well, it’s far from an ideal world and often designers are working on several pages

simultaneously — and over multiple sessions If your workflow fits into this real-world model,

the Reopen Documents On Startup option makes your life a little easier

When I’m working on a Web application, I often have four to six pages (or more) open

simulta-neously If I’m continuing my work from one day to the next, the first thing I do is to make sure

I’ve opened all the files that I need With the Reopen Documents On Startup option selected,

Dreamweaver automatically opens any files left unclosed when I last quit the program If this

option is left unselected, you see either the welcome screen or a documentless environment

Warn When Opening Read-Only Files option

Read-only files have been locked to prevent accidental overwriting Optionally, Dreamweaver can

warn you when such a file is opened The warning is actually more than just an alert, however

Dreamweaver provides an option on the warning dialog box to make the file writable (or check it

out if you’re using the Check In/Check Out feature) Alternatively, you can just view the file

see Chapter 31 for more on the Check In/Check Out feature n

Although Dreamweaver enables you to edit the file either way, if the document is still read-only

when you save your changes, the Save As dialog box opens, and you’re prompted to store the file

under a new name

Enable Related Files option

With the Enable Related Files option selected, Dreamweaver displays a link to any file referenced

in the primary source document in the Related Files bar Click any related file link to view its

source code while continuing to show the rendered main page in Display or Live view Related

files can be CSS external files, server-side includes, Library items, JavaScript source files, or any

other type of file that is linked, included, or imported

The associated Discover Dynamic Related Files list determines whether you want Dreamweaver to

process the server-side code in a PHP, ColdFusion, or ASP page to identify any additional related

files on demand (the default Manually option), all the time (Automatically) or never (Disabled)

Most content management systems such as WordPress, Drupal, or Joomla rely on server-side

code to combine files for needed functionality With the Discover Dynamic Related Files option,

you can locate specific functions or styles that would otherwise remain hidden

Cross-Reference

Chapter 5 has all the details on how to make the most of the related Files feature n

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

Dream-weaver 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

select-ing 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

Dreamweaver offers to update all links when a file is moved or renamed

Editing options

The second main section of the General category of the Preferences dialog box consists of

numer-ous 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

Show Dialog When Inserting Objects option

By default, almost all the objects that Dreamweaver inserts — via either the Insert panel or the

Insert menu — open an initial dialog box to gather needed information In some cases, the dialog

box enables you to input a URL or browse for a source file Turning off the Show Dialog When

Inserting Objects option causes Dreamweaver to insert a default-sized object, or a placeholder, for

the object in this circumstance You must then enter all attributes through the Property inspector

Tip

To selectively avoid the prompts, leave this option checked, but press Ctrl+click (Option+click) on an object

to skip the prompt n

Enable Double-Byte Inline Input option

Some computer representations of languages, primarily Asian languages, require more raw

descriptive power than others The ideogram for snow, for example, is far more complex than a

four-letter word These languages need twice the number of bytes per character and are known as

double-byte languages In versions of Dreamweaver before 2, all double-byte characters had to go

through a separate text-input window, instead of directly into the Document window

Switch To Plain Paragraph After Heading option

This may seem like a small thing, but this nifty little feature is one of my favorites If the Switch

To Plain Paragraph After Heading option is not enabled, pressing Enter (Return) after a heading

tag (<h1> or <h2>, for example) causes the next line to maintain the heading style Select the

Switch To Plain Paragraph After Heading option so that the next line is a standard paragraph

(<p>) tag

Use this option to speed up your workflow You’ll almost always want a heading followed by a

plain paragraph This option gets rid of one more click of the mouse or shortcut key, making your

workflow that much faster

Allow Multiple Consecutive Spaces option

Some designers prefer adding two spaces after every period, or they like to use multiple spaces to

indent paragraphs to maintain a print-type appearance Without this option selected, this type of

spacing requires that you press Ctrl+Shift+Space (Command+Shift+Space) to add an &nbsp; to

the document Select the Allow Multiple Consecutive Spaces option, and Dreamweaver adds the

necessary code for you, without requiring the additional keyboard shortcut

Tip

This option may seem wonderful at first, but I recommend leaving it unchecked having a single space after a

sentence is the standard online and is even becoming standard practice in most print applications (You’ll find

no double spaces in this little tome.) enabling this option only encourages bad habits n

Use <strong> And <em> In Place Of <b> And <i> option

In new HTML and XHTML standards, the <b> and <i> tags are deprecated because they don’t

imply any structural significance to the text they surround Many screen readers may even

com-pletely ignore the <b> and <i> tags Check the Use <strong> And <em> In Place Of <b> And <i>

box to use the more syntactically correct <strong> and <em> tags in their place

The option to use <strong> and <em> tags enables you to create more descriptive HTML code

Individuals using screen readers benefit, and you make your code more syntactically correct,

fur-ther separating style from content

Warn When Placing Editable Regions Within <p> Or <h1>-<h6> Tags option

Sometimes Dreamweaver adheres a bit too strictly to the rules for my taste — and this

prefer-ence addresses one of those times In Dreamweaver templates, editable regions define areas of the

page that can be altered in the pages derived from templates Most often, designers wrap editable

regions around block elements such as headings or paragraphs However, there are occasions

when it is advantageous to make just the content within block tags editable and lock the

sur-rounding tags themselves I, for example, apply this technique when I want a template-derived

page to always start with a single <h1> heading, but know that the heading will always be

differ-To prevent novices from inadvertently limiting the expansion of content within an editable

region, Dreamweaver displays an alert whenever a template is saved that has an editable region

within a block element You can continue the save — and the subsequent updating of

template-derived pages — or you can cancel and correct the situation In previous versions, Dreamweaver

displayed this error without recourse, even when the coding it was protesting was intentional By

disabling the Warn When Placing Editable Regions Within <p> Or <h1>-<h6> Tags option, you

can avoid having to repeatedly dismiss the alert

If you’re new to Dreamweaver and its template technology, I recommend that you enable this

option Doing so will likely save you grief on your initial template-derived pages and prevent you

from having to redo the templates However, once you’ve worked with templates for a while, I

suggest you disable this option; the technique of embedding editable regions within block tags is

a common one and not having to acknowledge the alert over and over again is a major time-saver

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 ➪ Undo A limit

exists, however, to the number of steps that can be tracked By default, this option is set to 50

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

his-tory steps are not discarded when a file is saved

Spelling Dictionary option

The Spelling Dictionary option enables you to select a spell-checking dictionary from any of those

installed In addition to the standard English-language version, which has 15 options — Danish,

Dutch, English (American), English (British), English (Canadian), Finnish, French, German (Classic),

German (New Spelling), Italian, Norwegian (Bokml), Portuguese (Brazilian), Portuguese (Iberian),

Spanish, and Swedish — additional dictionaries exist online As of this writing, dictionaries in the

following other languages are also available: German, Spanish, Swedish, French, Italian,

Brazilian-Portuguese, and Catalan You can download these dictionaries from Adobe’s Dreamweaver

Exchange at www.adobe.com/support/dreamweaver/documentation/dictionary.html

After a dictionary is downloaded, save the .dat file in the Configuration\Dictionaries folder and

restart Dreamweaver

To select a different dictionary for spell checking, select the Dictionary option button and choose

an item from the drop-down list Dreamweaver also maintains a personal dictionary (although

it’s not visible on the list) to hold any words you want Dreamweaver to learn during the

spell-checking process So the next time you spell check a technical document, just click Add for each

word Dreamweaver catches that you want it to remember That word is added to the personal

dictionary, and you never have to worry about it again

Preferences for invisible elements

By their nature, all HTML markup tags remain unseen to one degree or another when presented

for viewing through the browser You may want to see certain elements while designing a page,

however For example, adjusting line spacing is a common task, and turning on the visibility of

the line break tag <br> can help you understand the layout

Dreamweaver enables you to control the visibility of 13 different codes, as well as dynamic data

and server-side includes — or rather their symbols, as shown in Figure 3-3 When, for example,

a named anchor is inserted, Dreamweaver shows you a small gold shield with an anchor emblem

Not only does this shield indicate the anchor’s position, but you can also manipulate the code

with cut-and-paste or drag-and-drop techniques Moreover, clicking a symbol opens the

perti-nent Property inspector and enables quick changes to the tag’s attributes

Tip

Temporarily hide all invisible elements by deselecting View ➪ Visual aids ➪ Invisible elements n

The 13 items controlled through the Invisible Elements panel are as follows:

Most of the Invisible Elements options display or hide small symbols in Dreamweaver’s visual

Document window Several options, however, show an outline or another type of highlight

Turning off Form Delimiter, for example, removes the dashed line that surrounds a form in the

Document window

You can show or hide any or all of the 13 invisible elements listed in the Preferences dialog box and

determine the appearance of recordset fields and includes

Tip

You may have noticed that the php, ColdFusion, active server page, and neT tags are combined into

one symbol, server Markup tags Dreamweaver’s capability to handle dynamic pages generated by

data-bases makes these invisible elements essential I generally leave the nonvisual server Markup Tags option

unchecked because these icons flag server-side coding in the page and tend to interrupt the flow of the

design n

Dreamweaver-developed pages often include references to dynamic text Dynamic text is replaced

by an entry from a recordset when the page is processed by the application server Dreamweaver

uses what is called dot notation in programming circles to fully display these names, such as

{rsMaillist.EmailAddress}, enclosed in curly braces When designing a page, the field

names may be longer than the actual data, and the full dot notation becomes a visual hindrance

rather than an aid In these situations, you may want to use Dreamweaver’s alternative dynamic

text syntax, an empty pair of curly braces: {} Enable this option from the Show Dynamic Text

As drop-down list on the Invisible Elements panel

When designing dynamic sites you may often use server-side includes to speed development and

updates Unfortunately, rendering these in the design window can often cause problems if you

are conditionally including multiple files Clear the Show Contents Of Included File option to

disable rendering your server-side includes

Highlighting preferences

Dreamweaver is extremely extensible — custom functions are automatically incorporated,

server-side markup is more acceptable, and more third-party tags are supported Many of these features

depend on hidden capabilities that are not noticeable in the final HTML page The Web designer,

however, must consider them Dreamweaver employs user-selectable highlighting to mark areas

on a Web page under construction

The Highlighting panel of the Preferences dialog box, shown in Figure 3-4, enables you to choose

the highlight color for eight different types of extended objects

In each case, select the color swatch to open Dreamweaver’s color picker and choose a highlight

color Then, use the Eyedropper to pick a color from the Web-safe palette or from the desktop

After you’ve chosen an appropriate color, be sure to select the related Show checkbox so that the

highlighting is displayed; all but the highlighting for nested editable regions can be toggled to be

shown or hidden

Note

You can see the Locked region highlighted in Templates only if you open the Code view; the Display view

highlights editable regions only You see the Live Data highlighting only while actually viewing your page in

Live Data mode n

Use the Highlighting preferences to control how template regions, library items, and third-party tags appear

in the Document window

Status Bar preferences

The Status Bar is a handy collection of different tool sets: the Tag Selector, the Select tool, the

Hand tool, the Zoom tool, the Set Magnification pop-up menu, the Window Size pop-up menu,

and the Connection Speed indicator The Status Bar category of the Preferences dialog box,

shown in Figure 3-5, controls options for two of the tools

Window Sizes option

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

win-dow 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

moni-tor 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

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:

1. From the Status Bar category of the Preferences dialog box, locate the last entry in the

current list If the last entry is not immediately available, use the vertical scroll bar to move to the end

2. Click once in the Width column on the line below the last entry

3. Enter the desired width of the new window size in pixels

4. Press Tab to move to the Height column

5. Enter the desired height for the new window size

6. Press Tab again

7. Optionally, you can enter short, descriptive text in the Description column, and then

press Tab when you’re finished

8. To continue adding new sizes, repeat Steps 2 through 6 Click OK when you finish

Caution

Connection Speed option

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

vari-ety 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

con-nection rates — if you are building a page for the mass market, you might still consider

select-ing 56 Use the 128 settselect-ing 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

File Types / Editors preferences

Refinement is often the name of the game in Web design, and quick access to your favorite

modifica-tion tools — whether you’re modifying code, graphics, or other media — is one of Dreamweaver’s

key features The File Types / Editors category, shown in Figure 3-6, is where you specify the

pro-gram you want Dreamweaver to call for any file type you define

Figure 3-6

Assign your favorite HTML, graphics editors, and more through the newly extended File Types / Editors

category of the Preferences dialog box

Open In Code View option

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

External Code Editor option

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

Dream-weaver to varying degrees Both of the editors can be called from within DreamDream-weaver, 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

Enable BBEdit Integration (Macintosh only) option

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

Reload Modified Files option

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

external editor:

Prompt:

L Detects when files are updated by another program and enables you to decide

whether to update them within Dreamweaver

Save On Launch option

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:

If you try to open a file that has never been saved in an external editor, Dreamweaver prompts you to save

it regardless of your preference settings If you opt not to save the file, the external editor is not opened,

because it has no saved file to display n

Fireworks option

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

Defining editors for different file types

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

start-ing 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

If you have the same file type both defined to Open In Code View and set up in the editor list, the file defaults

to opening in Code view n

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,

pre-fer 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:

1. Select the file type from the Extensions list

2. Click the Add (+) button above the Editors list The Add External Editor dialog box opens

3. Locate the application file of the editor and click Open when you’re ready You can also

select a shortcut to or alias for the application

4. If you want to select the editor as the primary editor, click Make Primary while the

edi-tor is highlighted

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

Tip

Looking for a good, almost-all-purpose media editor? QuickTime pro makes a great addition to Dreamweaver

as the editor for aIFF, aU, WaV, Mp3, aVI, MOV, animated GIF, and other files The pro player is

wonder-ful for quick edits and optimization, especially with sound files It’s available from the apple Web site (www.

apple.com/quicktime) for both platforms for around $30 n

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

Cross-Reference

Make sure that your graphics program is adept at handling the three graphic formats used most on the Web:

GIFs, JpeGs, and pnG images One optimal choice is adobe Fireworks, a graphics editor designed specifically

for the Web, which integrates seamlessly with Dreamweaver In fact, it integrates so nicely that this book

includes an entire chapter on it, Chapter 24 n

Copy/Paste preferences

full range of original formatting Moreover, you can even drag entire documents right onto the

Dreamweaver Web page — what happens next depends on the settings in the Copy/Paste

prefer-ences, shown in Figure 3-7

With the Copy/Paste options, you can determine how text from documents outside of

Dream-weaver is added to the page Best of all, this feature works hand-in-glove with the new Paste

Special command, which gives you the opportunity to change the settings on a case-by-case basis

Figure 3-7

The Copy/Paste settings affect any text pasted into Dreamweaver

The four main Copy/Paste options are:

Text Only:

L Pastes completely unformatted text; even line breaks or paragraphs are removed

Text With Structure:

L Pastes unstyled text while retaining structured elements such as lists, paragraphs, line breaks, and tables

Text With Structure Plus Basic Formatting:

italic, and underline, to structured text If the text is copied from an HTML document, the pasted text retains any HTML text style tags, including <b>, <i>, <u>, <strong>,

Two other options are available for modifying your copy/paste preferences The Retain Line

Breaks option maintains line breaks in pasted text; if you choose Text Only, this option is

disabled The Clean Up Word Paragraph Spacing option works with the Text With Structure

and Text With Structure Plus Basic Formatting choices to remove additional space between

paragraphs

New Document preferences

Dreamweaver has greatly improved the New Document interface You can now quickly choose

which type of document you want to create, as well as select from built-in page designs and CSS

The New Document dialog appears each time you press Ctrl+N (Command+N) or choose File ➪

New Use the New Document preferences (shown in Figure 3-8) to refine how you interact with

the New Document dialog

Figure 3-8

Choose your default document extensions, encoding, and HTML version

Default Document option

The Default Document menu contains all the default document types in the New Document

dia-log box (File ➪ New) Choose the document type you want to be the default for quickly creating

new documents If you design ASP applications more often than plain HTML files, just choose

ASP VBScript or ASP JavaScript from the list menu You can also choose templates, XML files,

PHP files, and the list goes on

Default Extension option

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

Default Document Type option

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 ➪ Convert and then selecting one of the entries

presented in the sub-list

Encoding options

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

accom-panying 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

con-verted 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)

Show New Document Dialog Box On Control+N option

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

Adjusting Advanced Features

Evolution of the Web and its language, HTML, never ends New features emerge, often from

lead-ing browser developers A developer often introduces a feature similar to those marketed by his

competitors but that works in a slightly different way The HTML standards organization — the

World Wide Web Consortium, also known as the W3C — can then endorse one approach or

introduce an entirely new method of reaching a similar goal Eventually, one method usually

wins the approval of the marketplace and becomes the accepted coding technique

To permit the widest range of features, Dreamweaver enables you to designate how your code

is written to accommodate the latest Web features: accessibility options, AP elements, and style

sheets The default preferences for these elements offer the highest degree of cross-browser and

backward compatibility If your Web pages are intended for a more specific audience, such as a

Netscape Navigator–only intranet, Dreamweaver enables you to take advantage of a more specific

feature set Furthermore, Dreamweaver also gives you control over its Layout mode, enabling you

to set options globally or on a site-by-site basis

Accessibility preferences

Dreamweaver offers much improved support for accessibility options With the passing of the

Section 508 statute (www.usdoj.gov/crt/508/508home.html), all government agencies are

required to make their sites as accessible as possible (and making your own site accessible isn’t

such a bad idea) Dreamweaver makes that transition just a little easier for you by allowing you to

manage which accessibility options you want to enable by using the accessibility preferences, as

shown in Figure 3-9

Show Attributes When Inserting option

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

Keep Focus In The Panel When Opening option (Windows only)

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

Choose the tags where you want additional accessibility options to appear while you are coding

Offscreen Rendering option (Windows only)

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 preferences

Aside from helping you control the underlying coding method for producing AP elements,

Dreamweaver enables you to define the default AP element An AP element is a page element,

often a <div> tag that is absolutely positioned This capability is especially useful during a major

production effort in which the Web development team must produce hundreds of AP elements

spread over a Web site Being able to specify in advance the initial size, color, background, and

visibility saves numerous steps — each of which would have to be repeated for every AP element

Figure 3-10 shows the layout of the AP Elements category of the Preferences dialog box The

con-trols accessible through the AP Elements category are described in the following sections

In the AP Elements category of Preferences, you can predetermine the structure of the default

Dreamweaver AP element

Visibility 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

ele-ment is visible and the child AP eleele-ment 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

Width and Height options

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

and shape at your current cursor position The Width and Height options enable you to set these

defaults Select the text boxes and type in your new values Dreamweaver’s default is an AP

ele-ment that is 200 pixels wide and 115 pixels high

Background Color option

AP elements can have their own background colors independent of the Web page’s overall

back-ground 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

Caution

note that although you can specify a different background color for the ap element, you can’t alter the

ap element’s default text and link colors (except on an ap-element-by-ap-element basis) as you can with a

page If your page and ap element background colors are highly contrasting, be sure your text and links are

readable in both environments a similar caveat applies to the use of an ap element’s background image, as

explained in the next section n

Background Image option

Just as you can pick a specific background color for AP elements, you can select a different

back-ground image for AP elements You can type a file source directly into the Backback-ground 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

back-ground image

Nesting option

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

over-lapping 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

Nested AP elements are shown in the AP Elements panel as child entries and unnested ones are depicted

on the same level

CSS Styles preferences

The CSS Styles category (see Figure 3-12) is entirely devoted to how your code is written As

specified by the W3C, CSS declarations — the specifications of a style — can be written in

several ways One method displays a series of items, separated by semicolons:

Certain properties (such as Font) have their own grouping shorthand, developed to be more

readable to designers coming from a traditional print background A second, shorthand method

of rendering the preceding declaration follows:

H1 { font: bold 12px/14px Arial, Helvetica, sans-serif; }

With the CSS Styles category, you can enable the shorthand method for any or all the five

dif-ferent properties that permit it Select any of the checkboxes under Use Shorthand For to have

The second option on the CSS Styles category determines how Dreamweaver edits styles in

previ-ously coded pages If you want to retain the format of the original page, click Use Shorthand If

Original Used Shorthand If you want Dreamweaver to write new code in the manner that you

specify, select Use Shorthand According To Settings Above

Figure 3-12

The CSS Styles category enables you to code the style sheet sections of your Web pages in a graphics

designer–friendly manner

The final option in this group, Open CSS Files When Modified, gives the designer a bit of a safety

net when working with external CSS files With this option enabled, Dreamweaver does indeed

open the CSS file when you make a change in any of the CSS rules, whether through the CSS

Style definition dialog or the Relevant CSS panel; however, it’s important to understand why the

CSS file is opened If the file is not opened, Dreamweaver cannot undo the CSS modification It’s

not necessary to switch to the CSS file and undo the changes from that document; Dreamweaver

handles the modifications from any page linked to the external CSS file You must, however, save

the CSS file when you’re done, confirming the final styles being used Although it may seem a

bit awkward to have an external file open while working on another, I recommend selecting the

Open CSS Files When Modified option

panel; what happens next depends on the settings of the final group of options in this

prefer-ence category Under the When Double-Clicking In CSS Panel options, there are three choices

The first, Edit Using CSS Dialog, opens Dreamweaver’s standard CSS Definition dialog box The

second, Edit Using Properties Pane, reveals the Properties pane of the CSS Styles panel, if

neces-sary, and puts the focus on the first property’s value The final option, Edit Using Code View,

displays the selected rule in Code view whether it is contained in the current document or in an

external file

Making Online Connections

Dreamweaver’s visual layout editor offers an approximation of your Web page’s appearance in the

real world of browsers — offline or online After you’ve created the initial draft of your Web page,

you should preview it through one or more browsers And when your project nears completion, you

should transfer the files to a server for online, real-time viewing and further testing through a File

Transfer Protocol (FTP) program Dreamweaver gives you control over all these stages of

Web-page development through the Site and Preview In Browser categories

Site preferences

As your Web site takes shape, you spend more time with the Files panel portion of Dreamweaver

The Site category, shown in Figure 3-13, enables you to customize the look-and-feel of your site,

as well as to enter essential connection information The available Site preferences are described

in the following sections

Always Show Local/Remote Files On The Right/Left option

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!

Dependent Files options

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

Enabling the Prompt checkboxes causes Dreamweaver to ask you if you’d like to move the

depen-dent files when you transfer an HTML file Choose to see the dialog box for Get/Check Out, Put/

Check In, or both

Tip

You’re not stuck with your Dependent Files choice If you turn off the Dependent Files prompt, you can make

it appear by pressing the alt (Option) key while clicking the Get or put button n

Figure 3-13

Options for Dreamweaver’s Files panel are handled through the Site category

FTP Connection: Disconnect After Minutes Idle option

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

FTP Time Out 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

FTP Transfer option: Select Default Action In Dialogs After 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

Caution

This action is enabled by default, but be sure you know what the default values for most dialogs are before

checking this box The default action for uploading files is to include dependent files If you have out-of-date

files on your local machine, the latest awesome logo your graphic designer uploaded last night might be

over-written n

Firewall Host and Firewall Port options

Dreamweaver enables users to access remote FTP servers outside their network firewalls A

fire-wall 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

net-work administrator

Caution

If you’re having trouble transferring files through the firewall via FTp, make sure the Use Firewall (in preferences)

option is enabled in the site Definition dialog box You can find the option on the Testing server category n

Put options

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 ➪ Put

command — without saving the file first In this situation, Dreamweaver prompts you with a

dialog box to save your changes However, you can avoid the dialog box and automatically save

the file by choosing the Save Files Before Putting option

Move options

Every now and then sites need to be restructured To make sure that all the appropriate

depen-Manage Sites button

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

Cross-Reference

see Chapter 4 to learn how to use the site definitions n

Preview In Browser preferences

Browser testing is an essential stage of Web page development Previewing your Web page within

the environment of a particular browser gives you a more exact representation of how it looks

when viewed online Because each browser renders the HTML with slight differences, you should

preview your work in several browsers Dreamweaver enables you to select both a primary and

secondary browser, which can both be called by pressing a function key You can name up to 18

additional browsers through the Preview In Browser category shown in Figure 3-14 This list of

preferences is also called when you choose File ➪ Preview in Browser ➪ Edit Browser List

Figure 3-14

The Preview In Browser category lists browsers currently available for preview and enables you to modify

the list

To add a browser to your preview list, follow these steps:

1. Choose Edit ➪ Preferences (Dreamweaver ➪ Preferences) or press the keyboard

short-cut Ctrl+U (Command+U)

2. Select the Preview In Browser category

3. Click the Add (+) button

4. Enter the path to the browser file in the Path text box or click the Browse button to pick

the file from the Select Browser dialog box

5. After you have selected your browser application, Dreamweaver fills in the Name field

You can alter this name if you want

6. If you want to designate this browser as your primary or secondary browser, select one

of those checkboxes in the Defaults section

7. Click OK when you’re finished

8. You can continue to add browsers (up to a total of 20) by following Steps 3 through 7

Click OK when you’re finished

After you’ve added a browser to your list, you can modify your selection by following these steps:

1. Open the Preview In Browser category and highlight the browser you want to alter

2. Click the Edit button to open the Edit Browser dialog box

3. After you’ve made your modifications, click OK to close the dialog box

Tip

You can quickly designate a browser as your primary or secondary previewing choice without going through

the edit screen From the preview In Browser category, select the desired browser and check either primary

Browser or secondary Browser note that if you already have a primary or secondary browser defined, this

action overrides your previous choice n

You can also easily remove a browser from your preview list Follow these steps:

1. Open the Preview In Browser category and choose the browser you want to delete from

the list

2. Click the Remove (–) button and click OK

Dreamweaver can use temporary files for previewing your work in a browser The temporary

files generally have TMPXXXXX.html-type names and are automatically deleted when you quit

Dreamweaver With this option selected, Dreamweaver previews the last saved file; if your file

has been modified since the last save, Dreamweaver asks if you’d like to save the file This option

is unchecked by default

If you have this checkbox selected, and Dreamweaver does not shut down normally, the temporary files are

not deleted Feel free to delete them the next time you launch Dreamweaver n

Customizing Your Code

For all its multimedia flash and visual interactivity, the Web is based on code The more you

code, the more particular about your code you are likely to become Achieving a consistent

look-and-feel to your code enhances its readability and, thus, your productivity In Dreamweaver, you

can even design the HTML code that underlies a Web page’s structure

Every time you open a new document, the default Web page already has several key elements

in place, such as the language in which the page is to be rendered Dreamweaver also enables

you to customize your work environment by selecting default fonts and even the colors of your

HTML code

Fonts preferences

In the Fonts category, shown in Figure 3-15, you can control the basic language of the fonts as

seen by a user’s browser and the fonts that you see when programming The Font Settings

sec-tion enables you to choose Western-style fonts for Web pages to be rendered in English, one of

the Asian languages — Japanese, Traditional Chinese, Simplified Chinese, Thai, or Korean — or

another language, such as Arabic, Cyrillic, Greek, Hebrew, or Turkish If you change the Font

Settings in the Page Properties for a document, the font sizes defined in these preferences are used

Dreamweaver now offers 15 encoding options on Windows and 19 on the Mac One of the

encodings, Unicode, has platform-specific configurations, so be sure to check the options before

you make a selection

In the bottom portion of the Fonts category, you can alter the default font and size for three

Use the Fonts category to set the font encoding for each Web page and the fonts you use when

programming

For all font options, select your font by clicking the list and highlighting your choice of font

Change the font size by selecting the value in the Size text box or by typing in a new number

In Windows, if you select Unicode from the Font Settings list, a special option, Use Dynamic

Font Mapping, appears When this option is selected, Dreamweaver examines the current font

family to make sure all the required glyphs are available If they are not, the font family is replaced

with a similar one that does keep the unknown character symbol — the blank rectangle — from

appearing It is recommended that you enable this option to preserve readability The Macintosh

always relies on dynamic mapping for the Unicode setting

Caution

Don’t be misled into thinking that by changing your proportional Font preference to arial or another font,

you cause all your Web pages to appear automatically in that typeface Changing these font preferences affects

only the default fonts that you see when developing the Web page; the default font that the user sees is

con-trolled by the user’s browser To ensure that a different font is used, you have to specify it for any selected

text through the Text properties inspector n

Code Hints preferences

With Code Hints, your work in Code view is much more productive You can now start typing

a tag in Code view, and Dreamweaver shows you a list of available codes Start typing <b and a

list appears with <b> highlighted Type <bl and <blockquote> is highlighted After the tag you

want is highlighted, just press Enter (Return) to insert the proper tag But wait, there’s more The

Code Hints also include all the available attributes for each tag, and when you add the closing >

symbol, the matching closing tag can be automatically inserted for you The Code Hints

prefer-ences shown in Figure 3-16 determine how Code Hints work for you

Close Tags option

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

Options: Enable Code Hints

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

Code Rewriting preferences

The exception to Dreamweaver’s policy of not altering imported code occurs when HTML or

other code is incorrectly structured Dreamweaver automatically fixes tags that are nested in the

wrong order or have additional, unnecessary closing tags — unless you tell Dreamweaver

other-wise by setting up the Code Rewriting preferences accordingly (see Figure 3-17)

Figure 3-17

The Code Rewriting category can be used to protect nonstandard HTML from being automatically changed

by Dreamweaver

Dreamweaver accommodates many different types of markup languages, not just HTML,

through the Never Rewrite Code In Files With Extensions option Moreover, you can prevent

Dreamweaver from encoding special characters such as spaces, tildes, and ampersands in URLs

or attribute values Dreamweaver is now extremely flexible The following sections describe each

of the options available through the Code Rewriting category

Fix Invalidly Nested And Unclosed Tags option

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

Rename Form Items When Pasting option

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

sup-plied dynamically, and you don’t want that code overwritten Uncheck this box to prevent

Dreamweaver from renaming all your form elements

Remove Extra Closing Tags option

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>

Tip

In some circumstances, you want to ensure that your pages remain as originally formatted If you edit pages in

Dreamweaver that have been preprocessed by a server unknown to Dreamweaver (prior to displaying the

pages), be sure that you disable both the Fix Invalidly nested and Unclosed Tags option, where possible, and

the remove extra Closing Tags option n

Warn When Fixing Or Removing Tags option

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

Caution

remember that after you’ve enabled these rewrite Code options, the fixes occur automatically If this

sequence happens to you by mistake, immediately close the file (without saving it!), disable the Code

rewriting preferences options, and reopen the document n

Never Rewrite Code preferences

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

Special Characters Encoding preferences

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

URL Encoding preferences

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

char-acters to their decimal equivalents, preceded by a percent sign Spaces became %20, tildes (~)

became %7E, and ampersands were converted to &amp; 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

Code Coloring preferences

HTML code is a combination of the tags that structure the language and the text that provides

the content A Web page designer often has difficulty distinguishing swiftly between the two —

and finding the right code to modify Dreamweaver enables you to set color preferences for the

code as it appears in Code view or the Code inspector You can not only alter colors for the

back-ground, default tags, and text and general comments, but also specify certain tags to get certain

colors

Dreamweaver now enables you to specify color-coding for individual document types If you

want different code coloring in VBScript documents, HTML, and PHP documents, you can

cus-tomize the coloring for each individually The only color on the main dialog box is the default

background color This isn’t the page background color, but the Code view background color

To modify any of the elements for a specific document type, select the document type as

illus-trated in Figure 3-18 and click Edit Coloring Scheme

After you click Edit Coloring Scheme, you get the Edit Coloring Scheme For HTML dialog box,

which enables you to change every facet of Dreamweaver’s color coding, as shown in Figure 3-19

Figure 3-18

Use the Code Coloring category to custom color-code the HTML inspector

The Edit Coloring Scheme dialog box provides a method to completely customize the way you view your

raw page code

The left-hand Styles For box contains every type of tag you could ever want to color Just select

a tag type and then click the color swatch to select one of the 216 colors displayed in the color

picker After the color picker opens, you can also choose the small palette icon to select from

the full range of colors available to your system The color picker also enables you to use the

Eyedropper tool to pick a color from the Document window

As you change colors, you can see a preview of how your code looks in the Preview window

Code Format preferences

Dreamweaver includes a fantastic tool for customizing your HTML with the easy-to-use,

point-and-click preferences category called Code Format Most of your HTML code parameters can be

controlled through the Code Format category

In the Code Format category, you can also decide whether to use indentations — and if so,

whether to use spaces or tabs and how many of each — or to turn off indents for major elements

such as tables and frames You can also globally control the case of your HTML tags and their

attributes As you can see in Figure 3-20, the Code Format category is full-featured

To examine the available options in the Code Format category, separate them into four areas:

The Code Format category enables you to shape your HTML to your own specifications

Indent control options

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