Wile Adobe dreamweaver CS5 Bible phần 9 pps

To keep a digital record, click the Save Report button in the Browser Compatibility Check panel to generate an XML report file.. The detail section of the browser check report, shown in

Trang 1

Maximizing

Cross-Browser

Compatibility

In ThIs ChapTerMaintaining different versions

of Web pages Validating your XML code Testing your page against specific browsers handling cross-browser compatibility

each new release of a browser is a double-edged sword On one hand,

an exciting array of new features becomes possible On the other,

Web designers have to cope with yet another browser-compatibility

issue In today’s market, you find the following in use:

A fair number of current browsers, although reasonably

ranges from the Apple iPhone, with its faithful but Flash-less (as

of this writing) Web page rendering, to tiny cell phone screens

that display text and links only

Browser compatibility is one of a Web designer’s primary concerns (not to

mention the source of major headaches), and many strategies are evolving

to deal with the issue Dreamweaver is at the forefront of cross-browser

Web page design, both in terms of the type of code it routinely outputs

and in its specialty functions This chapter examines the browser-targeting

techniques available in Dreamweaver From multi-browser code to XML

validation capabilities, Dreamweaver helps you get your Web pages out

with the most features to the widest audience

Trang 2

Converting Pages in Dreamweaver

Web sites are constantly upgraded and modified You’ll eventually need to enhance a more

tradi-tional site with new features, such as AP elements Some of the older sites used elaborately nested

tables on their pages to create a semblance of absolute positioning; normally, upgrading these

Web pages takes hours and hours of tedious cutting and pasting Dreamweaver can bring these

older pages up-to-speed with the Convert Tables to AP Divs command, which you reach via Modify

Convert ➪ Tables to AP Divs Dreamweaver also includes a command to convert tables to AP

ele-ments, preserving their location but enabling greater design flexibility and dynamic control A

Webmaster’s life just got a tad easier

The Convert Tables to AP Divs command can also be used to convert a page created by another

Web authoring program that uses nested tables for positioning After tables have been transformed

into AP elements, the layout of the entire page is much easier to modify It’s even possible to make

the switch to more modern capabilities, modify your page, and then, with the Convert AP Divs to

Tables command, re-create your older page in a newer format

The name of the Convert Tables to AP Divs command is a little misleading After you issue this

command, every HTML element in the new page — not just the tables — is placed in an AP

ele-ment Moreover, every cell with content in every table is converted into its own AP eleele-ment In

other words, if you are working with a 3 × 3 table in which one cell is left empty, Dreamweaver

creates eight different AP elements just for the table

Note

If you want to convert an older page to a page with ap elements, but the page has no tables, Dreamweaver

places all the content in one ap element, as if the <body> tag were one big single-cell table n

To convert an older Web page with (or without) tables to a more modern standards-compliant

Web page with AP elements, follow these steps:

1 Choose Modify ➪ Convert ➪ Tables to AP Divs.

2 Select the desired options from the Convert Tables to AP Divs dialog box that opens (see

Figure 30-1):

Prevent Overlaps:

L Isolates all AP elements from one another AP elements need to remain separate if the opposite process (Convert AP Divs to Tables) is invoked

Show AP Elements Panel:

L Displays the AP elements panel for easy selection and renaming of the newly created AP elements

Show Grid:

L Reveals the standard grid, useful for aligning AP elements

Snap to Grid:

L Every new AP element created is positioned to the closed grid point

Exercise caution when choosing this option because your table layout is likely to be highly revised

3 When you’re done, click OK to close the dialog.

Trang 3

Dreamweaver converts the page immediately If you need to return to a table-based layout,

choose File ➪ Convert ➪ AP Divs to Tables

Cross-Reference

To learn how to use Dreamweaver’s ap Divs to Tables roundtrip features, see Chapter 10 n

Figure 30-1

The Convert Tables to AP Divs dialog box

Validating Your Code

Most browsers are very forgiving They can take a document riddled with HTML infractions

and, through “intelligent” interpretation, manage to display the page beautifully, with no

indica-tion that anything is awry with the underlying code As a responsible Web author, however, you

should never rely on the kindness of your users’ browsers! It’s far safer to take the extra time to

validate the correctness of your code’s syntax rather than risk having a browser that’s less

forgiv-ing than you had hoped

Note

To validate your hTML page, most Web professionals find that the W3C service is the most complete service

