Dreamweaver II | Workflow and Project Management

Workflow and Project Management

Juggle panels and files with ease, speed your workflow, and learn better HTML coding with Dreamweaver's management features.

There's nothing more fun than starting up a software program and jumping right in. But now that you're really comfortable the traditional Dreamweaver set-up, you can customize your interface to fit your workflow.

Dreamweaver enables you to automate common tasks, better manage your files, and make sitewide changes from a single panel.

In addition to smoothing your personal workflow, Dreamweaver offers a number of methods to manage collaborative work and team projects—without your hard work being overwritten by an accident-prone co-worker. You can also generate a number of reports on broken links, specific browser issues, and other key trouble spots.

 

When you have a lot of projects lined up, it is important to implement strong workflow techniques to speed the site creation process. In this section, we'll take a close look at preferences and panels that you can customize to your specific needs.

General Preferences

Access your Preferences panel now by going to Dreamweaver > Preferences (on a Mac) or Edit > Preferences (Windows).

You've probably been here on several occasions, but we'll talk about some specific preferences you may not have noticed that can speed your workflow and make your sites more accessible. We won't cover every single preference (and we'll tackle code preferences under a separate heading), but feel free to explore them all. Your needs will likely change as your projects do, so visit the Preferences panel often and make changes accordingly.

We'll begin in the General category of the Preferences panel.

We'll look specifically at the preferences numbered above, but you should explore the other preferences to see if they can speed your workflow.

	1. Allow Multiple Consecutive Spaces: Typing in Design view, you can only make one space between words with your spacebar. This prevents extra gaps and spaces. Checking this preference will allow you to place multiple spaces wherever you want them. This will add lots of nbsps (non-breaking spaces) to the code, and should be left unchecked unless you're in a situation where it is necessary. 2. Use <strong> and <em>: Most designers are familiar with using <b> and <i> tags for bold and italic text, but <strong> and <em> (which have the same effect visually in the browser as <b> and <i>) are more accessible. Why? Spoken browsers for the visually impaired recognize <strong> and <em> and speak text within those tags with more emphasis—meanwhile <b> and <i> will only emphasize the text visually. 3. Maximum Number of History Steps: This refers to the levels of "undo" you can have in a document—either Ctrl-Z/Command-Z undos, or in your History panel (Window > History). My preferences are set to 50 so my last 50 steps are in memory if I need to undo them. If you are pretty indecisive, like me, at least I think I am, you'll want a high number here. But if your computer has limited memory, keep this number small (10-20).

File Type Preferences

Now we'll skip a few categories, coming back to code preferences soon, and visit the File Types/Editors category. Dreamweaver can't edit non-HTML files such as images, Flash movies, or sound clips—but it can take you where you need to go.

When you select an image in the Document window, several editing options appear in the Property inspector. Just click the application icon to launch the image editor of your choice, make the changes you need, resave, and return to Dreamweaver.

Clicking the application icon will launch the selected image in Fireworks.

You can change the default image editor to Fireworks, Photoshop, Flash, or your favorite editing program. We'll look at this category in full so you can make the most out of this integration feature.

Here, I have my preferences set to use Fireworks as the primary editor for .png files.

	Open in Code View: This list of file extensions determines which non-HTML files will open in Code view, for example, .js (JavaScript), .css, and .txt (plain text). You can add or remove extensions as necessary. External Code Editor: In this field, you can choose an alternate application to handle code editing if you don't feel Dreamweaver's Code view is robust enough for you. Browse to select an alternate application and this application will be accessible at any time in your Edit menu as well as in the CSS Styles panel. Reload Modified Files and Save on Launch: These commands determine what will happen if you work on a file outside of Dreamweaver, then bring it back in. These menus are best set to Prompt (the default) to avoid overwriting the original files without your knowledge. Extensions/Editors: In this area, you can determine which external editor should be used to edit various types of graphic and multimedia files. To begin, click the plus icon over the Editors panel to add your favorite software applications to the list. Choose a file extension in the left panel, then select an editor in the right panel which corresponds to that extension. For example, you might set .gif, .png, and .jpg files to open in Fireworks, and .fla files to open in Flash.

 

