Dreamweaver MX 2004 Bible phần 9 pdf

940 Part VI ✦ Enhancing Web Site Management and Workflow Figure 30-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. Figure 30-5: Design Notes play an important role in cross- product integration when working with Fireworks, Flash, and Contribute. 4. Deselect the Maintain Design Notes option to completely stop Dreamweaver from creating Design Notes. Dreamweaver alerts you to the consequences of disabling Design Notes. Click OK to continue. 543504 ch30.qxd 12/10/03 10:40 PM Page 940 941 Chapter 30 ✦ Building Web Sites with a Team 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 OK to close the Site Definition dialog box, and then click Done to close the Manage Sites dialog box. Design Notes serve two different purposes. From a team perspective, they’re invaluable for tracking a project’s progress and passing information among team members. However, Design Notes are also used by Dreamweaver and other Macromedia 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 30-6. Optionally, you can elect to display the Design Note the next time the file is opened by anyone. Figure 30-6: Design Notes can maintain a history of revisions for any Web page. 543504 ch30.qxd 12/10/03 10:40 PM Page 941 942 Part VI ✦ Enhancing Web Site Management and Workflow 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 (in m/d/yy format, such as 3/7/01) 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 only available 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 sin- gle 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 department 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. Choose the Add (+) button to enter a new name/value pair. 4. In the Name field, enter the term you wish 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. 8. Click OK when you’re finished. 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 543504 ch30.qxd 12/10/03 10:40 PM Page 942 943 Chapter 30 ✦ Building Web Sites with a Team field. If you switch to the Basic Info tab, you find your new status entry listed as the last item. You can only add 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 30-7. Double-clicking the Notes icon opens the Design Note associated with that file. 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 panel’s File view directly to Design Notes. In the previous section, you saw how the Notes column 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. Figure 30-7: Get immediate access to previously created Design Notes by double- clicking the icon in the Notes column. 543504 ch30.qxd 12/10/03 10:40 PM Page 943 944 Part VI ✦ Enhancing Web Site Management and Workflow 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 may 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 — may be re-aligned, re-ordered, or hidden. Only the Name col- umn may not be altered or moved. With this level of customization possible, virtually the entire File view can be reshaped, like the one in Figure 30-8. The six standard columns—Local Files (which shows the filename), Notes, Size, Type, Modified, and Checked Out By — may be supplemented by any number of custom columns. Modification of the column set-up is handled in the File View Columns category of the Site Definition 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 may 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 Definition for the desired site. Then select the File View Column option from the category list. • Choose View➪ File View Columns from the Files panel on Windows systems or choose Site ➪ Site Files View ➪ File View Columns on the Macintosh. 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. Figure 30-8: File view columns can be substantially reorganized to reflect the concerns of your team on a project-by-project basis. 543504 ch30.qxd 12/10/03 10:40 PM Page 944 945 Chapter 30 ✦ Building Web Sites with a Team 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 may 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 incorpo- rates it into that person’s site definition. 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. 11. Click OK when you’re finished. How might a team benefit from custom File view columns? Some of the possibilities for cus- tom columns include the following: ✦ Project Manager ✦ Date Created ✦ Lead Designer ✦ Date Due ✦ Lead Programmer ✦ Percentage Complete ✦ Template Used ✦ Client Contact 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 workaround, use decimal values (.10, .50, and 1.00) to rep- resent percentages, and the files will sort correctly. If your columns require date values, use leading zeros in dates, such as 01/03, to ensure that the columns are properly sorted. Although having the Design Notes information visible in File view columns is extremely help- ful 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 informa- tion, if any, is highlighted and can be altered. If there is no data in the column, the column becomes editable. 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 if necessary. Note Caution 543504 ch30.qxd 12/10/03 10:40 PM Page 945 946 Part VI ✦ Enhancing Web Site Management and Workflow 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 Macintosh.) 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 cer- tain 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 may also be used to establish workflow patterns as they gather information, such as which pages are cur- rently 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 may 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 com- bined 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 30-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 may 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 information 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. To access a Dreamweaver report, follow these steps: 1. Choose Site ➪ Reports or click the Play icon in the Site Reports panel. Windows users may choose the command from either the Document window or the Files panel menus. 2. Select which reports you’d like to include from either the Workflow or HTML Reports categories. 3. If you choose an option from the Workflow category or the Accessibility option in HTML Reports, the Report Settings button activates (see Figure 30-10). Select it to define the report search for Workflow reports, or the accessibility options (Figure 30-11) for the Accessibility HTML Report. Section 508 is the United States government statue concerning accessibility on the Internet and in software development. To learn more about Section 508 standards, see www. section508.gov. Note 543504 ch30.qxd 12/10/03 10:40 PM Page 946 947 Chapter 30 ✦ Building Web Sites with a Team Figure 30-9: Dreamweaver reports return interactive results — just double-click any listed entry to open the related file. Figure 30-10: Only certain reports, like Design Notes, offer additional Report Settings. 543504 ch30.qxd 12/10/03 10:40 PM Page 947 948 Part VI ✦ Enhancing Web Site Management and Workflow Figure 30-11: The Accessibility report uses the Accessibility options to determine which pieces of your pages to test against Section 508 standards. Dreamweaver remembers the Report On setting each time you run this command. The Report Settings options are covered in detail later, in the section “Using Workflow reports.” 4. Click the Run button. The Site Reports panel appears if it isn’t already active. As the report is processed, results are listed in the upper window. 5. From the Site Reports panel, you can choose the Stop icon to halt the report. 6. To open any referenced file, double-click the entry or right-click (Control-click) the entry and select Open File from the context menu. 7. To store the report as an XML file, select Save Report and enter a file and path in the Save File dialog box. Entries in the Site Reports panel are initially sorted by filename in an ascending order; how- ever, selecting any column heading (File, Line, or Description) re-sorts the list accordingly. If many result listings are returned, the Site Reports panel may be resized to display more of them. Outputting HTML reports Dreamweaver includes six options under the HTML Reports category: ✦ Combinable Nested Font Tags: This query looks for code in which the font tag has been applied to the same text at different times, as shown in the following example: <font color=”#000000”><font size=+1>Monday, December 15th @7pm</font></font> ✦ Accessibility: A very powerful report that examines your site for compatibility under either the Section 508 guidelines or the W3C guidelines; you can check all the guide- lines or select certain ones to verify or ignore. In addition to showing which aspects 543504 ch30.qxd 12/10/03 10:40 PM Page 948 949 Chapter 30 ✦ Building Web Sites with a Team need attention, this report will optionally note guidelines that were successfully implemented. ✦ Missing Alt Text: This report searches for <img> tags in which the alt attribute is empty or missing entirely. To comply with accessibility guidelines established by the W3C, all images should have alt attributes that describe the graphic. ✦ Redundant Nested Tags: This report identifies tags nested within themselves, as shown in the following example: <b><b>On Sale!</b></b> ✦ Removable Empty Tags: This search finds non-empty tags (that is, tags with both an opening and closing element) with no content, as in this code: <div align=”center”> </div> ✦ Untitled Documents: This report looks for pages that have no title or use the default Untitled Document text. You can run any or all the HTML reports at once — just select the desired report(s) from the Reports dialog box. The Site Reports panel lists the name of the file, the line number where the search condition was found, and an error message for each entry. Selecting a file displays the error message with additional detail, if available, in the Detailed Description area. Select Open File from the context menu or double-click an entry to load the file if it’s available. If the file is currently locked, Dreamweaver asks if you’d like to view the read-only file or unlock it. All HTML report files are displayed in the split-screen Code and Design view. Using Workflow reports Workflow reports, unlike HTML reports, don’t examine the code of Web pages. They look at the metadata — the information about the information — of a site. Three standard reports are available under the Workflow heading: ✦ Checked Out By: This report displays any file checked out by a particular person as designated in the Report Settings dialog box. If nothing is entered in the Report Settings dialog box, a list of all files in the selected scope that have been checked out by anyone is returned. To run this report, you must be able to connect to your remote site. ✦ Recently Modified: Returns a list of pages modified in a user-definable period along with their modification date; you can, optionally, search for pages modified by a spe- cific user, if the site is being administered by Contribute. In addition to the Results panel listing, this report also automatically opens a print- ready version in your primary browser with links to each page listed, as shown in Figure 30-12. The pages can either be viewed locally—best for static pages— or through the testing server, which is necessary for dynamic pages. ✦ Design Notes: This report examines the designated files according to search criteria set up in the Report Settings dialog box. Searches may be conducted on a maximum of three criteria. If no criterion is entered, a list of all files with Design Notes in the selected scope is returned. Caution 543504 ch30.qxd 12/10/03 10:40 PM Page 949 [...]... options are available within Dreamweaver Note To administer Contribute from within Dreamweaver MX 2004, Contribute 2.0 or better must be installed on the same machine as Dreamweaver Setting up Contribute compatibility Like other sitewide settings, Contribute compatibility is managed through the Site Definition dialog box As noted earlier, Contribute utilizes several optional Dreamweaver features — Design... shown in Figure 30- 19 Chapter 30 ✦ Building Web Sites with a Team Figure 30-18: Add as many folders as needed for any given group Figure 30- 19: Enhance the Contribute experience by enabling Word-like options from the Editing category 95 9 96 0 Part VI ✦ Enhancing Web Site Management and Workflow The Non-Template Pages area of the Editing category applies to pages not constructed from Dreamweaver templates... and Dreamweaver supplies this prefix in the Project field 96 7 96 8 Part VI ✦ Enhancing Web Site Management and Workflow Figure 30-26: Visual SourceSafe projects require a username and password for access 8 Enter your VSS login name in the Username field 9 Enter your VSS password in the Password field 10 To circumvent automatic logon to the VSS database when connecting in Dreamweaver — which causes Dreamweaver. .. well as being sold separately Dreamweaver integrates its own Check In/Check Out system with that of Visual SourceSafe When a Dreamweaver site is connected to a VSS database, checking out a file in Dreamweaver checks out a file from the VSS project Likewise, when a file is checked back in Dreamweaver, it is noted as being checked-in in the VSS database This integration enables Dreamweaver to be smoothly... be kept by entering a number in the pop-up list; by default, Contribute maintains the previous three versions of every page in a folder on the server called _baks — you can opt to store up to 99 versions 95 5 95 6 Part VI ✦ Enhancing Web Site Management and Workflow Caution Whether rollbacks are allowedt — and how many previous versions to make available — is a significant decision Enabling this option... network 96 5 96 6 Part VI ✦ Enhancing Web Site Management and Workflow To apply the Connection Key, your users need only have Contribute installed on their systems and online access to their sites When they open the Connection Key file, Contribute launches, if necessary, and displays the dialogs to get them started Rolling back a Contribute page in Dreamweaver If you’ve enabled Contribute compatibility in Dreamweaver. .. surrounds its data 97 3 97 4 Part VI ✦ Enhancing Web Site Management and Workflow For example, Figure 31-1 shows a Dreamweaver template for a purchase order On the left are the headings (To, Company, Address, and so on) for the information in a locked area, whereas the specific shipping data (on the right) resides in a series of editable regions, each with its own name When exported as XML by Dreamweaver, ... tags — as an editable region Dreamweaver can create one of two different types of XML tags during its export operation The first is referred to as Dreamweaver Standard XML and uses an tag with a name attribute set to the editable region’s name For example, if the editable region is named ShipVia, the Dreamweaver Standard tag is Content The Dreamweaver Standard XML file... your WebDAV login name in the Username field 8 Enter your WebDAV password in the Password field 9 Enter your e-mail address in the Email field The username and e-mail address are displayed for checked-out files 10 To circumvent automatic logon to the VSS database when connecting in Dreamweaver — and cause Dreamweaver to prompt you for a password every time — deselect the Save option 11 Click OK when... When Opening option When this option is enabled, double-clicking a file in the Local Files view (or selecting it and then choosing File ➪ Open Selection) automatically performs the checkout procedure 96 9 97 0 Part VI ✦ Enhancing Web Site Management and Workflow 13 Click OK to close the Site Definition dialog box 14 Click Done to close the Manage Sites dialog box To use the WebDAV server, click the Connect . tight integration with Dreamweaver provides another path: The same administrative options are available within Dreamweaver. To administer Contribute from within Dreamweaver MX 2004, Contribute 2.0. Figure 30- 19. 543504 ch30.qxd 12/10/03 10:40 PM Page 95 8 95 9 Chapter 30 ✦ Building Web Sites with a Team Figure 30-18: Add as many folders as needed for any given group. Figure 30- 19: Enhance. completely stop Dreamweaver from creating Design Notes. Dreamweaver alerts you to the consequences of disabling Design Notes. Click OK to continue. 543504 ch30.qxd 12/10/03 10:40 PM Page 94 0 94 1 Chapter