Validate your hTML ( http://validator.w3.org) or Css (http://jigsaw.w3.org/css-validator)

by inserting the UrL of your published page or uploading the file directly n

Fortunately, Dreamweaver can help You can use its built-in Validator to check a document’s code

for tag or syntax errors The Validator supports a wide range of tag-based languages, including

XHTML, XML, CFML (ColdFusion Markup Language), SMIL 1.0 (Synchronized Multimedia

Integrated Language), and WML (Wireless Markup Language) And you can customize how the

Validator works, as discussed in the next section, “Setting Validator preferences.”

To validate your code, follow these steps:

1 Open the document you want to validate.

2 If it is an XML or XHTML file, choose File ➪ Validate ➪ As XML For ColdFusion,

choose File ➪ Validate ➪ ColdFusion; for other files, press Shift+F6 After the Validator runs, the results — filenames, line numbers, and error descriptions — are listed in the Validation panel, as shown in Figure 30-2

Trang 4

It’s up to you to decide how to handle errors flagged by Dreamweaver’s Validator

3 Double-click an error in the list to display the offending code in the document.

4 To display the error report in your primary browser, click the Browse Report button To

keep a record of the report, print the browser page or click the Save Report button to generate an XML report file

Tip

right-click (Control+click) in the Validation panel to bring up a context menu that lets you browse the error

report, save the report, and more n

Trang 5

Setting Validator preferences

You can customize how the Validator works by changing its preferences For example, you

can specify which languages the Validator should check against and which types of errors the

Validator should hunt down To set your Validator preferences:

1 Choose Edit ➪ Preferences (Dreamweaver ➪ Preferences) to open the Preferences

dialog box and then click the Validator category to display the Validator options (see Figure 30-3)

2 Select the languages you want the Validator to check against.

Figure 30-3

You can use the options in the Validator category of the Preferences dialog box to customize the workings

of your Dreamweaver Validator

Note

If you validate CFML (ColdFusion) and hTML in the same document, the Validator won’t be able to assess the

number sign (#) correctly Why not? Because, in CFML, # is an error and ## is correct, but in hTML, the

con-verse is true: ## is an error and # is correct n

3 Click Options to open the Validator Options dialog box (see Figure 30-4).

Trang 6

Use the Validator Options dialog box to exercise further control over your Validator’s range

4 Under Display, select the error types you want the Validator report to display Under

Check For, select the items you want the Validator to look for

5 Click OK to close the Validator Options dialog box; then click OK to close the

Preferences dialog box

Checking Your Page for Compatibility

Testing is an absolute must when you’re building a Web site It’s critical that you view your pages

on as many browsers/versions and platforms as possible — especially in the age of CSS design

Variations in layout, color, gamma, page offset, and capabilities must be observed before they can

be adjusted

A more basic, preliminary type of testing can also be done right from within Dreamweaver

Dreamweaver’s Browser Compatibility Check feature (File ➪ Check Page ➪ Browser Compatibility)

enables you to check a Web page — or an entire Web site — against any number of browser

profiles for known CSS issues Currently, Dreamweaver comes with profiles for the following

browsers:

Internet Explorer 5.2, Macintosh Netscape 8.0 Safari 3.0

Trang 7

You can choose to check your page or site against a single browser profile, all of them, or

any-thing in between Although not a substitute for real-world testing, the Browser Compatibility

Check feature can help you pinpoint potential issues and problematic code at design time

Dreamweaver checks for common CSS errors across the full range of browsers When the error is

detected, a brief description appears in the Browser Compatibility Check category of the Results

panel In addition, a link to a more in-depth discussion of the error, complete with possible

solu-tions, on the Adobe-hosted CSS Advisor mini-site is made available

The errors and a brief description are listed in Table 30-1

Table 30-1

Browser Compatibility Errors

Positioned Tables/

AP Elements Bug

A positioned table is not considered a container for absolutely positioned elements The AP elements are positioned relative to the browser window instead.

Firefox 1.0, Firefox 1.5, Firefox 2.0, Netscape 7.0, Netscape 8.0

Border Chaos Bug When the second of two consecutive block-level

boxes has a negative top margin and that same box

or one of its ancestors has a border, the borders will not render correctly.

Safari 2.0

The Disappearing List

Background Bug When list items have background colors or images, and the list is placed within a floated, relatively

positioned container, the backgrounds may not render as specified.

Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0

Floated List Bug

A drop-down menu (select) inside a floated list (ul, ol, dl) with overflow: auto will disappear when the user changes the menu’s value.

Firefox 1.0

Disappearing

Dropdown in

Floated List Bug

A drop-down menu (select) inside a floated list (ul, ol, dl) with overflow: auto will not be visible unless the menu is inside a form tag.

Internet Explorer for Macintosh 5.2

continued

Trang 8

CSS Error Description Browsers Affected

Disappearing Label/

Input Bug If a group of floated <label>foo</label>

<input /> pairs is separated by br tags and placed inside any container (including the body) on which the letter-spacing property is set, one of the following problems occurs, depending on whether line breaks or other whitespace occurs between the tags: (1) every other pair disappears; (2) only the first label and input appear; (3) all inputs appear, but all labels except the first disappear.

Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0

Duplicate

Indent Bug

When a margin is applied to a floated box on the opposite side as the direction of the float, and the floated box is directly followed by inline content, the first line of inline content will be indented by the same amount as the margin.

Escaping Floats Bug If a series of floats followed by a clearing div is

placed inside a container with no specified width

or height, and the floats’ width exceeds the natural width of the container, the container will not expand vertically to fit the floats — and the floats will extend outside the container.

Expanding Box

Problem

Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0 Extra Whitespace in

List Links Bug If a link with display: block and no explicit

dimensions is inside a list item, any spaces or line breaks that follow the list item in the code will cause extra whitespace to appear in the browser.

First Line/Text

Transform Bug text-transform: uppercase is ignored when

applied to the :first-line pseudoelement.

Safari 2.0

Float Drop Problem If a container (including the browser window itself)

is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.

continued

Table 30-1 (continued)

Trang 9

Floating

Non-Float Bug

If a non-floated element with a specified width directly follows a left-floated element with a specified width, the non-floated container will appear to the right of the floated element instead

of allowing the floated element to overlap it.

Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0, Internet Explorer for Macintosh 5.2 Overlapping Floats

and Headers Bug

If the second or any subsequent float in a document

is directly preceded by a header, the first line of text after the float will overlap the float rather than wrapping around it.

Firefox 1.0

Font Variant/Text

Transform Conflict transform: uppercase and

text-transform: lowercase are ignored when combined with font-variant: small-caps.

Internet Explorer 5.0, Internet Explorer 5.5, Internet Explorer 6.0, Internet Explorer 7.0, Internet Explorer for Macintosh 5.2 Full Height

Flash Bug

A Flash movie with a height of 100% will not fill the browser window unless height: 100% is specified for the movie’s container.

Firefox 1.0, Firefox 1.5, Firefox 2.0, Netscape 7.0, Netscape 8.0

Guillotine Bug If an element contains both a float that is not cleared

and links that use an a:hover rule to change certain properties in non-floated content after the float, hovering over the links could cause the bottom of the floated content to be chopped off.

Half Line-Height Bug If line-height is defined for a block, it will

collapse by half for any line that contains an inline replaced element (img, input, textarea, select, or object).

Magik Creeping

Text Bug

Text inside a block element will creep to the left if the block is nested inside another block element that has border-left, padding-bottom, and

no specified width or height.

Internet Explorer 5.5, Internet Explorer 6.0

Internet Explorer 5.5

continued

Trang 10

Three Pixel Text Jog When anonymous line boxes (boxes that contain

inline content) are adjacent to a float, a 3-pixel gap appears between the line box and the edge of the float This gap disappears when the content clears the float, causing the content to “jog” 3 pixels in the direction of the float Note that the gap may be difficult to see when left-aligned text is adjacent to

a right float, but it does exist — and it can lead to

“float drop” in tight layouts.

Unscrollable

Content Bug

If one or more absolutely positioned elements are placed within a relatively positioned element with no assigned dimensions, either no scrollbar will appear at all, or it will not extend far enough

to view all of the content (Note: This bug will not affect your page if the content in the AP element does not extend beyond the height of the viewport.)

Z-Index Bug Positioned containers define a new stacking order,

even when the computed z-index of the container

is auto This can cause positioned children of the container to appear above other positioned elements on the page when they should not.

Checking your pages

Given the vast array of browsers — and their widely varying capabilities — many designers find

that keeping a page problem-free is a significant challenge Dreamweaver can help you stay on

your chosen path, alerting you to errors on demand

The Check Browser Compatibility command is found under the Document toolbar’s Check Page

menu button When selected, Dreamweaver tests the page when it is opened against the browsers

selected in the Target Browsers dialog box, as shown in Figure 30-5

To modify the current settings, follow these steps:

1 Choose Settings from the Browser Compatibility Check menu.

2 In the displayed Target Browsers dialog box, select the browsers you want to verify

your pages against

3 For each selected browser, choose the minimum version for testing from the drop-

down list

4 When you’re finished, click OK.

Trang 11

Use the Target Browsers dialog box to choose the minimum browser versions that you want to work

cor-rectly with your pages

Excluding page elements from error checking

Dreamweaver includes built-in syntax rules for each browser which generally are applied to each

file checked However, you have the option to exclude specific tags, attributes, or attribute values

from the testing process This feature is extremely useful when your designs must include an

ele-ment unsupported by one or more browsers and you don’t want to be reminded of the issue each

time the page is checked The list of excluded elements is contained in the Exceptions.xml file

maintained in the Configuration/BrowserProfiles folder Dreamweaver gives you quick access to

modifying this file when you open the Browser Check menu and choose Edit Ignored Error List

To modify the Exceptions.xml file, follow these steps:

1 From an HTML file, open the Browser Check menu from the Document toolbar and

choose Edit Ignored Error List

Tip

This command is not available from XML files n

Dreamweaver opens the Exceptions.xml file

2 Enter any desired exceptions in the XML file between the <exceptions> </exceptions>

tag pair As noted in the file comments, the following three types of exceptions are allowed:

Browser Compatibility Issue <issue id=”THREE_PIXEL_JOG” name=”Three

Pixel Text Jog”/>

CSS Property <cssProperty property=”font-family”/>

CSS Value <cssValue property=”font-family”/>

Trang 12

3 Add the desired exception in the proper format Make sure that your code is outside the

commented section but inside the <exceptions> </exceptions> tag pair

4 When you’re finished, save the file.

Tip

To quickly add an error to the exceptions list, you can right-click (Control+click) on any displayed error

in the Browser Compatibility Check category of the results panel and choose Ignore error to add it to the

Exceptions.xml file n

Viewing and correcting errors

If Dreamweaver finds any errors on your page, they are listed in the Browser Compatibility Check

category of the Results panel Double-click any error listing to highlight the problematic section

To see the errors one at a time, choose Check Page ➪ Next Error or Check Page ➪ Previous Error

You can verify your change has eliminated the error by using any of the methods described in the

following steps:

1 Open the Check Page ➪ Browser Compatibility Check menu or choose File ➪ Check

Page ➪ Browser Compatibility Dreamweaver checks the page and lists the results in the Browser Compatibility Check category of the Results panel, as shown in Figure 30-6

This is a handy debugging tool; it lists a relevancy rating, the line number, the issue name, and a short description for each item found

Figure 30-6

The Browser Compatibility Check panel displays a summary of all the errors it finds for the current file

Trang 13

The relevancy rating indicates how sure Dreamweaver is that the highlighted selection

is affected by the indicated issue There are four relevancy rating symbols ranging from

a quarter-filled to a completely filled circle — the more filled the circle, the more sure Dreamweaver is of its assessment

For more detailed information, click the View Solutions link to visit a related page in the CSS Advisor section of Adobe.com See the “Visiting the CSS Advisor” sidebar for more details about this informative Web resource

Double-clicking an item in the list selects the affected element Dreamweaver displays the results temporarily and deletes them when you check another page or close the program

2 To display a report of these results in your primary browser (see Figure 30-7), click the

Browse Report button

3 To keep a hard copy record, print the Dreamweaver Browser Compatibility Check page

from your browser To keep a digital record, click the Save Report button in the Browser Compatibility Check panel to generate an XML report file

Figure 30-7

Send the Browser Compatibility Check error report to your browser for printing or easy viewing

Trang 14

The Dreamweaver Browser Compatibility Check report offers both a summary and a detail

sec-tion The summary lists the browser(s) being tested and any errors or warnings Totals for each

category are listed beneath the columns

The detail section of the browser check report, shown in Figure 30-8, lists the following:

The file path and nameL

The relevancy ratingL

A description of the offending issue L

The browsers that do not support the tag or attributeL

The issue nameL

Line numbers indicating where the error occurredL

Using the results of the Browser

Compatibility Check

How you handle the flagged errors in Dreamweaver’s Browser Compatibility Check report is

entirely dependent on the design goals you have established for your site If your mission is to be

totally accessible to every browser on the market, you need to look at your page and/or site with

the earliest browsers and pay special attention to those areas of possible trouble noted by the report

On the other hand, if your standards are a little more relaxed — or more targeted — you can

ignore errors related to browsers that rarely visit your site

Visiting the CSS Advisor

One of the most difficult CSS-related tasks is debugging — and fixing — browser compatibility issues

Because of the vast number of variations possible with CSS layouts, not every problem is immediately

identifiable much less reparable The CSS Advisor mini-site on Adobe.com (www.adobe.com/go/

cssadvisor) takes a community-based approach to help Web developers find their way out of the

CSS jungle

Each time you run Dreamweaver’s Browser Compatibility Check and discover a problem, a

context-sensitive link to the relevant article in the CSS Advisor site is made available An issue page succinctly lays

out the problem and solution — and, best of all, goes into detailed steps for implementing the solution,

complete with sample code

Trang 15

To keep up with the moving target nature of CSS rendering in browsers, the CSS Advisor relies on a series

of community experts, both within and outside of Adobe, to supply the most widely adopted resolutions

Visitors can comment on any CSS Advisor article; these comments, if judged relevant, are incorporated

into the site Moreover, visitors can rate each article according to its usefulness and applicability

Trang 16

You can find detailed information on the lower half of the Dreamweaver Browser Compatibility Check report

Summary

Unless you’re building a Web site for a strictly controlled intranet (for which everyone is using the

same browser), it’s critical that you address the browser-compatibility issues that your Web site is

certain to face Whether it’s cross-browser or backward compatibility you’re trying to achieve,

Dreamweaver has features and techniques in place to help you get your Web pages viewed by

the maximum number of users When addressing browser-compatibility issues, keep these points

Trang 17

You can use JavaScript within a Web page to handle cross-browser compatibility L

prob-lems with 4.0 and later browsers

You can use Dreamweaver’s built-in, customizable Validator to check your code for tag L

or syntax errors on XML, XHTML, and ColdFusion pages

Dreamweaver enables you to check your Web page, selected pages, or an entire Web site L

against a browser profile to look for CSS implementations that cause a known problem

in one or more browsers

In the next chapter, you learn how to use Dreamweaver for building Web sites in a team

environment

Trang 19

Building Web Si

with a team

In ThIs ChapTerKeeping current with Check In/ Check Out

storing information with Design notes

assembling interactive reports Integrating with Contribute Using Visual sourcesafe with Dreamweaver

accessing a WebDaV server source control with subversion

Major Web sites that are designed, developed, and maintained by

one person are increasingly rare After a site has reached a certain

complexity and size, it’s far more timely and cost-effective to divide

responsibility for different areas among different people For all its positive

aspects, team development has an equal number of shortcomings — as

any-one who has had his or her work overwritten by another developer working

on the same page will attest

Dreamweaver includes a number of features that make it easy for teams to

work together In addition to the existing Check In/Check Out facility,

ver-sion control and collaborative authoring have been enabled in Dreamweaver

through the connectivity to the WebDAV (Web Distributed Authoring and

Versioning) standard Of special note is Dreamweaver’s robust support for

Subversion, the open source version control system

Another member of the Adobe software family, Contribute, is tightly

inte-grated with Dreamweaver Contribute-enabled sites can be administered

directly from within Dreamweaver with full access to the latest version of

Contribute administrative controls

In addition to providing links to industry-standard protocols used in

team development, Dreamweaver also includes a more accessible Design

Notes feature When custom file columns (which rely on Design Notes to

store their information) are set up, a project’s status is just a glance away

For more detailed feedback, Dreamweaver’s Reports command provides

an interactive method for uncovering problems and offers a direct link to

Trang 20

fixing them As with many Dreamweaver features, the Reports mechanism is extensible, which

means JavaScript-savvy developers can create their own custom reports to further assist their

team This chapter examines the various Dreamweaver tools — both old and new — for

develop-ing Web sites with a team

Following Check In/Check Out Procedures

Site development can be subdivided in as many different ways as there are site development teams

In one group, all the graphics may be handled by one person or department, whereas layout

is handled by another, and JavaScript coding by yet another Or, one team may be given total

responsibility over one section of a Web site — the products section, for example — whereas

another team handles the services division No matter how the responsibilities are shared, the

danger of overlap always exists Two or more team members might unknowingly work on the

same page, graphic, or other Web element — and one person’s work might replace the other’s

when the work is transferred to the remote site Suddenly, the oh-so-efficient division of labor

becomes a logistical nightmare

Dreamweaver’s core protection for team Web site development is its Check In/Check Out

sys-tem When properly established and adhered to, the Check In/Check Out system stops files

from being overwritten improperly It also lets everyone on the team know who is working

on what file, and it provides a direct method of contacting team members, right from within

Dreamweaver

As with any team effort, to get the most out of the Check In/Check Out system everybody must

follow the rules:

Rule Number 1:

L All team members must have Check In/Check Out set up for their

Dreamweaver-defined sites

Rule Number 2:

L All team members must have Design Notes enabled in their Site Setup

(in order to share Design Notes information)

And, arguably the most important rule:

Rule Number 3:

L All team members must use Dreamweaver to transfer files to and from

the remote server

If the Check In/Check Out system fails and a file is accidentally overwritten, it is invariably

because Rule Number 3 was broken: Someone uploaded or downloaded a file to or from the Web

server using a tool other than Dreamweaver

Trang 21

Check In/Check Out overview

Before I discuss the Check In/Check Out setup procedure, examine how the process actually

works with two fictional team members, Eric and Bella:

1 Eric gets an e-mail with a note to update the content on the About Our Company page

with news of a merger that has just occurred

2 Bella receives a similar note — except Bella is the graphic artist and needs to change the

logo to reflect the new organization

3 Eric connects to the remote site, selects the about.htm file, and clicks the Check Out button on Dreamweaver’s Files panel toolbar If Eric had clicked Get instead of Check Out, he would have received a read-only file on his system

4 Dreamweaver asks Eric if he would like to include dependent files in the transfer Because

he doesn’t know that Bella needs to work on the site also, he clicks OK The file on the remote system is downloaded to Eric’s machine and a small green checkmark appears next to the name of each file transferred in both the Remote Site and Local Files views,

as shown in Figure 31-1

Figure 31-1

For a checked-out file, a checkmark is placed next to the filename on both the local and remote sites

The checkmark is green if you checked it out and red if someone else checked it out

5 Bella connects to the remote site in Dreamweaver and sees a red check next to the file

she needs to work on, about.htm Next to the file is the name of the person who rently has the file, Eric, as well as his e-mail address

cur-6 Bella selects the link to Eric’s e-mail address and drops him a note asking him to let her

know when he’s done

Trang 22

7 Eric finishes adding the content to the page and clicks the Check In button to

trans-fer the files back to the remote server The checkmarks are removed from both the Remote and Local views and the local version of about.htm is marked as read-only by Dreamweaver, indicated with a closed padlock symbol This feature prevents Eric from working on the file without first checking it out

8 Bella receives Eric’s “I’m done!” e-mail and retrieves the file by clicking the Check Out

button in the Files panel toolbar Now, on Bella’s machine, the transferred files have a green checkmark and her name, whereas on Eric’s screen, the checkmarks are displayed

in red

9 After she’s finished working on the graphics side of the page, ensuring that Eric’s new

content wraps properly around her new logo, Bella selects the HTML file and then clicks Check In By opting to transfer the dependent files as well, all her new graphics are properly transferred Again, the checkmarks are removed, and the local files are set to read-only

10 The work is completed without anyone stepping on anyone else’s toes — or files.

Caution

Dreamweaver places a small text file with a lck (lock) extension on both the server and local site for each

checked-out document The lck file stores the Check Out name of the person transferring the files and, if

available, his or her e-mail address These files must not be deleted from the server because their existence

signals to Dreamweaver that a file has been checked out after the file is checked back in, the lck file is

deleted from the server n

Enabling Check In/Check Out

Dreamweaver’s Check In/Check Out system is activated through the Site Setup dialog box The

Check In/Check Out settings must be input individually for each site; no global option exists for

all sites Although it’s generally best to set it up when the site is initially defined, you can enable

Check In/Check Out at any time

To establish the Check In/Check Out feature, follow these steps:

1 Choose Site ➪ Manage Sites or select Manage Sites from the Site list in the Files panel.

2 From the Manage Sites dialog box, select the desired site in the list and choose Edit or

click the New button to define a new site

3 Select the Remote Info category in the Site Setup dialog box.

4 From the Access list, choose either FTP or Local/Network.

5 Choose the Enable File Check In And Check Out option.

6 If you want to automatically check out a file when opening it from the Files panel, select

the Check Out Files When Opening option

When you select the Check Out Files When Opening option, you can double-click a file

in the Files panel or select it and then choose File ➪ Open Selection This transfers the corresponding remote file to the local system and designates the file as being checked

Trang 23

7 Enter the name you displayed under the Checked Out By column in the Check Out

Name field It’s a good idea to use a name that not only identifies you but also the tem on which you’re working Thus, jlowery-laptop or jlowery-iMac is a better choice than just jlowery

sys-8 To enable team members to send you a message from within Dreamweaver, enter your

full e-mail address in the E-mail Address field

Entering an e-mail address converts the Checked Out By name to an active link If you select the link, you prompt the default e-mail program to display a new message form

(The To field contains the supplied e-mail address, and the Subject field contains the site name and filename, as shown in Figure 31-2.)

Figure 31-2

Dreamweaver lets you contact the team member working on a file with the e-mail address feature The

subject line is automatically added to reference a particular file and site

9 Make sure that any other information necessary for establishing an FTP or network

con-nection is entered

10 By default, Dreamweaver hides the Checked Out By column for performance reasons

If you want to display the link to the person who has checked out the file in the Files panel, switch to the File View Column category, select the Checked Out By entry, and select the Show option

11 Click OK to close the Site Setup dialog box.

12 From the Manage Sites dialog box, click Done.

Trang 24

The preceding procedure works for both FTp and network-connected remote sites If you are working within

a WebDaV environment, see the “Communicating with WebDaV” section later in this chapter that discusses

enabling Check In and Check Out protocols for that environment n

Checking files in and out

After the Check In/Check Out feature is enabled, additional buttons and commands become

available The Files panel toolbar shows both a Check Out File(s) button and a Check In button,

as shown in Figure 31-3, and the Site ➪ Check Out and Site ➪ Check In commands become

active The redundancy of these commands makes it feasible to check files in and out from

wher-ever you happen to be working in the Dreamweaver environment

Figure 31-3

The Check In and Check Out buttons do not appear unless Enable Check In/Check Out has been selected

in the Site Setup dialog box

To check out a file or series of files from the Files panel, follow these steps:

1 Choose Window ➪ Files to open the Files panel If you prefer to use keyboard

short-cuts, press F8 (Command+Shift+F)

2 If necessary, select the desired site — where Check In/Check Out has been enabled —

from the Site drop-down list

3 Click the Connect button in the Files panel toolbar If you’ve chosen Local/Network as

your remote access method, you’re connected automatically

4 Choose the HTML or other Web documents you want to check out from the Files panel

(it doesn’t matter whether you’re using Local view or Remote view) It’s not necessary to

Trang 25

5 Click Check Out File(s) in the Files panel toolbar or select Site ➪ Check Out If

you get the files instead of checking them out, either by clicking the Get button or by

dragging the files from the Remote Site listing to the Local Files listing, the local file becomes read-only, but the remote files are not marked as checked out

6 If the Prompt On Get/Check Out option is selected in Preferences, Dreamweaver asks

if you’d like to transfer the dependent files Click Yes to do so or No to transfer only the selected files When Dreamweaver has completed the transfer, green checkmarks appear next to each primary file (HTML, ASP, ColdFusion, and so on) in both the Remote Site and Local Files views; dependent files are made read-only locally, designated by a pad-lock symbol

I recommend checking out all the files that you need in a work session right at the start

Although you can check out an open document — by choosing Site ➪ Check Out or by

select-ing Check Out from the File Management button on the toolbar — Dreamweaver transfers the

remote file to your local system, possibly overwriting any changes you’ve made Dreamweaver

does ask you if you want to replace the local version with the remote file; to abort the procedure,

click No

Tip

To edit a graphic or other dependent file that has been locked as part of the checkout process, you can unlock

the file from the Files panel right-click (Control+click) the file in the Files panel and, from the context menu,

choose Turn Off read Only (The Turn Off read Only option is called Unlock on the Mac.) One related tip:

To quickly select the file for an image, choose the image in the assets panel; and from the context menu,

choose Locate In site n

After you’ve completed your work on a particular file, you’re ready to check it back in To check

in the current file, follow these steps:

1 Choose Site ➪ Check In or click Check In on the Files panel toolbar.

2 If you haven’t saved your file, but you’ve enabled the Save Files Before Putting option

from the Site category in Preferences, your file is automatically saved; otherwise, Dreamweaver asks if you want to store the file before transferring it

3 If Prompt On Put/Check In is enabled, Dreamweaver asks if you want to transfer the

dependent files as well If any changes have been made to the dependent files, click Yes

After the files are transferred, Dreamweaver removes the checkmarks from the files and makes the local files read-only

Note

ever start working on a file only to realize you’re working on the wrong one? If you make this or any other

mistake that makes you wish you could go back to the original version when working with a checked-out file,

don’t worry even if you’ve saved your changes locally, you can choose site ➪ Undo Check Out (or select Undo

Check Out from the site button on the Files panel toolbar) to retransfer the posted file from the remote site

The local file is made read-only, and the file is no longer checked out under your name n

Trang 26

Keeping Track with Design Notes

When several people are working on a site, they can’t just rely on the Web pages to speak for

themselves In any team collaboration, a great deal of organizational information needs to be

communicated behind the scenes: who’s working on what areas, the status of any given file, when

the project is due, what modifications are needed, and so on Dreamweaver includes a feature

called Design Notes that is designed to facilitate team communication in a very flexible manner

Dreamweaver Design Notes are small files that, in a sense, attach themselves to the Web pages

or objects they concern A Design Note can be attached to any HTML page, graphic, or media

file inserted into a page Design Notes follow their corresponding file whenever that file is moved

or renamed using the Dreamweaver Files panel; moreover, a Design Note is deleted if the file to

which it is related is deleted Design Notes have the same base name as the file to which they

are attached — including that file’s extension — but are designated with an .mno extension

For example, the Design Note for the file index.htm would be called index.htm.mno; Design

Notes are stored in the _notes subfolder, which is not displayed in the Dreamweaver Files panel

Design Notes can be entered and viewed through the Design Notes dialog box, shown in

Figure 31-4 This dialog box may optionally be set to appear when a file is opened, thus passing

instructions from one team member to another automatically In addition to the Design Notes

dialog box, you can configure File view columns to display Design Note information right in the

Files panel; the File view columns feature is covered in the section “Browsing File View Columns”

later in this chapter

Figure 31-4

You can configure a Design Note to pop up whenever a file is opened to alert a fellow team member of

work to be done

Trang 27

Setting up for Design Notes

Design Notes are enabled by default, but they can be turned off on a site-by-site basis To

disable Design Notes, follow these steps:

1 Choose Site ➪ Manage Sites or select Manage Sites from the Site listing to open the

Manage Sites dialog box

2 In the Manage Sites dialog box, select the site you want to alter and choose Edit.

3 In the Site Setup dialog box, expand Advanced Settings and then select the Design

Notes category (see Figure 31-5)

4 Deselect the Maintain Design Notes option to completely stop Dreamweaver from

cre-ating Design Notes Dreamweaver alerts you to the consequences of disabling Design Notes Click OK to continue

5 If you want to work with Design Notes locally, but don’t want to automatically transfer

them to the remote site, leave Maintain Design Notes checked, and uncheck Upload Design Notes For Sharing

6 To remove Design Notes that no longer have an associated file — which can happen if a

file is deleted or renamed by a program other than Dreamweaver — click the Clean Up button Dreamweaver gives you an opportunity to confirm the delete operation

7 Click Save to close the Site Setup dialog box, and then click Done to close the Manage

Sites dialog box

Figure 31-5

Design Notes play an important role in cross-product integration when working with Photoshop, Fireworks,

Flash, and Contribute

Trang 28

Design Notes serve two different purposes From a team perspective, they’re invaluable for

track-ing a project’s progress and passtrack-ing information among team members However, Design Notes

are also used by Dreamweaver and other Adobe products, including Fireworks, to pass data

between programs and program commands For example, Fireworks uses Design Notes to store

the location of a Fireworks source file that is displayed in the Image Property inspector when you

select the exported graphic in Dreamweaver

Keep in mind the dual nature of Design Notes I strongly recommend — whether you work with

a large team or you’re a team of one — that you keep Design Notes enabled and fully functioning

Setting the status with Design Notes

What is the one thing a Web site project manager always wants to know? The status of every

page under development: what’s still in the planning stages, what has been drafted, what has

made it to beta, and what’s ready to go live? The manager who has an awareness of each page’s

status can prioritize appropriately and add additional resources to the development of a page if

necessary Individual team members who are working on a page should also know how far along

that page is

Design Notes put the Status category front and center for all files It’s the one standard field that

is always available, and it offers eight different values and one custom value Entries may be

date-stamped in the Notes area to show a history of revisions, as shown in Figure 31-6 Optionally,

you can elect to display the Design Note the next time the file is opened by anyone

Figure 31-6

Design Notes can maintain a history of revisions for any Web page

Trang 29

To enter the status of a file, follow these steps:

1 Choose File ➪ Design Notes to open the Design Notes dialog box To insert a Design

Note for an object embedded on a Web page, such as a graphic, Flash movie, or other multimedia element, right-click (Control+click) the object and choose Design Notes from the context menu

2 On the Basic Info tab of the Design Notes dialog box, choose one of the following

stan-dard options from the Status drop-down list: draft, revision1, revision2, revision3, alpha, beta, final, or needs attention

3 To add the current date (mm/dd/yyyy, such as 03/07/10) to the Notes field, click the

Calendar icon

4 Enter any desired text into the Notes field The same Notes text is displayed regardless

of which Status option you choose

5 If you’d like the Design Notes dialog box with the current information to appear the

next time the page is loaded, select the Show When File Is Opened option The Show When File Is Opened option is available only for Design Notes attached to pages, not for Design Notes attached to page elements such as images

6 Click OK when you’re finished.

Creating custom Design Notes

Aside from monitoring the status of a project, you can use a Design Note to describe any single

item The All Info tab of the Design Notes dialog box enables you to enter any number of name/

value pairs, which can be viewed in the Design Note itself or — more effectively — in the File

view columns This mechanism might be used to indicate which graphic artist in your

depart-ment has primary responsibility for the page, or how many billable hours the page has accrued

You can also use the All Info tab to set a custom value for the Status list on the Basic Info tab

To enter a new name/value pair, follow these steps:

1 Choose File ➪ Design Notes to open the Design Notes dialog box.

2 Select the All Info tab If a Status and/or Notes entry has been made on the Basic Info

tab, you’ll see these values listed in the Info area

3 Click the Add (+) button to enter a new name/value pair.

4 In the Name field, enter the term you want to use.

5 In the Value field, enter the information you want associated with the current term.

6 To edit an entry, select it from the list in the Info area and alter either the Name or

Value field

7 To delete an entry, select it and click the Remove (–) button.

Trang 30

As noted earlier, you can create a custom Status list option in the All Info tab To do so, just enter

status in the Name field of a new name/value pair and enter the desired listing in the Value field

If you switch to the Basic Info tab, you find your new status entry listed as the last item You can

add only one custom status entry; if you add another, it replaces the previous one

Viewing Design Notes

To fully view a Design Note, you have several options You can choose File ➪ Design Notes to

open the dialog box; in Windows, this option is available from either the Document window or the

Files panel A second method is to right-click (Control+click) the file in either the File or the Site

Map view of the Files panel and select the Design Notes option from the context menu Finally, if a

Design Note is attached to a file, you’ll see an icon in the Notes column of the File view, as shown

in Figure 31-7 Double-clicking the Notes icon opens the Design Note associated with that file

Figure 31-7

Get immediate access to previously created Design Notes by double-clicking the icon in the Notes column

Browsing File View Columns

Although Design Notes can hold a lot of information about a Web page or element, the details

are kept out of sight With an eye toward heightening the visibility of Design Notes data — thus

making them more useful — the Dreamweaver engineers have tied the columns of the Files

pan-el’s File view directly to Design Notes In the previous section, you saw how the Notes column

Trang 31

indicated that a Design Note existed for a particular file; now you learn how to create custom File

view columns to display any value stored in a Design Note

With custom columns in the File view, a quick glance at the Files panel can reveal which files are

completed, which are in revision, and which need attention Moreover, custom columns can be

sorted, just as regular columns You can, for instance, easily group together all the files with the

same due date, or those coded by the same programmer File view columns — even the built-in

ones such as Type and Modified — can be realigned, re-ordered, or hidden Only the Local Files

column cannot be altered or moved With this level of customization possible, virtually the entire

File view can be reshaped, like the one in Figure 31-8

Figure 31-8

File view columns can be substantially reorganized to reflect the concerns of your team on a

project-by-project basis

The six standard columns — Local Files (which shows the filename), Notes, Size, Type, Modified,

and Checked Out By — can be supplemented by any number of custom columns Modification

of the column setup is handled in the File View Columns category of the Site Setup dialog box

File views are managed on a per-site basis; when defining the File views, you can determine if the

views are to be seen by anyone accessing the development site Likewise, any custom column can

optionally be shared among team members

To create a custom File view, follow these steps:

1 Open the File View Columns category with one of these methods:

Select Manage Sites and open the Site Setup for the desired site Then select the File L

View Column option from the category list

Choose View

L ➪ File View Columns from the Files panel on Windows systems, or choose Site ➪ Site Files View ➪ File View Columns on the Mac

2 If you’d like team members to see the custom columns you’re developing, select Enable

Column Sharing You also need to choose the Share With All Users Of This Site option for each custom column you want to share

Trang 32

3 To add a custom column, click the Add (+) button A new entry at the end of the list is

created

4 Enter a unique name for the column in the Column Name field If you enter an existing

name, Dreamweaver warns you and requests a new name before proceeding

5 Pick a Design Note field to link to the new column from the Associate With Design Note

list You can choose one of the suggested Design Note fields (assigned, due, priority, or status) or you can enter your own Design Note fields can be uppercase, lowercase, or mixed-case; multiple words are also allowed

6 Select an Alignment option from the list: Left, Center, or Right Columns that hold

numeric or date values should be aligned to the right

7 Make sure the Show option is selected.

8 To share this column with fellow team members, choose the Share With All Users

Of This Site option Selecting this option causes Dreamweaver to create a file called

dwSiteColumnsAll.xml within the _notes folder on the remote site When another member of your team connects to the site, Dreamweaver reads this file and incorporates

it into that person’s Site Setup This enables any other user to see the same column set

up on his or her system

9 Use the up and down arrows to reposition the column.

10 To add additional columns, repeat Steps 3 through 9.

How might a team benefit from custom File view columns? Some of the possibilities for custom

columns include the following:

Project ManagerL

Lead DesignerL

Lead ProgrammerL

Template UsedL

Date CreatedL

Date DueL

Percentage CompleteL

Client ContactL

Caution

File view columns are sorted alphabetically even if the values are numeric For example, if you have three

files with the numeric values 100%, 50%, and 10%, an ascending sort displays 10%, 100%, 50% as a

work-around, use decimal values (.10, 50, and 1.00) to represent percentages, and the files will be sorted correctly

If your columns require date values, use leading zeros in dates, such as 01/03, to ensure that the columns are

properly sorted n

Trang 33

Although having the Design Notes information visible in File view columns is extremely helpful

for maintaining an overview of a Web site, Dreamweaver takes the feature a step further After a

custom file column is established, you can handle additions and modifications to the Design Note

from the Files panel Click in the custom column of the file; the existing information, if any, is

highlighted and can be altered If there is no data in the column, the column becomes editable

Note

although the Design note is actually a separate file, you cannot change File view columns for a locked file

One solution is to temporarily turn off the read-only feature and then add the File view info and relock the

file if necessary

To turn off the read-only feature, right-click (Control+click) the file in the Files panel and, from the context

menu, choose Turn Off read Only (The Turn Off read Only option is called Unlock on the Mac.) n

Generating Reports

Although custom File view columns can present a tremendous degree of detail, the data is only

viewable from the Files panel Often, managers and team members need to extract certain bits

of information about a site in order to know where they stand and fix problems in an organized,

timely fashion Some Webmasters use third-party utilities to comb their sites and generate lists

of errors, which can then be assigned for resolution These utilities can also be used to establish

workflow patterns as they gather information, such as which pages are currently incomplete, or

who is currently working on what site elements

Dreamweaver reports give the Webmaster and team members a new tool for efficiently

build-ing Web sites The information from a Dreamweaver report can be instantly used —

double-clicking any report detail opens the referenced file — or stored as an XML file for later output

Dreamweaver includes seven standard reports that may be generated individually or combined

into one As with many Dreamweaver features, the Reports command is extensible, enabling

users to build custom reports

How do Dreamweaver reports work? The user must first choose from a variety of scopes: the

current document, selected files in the site, all the files in a particular folder, or the entire site

After the scope has been selected, the report elements — what the report actually covers — are

selected The report is then run, and Dreamweaver outputs the results into a floating panel, as

shown in Figure 31-9 Each entry in the Results panel is capable of opening the listed file; in the

case of reports querying the underlying HTML, the entries lead directly to the referenced code

Generated reports can also be saved for later use The reports are saved in an XML file format

that can be imported into a Web page, database, or spreadsheet program Although this

informa-tion can be extracted by hand, the structured format of the XML file makes it a perfect candidate

for an automated process handled by an extension or other utility

Two different types of Dreamweaver reports are available: those concerned with the code in the

pages themselves and those accessing workflow details (see Figure 31-10)

Trang 34

Dreamweaver reports return interactive results — just double-click any listed entry to open the related file

Figure 31-10

Generate either code-oriented or workflow reports

To access a Dreamweaver report, follow these steps:

1 Choose Site ➪ Reports, or click the Play icon in the Site Reports panel Windows users

can choose the command from either the Document window or the Files panel menus

Trang 35

2 Select which reports you’d like to include from either the Workflow or HTML Reports

Tiêu đề	Maximizing Cross-Browser Compatibility
Trường học	Unknown
Chuyên ngành	Web Design and Development
Thể loại	Sách hướng dẫn
Năm xuất bản	2010
Thành phố	Unknown

Định dạng
Số trang	135
Dung lượng	3,38 MB