Customizing Code

Now on to the settings that you can use to customize your HTML code. This isn't just for Dreamweaver users with a good grasp of HTML—in fact, these customization features can help you to learn HTML.

We'll begin with the Code Coloring category. In this category, you can determine the color schemes for tags and elements in many types of programming languages. In most cases, you'll just work on HTML code and maybe JavaScript or CSS. Select HTML and click the Edit Coloring Scheme button to reveal the editing window.

The Edit Coloring Scheme for HTML dialog is broken down by types of tags (image tags, special characters, and so on).

In the Preview area, you'll see sample code with the current color settings. Select a tag and change its color and font style to your liking. Choose a bold color for tags that you often use (or would like to learn more about). For convenience, some CSS and JavaScript code is also handled in this window since these items often show up in your HTML documents when you use behaviors or internal style sheets.

The next handy category in the Preferences panel is Code Format. This category enables you to change the format of the code (the line wrapping, indenting, upper or lowercase tags, and so on). Hand-coders might want to edit these settings so Dreamweaver's code will be formatted in a familiar format.

You may have used code hints while working in Code view. When you begin to type in a tag, for example <table>, code hints prompts you with a menu of tags.

As I begin typing "<t", code hints guesses the tags I might be trying to use so I can simply pick one from the list. Circled on the right is an auto-completed tag, including the ending tag so I don't forget to add it later.

If you select the Close tags after typing the open tag's ">" option in the Code Hints category of the Preferences panel, the ending tag will also appear (such as <table></table>).

The delay time setting is useful for advanced HTML coders who rarely need code hints when typing their code. The hints will pop-up after the set number of seconds. Those who use hints more often will want to keep the delay short.

Code hints and auto-completion prevent common mistakes like mistyping a tag or forgetting an ending tag.

The Snippets Panel

Let's exit the Preferences panel but stay on the topic of code. Dreamweaver offers the ability to save chunks of code for frequent use in a panel with the cute little name Snippets (Window > Snippets). Dreamweaver also gives you lots of predefined Snippets to choose from, also found in the Snippets panel.

Scroll through the menu of predefined Snippets to see what's offered. You may find some pretty handy ones like the Angle bracket breadcrumb trail for navigation.

Clicking once on a Snippet will show you a preview at the top of the panel, and double-clicking will insert the Snippet into your document.

Using Snippets can save you an enormous amount of time, whether you're working in Design view or in Code view. For this course, I created a snippet for the little tables that hold graphics and captions. Rather than building the exact same table every single time I used it (which was a lot!), I made a Snippet like so:

	1. I created the table in Design view, then selected it. (I could have done this in Code view instead.) 2. I clicked the menu button in the upper-right corner of the Snippets panel and chose New Snippet. This opened the Snippet dialog, which automatically included the the code chunk I selected in step 1: 3. I chose the Insert Block Snippet type. This inserts the Snippet as a block element, wherever I insert my cursor in the Document window. A Wrap Selection Snippet wraps the code around a selected area. This is what a Wrap Selection Snippet looks like: The code in the Wrap Selection panel is divided into "insert before" and "insert after." Before using this Snippet, you would select a page element for this code to wrap around (before and after). 4. I chose the Code preview type, so the table code appears in the top pane of the Snippet panel when this Snippet is selected. If I had opted for the Design preview type, a visual representation of the table would have appeared instead. 5. I gave my Snippet the name "Sessions Table," added a description, and clicked OK to finish the Snippet. Anytime I needed my standard graphic/caption table, I just inserted my cursor in the Document window and double-clicked "Sessions Table" in the Snippets panel.

The Snippets panel may quickly become one of your favorites—you can increase your work speed pretty significantly!

The Reference Panel

Once in a blue moon, even the best HTML coders can get stumped. Dreamweaver gives you access to a number of popular reference books within the Reference panel (Window > Results > Reference) or (Window > Reference in Dreamweaver CS3) to resolve any confusion. The Reference panel is chock full of info on HTML, CSS, JavaScript, PHP, site accessibility, and other topics.

