18. Managing Your Site
In This Chapter
Setting Up Check In and Check Out
Finding External Links and Orphaned Files
Exporting and Importing Site Definitions
As you’ve seen in the rest of this book, building a site means creating dozens, hundreds, or even thousands of files that work together to present a dynamic, exciting website. Keeping track of and managing all these files—a process called site management—may not be an exciting job, but it is essential.
The problem of site management gets even more complex when (as is common) you are just one member of a team responsible for building and maintaining a site. Imagine that you have several people who can all edit pages—it would be easy for one person to overwrite changes made by a coworker. That’s where Dreamweaver’s collaboration features come in. With Check In/Check Out, team members are notified if another person is already working on a particular file. Support for the Subversion version control system allows Dreamweaver to be integrated into even the largest sites.
In this chapter, you will learn how to manage the files and folders that make up your site; work with Dreamweaver’s collaborative tools; and learn different ways to look at and work with your site.
Planning for Site Expansion
When you’re designing a site, you take the time to think about the site navigation so that your site visitors have an easy time finding the information they need. But what about your needs? When you’re building and maintaining a site, it’s just as important for you to plan the folder structure so that you can easily and quickly find items you need to work on. Websites have a disturbing tendency to grow, so when you set up your site, lay out your folder structure logically and leave room for expansion in your site structure 
.
You should create your site structure with logical sections (shown here as folders) and plan for growth.
For example, if you have different sections of a site (as represented in the site’s navigation), it’s a good idea to create a folder for each section (which will contain all of the pages for the section). Then consider creating an image folder inside each section folder. After all, you will probably have images for each section that are used only in that section of the site. A separate image folder in the root of your site can handle images that are used globally throughout the site.
As your site grows, you can add additional folders for new sections from the site root, or you can add folders inside the existing section folders for new subsections.
Tip
Make sure that you name your files and folders meaningfully and understandably. While you are creating a site, you may remember what the med_sec_hed.html file is used for, but when you come back to the site four months later, you might not have a clue, at least without opening the file and looking at it. Instead, name the file something like media_home.html, which will make it easier for you to pick up where you left off. This also makes your site easier for other people to maintain.
Tip
Don’t forget that there are some characters that you can’t use in file and folder names, including space, #, &, @, /, and most other punctuation. Use a hyphen or underscore as substitutes for a space.
Tip
If you create image folders inside section folders, give those image folders descriptive names, too. We like to use the name of the section, followed by an underscore, then images, like so: recipes_images.
Expanding the Files Panel
The Files panel does an adequate job of showing you the files and folders in your site, but it has some drawbacks. The biggest of these is that it is cramped for space, especially for larger sites. You also can’t see the local files and the remote server at the same time, making it difficult to compare items that are on your machine with those that are on the server. Dreamweaver allows you to expand the Files panel to solve these problems. You can view the local and remote sites and easily create, move, and delete files on either copy of the site. Of course, you can still use the Get, Put, Check Out, Check In, and Synchronize buttons at the top of the Files panel.
You can also select multiple files in the following categories:
All files
Checked Out files
Newer Local files
Newer Remote files
Recently Modified files
On Windows, the Dreamweaver window will be replaced by the expanded Files panel .
The expanded Files panel allows you to easily see both remote (left) and local (right) files. On Windows, the panel completely replaces the Dreamweaver window.
On the Mac, the expanded Files panel will appear in a new window 
.
On the Mac, the Files panel expands into its own window.
2. Create, delete, rename, or move files and folders as you like. See Chapter 2 for more details.
3. When you’re done with the expanded Files panel, click the Expand/Collapse button again to toggle the window back to the normal Files panel.
To select multiple files in the expanded Files panel
1. At the top of the Files panel, click the Expand/Collapse button.
2. On Windows, from the Edit menu, choose Select All, Select Checked Out Files, Select Newer Local, Select Newer on Remote Server, or Select Recently Modified 
.
On Windows, the Edit menu allows you to highlight specific groups of files.
or
On Mac, right-click in the Local Files section of the expanded Files panel, and from the Select menu choice in the context menu, choose All, Checked Out Files, Newer Local, Newer Remote, or Recently Modified.
The files highlight.
Tip
If you want the opposite selection of what is already selected, choose Invert Selection in step 2 above.
Tip
If you select a file or folder in either the Remote Server or Local Files panes and right-click, you can easily find the corresponding file in the other pane by choosing Locate on Remote Server (if your selection is in the Local pane) or Locate in Local Site (if your selection is in the Remote pane) from the context menu.
Tip
Dreamweaver usually doesn’t show the hidden files it places on the remote server. For example, when you check a file out, Dreamweaver creates a small file on the server called filename.LCK. These .LCK files are how Dreamweaver knows that the file is checked out. If you want to see these hidden files, on the expanded Files panel in Windows, choose View > Show Hidden Files. On Mac, there doesn’t appear to be a way to do this.
Tip
It’s usually a good idea to do your file management in Dreamweaver, but you can easily show a selected file in Windows Explorer or the Mac OS Finder. Select a file, right-click, and from the context menu choose Explore (Reveal in Finder).
Setting Up Check In and Check Out
In Chapter 2, you learned how to copy selected files or folders between the local and remote sites in the Files panel using the Get File and Put File buttons. Get and Put work fine when you are the only person working on a site, but you don’t want to use them when you are working on a site with other members of a team. In that case, you would want to prevent one person from accidentally undoing or overwriting changes made by another member of the team when the page is transferred back to the remote site.
When you are working with other people on a website, you will come to rely on Dreamweaver’s ability to keep track of and manage who is working on a file. Known as Check In/Check Out, this feature prevents more than one team member from working on a particular file at a time. The feature also lets all members of the team know who is currently working on what file. Check In/Check Out replaces the use of Get and Put for sites that have Check In/Check Out enabled. When you want to work on a file, you check it out, and when you are done working on the file and want to send it back to the remote server, you check it in.
Dreamweaver shows the status of files in the Files panel. Files that are checked out to you appear with a green check mark next to them, and files that are checked out by others appear with a red check mark next to them. Files that are read-only (because they are files that Dreamweaver can’t edit or because the last time Dreamweaver connected to the remote server and checked their status they were checked out) appear with a padlock icon .
These files in the Files panel show their checked-out status.
To get the Check In/Check Out system to work properly, there are two cardinal rules all members of the web team must follow:
All members of the team must enable Check In/Check Out and Design Notes in their site definitions.
All members of the team must always use Dreamweaver or Contribute (and no other tools, such as an FTP program) to transfer files to and from the remote web server.
Tip
If Check In/Check Out is enabled for your site and you use the Get File or Put File button in the Files panel rather than the Check In or Check Out button, Dreamweaver transfers read-only versions of the file to and from the remote server.
Tip
When any team member checks out a file, Dreamweaver places a small text file on the remote site with the name of the checked-out file plus the extension .LCK. Dreamweaver uses this file to store the Check Out name and email address of the person who is using the file. When the file is checked back in, Dreamweaver automatically deletes the .LCK file.
To enable Check In/Check Out for your site
1. Choose Site > Manage Sites.
The Manage Sites dialog appears .
You use the Manage Sites dialog to set up Check In/Check Out.
2. In the list of sites, click to select the site for which you want to enable Check In/Check Out, and click the Edit icon at the bottom of the dialog.
The Site Setup dialog appears, set to the Site category.
3. In the Category list on the left side of the dialog, click the Servers category.
The dialog changes to show the defined servers .
You begin enabling Check In/Check Out in the Servers pane of the Site Setup dialog...
4. Click to select the remote server in the list, and then click the Edit Existing Server button at the bottom of the server list.
The Edit Server dialog appears.
5. Click the Advanced tab 
.
...and finish the process in the Advanced tab of the Edit Server dialog.
6. Select the “Enable file check-out” check box.
7. Select the “Check out files when opening” check box.
8. Enter a check-out name.
Because you may be working on a page using different programs or different systems, it’s a good idea to use a name that describes the program and/or system you’re working on. For example, the check-out name tom-dw-win indicates “Tom, using Dreamweaver, on Windows.” The check-out name tom-ct-mac would indicate “Tom, using Contribute, on Macintosh.”
9. (Optional but recommended) Enter your email address in the Email Address text box.
This allows coworkers to easily send you email if they need to communicate with you about the status of a file.
10. Click Save.
The Site Setup dialog reappears.
11. Click Save.
The Manage Sites dialog reappears.
12. Click Done.
Checking Files In and Out
When Check In/Check Out is enabled for your site and you use the Check Out button at the top of the Files panel, Dreamweaver checks to see if anyone else is currently working on the file. If someone else has the file checked out, Dreamweaver displays a dialog asking if you want to override that check out . In general, it’s a bad idea to do so, because it could lead to exactly the problems with multiple people working on the file that you want to avoid. On the other hand, if the person who checked out the file is just you working on another machine, and you know the current state of the file, go ahead and override the lock on the file.
If someone else has already checked out a file, Dreamweaver lets you know and asks what you want to do.
To check out a file for editing
1. In the Files panel, from the Site pop-up menu, choose the site that contains the file you want to check out .
You’ll check files in and out with the toolbar in the Files panel.
The site must have Check In/Check Out enabled.
2. Click the Connect to Remote Site button.
Dreamweaver connects to the remote site.
3. Choose the file (or files) you want to check out from the Files panel.
4. Click the Check Out button in the Files panel toolbar.
The Dependent Files dialog appears .
You can choose whether or not to download dependent files. If they haven’t changed, don’t bother.
5. If you need to also edit the dependent files, such as images or external style sheets, click Yes. In most cases, however, you will click No.
Dreamweaver transfers the selected files and puts green check marks next to the files in both the Local Files and the Remote Site views in the Files panel.
6. Make the changes you want to the checked-out files.
To check in a file to the remote server
1. In the Files panel, select the checked-out file or files.
2. Click the Check In button in the Files panel toolbar.
If the files you’re checking in have not been saved, Dreamweaver prompts you to save them. After you save the files, Dreamweaver removes the green check marks from the files in the Files panel.
Tip
You can have Dreamweaver automatically save unsaved files before checking them in by enabling the “Save files before putting” option in the Site category in Dreamweaver’s Preferences panel.
Tip
If you save and close a file without checking it in, the copy of the file on the remote site will not be updated. You should always check a file in when you are done working with it.
Tip
If you make a mistake and check out the wrong file, you can revert to the version of the file on the remote server, even if you modified and saved the checked-out version on your machine. Just right-click the checked-out file in the Files panel, and then choose Undo Check Out from the context menu. Dreamweaver removes your check-out lock from the remote server and replaces your local copy with the copy from the server, and that local copy of the file becomes read-only.
Using Design Notes
Dreamweaver’s Design Notes are XML files that Dreamweaver places on the site that can be used by web team members to annotate changes or note when a file was modified and by whom. A Design Note is associated with a file on your site, but it is a separate XML file with different fields that can be read by the Adobe programs . Design Note files aren’t visible to your site’s visitors.
Design Notes are XML files that Dreamweaver knows how to read.
You can create a Design Note yourself, and Dreamweaver and other Adobe programs can also make automated Design Note entries. For example, when you create an image in Fireworks or Flash and then export it to Dreamweaver, the program creates (and places in the Dreamweaver site) a Design Note entry for the exported file, which could be in GIF, JPEG, or SWF format. The entry records the name of the source file associated with the exported image in your site. That’s how Dreamweaver, Fireworks, Photoshop, and other external image editors know how to integrate the source file with the exported site image when you go to edit it (refer to Chapter 5 for more information about editing images in Dreamweaver with external image editors).
Dreamweaver stores Design Notes in folders called _notes in each of the site folders that have files with associated notes. These folders don’t appear in the Files panel, but you can see them if you use an FTP program to view your site . These notes folders contain one Design Note file for each site file that has a note.
Design Notes appear in the special _notes folders Dreamweaver creates in your site, seen here in an FTP program.
To add a Design Note
1. Open the file to which you want to add a Design Note, and then choose File > Design Notes.
or
In the Files panel’s Local view, select the file to which you want to add a Design Note, and then right-click and choose Design Notes from the context menu.
The Design Notes dialog appears, set to the Basic info tab . This tab shows you the filename and the location of the file at the top of the dialog.
Use the Design Notes dialog to enter your notes.
2. (Optional) From the Status pop-up menu, choose the status you want to set for the Design Note.
The preset statuses are draft, revision1, revision2, revision3, alpha, beta, final, and needs attention.
3. (Optional) If you want to date-stamp your note, click the calendar icon in the dialog.
The current date appears in the Notes field.
4. Type your note about the file.
5. Click OK.
Dreamweaver saves the Design Note, and the Design Notes dialog disappears.
Tip
Adobe Contribute also uses Design Notes to make note of when a Contribute user has updated a page. But Contribute doesn’t have an interface to make specific notes; it just creates automated notes with the contributor’s username and the page’s modification date. Contribute Design Notes also keep track of rollbacks, which allow Contribute users to revert to previously published versions of pages.
Tip
You must check out the file associated with a Design Note before you can add or modify the Design Note.
To modify a Design Note
1. Open the file that contains a Design Note you want to modify, and then choose File > Design Notes.
or
In the Files panel, select the file whose Design Note you want to modify, and then right-click and choose Design Notes from the context menu.
The Design Notes dialog appears.
2. Make changes to the Status pop-up menu, or enter a new note in the Notes field.
If you click the calendar icon to add a new date stamp, the new note appears at the top of the dialog, and older notes appear below the newest entry, in reverse chronological order.
3. Click OK.
Setting Up Subversion
Dreamweaver features support for Subversion, which is a free, open-source version control system (VCS). A VCS is software that runs on the remote server and manages multiple revisions of the same bit of information. Every time a file changes, a VCS server creates a new version of the file, handles users checking files in and out of the server repository, and flags possible conflicts (when more than one user has made changes to the same file). Most VCS servers allow permitted users to get the latest versions of files, check in changed files, and revert files to an unmodified state or to a past version.
A Subversion (SVN) setup would generally be used on large websites or with websites maintained by very technically savvy users. Your site administrator will know whether or not your website uses an SVN version control system.
The Subversion server support in Dreamweaver allows you to move, copy, and delete files locally and then synchronize changes with your remote SVN repository.
This still does not completely replace all of the capabilities of a true Subversion client, but it’s good for working with a Subversion repository without having to constantly switch from Dreamweaver to a separate Subversion client program.
Tip
Though Dreamweaver supports Subversion, it does not yet support the very popular Git code repository, another VCS.
To enable Subversion version control
1. Choose Site > Manage Sites.
The Manage Sites dialog appears .
Begin setting up Subversion support in the Manage Sites dialog.
2. In the list of sites, click to select the site for which you want to enable SVN, and click the Edit icon (it looks like a pencil).
The Site Setup dialog appears.
3. In the Category list on the left side of the dialog, click the Version Control category.
The dialog changes to show the Version Control pane.
Other Subversion abilities further allow you to avoid resorting to a dedicated Subversion client. The Revert command allows you to quickly correct tree conflicts or roll back to a previous version of a file. From the Repository view of the Files panel in Dreamweaver, you can reduce clutter by directly performing svn:ignore commands to hide files you don’t need to access (this is the SVN equivalent of Dreamweaver’s familiar cloaking ability). To ensure future compatibility, the built-in Subversion libraries in Dreamweaver are designed to be updated by the Adobe Extension Manager.
The version of the Subversion client installed in your copy of Dreamweaver is listed in the Version Control pane of the Site Setup dialog. As newer versions of the Subversion libraries become available, they will be made available to the public as free extensions at Adobe Exchange, at www.adobeexchange.com. Rather than entering that URL, you can instead click the Adobe Subversion Central link in the Version Control pane.
4. From the Access pop-up menu, choose Subversion.
The server settings appear in the pane .
Enter the information needed to connect to the Subversion server.
5. From the Protocol pop-up menu, choose the communications protocol used by your website’s Subversion server. Check with your site administrator if necessary.
Your choices are HTTP, HTTPS, SVN, and SVN+SSH.
6. In the Server Address field, enter the Subversion server’s URL.
7. In the Repository Path field, enter the path to the server’s database. Again, you can get this from your site administrator.
8. Most of the time, the default entry in the Server Port field will be correct (it changes according to the choice in the Protocol pop-up menu). If not, your site administrator will know the correct port. Click into the field, and then enter the correct port number.
9. Enter your username and password, and then click the Test button.
If all is well, Dreamweaver reports a successful connection to your SVN server.
10. Click OK.
The Manage Sites dialog reappears.
11. Click Done.
Tip
You cannot use both a Subversion server and Dreamweaver’s built-in Check In/Check Out system on the same website. You must choose one or the other (or neither).
Generating Site Reports
A large part of site management, especially if you are managing a team working on the site, is keeping up with all of the things that are happening to the site. For example, let’s say that you want to know which pages each of your team members is working on at the moment. Dreamweaver allows you to get a report of the checked-out pages and who has checked them out. Similarly, you can get reports on many other aspects of your site, listed in Table 18.1. Dreamweaver splits reports into two categories: Workflow, with reports detailing who has worked on the site and when; and HTML Reports, which search through files on your site looking for HTML errors.
Some reports will let you enter parameters for the report that allow you to widen or narrow the criteria used for the report. All the reports, however, allow you to report on just the current document; the entire current local site; just selected files in the site; or files within a selected folder in the site.
To get site reports
1. Choose Site > Reports.
The Reports dialog appears .
Specify the kind of site report you want in the Reports dialog.
2. From the Report on pop-up menu, choose the scope of the report.
Your choices are Current Document, Entire Current Local Site, Selected Files in Site, or Folder.
3. In the Select reports list, select the report or reports that you want to run.
If the report you have selected allows you to choose report criteria, the Report Settings button becomes active.
4. (Optional) For reports that allow additional settings, click Report Settings and then complete the resulting settings dialog.
Each report that allows additional settings has a different criteria dialog. For example, shows the criteria dialog for the Recently Modified report.
The Recently Modified dialog, brought up by the Report Settings button, allows you to specify the scope of the report. Other reports have different dialogs.
After you click OK in the settings dialog, you return to the Reports dialog.
5. Click Run.
Dreamweaver runs the report and shows the report output in the Site Reports tab of the Results panel below the Property inspector and also in an HTML page, which Dreamweaver opens in your default browser.
The report appears in the Site Reports panel.
Checking for Broken Links
One of the more vexing problems with websites is broken links—that is, links that no longer point to valid destinations within your site. Dreamweaver usually does a pretty good job of updating links when you move or rename a page, but you can still end up with broken links if you cut or copy page content from one page to another on your site. Dreamweaver allows you to check all of the links on your site to make sure they are still valid and reports any broken links it finds. You can then easily open the file that contains the broken link to fix it.
To check for and fix broken links throughout your site
1. Choose Site > Check Links Sitewide, or press Ctrl-F8 (Cmd-F8).
Dreamweaver checks all the pages on your site and shows you files with broken links in the Link Checker tab of the Results panel .
Files with broken links appear in the Results panel.
2. Double-click one of the results.
The file with the broken link opens, with the broken link highlighted .
To fix the broken link, double-click one of the report results; the file with the broken link opens with the broken link selected. In this case, the picture in the sidebar is highlighted because it links to a nonexistent page.
3. Using the Property inspector, fix the broken link.
For more information about using the Property inspector to work with links, see Chapter 6.
4. Repeat steps 2 and 3 until you have eliminated all of the broken links.
Tip
Dreamweaver only checks for the validity of links to documents within your site. If you have external links on your site (links that point to other sites on the Internet), Dreamweaver does not follow those links, and so it does not ensure that those sites still exist and are reachable. If you need to validate external links, you need to follow those links manually in a web browser.
Tip
You can also check for broken links on just the page you are editing. Choose File > Check Page > Links, or press Shift-F8.
Finding External Links and Orphaned Files
You can get two other types of reports from Dreamweaver. The first is a list of links from your site to other sites, called external links, and the other is a report of orphaned files, which are files that have no links pointing to them. In the first case, after Dreamweaver finds the external links, you can (if needed) easily change them. In the case of orphaned files, you should create links to the files from your other Dreamweaver pages.
To find external links and orphaned files
1. Choose Site > Check Links Sitewide, or press Ctrl-F8 (Cmd-F8).
Dreamweaver checks all the pages on your site and shows you files with broken links in the Link Checker tab of the Results panel.
2. From the Show pop-up menu in the Results panel, choose External Links.
or
From the Show pop-up menu in the Results panel, choose Orphaned Files .
Choose either External Links or Orphaned Files to obtain a report on those items.
The results appear in the Results panel.
3. (Optional) If you chose External Links in step 2, the Results panel shows a list of files and the external links that appear on them. Click one of the links to highlight it and make it editable. You can then enter a new destination for the link .
You can change external links right in the Results panel.
or
(Optional) If you chose Orphaned Files in step 2, the Results panel shows a list of files with no links pointing to them. Double-click a filename to open that file, or open other files in the Files panel to create links to the orphaned file.
Deleting Sites
When you will no longer be working with a site (perhaps because the project has been taken over by another developer), you can delete its site definition. This removes the site from the Manage Sites dialog and from the Site pop-up menu in the Files panel. Of course, all the settings for the site are also deleted. You should be careful when you delete site definitions, because there’s no way to undo the action.
To delete a site from Dreamweaver
1. Choose Site > Manage Sites.
The Manage Sites dialog appears .
Begin deleting a site in the Manage Sites dialog.
2. From the list of sites, click the site that you want to delete.
3. Click the Remove icon (it looks like a minus sign).
Dreamweaver alerts you that you cannot undo this operation .
When you try to delete a site, Dreamweaver asks you to confirm your action.
4. Click Yes.
Dreamweaver deletes the selected site.
Tip
Although Dreamweaver is asking if you want to delete the site, the site itself (that is, the files in the local site folder on your hard drive) won’t be touched. The only things that are deleted are the site definitions: what Dreamweaver knows about your site. And of course, nothing is changed on the remote site.
Exporting and Importing Site Definitions
When you create a local site on your machine, Dreamweaver creates a local site definitions file with all the information about the site’s settings, including information about the server connection, your server password, and any site-specific preferences you may have set in the Site Definition dialog. If you need to move the site from one machine to another, or if you want to add members of your web team and have them share the same site preferences, you must export the site definition. When you do that, Dreamweaver saves the site definition information as an XML file with the .ste file extension.
Dreamweaver allows you to export the site definition in one of two ways. You can export it with your server username and password information (this facilitates moving the site to a different machine), or you can export the site with the site preferences but without your server login information (this is good for adding coworkers to the site).
You can, of course, also import a site definition file that you had previously exported or one you received from a colleague.
If you are a Creative Cloud subscriber, you should be able to use the service’s synchronization features to sync your site definitions between two machines that are on the same subscription. See Chapter 1 for more about settings synchronization.
The Manage Sites dialog appears.
2. From the list of sites, click the site you want to export.
3. Click Export.
The Exporting Site dialog appears .
Choose whether or not you want to include your login information in the exported site definition file.
4. Click “Back up my settings (includes login, password, and local paths)” if you plan to move the site to another machine.
or
Click “Share settings with other users (does not include login, password, or local paths)” if you want to create a site definition file that does not include your server login information.
5. Click OK.
The Export Site dialog appears.
6. Navigate to where you want to save the site definition file, make sure that the name Dreamweaver has given the file is OK (by default it gives the file the name of your site and appends the .ste file extension), and then click Save.
Dreamweaver saves the site definition file onto your hard disk.
You’ll return to the Manage Sites dialog.
7. Click Done.
To import a site definition
1. Choose Site > Manage Sites.
The Manage Sites dialog appears.
2. Click Import.
The Import Site dialog appears.
3. Navigate to and select the site definition file you want to import.
4. Click Open.
Dreamweaver imports the site definition and adds it to the list of sites in the Manage Sites dialog.
5. Click Done to dismiss the Manage Sites dialog.
Tip
You can use the ability to export the site definition file as a way to back up your site’s settings, but this is no substitute for a regular and comprehensive backup strategy covering all of the important documents on your hard drive.