The O'Reilly reference "books" provide descriptions of specific HTML tags.

You can look up a specific tag (its purpose and how to use it properly), methods to make your site more accessible to users with disabilities, and so on. This will get you better acquainted with good page-building practices.

File Management

Your Dreamweaver interface is now customized, and you've got some additional techniques under your belt for speeding your workflow. Great, but you're not done streamlining your work just yet. Dreamweaver's got a few more tricks to keep your files organized and accessible.

Assets Panel

The Assets panel's job is to keep track of non-HTML files and data—images, Flash movies, and even color swatches and off-site URLs. Using the Assets panel, these items can be quickly inserted in your document rather than browsing for files, trying to remember that pesky hexadecimal code for a color, or typing in a URL you've already used.

Much like the Snippets panel, the Assets panel provides a preview of the selected file. In this case, we're in the Images category and an image is selected for previewing.

The Assets panel will automatically provide all of the image files, colors, URLs, Flash and Shockwave documents, video clips, scripts, and template and library files in a defined site. If your Assets panel is empty, it is a sign that you have not yet defined your site. If you have added new files to your defined site that don't appear in the panel, click the Refresh icon at the bottom of the panel.

Each category of the panel is indicated by an icon on the left. To insert an asset, click the Insert button at the bottom of the panel. When using a color asset, you must first select the area you want to apply the color to. Likewise, for a URL, you must select the text you wish to link.

Unlike the Snippets panel, you don't double-click to insert your asset—doing so will instead open the editor you've defined for that type of file.

Since the Assets panel displays all of your assets for an entire site, you may want to have a separate listing of your most commonly-used assets. Of course, Dreamweaver has thought of this too. It provides a Favorites area of the Assets panel—just click the Favorites radio button at the top.

To make an asset a Favorite, select it (with the Site radio button active), then click the Add to Favorites icon at the bottom of the panel.

Images you use frequently make great favorites, for example, this decorative ornament is inserted in content areas throughout the site.

If you have several image folders in your site, expand the Assets panel and click the Full Path heading to search for an image in a particular directory.

Don't be shy—grab the left edge of the Assets panel and drag to expand the panel to its full width. Click the Name, Size, Type, or Full Path headings to resort the list of images.

 

Sitewide Link Changes

Bad news, the boss called and the deal with Amazon is off. All those links throughout the site to Amazon.com need to be changed to BN.com. Yeah, I know the links are on every page—but the boss offered to buy you some coffee to help you stay awake for this!

Hardworking designer, you can pass on that cup of coffee—little does your boss know that Dreamweaver's on your side. This type of situation comes up frequently, whether it's off-site URLs that need a switch, or links within your site—and the Change Link Sitewide feature comes to the rescue.

For off-site URLs you must type the full URL including the http:// prefix. For internal links, you may use the folder button to browse to files.

You can access this feature from the Site menu (Site > Change Link Sitewide). Enter the old and new URLs, click OK, and let Dreamweaver do the work for you. Before making the changes, Dreamweaver will give you a prompt showing all pages with the offending link and let you make a final decision to OK it or cancel.

The Results Panel

The Results panel (Window > Results) exists to generate reports on an entire site—from broken links to redundant code to browser compatibility. Each tab of the panel handles a different function accessed by the green play button on the left. You can use the Results panel to check your site for potential problems and speed up any fixes you need to make.

At first, the main area under the Results tabs will be blank. Clicking the green play button will activate the report and display the results.

Search Reports

Clicking the green play button under the Search tab pulls up the Find and Replace dialog you're familiar with from the Edit menu. After you've run a search, the results will appear in the Results panel. Double-click one of the results to jump to that particular page element.

I searched for the word "Barcelona" in my entire current local site. I can double-click any occurrence to jump to its precise location on the page.

Code Validation Reports

The Validation tab is handy for code purists who want to make sure that their code is legitimate by current standards. Clicking the green play button gives you a choice of whether to validate the entire site or just the current page. You can also change your validation settings (choose the Validator category of the Preferences window).

This is the validation report you would like to see—no stop sign icons, meaning no problems to fix.

Items resulting in validation alerts won't necessarily break in the browser, but the code is not considered valid by the current standards.

Browser Compatibility Check

The next tab is Browser Compatibility Check. This is great report to identify CSS-related issues in a range of browsers.

Dreamweaver will identify any potential issue—and what browser it affects.

You can also visit the Adobe CSS Advisor Web site to research common browser bugs and their solutions.

The CSS Advisor Web site is a online community devoted to CSS.

Link Checking Reports

The Link Checker report delivers just what you would expect—a listing of broken or otherwise problematic links in your site.

You can choose to check just the current document, your entire site, or selected pages or folders of your site. If you are checking selected files, you must first highlight the files in your Files panel, then choose "Check Links for Selected Files in Site" from the play button menu.

After running the report, you have three choices of results to view, found in the Show dropdown menu. The first and most useful is Broken Links. Dreamweaver will find any link that does not have a file on your hard drive associated with its path. Double-click to open the page with the broken link, or click once to browse to the correct path directly from the Results panel.

The External Links report will show you all off-site URLs and "mailto:" email links—it doesn't know whether they are broken or not. It is a good idea to scan external links for any typos or other mistakes.

Finally, check the Orphaned Links results to find stranded files that are not linked to anything else in your site. This includes HTML files as well as any other files (CSS, images, and so on) that don't appear to be in use. You can delete orphaned files from this window.

HTML Reports

Finally, we'll look at the Site Reports tab. Pressing the play button will pull up a dialog with reporting choices for HTML and Workflow, as well as a menu for you to choose the document(s) your report should run on.

We'll skip over the Workflow choices for the moment and cover them in the next section so we can focus on the more critical HTML Reports.

HTML Reports alert you to problematic code like redundant nested tags as well as common omissions like untitled files or a lack of Alt text on your images.

The Accessibility report refers to site accessibility guidelines for visually impaired users. You can refine the types of accessibility suggestions offered by this report by selecting Accessibility and clicking Report Settings.

Check the reports you wish to run, then click Run. The more reports you select, the longer the results will take to generate. If you're reporting on a very large site with all reports selected, a lunch break might be in order.

When the results are generated from your selected HTML Reports, the Results panel will populate with file information, a description of the problems, and the line of code in which the problem is located. You can double-click to open and correct the document as needed.

If you have many, many items that need correcting, you might want to save the results by clicking the disk icon on the left. The results will be saved as an XML file. This feature can be used on other reports in the Results panel as well.

Working Collaboratively

Site development is often handled as a team with files that are shared over a network. When dealing with a designer, a developer, and a technology specialist (or maybe even several of each!), the same site files are often used by a number of co-workers. This can be a symbiotic relationship, or one that leads to chaos. A fist fight almost broke out one day at a previous job of mine when the technology specialist totally overwrote two full days of the Web developer's work!

Company employees with no Web experience are often given the task of updating Web page content—sometimes accidentally destroying a design or important programming features in the process.

Now that you know the power of Dreamweaver, I bet you're not surprised to find out that Dreamweaver can handle a collaborative work environment to keep things running smoothly. Let's wrap up this final lesson with a look at how it's done.

Check In/Out

Previously impossible without sophisticated network software, Dreamweaver allows collaborators to lock files that are accessible to multiple users.

Enable the check-in/check-out feature by going to Site > Manage Sites. In the Remote Info category of the Site Definition window, choose "Local/Network" from the Access menu. Check Enable file check in and check out.

When enabling this feature, enter a check-out name so collaborators will see who has checked out the file. Optionally, you can add an email address so collaborators can email you regarding the file(s).

To check out a file, simply select it in the Files panel (Remote Site) and click the Check Out File(s) button . This will download the file to your hard drive. The Files panel will show all connected users what files are locked and who has them checked out.

When you finish working, check the file back in by selecting it in your Files panel (Local Files) and clicking the Check In button .

For busy projects with lots of team activity, you can run workflow reports that display who has checked out a file and which files have been modified recently.

Select Site > Reports. Select a workflow report and click the Report Settings button at the bottom of the dialog.

Check the Workflow report you wish to run, then click Report Settings. Repeat the process for any other workflow reports.

Run the Checked Out By report to see a list of all documents checked out by a specific team member. Enter the name of a team member, and then click OK to return to the Reports dialog box.

If you need to see which files where modified during a specific time frame, run the Recently Modified report. Enter date ranges and location for the files you want to view.

Choose Design Notes to run a report listing all Design Notes for selected documents or for the entire site. What are Design Notes, you might ask? Let's say you finish up a revision to the home page of your latest Web site project, and you post the changes for review by your Art Director. You would go to File > Design Notes to add information on the status of the document (revision), what changes were made (new color scheme), how the design decision was reached (client feedback), and what needs to be done now (waiting for illustration artwork). Very helpful information that I'm sure your Art Director will appreciate.

Synchronizing Sites

You're working in New York, and your co-designer is in Barcelona. You both need access to the same HTML files. Not a problem.

Before you make any changes to the files, make sure that your European counterpart hasn't already done the work for you. Click the circular Synchronize icon the Files panel to synch the local files on your computer with the remote files on the server.

Click the Synchronize icon, or choose Site > Synchronize from the flyout menu in the upper-right corner of the Files panel.

The Synchronize Files dialog appears. You can choose to synchronize specific files that you've selected in the Files panel, or the entire site. You can get new files from the remote server that your co-designer has modified, or post the new files from your local site that you have completed, or both.

It goes both ways—get newer files from the remote server or post newer files from your local computer. Either way, you'll be working on the latest version.

Click the Preview button. Dreamweaver goes to work, comparing the modification dates for each file, local and remote. You'll get a list of all the files that need to be synchronized. Overwriting files is a serious action to take, so review carefully before executing the synchronization.

Adobe Contribute

With Contribute, anyone can add simple content updates while you handle the technical stuff.

Finally, I should mention a software program that is used for collaborative environments that include non-Web workers. Contribute allows anyone, no matter how "non-technical" to publish content to a Web site without interfering with the page design or functionality.

Contribute is a stand-alone program, but it integrates with Dreamweaver. You can administer a site and delegate user roles directly from the Dreamweaver Site Definition window.

If you are interested in seeing how this works, download a free trial version of Contribute from the Adobe Web site.

	Install Contribute In order to administer a site, Contribute must be installed along with Dreamweaver. Enable Contribute for your Web site Launch Dreamweaver and choose Site > Manage Sites. Select the site you wish to enable and click Edit. Choose the Contribute category (you won't see this category if you haven't installed Contribute). Select the Enable Contribute Compatibility check box. Launch Contribute To launch the Contribute Site Administrator, click the Administer Site in Contribute button. This will open the Administer Web site dialog. Define User Roles The first task at hand is to define the members of your team. Notice that there are three type of roles: Administrator: If you are setting up the site, this is probably you. The Administrator has total power. You can edit, modify, and publish Web pages using Dreamweaver or Contribute. The Administrator is responsible for defining user roles and giving other team members access to the site. Publisher: Publishers can modify and publish content from within Contribute. Writer: Writers can modify content, but they can't publish. All drafts are sent to a Publisher or Administrator for review before going live on the Web site. Click the Edit Role Settings button to define responsibilities for each member of your team. You can decide which folders the user should have access to, whether the user can modify page elements or text only, define the styles and fonts the user can apply, and restrict or allow the creation of new pages. Send Connection Keys Click the Send Connection Key button to send each user the necessary information to connect to the Web server. You can choose to send the Connection Key by email. All the user has to do is double-click the Connection Key file and enter their user name and password—the site will connect automatically. Edit and Publish with Contribute Now that your user is connected, using Contribute to make basic edits is easy. Publishers can click the Edit Page button to open a page in Edit mode, then click the Publish button to upload to the Web server. Writers can edit the page, then click the Send for Review button to send their changes to the Publisher for approval before going live.

Using Dreamweaver, you can collaborate with other team members in harmony and (hopefully) a peaceful work environment.

Exercise Create a complete site with the help of workflow and site management features. Discussion Share your thoughts on collaborative projects with other students.