Dreamweaver in a Nutshell
A Desktop Quick ReferenceBy Heather Williamson & Bruce Epstein
0-596-00239-4, Order Number: 2394
470 Pages, $29.95
Managing a Web Site
Everyone knows that planning is the first step in web site development, but many people overlook the need for ongoing management. Without proper maintenance, a complex site can become riddled with broken external links, missing files, and broken CGI scripts.
Thankfully, Dreamweaver offers all the webmaster tools necessary for deployment and long-term maintenance, such as FTP, link checking, and file checking. Even better, Dreamweaver's site management tools simplify development and help reduce the likelihood of problems down the road. Dreamweaver helps you to manage and synchronize both the local site (the development version on your personal computer) and the remote site (the version on a web server that gets published on the Internet).
Site Management Overview
In this chapter we'll cover how to manage a site and the following topics:
- Setting up a site and its preferences
- Managing a site's logical structure using a site map (a graphical representation of the site and its links) in the Site Map view of the Site window
- Managing a site's physical structure using a files list (a directory listing similar to the Windows File Explorer or Macintosh Finder) in the Site Files view of the Site window
- Using File Check In/Check Out and Design Notes to manage file changes
- Finding and fixing broken links
- Uploading your site and synchronizing remote and local files
- Site-management reports
- Managing assets with the Assets panel
In the remainder of Part II, we'll discuss document management, including the use of templates, the Library, and stylesheets.
TIP: As you work, test your pages and your site's navigation so that problems are spotted early. Use File Preview in Browser (F12) to test your site; the Dreamweaver Document window isn't intended for meaningful testing. See Appendix C for more ideas on planning and testing your site.
Menu and File Browser Caveats
Dreamweaver's site-management operations are performed in the Site window. Although Dreamweaver operates nearly identically on the Macintosh and on Windows, the Site menu commands are an exception; the location of these menu commands varies somewhat across platforms.
TIP: In Windows, the Site window has its own menu bar, shown in Figure 6-8, that is separate from the Document window's menu bar. On the Macintosh, a single menu is located at the top of the monitor; the Site window-related commands are under the Site submenu in this menu bar.
In Windows, some commands are duplicated on the menu bars of both the Document and Site windows. Furthermore, right-clicking (Windows) or Ctrl-clicking (Macintosh) in the Site window opens a contextual menu that duplicates the commands available elsewhere. In this chapter, we cite some, but not all, of the ways to access the commands via menus. See Table A-11 and Table A-12 in Appendix A for a complete listing.
You may also encounter some platform differences that affect how folders are chosen, as shown in Figure 6-1.
Figure 6-1. Folder selection dialog boxes on Macintosh and Windows
Macintosh folder selection dialog boxes contain two separate buttons--Open and Choose--used to open and select folders. Windows folder selection browser dialog boxes have a single Select button that changes to an Open button when a folder is highlighted. You can also double-click a folder's name to open it. However, if you pause too long between clicks, Windows assumes that you want to rename the folder instead and highlights the folder without opening it. Therefore, the Select button in Figure 6-1 selects the Dreamweaver 4 folder (the last folder that was opened) on Windows, not the highlighted folder named MySite. On the Macintosh however, the Choose button selects the currently highlighted folder, such as the MySite folder in Figure 6-1. If you open the MySite folder on the Macintosh, you must navigate back up the directory tree before you can choose it with the Choose button.
TIP: Choosing the wrong folder in the folder selection dialog box is very easy. On Windows, always open the folder that you want to choose before clicking the Select button. On the Macintosh, leave the desired folder closed, then highlight it and click Choose (not Open).
Sometimes you'll choose a file but not literally open it, such as when inserting an image or specifying the destination of a hyperlink. Dreamweaver sometimes displays the incorrect button (either Open or Select) in the file browser, but you can safely ignore such inconsistencies. When saving or retrieving files, Dreamweaver doesn't always reopen the file browser to the last-used folder, so check the pathname carefully.
Both Windows and the Macintosh allow you to create a new folder from within a file browser dialog box, as indicated in Figure 6-1. This feature is convenient when you want to save a file in a folder but forgot to create the folder ahead of time.
WARNING: Never use the Windows File Explorer or Macintosh Finder to rename or move files within your site (Windows even allows you to rename and move files using the file browser dialog box). To avoid breaking links, move and rename files in the Dreamweaver Site window only.
Defining a Site
Before plunging into the Site window, you should define your site, which is done in the Site Definition dialog box. If you are a graphical thinker, you may prefer to read "The Site Window" section later in this chapter, to see how the Site window looks and operates, before returning here. As discussed in that section, you can view the Site window in several different ways.
Whereas "creating" a site entails building HTML pages, "defining" a site tells Dreamweaver to treat your collection of pages as part of a larger whole. Although you can define your site at any time, the earlier you do so, the sooner you can take advantage of Dreamweaver's site management features.
TIP: Whether you start a new site or manage an existing site with Dreamweaver for the first time, the site definition procedure is the same. Dreamweaver can manage any set of files contained in a single local development folder and its subfolders (see the section "Preparing an Existing Site for Use" later in this chapter).
Create a separate site definition for each site you want Dreamweaver to manage. Site definitions can be created and edited under Site Define Sites (and you can switch between existing sites using Site Open Site). When defining a site, you specify such things as its home page, local directory, remote directory, access method, server configuration, and file tracking method.
To define a new site, use Site New Site to open the Site Definition dialog box shown in Figure 6-2. This dialog box's options are broken down into five categories (listed on the left side and discussed in the following sections). Additional site preferences can be configured under Edit Preferences Site.
Figure 6-2. The Local Info category of the Site Definition dialog box
Local Info Category
The Local Info category of the Site Definition dialog box, seen in Figure 6-2, includes the options that tell Dreamweaver about the development version of your site residing on your local computer.
The Local Info category options are as follows.
- Site Name
- A name of your choice used to identify the site in Dreamweaver; this name appears under Site Define Sites and in the Site pop-up menu in the Site window.
- Local Root Folder
- The location of the top-level folder for the site on the local machine (technically, the "local" folder could also be a networked drive). This folder should contain the Home Page, as set under the Site Map Layout category of the same dialog box. All files for a web site, including HTML files, GIF files, etc., should be placed in this folder or in subfolders beneath it. (If you link to any files outside this folder, Dreamweaver prompts you to copy the assets there.)
TIP: Whether starting a new site or managing an existing site with Dreamweaver for the first time, your Local Root Folder location should be the folder containing your home page. If your Local Root Folder pathname includes a forward (/) or backward slash (\) character on the Macintosh, it confuses Dreamweaver and prevents you from using the Site Map feature.
- Refresh Local File List Automatically
- If enabled, Dreamweaver automatically refreshes the Site window's local file list when copying files from the web server to the local drive.
- HTTP Address
- The Internet address of the web site, such as http://www.yourdomain.com. This setting allows the Link Checker to determine if an absolute URL refers to a file within the site or to an external site.
- Enable this option to maintain a local cache file that speeds up the Assets panel, link management, and the Site Map view.
Remote Info Category
The Site Definition dialog box's Remote Info category defines the configuration of the remote server where your live site is published. The appearance of the Remote Info category pane varies, depending on the choice made for the Server Access option. Figure 6-3 shows its appearance when FTP access is selected.
Figure 6-3. The Remote Info category of the Site Definition dialog box showing options for FTP access
The Server Access field has five options:
- Choose None if you do not plan to upload your site to a server or if you don't yet have the detailed information required when using the other options.
- Use FTP access (shown in Figure 6-3) if you upload files to your web server via FTP, such as when using a typical dialup or DSL connection. You'll need additional information provided by your ISP or webmaster to complete the configuration as described in the next section.
- Choose Local/Network access if your web server is a machine on your local network, such as when publishing for an intranet. Instead of literally uploading files to a remote site, they'll simply be copied to the appropriate directory across the network.
- SourceSafe Database
- Choose SourceSafe Database access if you're using Microsoft's Visual SourceSafe project tracking database software to collaborate with your development team.
- Choose WebDAV access if you're using a file-tracking and version-control system based on the Web-based Distributed Authoring and Versioning open standard.
TIP: If using the SourceSafe Database or WebDAV options, you should obtain the free Dreamweaver 4.01 update from http://www.macromedia.com/support/dreamweaver/downloads/.
If you've chosen FTP access in the Remote Info category of the Site Definition dialog box (shown in Figure 6-3), you'll need to supply the following information to tell Dreamweaver how to reach the FTP server. If you've used an FTP program to transfer files in the past, use those same settings here for Dreamweaver's FTP access:
- FTP Host
- Specify the address of FTP server, usually in the form ftp.someserver.com or www.someserver.com, not simply someserver.com. Don't include any subdirectories, slashes, or @ signs, and don't include the ftp protocol, such as in ftp://ftp.someserver.com. If your server doesn't use the default FTP port (26) specify the FTP port, such as ftp.someserver.com:portNum. The ftp server name may or may not match your domain name; ask your webmaster or ISP if you're unsure.
- Host Dir
- Specify the path of the folder that, with the FTP Host specified earlier, points to your site's root directory on the remote server (i.e., the one that contains your home page). The path may be something like /www/htdocs/, /virtual_html/, or /home/yourdomain/. Ask your ISP or webmaster what folder is assigned for this purpose. You must specify an existing folder on the remote site for the Host Dir. If necessary, specify another folder temporarily, create a new folder in the Remote Files pane of the Site window, and assign it as the Host Dir afterwards.
- Provide the login name for accessing the FTP server; this name may not be the same login name that you use to access email from your ISP.
- Provide the FTP account password. Check the Save option so you don't have to keep retyping your password (although you risk someone else gaining access to your site if you share a computer or lose your laptop).
- Use Passive FTP
- Enable this option if your firewall allows passive FTP access only (ask your webmaster).
- Use Firewall
- Enable this option if you connect to the remote server from behind a firewall. (Configure the firewall options under Edit Preferences Site.)
The following options control how Dreamweaver tracks which files are in use. All developers on a collaborative team should use File Check In/Check Out. To check out a file means to take ownership of it and prevent other users from making changes to it while you make changes. To check in a file means to submit your revisions and relinquish exclusive control of the file.
- Enable File Check In and Check Out
- Enable this option to use Dreamweaver's built-in file tracking system. The next three options appear only if this checkbox is enabled.
- Check Out Files when Opening
- Enabling this option causes Dreamweaver to check out a file whenever it is opened, which ensures that you don't edit a locked file. If this option is disabled, Dreamweaver prompts you whether to View or Check Out the file when you attempt to open a locked file.
- Check Out Name
- Provide your name so others know to contact you if you've checked out a file but never checked it back in.
- Email Address
- Provide your email address so other team members can contact you via email if you've checked out a file but never checked it back in.
If you've chosen Local/Network access in the Remote Info category of the Site Definition dialog box (not shown in Figure 6-3) you'll need to supply the following information to tell Dreamweaver where to copy the files over the network for publication.
- Remote Folder
- Provide the path to the network server directory that acts as the root folder for your remote site. This path might look like G:/www/public_html/foobar/ (ask your webmaster or network administrator).
- Refresh Remote File List Automatically
- Enable this option to refresh the Remote Files pane of the Site window whenever files are transferred from the Local Files list.
When using Local/Network access, the File Check In and Check Out options are the same as when using FTP access (described in the previous section). Use of Local/Network access does not require a Dreamweaver password setting. That said, to copy files to your network server, you should log into your network prior to starting Dreamweaver.
SourceSafe Database access
Visual SourceSafe is a sophisticated project tracking software package from Microsoft. If you've chosen SourceSafe Database access in the Remote Info category of the Site Definition dialog box (not shown in Figure 6-3), you'll need Dreamweaver 4.01 plus access to a Visual Source Safe (VSS) server and a VSS database. Windows users must also install Version 6 or later of Microsoft's VSS Client. Macintosh users must install the Metrowerks VSS client as described at:http://www.macromedia.com/support/dreamweaver/site/source_safe_mac/http://www.macromedia.com/support/dreamweaver/ts/documents/vss_on_mac.htm
These SourceSafe configuration options are accessed using the Settings button in the Remote Info category of the Site Definition dialog box (not shown). Ask your SourceSafe administrator for assistance.
- Database Path
- Specifies the path to the SourceSafe database's srcsafe.ini file that Dreamweaver uses to initialize SourceSafe integration.
- Provides the name of your project within the SourceSafe database (a single database can manage multiple projects).
- Provides your SourceSafe account username.
- Provides your SourceSafe account password. Enable the Save option if you don't want to keep retyping your password.
The final option determines how Dreamweaver integrates its File Check In/Check Out feature with SourceSafe.
- Check Out Files when Opening
- You should enable this option to allow Dreamweaver's File Check In/Check Out feature to work cooperatively with SourceSafe. You need not supply identifying information because Dreamweaver uses your SourceSafe identity.
WebDAV is an open standard for file tracking and version control supported by some web servers. If you've chosen WebDAV access in the Remote Info category of the Site Definition dialog box (not shown in Figure 6-3), you'll need Dreamweaver 4.01 plus access to a WebDAV-compatible server, such as Microsoft IIS 5.0 or the Apache Web Server.
The WebDAV configuration options are accessed using the Settings button in the Site Definition dialog box (not shown). Ask your WebDAV administrator for assistance.
- The URL of the root folder on the WebDAV server, beginning with http://.
- Provides your WebDAV account username.
- Provides your WebDAV account password. Enable the Save Password option if you don't want to keep retyping your password.
- Provides your email address to be used within WebDAV.
The final option determines how Dreamweaver integrates its File Check In/Check Out feature with WebDAV.
- Check Out Files when Opening
- You should enable this option to enable Dreamweaver's File Check In/Check Out feature to work cooperatively with WebDAV. You need not supply identifying information because Dreamweaver uses your WebDAV identity.
Design Notes Category
Design Notes provide a means to track extra file information associated with web site documents, such as the location of original artwork or comments regarding a file's status. The options available under the Design Notes category of the Site Definition dialog box are shown in Figure 6-4.
Figure 6-4. The Design Notes category of the Site Definition dialog box
Design Notes are ideal for collaboration but act as useful reminders even if you work alone. They are used for Fireworks and Flash integration and therefore should be turned on in most cases. See the section "Using Design Notes" later in this chapter for more details. The dialog box options are as follows.
- Maintain Design Notes
- You should enable Design Notes to take advantage of their many benefits, including File View column sharing as described under the section "File View Columns Category."
- Use the Cleanup button to delete Design Notes associated with files that have been deleted. (Dreamweaver handles this task for you if you delete files using the Site window.)
- Upload Design Notes for Sharing
- Enable this option to upload Design Notes to the web server for sharing with other collaborators. The notes are not made available to web site visitors. This option must be enabled to support File View column sharing as described in the section "File View Columns Category" later in this chapter.
Site Map Layout Category
The Site Map Layout category of the Site Definition dialog box, shown in Figure 6-5, controls the site map's display (shown in Figure 6-9). This dialog box can be opened easily using View Layout in the Site window (Windows) or Site Site Map View Layout (Macintosh); however, these menu options work only when the Site Map view is open.
Figure 6-5. The Site Map Layout category of the Site Definition dialog box
The Site Map Layout options are described next. The most important item is the Home Page option; if it is set incorrectly, you won't be able to access the Site Map view in the Site window.
- Home Page
- Provides the path to the site's home page, which should be located in the Local Root Folder as specified under the Local Info category of the same dialog box. If you haven't created your home page yet, leave this option blank and set it later using Site Set as Home Page in the Site window (Windows) or Site Site Map View Set as Home Page (Macintosh).
TIP: If managing an existing site for the first time in Dreamweaver, simply browse to your home page in your site's root folder. If the path to your home page includes a forward (/) or backward slash (\) character on the Macintosh, it will confuse Dreamweaver and prevent you from using the Site Map feature.
- Number of Columns
- Specifies the number of file icons to display per row in the site map. If this number if large, the site map may be very wide. If the number is small, the site map will require more vertical space in the Site Map window.
- Column Width
- Specifies the spacing between columns in the site map (between 70 and 1,000 pixels). If the width is too narrow, items may be too crowded to read--but the width of individual columns can be set by clicking and dragging the vertical arrows in the Site Map window (see Figure 6-9). Use the Zoom pop-up menu in the lower-left corner of the Site window to change the site map's magnification.
- Icon Labels
- Specifies whether to display filenames or document titles below the icons in the Site Map view. Toggle this option using Ctrl+Shift+T (Windows) or Cmd+Shift+T (Macintosh). You can also run a report to detect untitled documents. The Site Files pane always shows filenames, but a document's title is shown at the bottom of the Site window when you roll over its name in the file list.
- Display Files Marked as Hidden
- Determines whether all files marked as hidden should be omitted from the site map. This option is also available under View Show Files Marked as Hidden in the Site window (Windows) or Site Site Map View Show Files Marked as Hidden (Macintosh). To mark an individual file as hidden, use Show/Hide Link from the contextual menu in the Site window, Ctrl+Shift+Y (Windows), or Cmd+Shift+Y (Macintosh). When hidden files are displayed, their names are shown in italics.
- Display Dependent Files
- Determines whether to show dependent files (such as GIFs, JPEGs, and PNGs) embedded within each web page. If this option is disabled, only the files that are connected via hyperlinks are shown in the site map.
TIP: Dreamweaver for Windows can save a picture of the site map in PNG or BMP format using the File Save Site Map command in the Site window. Dreamweaver for Macintosh can save a picture of the site map in JPEG or PICT format using the Site Site Map View Save Site Map command.
File View Columns Category
The File View Columns category of the Site Definition dialog box, shown in Figure 6-6, controls the appearance of the Site Files view (shown in Figure 6-14). This dialog box can be opened by choosing View File View Columns in the Site window (Windows) or Site Site Files View File View Columns (Macintosh).
Figure 6-6. The File View Columns category of the Site Definition dialog box
The File View Columns options are described next. They can be used to show the file's name, modification date, and type, and even information from Design Notes.
- Enable Column Sharing
- Enabling this option allows new columns you define to be shared by other users on your development team. It also allows you to access shared columns that other users have created. After enabling sharing, you can designate specific columns to be shared using the Share with All Users of This Site option. To share columns, Design Note sharing must be enabled in the Design Notes category of the same dialog box.
- Column List
- The items (rows) in the scrolling Column List configure the columns shown in the Site Files window (i.e., the row labeled Notes controls the Notes column in the Site Files window as shown in Figure 6-14). Don't confuse these columns with the Name, Type, and Show columns in the Column List itself.
- Select an item in the Column List to set its individual properties. Add a Personal (i.e., custom) item by clicking the plus (+) button (see Figure 6-6). Clicking the minus (-) button will delete an item without warning (but items can be recreated easily). The built-in items Name, Notes, Size, Type, Modified, and Checked Out By cannot be deleted (however, all but the Name column can be hidden). Use the up and down arrow buttons to control the order of the rows, which determines the order of the columns in the Site Files window. The Checked Out By column is useful for tracking who has a file checked out when using Dreamweaver's File Check In/Check Out feature.
The following five options apply to each item in the Column List (although some can't be changed for built-in items):
- Column Name
- A new name of your choice for the custom column when displayed in the Site Files view. The names of built-in columns cannot be changed.
- Associate with Design Note
- This option's name is misleading. It allows data entered in Design Notes to be displayed in the custom columns you've defined for the Site Files window. For now, you can choose Status, which is one of the predefined fields (pieces of data) that can be extracted from Design Notes. See the discussion under the section "Using Design Notes" later in this chapter for details on displaying other data, including the assigned, due, and priority fields. (Fields are also known as name/value pairs.)
- Controls the alignment (Left, Right, or Center) of column data.
- Use this checkbox to show or hide the selected column in the Site Files view. The built-in Names column cannot be hidden, but this option is useful for hiding the other built-in columns, which cannot be deleted.
- Share with All Users of This Site
- Enable this option to make this column available to other users who have enabled sharing. This option lets you selectively share columns, provided that Enable Column Sharing is enabled. The built-in columns are always shared by all users.
Once you've finished defining your site, click OK in the Site Definition dialog box.
Editing a Previously Defined Site
Editing a previously defined site is not the same thing as creating a site definition to manage an existing site in Dreamweaver for the first time.
TIP: To create a site definition for an existing site, see the section "Preparing an Existing Site for Use" later in this chapter.
To transfer site definition files between computers, use the Site Import Export extension available from the Dreamweaver Exchange (as explained in Chapter 22). Dreamweaver 4 reads site definitions from earlier versions of Dreamweaver.
To edit an existing site definition, choose Site Define Sites, which opens the Define Sites dialog box, shown in Figure 6-7.
Figure 6-7. The Define Sites dialog box
From this dialog box you have four options:
- Creates a new site definition (same as Site New Site).
- Edits an existing site definition.
- Duplicates an existing site definition to use as the basis for a new one. Be sure to change the Local Root Folder and HTTP Address under the Local Info category, the remote server settings under the Remote Info category, and the Home Page under the Site Map Layout category. If two sites share the same Local Root Folder, Dreamweaver's file management and synchronization features may not work properly.
- Deletes an existing site definition. Deleting a site definition does not delete HTML and asset files within the site, but it does delete Design Notes.
Note that the Site Open Site command is not used to edit a site definition; instead, it "loads" an existing site definition, allowing you to switch between web site projects. You can also switch sites using the Site pop-up menu in the toolbar of the Site window (see Figure 6-8).
TIP: Double-click the current site's name in the Site pop-up menu in the Site window's toolbar to quickly open the current site definition for editing.
Creating a New Site from Scratch
If you have an existing collection of web pages, you can create a new site definition for them by using the procedures described earlier in this chapterunder "Defining a Site." Procedure 2 shows how to define a site before creating your web pages.
- Choose Site New Site.
- Under the Local Info category of the Site Definition dialog box, specify the site's home directory in the Local Root Folder field. You can browse to an existing folder, or even create a new folder from within the folder selection dialog box, as indicated in Figure 6-1.
- Set the options under the other categories of the Site Definition dialog box as desired. At a minimum, specify the remote server access information under the Remote Info category; you can temporarily set the Server Access to None if you don't have the information handy.
- You can leave the Home Page field under the Site Map Layout category blank for now; we'll set it during Step 9.
- Click OK to save the site definition for this site. Dreamweaver will open the Site Files view of the Site window.
- Use File New Window in the Site window (Windows) or File New (Macintosh) to open an untitled Document window. Use File Save As to immediately save the file as home.html in the site's local root folder, as defined in Step 2. (The filename home.html is an example. Your web server may prefer home.htm, index.html, index.htm, default.html, or default.htm.)
- Add whatever content you like to the home page using the Document window, Objects panel, etc. Dreamweaver may prompt you to copy dependent files, such as GIFs, to the site's local root folder. Resave the document.
- Use Window Site Files (F8) to return to the Site Files window. Your new home.html file should appear in the Local Files pane on the right side of the window.
- Select the home.html file in the Local Files list by clicking it once. Then choose Site Set as Home Page in the Site window (Windows) or Site Site Map View Set as Home Page (Macintosh) to tell Dreamweaver to use this file as the site's home page.
- Click and hold the Site Map button in the Site window's toolbar (see Figure 6-9), and choose the Map and Files option. Your home page should appear on the left in the Site Map pane of the Site window. The right pane should continue to show the Local Files list.
Congratulations! You've set up your site and defined its home page. See the next section for details on using the Site window to build and manage sites.
The Site Window
The logical map of a web site determines how visitors find information, just as the directory structure determines where developers physically organize the files. Without a well-planned logical structure, a site's appeal and usefulness is compromised; without a well-planned physical structure, development takes longer than necessary and results in a less reliable site.
There is only one Site window, but it has three different panes:
- The Site Map pane is a graphical representation of your site.
- The Local Files pane shows the files in the local (development) folder.
- The Remote Files pane shows the files on the remote (live) site.
To display these panes, the Site window has three different modes:
- The Site Map and Files view (see Figure 6-8) displays the Site Map pane and either the Local Files pane or the Remote Files pane.
- The Site Map Only view (see Figure 6-9) displays only the Site Map pane.
- The Site Files view (see Figure 6-11) displays both the Local Files and Remote Files panes.
Site Map and Files view and Site Map Only view are both variations of the Site Map view as controlled by the Site Map button in the Site window toolbar, also indicated in Figure 6-9 (click and hold the Site Map button to switch modes). The subsequent sections describe how to use and configure the Site window's various incarnations.
The Site Map and Files View
Dreamweaver represents a site's logical interconnections using a graphical site map. Open the Site Map window (shown in Figure 6-8) using Window Site Map, or Alt+F8 (Windows), or Opt+F8 (Macintosh).
Figure 6-8. The Site Map and Files view of the Site window showing a site map and local file list
On the left side of the Site window is the Site Map pane showing the site map of a small site; on the right side is the Local Files pane showing the file directory structure of the same site. (You can't use Site Map view until you have specified the home page for your site. Use the Site Map Layout category of the Site Definition dialog box to do so.) You can show the Local Files pane on the left side instead of the right using Edit Preferences Site Always Show Local Files on the Left. To display the Remote Files pane instead of the Local Files pane alongside the Site Map pane, use Edit Preferences Site Always Show Remote Files on the Right/Left.
Although the two panes both represent the same site, the site map shows interconnections created by hyperlinks, independent of the document files' locations on the hard drive. Furthermore, some files in the Local Files pane may not be used within the site. Use the arrow button in the lower-left corner of the window (indicated in Figure 6-8) to show or hide the Site Map pane temporarily.
Notice that selecting a file in one pane also selects it in the other pane. When a file is selected in the Site Map pane, a Point-to-File icon appears at its upper right. Click on the Point-to-File icon and a draggable arrow appears, as shown in Figure 6-8; you can create a link to a new document by dragging this arrow to point to a file in the Local Files pane. (You can't simply drag a file from the Local Files pane to the Site Map pane, or vice-versa).
Figure 6-8 shows the Site Map window as it appears when File Check In/Check Out has been enabled in the Site Definition dialog box. The file shown with a lock icon isn't editable until it is checked out; checked out files are accompanied by checkmarks (see Figure 6-10).
Manipulating files and folders in the Local Files and Remote Files panes
You can manipulate files within the Local Files and Remote Files panes of the Site window in several ways. These options are available from the contextual menu that appears when you right-click (Windows) or Ctrl-click (Macintosh) on a document in the files list.
Operations that can be performed from the contextual menu include:
- New File or New Folder
- Creates new files or folders.
- Opens a document in Dreamweaver's Document window (you can simply double-click a document instead). Opening a document opens its design notes if the Show When File Is Opened checkbox is enabled in the Design Notes dialog box.
- Open With (Local Files pane only)
- Pick an application to open the document.
- Add to Favorites (Local Files pane only)
- Copies an asset to the Favorites list in the Assets panel.
- Get, Check Out, Put, and Check In
- Used to download and upload files and check them out and in.
- Undo Check Out
- Used to check in a file without updating it.
- Turn Off Read Only
- Used to edit a locked file that hasn't been checked out.
- Locate in Remote Site or Locate in Local Site
- Finds the selected local file in the Remote Files pane or the selected remote file in the Local Files pane.
- Set as Home Page (Local Files pane only)
- Uses the selected file as the new home page for your site (contrast with the View as Root command in the Site Map pane's contextual menu).
- Preview in Browser (F12)
- Tests the page in a browser.
- Check Links
- Verifies links for the selected file or the entire site.
- Synchronizes the Local Files and Remote Files panes (based on file dates).
- Cut, Copy, Paste, Delete, and Rename
- Use these commands to move, rename, or delete files. Performing similar operations in the Windows File Explorer or Macintosh Finder would cause broken links.
- Design Notes command (Local Files pane only)
- Associates notes with the selected file.
To select one or more documents in the Local Files pane:
- Click on a filename.
- Click on a document and then Shift-click on another to select all files in between.
- Ctrl-click (Windows) or Cmd-click (Macintosh) to select one or more discontiguous documents.
- Selecting a folder implicitly selects all files and folders contained within it, even though they are not explicitly highlighted in the Local Files pane.
See "Finding, Selecting, and Transferring Files" later in this chapter for ways to tell Dreamweaver to automatically select files based on a specific criterion.
The Site Map Only View
Let's look at the Site Map in closer detail. Click and hold down the Site Map button on the Site window's toolbar, as shown in Figure 6-9, to switch between the Site Map and Files view and the Site Map Only view.
Figure 6-9. Site Map Only view showing a site's logical structure
The pages that are linked from the home page are shown in the site map using large icons. Subsequent levels below that are indicated by a plus (+) icon to the left of a file. Click the plus (+) icon next to a file to show the hyperlinks within it (hyperlinks are shown in the order in which they appear in the HTML source code). Subsequent levels in the hierarchy are shown using smaller icons to prevent the site map from rapidly becoming too large.
The site map shows only the hyperlinks implemented with the
<a href>tag (corresponding to the Link field in the Property inspector) including both http: and mailto: links; it doesn't show hyperlinks implemented within complex objects such as Flash Text or Flash Button objects. The document icons next to each linked file indicate the file's type, if applicable. The secondary icons shown in Figure 6-10 indicate the type of file or link. Broken links are shown in red; links to email, scripts, and external sites are shown in blue; read-only (locked) files are indicated by a lock icon; files that are checked out are indicated by checkmarks. The lock and checkmark icons are used only when File Check In/Check Out is enabled.
Figure 6-10. Interpreting icons in the Site Map window
Manipulating documents and links in the Site Map window
You can create and remove links within the Site Map window in several ways. These options are available from the contextual menu that appears when you right-click (Windows) or Ctrl-click (Macintosh) on a document in the Site Map pane:
- View as Root
- Temporarily changes the root of the site map tree. Also available using Ctrl+Shift+R (Windows) or Cmd+Shift+R (Macintosh).
- Link to a New File
- Creates a new link to a new blank document.
- Link to Existing File
- Creates a new link to an existing file (can be used to create a link to an image, but not to insert an image in a document).
- Change Link
- Alters an existing link by selecting a new destination document for it.
- Remove Link
- Deletes a link in the Site Map (same as selecting a file and using the Delete key). This deletion removes a link, but does not delete the file from the Local Files pane.
- Show/Hide Link
- Marks a link for hiding, but doesn't actually hide it unless the Show Hidden Links option is unchecked (in the View menu of the Site window under Windows or under the Site Site Map View menu on the Macintosh).
- Open to Source of Link
- Opens the file that links to the currently selected file in the site map.
- Check Target Browsers
- Produces a report showing potential problems when displaying the page in the targeted browsers.
TIP: To display all files that link to a particular file, move the file in the Local Files pane. Dreamweaver will warn you about all files that may be affected by the move. There is no way to cancel the operation, so be sure to move the file back to its original location. (You should either update links both times you move the file or neither time.)
The Open, Open With, Add to Favorites, Get, Check Out, Put, Check In, Undo Check Out, Preview in Browser, Check Links, and Design Notes commands in the contextual menu are the same as those available in the Local Files pane and discussed in the previous section.
To select one or more documents in the Site Map pane:
- Click a document icon.
- Click and drag a selection rectangle enclosing one or more documents in the Site Map.
- Shift-click on one or more documents.
- Ctrl-click (Windows) or Cmd-click (Macintosh) on one or more documents.
Viewing and hiding pages in the Site Map window
The site map ordinarily displays HTML hyperlinks between pages; to show so-called dependent files, such as GIF files embedded with the
<img>tag, choose View Show Dependent Files in the Site window (Windows) or Site Site Map View Show Dependent Files (Macintosh). In this case, practically every file in your site map will have a plus (+) icon next to it, indicating a list of linked assets to be expanded. Double-click the plus (+) icon to expand the list of dependent assets associated with each file; double-click the minus (-) icon next to an expanded list to collapse it again. If your site uses a navigation bar on each page, it is common for two pages to link to each other. In such a case, Dreamweaver creates an infinite list of links indicated by successive plus (+) icons; you can safely ignore these redundancies.
To view a branch of the site map, select a page within the hierarchy and choose View View as Root (Windows) or Site Site Map View View as Root (Macintosh). This command allows you to focus on subareas of your site by temporarily changing the root of the site map tree, but it does not change the actual home page of your site. Use the Site Navigation area indicated in Figure 6-8 to move back up the hierarchy (i.e., to restore your true home page as the root of the site map).
To hide extra links that you do not wish to see in your site map, select the file(s) you wish to hide and choose Show/Hide Link from the contextual pop-up menu.
To view or hide all links marked as hidden, use View Show Files Marked as Hidden in the Site window (Windows) or Site Site Map View Show Files Marked as Hidden (Macintosh).
See the section "Site Map Layout Category" earlier in this chapter for settings that configure the Site Map view. Use the Zoom pop-up menu at the bottom of the Site window (as indicated in Figure 6-9) to enlarge or shrink the site map.
Renaming and Moving Pages
The site map can display either the title or filename of the pages in your site; toggle between the two alternatives using View Show Page Titles in the Site window (Windows) or Site Site Map View Show Page Titles (Macintosh).
To change the title or filename of a page, select the file, then pause briefly before clicking the title or filename again; the text should become editable. This is a great way to fix inappropriately titled documents quickly without having to open each individually. If you double-clicked (i.e., clicked too quickly), Dreamweaver opens the document instead of allowing you to rename the file. A document can also be retitled (but not renamed) using the Modify Page Properties option in the Document window.
The Local Files pane always shows filenames and not page titles. Another way to rename a file is to right-click (Windows) or Ctrl-click (Macintosh) on the file and choose Rename from the contextual menu that appears. If you change a file's three-letter extension while renaming it, servers will no longer recognize the file's type (Dreamweaver does not provide a warning when you change a file's extension the way the Windows File Explorer does).
You can move files in the Local Files pane by dragging them into a different folder. Dreamweaver will prompt you to update all links to or from this document to ensure their integrity. You should choose to update the links in most cases.
You can also use the Cut, Copy, and Paste commands under the Edit menu to copy and move files in the Site window, but moving files in this way will likely break existing links and should therefore be avoided.
After renaming or moving files, be sure to refresh both the Local and Remotes Files panes using F5. Dreamweaver is not smart enough to rename the remote version of a file when you rename the local version. Instead, it attempts to upload the new file and, optionally, delete the old file when synchronizing the local and remote versions of the site. (See the Delete Remote Files Not on local Drive checkbox in the Synchronization dialog box.)
A Site's File Structure
A site's physical structure should be laid out to make life easy for the site's designers and maintainers, just as the navigational structure aids the site's visitors. With multiple developers working on a site, the directory structure and file-naming convention must be agreed upon.
Here are some hints for structuring your site and naming your files:
- Use consistent file extensions, for example all of your HTML files should use either .html or .htm as the extension, but not a mixture of both. (The default file extension for HTML documents can be set under Edit Preferences General Add Extension when Saving.) Likewise, use either .jpg or .jpeg for your JPEG image extension. I prefer using three-letter extensions because they are less likely to cause problems with old network file-transfer programs.
- Except for images that are used globally throughout the site (which should be in a common directory for efficient reuse), put images in their own directory for each subdirectory in your web site.
- Use a consistent file naming scheme. For example, all press releases could be named pr<date>.htm, and all job descriptions could be named jd<jobnumber>.htm. Likewise, thumbnails images for the press release page could be named pr<date>-<imagenum>th.gif.
- Because URLs are typically case-sensitive, try to use either all lowercase or all uppercase letters for your filenames. I prefer all lowercase letters.
- Do not use the characters \, /, :, *, ?, ", <, >, or | in filenames. These characters are not allowed under Windows and can confuse Dreamweaver when used on the Macintosh as it attempts to translate file paths across platforms.
- Do not use the characters &, @, or ? in filenames, as they have a special meaning to web servers and may confuse the server when it manipulates your documents and document links.
- Do not use spaces in filenames or folder names, as they can confuse older browsers and many web servers. Use underscores (_) to separate words instead.
- Use a matching site structure for multiple sites on the same server. In other words, use the same system for managing files and scripts across the server.
- See the Macromedia TechNote 14610, "Naming strategies for Dreamweaver, UltraDev and various interpreters" for more tips: http://www.macromedia.com/support/dreamweaver/ts/documents/naming_tips.htm.
The Site Files View
Dreamweaver can show you the physical directory structure of both the local site and the remote copy on the server using the Sites Files view, as seen in Figure 6-11. Switch to the Site Files view using Window Site Files, F8, or the Site Files button (as indicated in Figure 6-11).
Figure 6-11. The Site Files view showing the Local Files pane on the right and the Remote Files pane on the left
You can sort the file list in either pane by clicking on the column headings; click the column heading again to reverse the sort order.
To move a document within a site, simply drag and drop it into the new location. You can drag files between the remote and local panes, but if you drag and drop a file into the wrong directory in the other pane, you will often break existing links. You are better off using Put (upload), Get (download), or the Site Synchronize command to copy files between the remote and local sites.
The position of the Local Files and Remote Files panes can be swapped using Edit Preferences Site Always Show Remote Files on the Right. This preference also causes the Remote Files panel to be shown next to the Site Map pane in the Site Map and Files view. Therefore, it differs from Edit Preferences Site Always Show Local Files on the Left, which causes the Local Files pane to be shown in the Site Map and Files view. Furthermore, the arrow in the lower-left corner of the Site window hides whichever pane is not given priority in the preferences.
After transferring files between the local and remote sites, be sure to refresh the file listings.
To refresh the Local Files pane:
- Use Shift+F5 while the Site window is active.
- Choose View Refresh Local in the Site window (Windows) or Site Site Files View Refresh Local (Macintosh).
- Enable the Refresh Local File List Automatically option in the Local Info category of the Site Definition dialog box.
To refresh the Remote Files pane:
- Use Alt+F5 (Windows) or Opt+F5 (Macintosh) while the Site window is active.
- Choose View Refresh Remote in the Site window (Windows) or Site Site Files View Refresh Remote (Macintosh).
- Enable the Refresh Remote File List Automatically option in the Remote Info category of the Site Definition dialog box.
To refresh both the Local Files and Remote Files panes:
- Use F5 while the Site window is active.
- Choose View Refresh in the Site window (Windows) or Site Site Files View Refresh (Macintosh).
Checking Files In and Out
Dreamweaver's File Check In/Check Out feature prevents two people from changing the same file simultaneously. If this feature is enabled, you must check out a file before you can edit it. Checking out a file will Get the file and let other users know that you are responsible for it. Another user cannot edit or check out the file until you check it back in (although they can view read-only copies of the file). When you check in a file, you relinquish control of it. Dreamweaver will Put the revised file to the live site, and other users will again be allowed to check it out. Therefore, when File Check In/Check Out is enabled, you can edit only those files that you have checked out. Files that are not checked out, or have been checked out by other users, are locked (uneditable).
TIP: The reference copy of a file always resides on the server. Checking out a file with Check Out initiates a revision process that ends when the file is checked back in with Check In. In a multideveloper environment, all files should be checked out before editing and checked in when completed to prevent file version conflicts. The File Check In/Check Out feature won't work properly unless all collaborators enable the feature and use it as intended.
There is no way you can perform a file check out when creating a new file, so simply use File Check In when you are ready to upload the new file for the first time.
To enable File Check In/Check Out, enable the appropriate checkboxes in the Remote Info category of the Site Definition dialog box as described earlier in the section "Remote Info Category." To check out a file, use Site Check Out, Ctrl+Alt+Shift+D (Windows), or Cmd+Opt+Shift+D (Macintosh). To Check In a file, use Site Check In, Ctrl+Alt+Shift+U (Windows), or Cmd+Opt+Shift+U (Macintosh).
A green checkmark icon in the Site window, as shown in Figure 6-8, indicates a file that you have checked out. Red checkmarks indicate files checked out by other developers. A lock icon indicates a file that cannot be edited until it is checked out.
Checked-out files are not actually locked by the operating system; instead, Dreamweaver puts a lock file (with an .lck extension) on the server to identify the user who has checked out each file and prevent others from editing it.
WARNING: Even though external editors ignore .lck files, you shouldn't edit a "locked" HTML file in an external editor. Doing so will create version control problems, causing your edits, or those of a co-worker, to be overwritten.
Use the Check Out button, shown in Figure 6-8, to download files from the server, check them out, and place .lck files on the server. If the Check Out Files when Opening option is enabled in the Remote Info category of the Site Definition dialog box, Dreamweaver checks out any locked file you open. If this option is disabled, Dreamweaver prompts you whether to View or Check Out the file when you attempt to open a locked file.
Use the Check In button, also shown in Figure 6-8, to upload your completed documents and remove the .lck files. The Check Out and Check In buttons aren't shown in the Site window toolbar if File Check In/Check Out is disabled (in which case you should use the Get and Put buttons, which download and upload files without checking them in or out, instead). Figure 6-11 shows the Get and Put buttons.
When using File Check In/Check Out, you can tell who has a file checked out by displaying the Checked Out By column in the Local Files and Remote Files panes as described under "File View Columns Category."
To email whoever has checked out a file, click on the user's name in the Checked Out By column, as seen in Figure 6-11, to open a blank message in your default email program. To override the checked-out status of a file--for example when the user is on vacation--right-click (Windows) or Ctrl-click (Macintosh) on the file in the Site window and choose Undo Check Out from the contextual menu.
For more information on uploading and downloading files, see the section "Updating Your Site" later in this chapter. To create a report that lists checked-out files, use the Site Reports Workflow Checked Out By option.
Using Design Notes
Design Notes allow you to track the thoughts, difficulties, and solutions encountered by developers working on a site. Enable the Maintain Design Notes option in the Site Definition dialog box, as described earlier in the section "Design Notes Category." In a collaborative environment, all team members should use Design Notes; without full participation, you get only half the story regarding each file's status. (Enable the Upload Design Notes for Sharing option when collaborating with others.)
TIP: Macromedia SiteSpring is a new, high-end product designed to facilitate collaborative web site development. See http://www.macromedia.com/software/sitespring/ for details.
To add a Design Note or edit an existing one, highlight the file to which the note applies and select File Design Notes. This opens the Design Notes dialog box shown in Figure 6-12.
Figure 6-12. The Basic Info tab in the Design Notes dialog box
Design Notes can be attached to HTML files and asset files (such as GIFs and JPEGs) in the Site Map pane, Local Files pane, or Document window. Design Notes cannot be attached to some items in the Site Map--namely broken links, external links, and read-only (locked) files; nor can Design Notes be attached in the Remote Files pane (use the Upload Design Notes for Sharing option to post design notes to the server automatically).
TIP: You can even attach Design Notes to folders in the Local Files pane. Attach notes about the entire site to the home page or a dummy file maintained for this purpose.
Design Notes can be used informally, but if you structure your notes using name/value pairs, they can be a highly effective site-management tool. Name/value pairs simply say, "This is the name of the data I want to keep track of, and here is its particular value." (Name/value pairs should sound familiar--they are used similarly in URLs when submitting form data using the HTTP GET method, as described in Chapter 2.) Luckily, Dreamweaver provides some predefined name/value pairs for you and also lets you define your own. Let's see how this concept works.
Adding Basic Info to Design Notes
In the Basic Info tab of the Design Notes dialog box, Dreamweaver provides three commonly needed name/value pairs.
- Select the development status of the file related to this note from the pop-up menu. This selection creates a name/value pair with the name
statusand the value
- Enter notes of your choosing, such as "Problem fixed" or "Waiting on Joe to provide artwork." Entering notes creates a name/value pair with the name
notesand the value of the text specified in the box. Use the Insert Date icon, indicated in Figure 6-12, to add today's date to the notes. The date simply becomes part of the notes text; it does not become a separate name/value pair.
- Show When File is Opened
- Enable this checkbox to open the note automatically whenever the file is opened. This creates a name/value pair with the name
showOnOpenand the value
Adding and Editing Customized Info in Design Notes
In the All Info tab of the Design Notes dialog box, shown in Figure 6-13, you can edit the existing name/value pairs or add custom ones.
Figure 6-13. The All Info tab in the Design Notes dialog box
The following fields control the editing of name/value pairs:
- A list of the name/value pairs for this design note. You may see the
showOnOpenname/value pairs from the Basic Info tab listed here. You can add custom name/value pairs using the plus (+) button.
- Specifies the name portion of the name/value pair highlighted in the Info list. The default names are
showOnOpen, but you can add your own custom names. We'll discuss three more pseudo-default names--
- Specifies the value portion of the name/value pair highlighted in the Info list.
You can edit, add, and delete name/value pairs.
- Editing an existing name/value pair
- Highlight an existing name/value pair in the Info list. Its name appears in the Name field and its value appears in the Value field. You can edit the Value, but should generally leave the Name alone. For example, if you change the name
notesto myNotes, it creates a new name/value pair whose value will no longer appear under the Basic Info tab.
- To add a custom name/value pair
- Use the plus (+) button to create a blank line in the Info list. Specify a name for your new property in the Name field and assign a value to it using the Value field. You might specify priority for the Name and then fill in a Value such as low. (Later, we'll see how to display custom name/value pairs in the Site Files window.)
TIP: By using name/value pairs consistently in all your Design Notes, you'll be able to display and sort the information easily.
- To delete a name/value pair
- Select the item you wish to delete from the Info list and then click the minus (-) button. If you accidentally delete a name/value pair, use the Cancel button in the dialog box to abort the changes.
Viewing and Sorting Contents of Design Notes
If a Design Note is attached to a document, Dreamweaver displays a little balloon icon next to the document name in the Site Files window, as shown in Figure 6-14.
Figure 6-14. A Design Note associated with a document
There are many ways to view some or all of the information within your Design Notes. To view the contents of a design note associated with a document use any of these methods:
- Double-click a file's Design Notes icon in the Site Files window, as seen in Figure 6-14.
- Select a file and choose File Design Notes.
- Choose Design Notes from the contextual menu in the Local Files pane or Site Map pane.
- If the Show When File is Opened option is enabled in the Design Notes dialog box, the Design Note will open automatically when you open the document with which it is associated.
The contents of your Design Notes can be retrieved and displayed in the Local Files and Remote Files panes of the Site Files window.
Here's how it works:
- Use View File View Columns in the Site window (Windows) or Site Site Files View File View Columns (Macintosh) to open the File View Columns category of the Site Definition dialog box (see Figure 6-6).
- The Notes item in the Column List merely displays a balloon indicator in the Site Files window next to documents with associated Design Notes (see Figure 6-14). Enable this column by selecting Notes from the Column List and checking the Show checkbox. To add a custom column that displays the actual contents of notes, continue with Step 3.
- Use the plus (+) button to add a new column.
- Specify a Column Name of your choice, such as Status. (Although using a name that matches the property specified in Step 5 is advisable, you can use any name you like for the column heading.)
- In the Associate with Design Note field, specify the Name portion of the name/value pair you want to display in this column. You can pick a predefined name (
Priority) from the pop-up menu, or enter a custom name (which should match a name/value pair used commonly across all your Design Notes, not the name of a specific document). Pick Status to extract the
statusfield from the Basic Info tab of the Design Notes. To display the full text of the Notes field, enter notes (it isn't one of the pop-up menu options, but it corresponds to the comments entered into Design Notes).
- Enable the Show checkbox for this item.
- You can also set the column alignment and choose whether to share the column configuration publicly.
- Click OK to close the File View Columns dialog box.
- In the Design Notes dialog box associated with each document, provide a value for the name/value pair used in Step 5. For example, you might choose a status from the Status pop-up menu under the Basic Info tab or assign a value to a custom name/value pair under the All Info tab. See the previous section for details.
The columns you create in the File View Columns category of the Site Definition dialog box are shown in the Site Files window. You can sort files in the Local Files pane of the Site Files window by clicking on the column headings. For example, you can sort files according to which have Design Notes or according to their status or priority fields (if you've created appropriate custom columns for these). If you've enabled the Upload Design Notes for Sharing option, Design Notes is uploaded to the server and made available in the Remote Files pane of the Site Files window.
Design Notes can also be sorted and searched using the Design Notes Report, explained in the section "Site Reports" later in this chapter.
Removing Design Notes
Design Notes are stored in .mno files (which are just XML files). Dreamweaver stores .mno files in _notes folders (one for each folder of your site, including its local root folder). Of course, Dreamweaver handles the housekeeping for you, so you usually don't have to worry about this issue.
You can delete unwanted Design Notes in several ways:
- To delete a Design Note attached to an individual file, use File Design Notes to open the Design Notes dialog box. Click on the All Info tab in this dialog box and then use the minus (-) button to delete all properties listed in the Info field. Once you've deleted all the contents, click OK and Dreamweaver will delete the entire .mno file.
- To delete Design Notes associated with files that no longer exist, use the Clean Up button in the Design Notes category of the Site Definition dialog box.
- To delete Design Notes en masse, delete one or more .mno files in the _notes folders scattered throughout your site's local folder and its subfolders. The Site Define Sites Remove command, which deletes a site definition, also deletes Design Notes for the site but leaves behind the empty _notes folders. (You'll have to use the Windows File Explorer or the Macintosh Finder to delete the folders.)
Preparing an Existing Site for Use
How do you use Dreamweaver to manage an existing site? Whether you've created an entire site with another site-management tool such as FrontPage or simply created some HTML files in another program, it's easy to "import" an existing site into Dreamweaver. Dreamweaver 4 also reads site definition files from earlier versions of Dreamweaver.
You don't literally import your existing site files into Dreamweaver. Instead, you tell Dreamweaver about your existing site by creating a site definition. The next section ensures that you have your web site prepared for use within Dreamweaver so you can benefit from the later advice on checking and fixing broken links. See the Macromedia TechNote 14031 "How to convert an existing site into a Dreamweaver site" for additional details, including how to convert from FrontPage. The TechNote can be found at http://www.macromedia.com/support/dreamweaver/ts/documents/existing_site.htm.
Refer to "Cleaning Up Your HTML Code" in Chapter 7, especially when using HTML files from another program.
Importing an Existing Site
If you already have a local copy of your web site on your hard drive, you can create a site definition for it, as described in the section "Defining a Site" earlier in this chapter. (If you modify a file without having defined the site, relative links will be changed to absolute file:/// links.) If you don't have a copy of your site on your local drive already, you can use Dreamweaver to download an entire site from a remote server. To download a site with Dreamweaver, you must have authorized access to the FTP site or network drive on which the site is stored; Dreamweaver will not download someone else's site via HTTP (although other utilities will). If you already have your local and remote sites set up in Dreamweaver but want to make sure they're synchronized before continuing, see the section "Synchronizing Files" later in this chapter.
To download a remote site using Dreamweaver:
- Create a new site definition using Site Define Site, as described earlier.
- In the Local Info category of the Site Definition dialog box (see Figure 6-2), specify the local folder to which you want to download the site.
- Provide the information necessary to access the site, such as its FTP address, in the Remote Info category of the Site Definition dialog box (see Figure 6-3). Click OK to save your site definition.
- Open the Site window using Window Site Files.
- Choose Site Refresh Remote in the Site window (Windows) or Site Site Files Refresh Remote (Macintosh). Dreamweaver downloads the directory structure of the remote site, but not all the files within it. If you click the plus (+) button to display a folder's contents in the Remote Files pane, Dreamweaver downloads the folder listing as needed.
- Click once in the Remote Files pane to make it active, and then choose Site Synchronize. Instead, you can select the root folder in the Remote Files pane and use Site Get. However, Site Synchronize has several advantages over Get: it lets you preview the list of files to be transferred, allows you to deselect individual files, gives you an ongoing progress bar, and outputs a report when finished.
- In the Synchronize Files dialog box (see Figure 6-16), you can choose to synchronize the Entire Site or Selected Remote Files Only (if the latter option is not available, you forgot to click in the Remote Files pane, as directed in Step 6). For the Direction, select Get Newer Files from Remote and then click the Preview button. It may take Dreamweaver a few minutes to read the directory structure of a large site. Dreamweaver will show you the size of remote files in the Remote Files pane; if not, make sure that the Size column isn't hidden under View File View Columns in the Site window (Windows) or Site Site Files View File View Columns (Macintosh).
- In the Synchronization Preview dialog box (see Figure 6-17), Dreamweaver will show a list of files to be downloaded. Uncheck the checkbox in the Action column next to files that you don't want to download. Click OK to proceed with the download.
Downloading a large site can take a long time (several hours), even over a fast connection. Dreamweaver shows the size of each file as it downloads, plus an overall progress bar. The progress bar shows the percentage of the total number of files downloaded; it doesn't consider differences in file sizes. During an FTP download, you can't use Dreamweaver for anything else (although you can use other programs during this time). To interrupt the download, click the Stop Current Tasks icon in the Synchronize Preview dialog box.
As files are downloaded, their Status changes to Updated in the Synchronize Preview dialog box. If a file can't be downloaded from the remote server, Dreamweaver displays an error. You must click OK in response to the error to download the remaining files. After the transfer completes (or is aborted), save the Log file for further inspection. (The Log file is simply a text file and can be opened in any text reader.) The problematic file's status will be shown as Not Updated and be listed in the Log file under, "Files Not Updated Due To User Interaction."
Dreamweaver should preserve the remote server's file dates in the Local Files and Remote Files panes and also in the Windows File Explorer or Macintosh Finder. In practice, Dreamweaver sometimes assign today's date to local files during synchronization; such files may be reuploaded unnecessarily during the next synchronize operation. Use Site Get to download selected files from the server; it doesn't seem to suffer from the same file date problem.
WARNING: Dreamweaver may write a zero-length file or a corrupted file if the transfer of a specific file fails. If you don't delete this incomplete file and redownload the correct version from the remote server, Dreamweaver won't remember that it is corrupted. Worse yet, if Dreamweaver has mistakenly assigned today's date to the corrupted file, it will think that it is more recent than the server version. Therefore, the corrupted file may be uploaded to the server during the next synchronization. Again, check the file log and file dates and sizes carefully to avoid problems.
Dreamweaver doesn't compare file sizes to determine which files need to be transferred, only file dates. If a file is corrupted, use the Site Get command to download a file from the remote server manually, or use Site Put to manually upload a file to the server.
Cleaning Up a Site
Dreamweaver can check for broken links and orphaned files on a file-by-file basis or for the entire site. It also warns you about external links, which can be verified manually or using the External Link Checker extension discussed in Chapter 22.
To check your complete site for broken links, use Site Check Links Sitewide, Ctrl+F8 (Windows), or Cmd+F8 (Macintosh). This opens the Link Checker dialog box, shown in Figure 6-15, giving you a list of the Broken Links, External Links, and Orphaned Files that were found within the site.
Figure 6-15. The Link Checker dialog box
The broken links that occur when developing a site can be repaired easily from this dialog box.
TIP: Clicking the Save button in the Link Checker dialog box saves the Link Check Results. It does not save or resave the selected files. When fixing broken links, the corrected files are saved automatically.
Broken links are links that point to a file that can't be found. To display broken links, select Broken Links from the Show drop-down list in the Link Checker dialog box. Double-clicking a filename in the files list opens that document, which helps determine exactly which link is broken.
To fix a broken link, select the bad URL from the Broken Link column in the Link Checker dialog box. You can hand-edit the link or browse to a new file using the folder icon that appears next to it. (If you can't see the folder icon, widen the column by dragging the vertical line that separates the columns.)
After fixing a broken link, press the Tab key or the Enter Key (Windows) or Return key (Macintosh) to proceed to the next link. Dreamweaver asks you whether it should update the link everywhere it was used within your site. If you answer No, Dreamweaver corrects only the single bad link. If you answer Yes, Dreamweaver attempts to automatically update occurrences of the bad link throughout your site. If File Check In/Check Out is enabled, it attempts to check out files before performing the update and check them back in afterwards.
TIP: Broken links may or may not represent a true problem. For example, links to external programs, such as CGI scripts, may be flagged as broken links, but need not necessarily be fixed. Use the Site Change Links Sitewide option (in the Site window under Windows or the main menu bar on the Macintosh) to replace links sitewide, whether broken or not.
Searching for Orphaned Files
Orphaned files are those files that are not used anywhere within the site; they may link to other files, but no other files link to them (i.e., there are no incoming links to this file). To display orphaned files, select Orphaned Files from the Show drop-down list in the Link Checker dialog box.
There is no automated way to remedy orphaned files. For each orphaned file you may opt to manually:
- Create a link to it from another document, if it is a needed file.
- Remove it from your site and delete it from server during the next synchronization to keep the server clean and save space.
- Create a separate folder for orphaned files in case you need them later.
If you synchronize all files on a site, Dreamweaver will upload orphaned files as well, so it is best to remove them from your local site folder before synchronization.
Checking External Links
External links are links that refer to resources outside your web site, including other web sites, such as http://www.amazon.com, and email links, such as mailto:firstname.lastname@example.org. To see a list of external links (including email links), select External Links from the Show drop-down list in the Link Checker dialog box. Links that begin with the address specified in the HTTP Address field (under the Local Info category in the Site Definition dialog box) are considered local links.
By default, Dreamweaver doesn't verify external links. You have a number of options for verifying external links:
- Download and install the External Link Checker utility from the Dreamweaver Exchange. This extension can check external links in a single document or an entire site. See Chapter 22 for details.
- You can check external links manually by copying and pasting them into the address line of a browser.
- If you save the list of external links using the Save button in the Link Checker dialog box, you can use another program to check the links. For example, if you open a list of links in Eudora, all the links will become "hot" and you can click on each one to test it. Instead, you might import the list of links into a program that can automatically verify external links, such as Adobe SiteMill.
Updating Your Site
Dreamweaver has several options for synchronizing the local and remote versions of your site (both uploading to and downloading from the remote server). The Remote Files pane in the Site window shows the remote version of your site and the Local Files pane shows the local version. Files can be transferred manually in either direction or synchronized automatically based on the file dates.
The first time you upload your site, be sure to upload all documents, images, and scripts used to create the web pages. After that, you need to upload only the documents that have changed.
When you Get (download) or Put (upload) files, Dreamweaver ordinarily asks if it should include all dependent files (such as GIFs and JPEGs). If you enable the Don't Ask Me Again checkbox and click Yes, Dreamweaver always copies the dependent files between the local folder and remote server. This copying slows uploads and downloads dramatically.
TIP: To force the Dependent Files request dialog to reappear, hold down the Alt key (Windows) or Opt key (Macintosh) when you transfer a file. Under Edit Preferences Site Dependent Files, configure the Prompt on Get/Check Out and Prompt on Put/Check In options to change this setting permanently.
To upload your file to a remote site, you must connect to the server specified under the Remote Info category of the Site Definition dialog box (as described earlier in this chapter). Configure the server options, often an FTP server, before proceeding. Test your connection using the Connect to Remote Host button in the Site window toolbar, as seen in Figure 6-11. (You can practice using the Remote Files pane even without FTP access. Simply choose Local/Network access and set up a folder on your local drive to act as a dummy remote site.)
Dreamweaver automatically disconnects from a remote site after 30 minutes of inactivity. You can change this timeout setting under Edit Preferences Site Minutes Idle (some web servers may disconnect you before the specified time). In my experience, Dreamweaver may have difficulty reconnecting to a server after disconnecting due to inactivity (the problem doesn't occur when using the Disconnect button manually).
TIP: If Dreamweaver has trouble connecting to the remote server and transferring files at the expected speed, restart Dreamweaver and try again.
Earlier in this chapter, in the section "Importing an Existing Site," we learned how to download an entire remote site. But that one-time operation is unusual; more typically, you'll either download or upload selected files only. The next few sections explain the different ways to transfer files between the local folder and remote site. FTP operations tie up Dreamweaver, which prevents you from using it during large files transfers. Click the Stop Current Tasks icon in the lower-right corner of the Site Window to interrupt a transfer.
There are so many ways to sling files around in Dreamweaver's Site window that it is easy to get confused, especially when using the File Check In/Check Out feature.
TIP: If File Check In/Check Out is enabled, use Check Out to download files for editing; use Get to download files that you don't intend to edit. Use Check In to upload revised files (use Site Undo Check Out to relinquish control over a file without editing it); don't use Put to upload files when File Check In/Check Out is enabled. When File Check In/Check Out is disabled, use Get to download files and Put to upload files. Avoid manually dragging files between the Remote Files and Local Files panes.
Get, Download, and Check Out
Here are some ways that you can download files from the server (i.e., copy files from the Remote Files pane to the Local Files pane):
- Drag files from the Remote Files pane to the Local Files pane
- This method isn't recommended. For one thing, you can easily drag and drop files into the wrong folder, leading to duplicated files or overwriting another file of the same name. Furthermore, it doesn't check out the file for editing even when File Check In/Check Out is enabled. The reference (oldest) copy of a file always resides on the server. Therefore, if you try to copy an older file from the server over a new version on the local folder, Dreamweaver asks, "Do you wish to overwrite your local copy of index.html?" (This message would be better if it emphasized that you may overwrite a newer file in the local folder.)
- Select files in either the Remote Files or Local Files pane and use Get
- There are numerous ways to execute the Get command. In Windows you can choose Site Get in the Site window or Ctrl+Shift+D. On the Macintosh you can choose Site Site Files View Get or Cmd+Shift+D. On either platform you can use the Get button in the Site window toolbar or the Get command in the pop-up contextual menu.
TIP: The Get command always downloads files from the remote site to the local site, even if you selected files in the Local Files pane. Get doesn't check out files even if File Check In/Check Out is enabled. Use Get to download files when File Check In/Check Out is disabled or when you want to download a file without editing it.
- Select files in either the Remote Files or Local Files pane and use Check Out
- This option is available only if File Check In/Check Out is enabled. There are numerous ways to check out files, such as using the Check Out button in the Site window toolbar or the Check Out command in the pop-up contextual menu. Using Check Out automatically downloads files from the remote site to the local site, even if you selected files in the Local Files pane. Use Check Out instead of Get if File Check In/Check Out is enabled and you want to edit a file.
If the Check Out Files when Opening option is enabled (see Figure 6-3), opening a locked file will check it out for editing.
TIP: After downloading files, be sure that you are seeing the latest version by using Shift+F5 to refresh the Local Files pane.
Put, Upload, and Check In
You can also upload files to the server (i.e., copy files from the Local Files pane to the Remote Files pane) in several different ways, including:
- Dragging files from the Locate Files pane to the Remote Files pane
- This method isn't recommended. For one thing, you can easily drag and drop files into the wrong folder, leading to duplicated files or overwriting another file of the same name. Furthermore, it doesn't check in the file even when File Check In/Check Out is enabled. The reference (oldest) copy of a file always resides on the server. Therefore, if you try to copy an older file from the local folder over a newer version on the remote site, Dreamweaver asks, "Index.html is newer on the remote server. Do you wish to overwrite it?"
- Selecting files in either the Remote Files or Local Files pane and using Put
- There are numerous ways to execute the Put command. In Windows you can choose Site Put in the Site window or Ctrl+Shift+U. On the Macintosh you can choose Site Site Files View Put or Cmd+Shift+U. On either platform you can use the Put button in the Site window toolbar or the Put command in the pop-up contextual menu.
TIP: The Put command always uploads files from the local site to the remote site, even if you selected files in the Remote Files pane. Put doesn't check in files even if File Check In/Check Out is enabled, so it is useful to submit updates while retaining owenership of a checked-out file. Use Put to upload files when File Check In/Check Out is disabled.
- Selecting files in either the Remote Files or Local Files pane and using Check In
- This option is available only if File Check In/Check Out is enabled. There are numerous ways to check in files, such as using the Check In button in the Site window toolbar or the Check In command in the pop-up contextual menu. Using Check In automatically uploads files from the local site to the remote site, even if you selected files in the Remote Files pane. Use Check In instead of Put when File Check In/Check Out is enabled if you want to submit revisions and relinquish control of a file.
TIP: After uploading files, be sure that you are seeing the latest version by using Alt+F5 (Windows) or Opt+F5 (Macintosh) to refresh the Remote Files pane. After uploading files, test the entire site thoroughly and fix any broken links or missing files.
Finding, Selecting, and Transferring Files
There are several ways to find and select files in the Remote Files and Local Files panes. Earlier, we saw ways to select files manually. The following methods rely on Dreamweaver to select the files for us based on some criterion:
- Select a file in the Local Files pane and choose Locate in Remote Site from the contextual menu or the Edit menu in the Site window.
- Select a file in the Remote Files pane and choose Locate in Local Site from the contextual menu or the Edit menu in the Site window.
- When using Windows, use the Select Newer Local, Select Newer Remote, or Select Checked Out Files options under the Edit menu in the Site window. On the Macintosh these options appear under the Site Site Files View menu. (When you select files in the Site Map pane, Windows also offers the Edit Invert Selection option in the Site window.)
You can transfer the selected files between the Remote Files and Local Files panes using the methods described in the preceding sections. For example, to upload an entire web site, you could click on the local root folder in the Local Files pane of the Site window and then use the Put button to post (upload) the files to the server.
Dreamweaver can automatically select revised files to be uploaded. Chose Edit Select Newer Local in the Site window (Windows) or Site Site Files View Select Newer Local (Macintosh) and Dreamweaver will automatically compare the file dates and times between the local and remote server, selecting only the files that are newer on the local computer. Once the selections are made, click the Check In button to upload files (if File Check In/Check Out is disabled, use the Put button to upload files instead).
Conversely, sometimes you want to make sure you have the latest files from the remote server when working on your local copy of the site. Chose Edit Select Newer Remote in the Site window (Windows) or Site Site Files View Select Newer Remote (Macintosh) and Dreamweaver will dutifully select only the files that are newer on the remote server. Click the Get button to download the newer files to your computer (if the File Check In/Check Out feature is enabled and you want to edit the files, use the Check Out option instead). The Select Newer Remote option is useful for downloading files that were updated by an automated server-side application or by other developers in your workgroup.
You can also automatically synchronize the remote and local sites to ensure that they both have the latest files. To open the Synchronize Files dialog box shown in Figure 6-16, select Site Synchronize.
Figure 6-16. The Synchronize Files dialog box
The values available for the Synchronize option in this dialog box are:
- Entire Site
- Synchronizes all files (including orphaned files), whether selected or not
- Selected Local Files Only
- Synchronizes the files selected in the Local Files pane only (available only when the Local Files pane is active)
- Selected Remote Files Only
- Synchronizes the files selected in the Remote Files pane only (available only when the Remote Files pane is active)
The values available for the Direction option in this dialog box are:
- Put newer files to remote
- Uploads files that are newer on the local machine to the remote server. It does not download any files from the remote server to the local machine.
- Get newer files from remote
- Downloads files that are newer on the remote server to the local machine. It does not upload any files from the local machine to the remote server.
- Get and put newer files
- Downloads newer files from the remote server and uploads newer files to the remote server so that both the remote and local machines have the latest version of all specified files.
WARNING: If you have a server-side script or application that generates pages automatically, do not check the Delete Remote Files Not On Local Drive option; it removes any files on the remote server for which there is no corresponding file on the local machine.
Once these selections have been made, click Preview to get a list of the pages that will be affected by the synchronization process. The Synchronize Preview dialog box, shown in Figure 6-17, displays the files to be synchronized.
Figure 6-17. The Synchronize Preview dialog box
Files to be uploaded are indicated by a Put checkbox in the Action column. Files to be downloaded are indicated by a Get checkbox in the same column. You can uncheck the checkboxes to selectively omit files from the transfer. Click OK to initiate the file transfer. You can interrupt the file transfer using the Stop Current Task button that appears in the dialog box while Dreamweaver synchronizes files. When the file transfer is complete, click the Save Log button that appears to save a Log file detailing the files transferred. See the section "Importing an Existing Site" earlier in this chapter for important details on the Synchronization option.
If you are having trouble with FTP transfers, you can view the FTP log file by using Window Site FTP Log in the Site window (Windows) or Site FTP Log (Macintosh). The log file error messages may be somewhat cryptic. For example, if you've exceeded your disk space quota on the remote server, the log may display a generic failure message, such as "Cannot Put File," indicating that the upload failed but not giving the specific reason.
Dreamweaver 4 implements a new system of site reporting. You can open the Site Reports dialog box, shown in Figure 6-18, by selecting Site Reports.
Figure 6-18. The Reports dialog box
Reports can be generated for the Current Document, Entire Local Site, Selected Files in Site, or a specified Folder. Each of these scopes can have any or all of the following reports generated for it.
Two Workflow Reports are available:
- Checked Out By
- Creates a report listing files that have been checked out but not yet checked back in. The Report Settings button in the dialog box allows you to limit the report to files checked out by a particular user.
- Design Notes
- Creates a report containing Design Notes that meet the specified criteria. The Report Settings button in the dialog box leads to the Design Notes Report Options dialog box, shown in Figure 6-19, where you can limit the search. In the left-most column, specify a property name from the name/value pairs you've used in your Design Notes. Figure 6-19 shows how to search for Design Notes with a status of "needs attention." You can also search for notes that contain a particular string. You can search using several matching schemes, including regular expressions (see Table 7-1).
Figure 6-19. Design Notes Report Options dialog box
There are five available HTML Reports:
- Combinable Nested Font Tags
- Creates a report of all nested
<font>elements within the scope of the report that should be merged
- Missing Alt Text
- Creates a report of all missing
altattributes associated with
<img>elements or other objects that require an
altattribute for compatibility with HTML 4
- Redundant Nested Tags
- Creates a report of all redundant nested tags that should be merged, such as:
- Removable Empty Tags
- Creates a report of all empty elements that should be removed, such as
<div>elements with no content
- Untitled Documents
- Creates a report of all documents that have empty
<title>elements or whose
<title>element is set to "Untitled Document"
A sample Reports Results dialog box is shown in Figure 6-20.
Figure 6-20. Reports Results dialog box
The Reports Result dialog box shows problematic files and the line number on which the problem exists. You can open a document that needs adjusting by double-clicking its name. To help find the problematic line in Code view, turn on line numbering using View Code View Options Line Numbers. You can then make the necessary repairs in either Code view or Design view. To remove redundant tags, use the Cleanup HTML command, shown in Figure 7-1.
The Assets panel provides a central repository for nine asset categories (Images, Colors, URLs, Flash, Shockwave, Movies (QuickTime), Scripts, Templates, and Library items) that are used within your site. With the Assets panel, you can easily incorporate frequently used items within multiple pages. Open the Assets panel, shown in Figure 6-21, using Window Assets or F11.
Figure 6-21. The Assets panel
The Window Templates command opens the Templates category of the Assets panel (a.k.a. the Templates panel). The Window Library command opens the Library category of the Assets panel (a.k.a., the Library panel). The Templates panel is discussed in Chapter 8, and the Library panel is discussed in Chapter 9. Except for the Templates and Library categories, each category of the Assets panel includes a Site list and a Favorites list. You can choose between the Site list and Favorites list using the radio buttons near the top of the Assets panel (see Figure 6-21).
The upper pane of the Assets panel shows a preview of the item selected in the lower pane. For the Flash, Shockwave, and Movie categories, a Play button (a green triangle) appears in the preview area's upper-right corner. The context menu and pop-up arrow menu in the Assets panel's upper right corner differ for each category and also depending on whether the Site list or Favorites list is active.
The Site List
The Site list of each category in the Assets panel is a list of items used within the site. You can drag and drop items from the Assets panel into the Document window (or use the Insert button in the lower-left corner of the Assets panel). For example, dragging a library item into a document inserts the contents of that library item into the document. When the URLs, Colors, or Templates categories of the Assets panel are active, the Insert button changes to an Apply button. For example, dragging a color into a document applies a
<font color>tag; dragging a template onto a document applies a template to the document.
TIP: Assets within your site are automatically added to the Site list of the Assets panel if you have enabled the site cache. For example, click the Images icon (and select the Site list radio button) to list all images in the site.
After adding or removing assets within the site, refresh to Site list to ensure that it reflects the latest assets. To refresh the Site list within the Assets panel:
- Click the Refresh Site List button at the bottom of the Assets panel.
- Choose Refresh Site List from the contextual menu or the pop-up arrow menu in the Assets panel's upper-right corner.
If you add or remove assets outside of Dreamweaver, you should recreate the Site list from scratch. To recreate the Site list:
- Ctrl-click (Windows) or Cmd-click (Macintosh) the Refresh Site List button at the bottom of the Assets panel.
- Choose Recreate Site List from the contextual menu or the pop-up arrow menu in the Assets panel's upper-right corner.
The Assets panel uses site-root-relative paths for the location of assets so that they can be found from anywhere within the site structure. To speed up the Assets panel, activate the Enable Cache checkbox under the Local Info category of the Site Definition dialog box by using Site Define Sites Edit Local Info.
The Favorites List
Because a site can contain a large number of assets, the Assets panel allows you to add your most frequently used assets to a second pane called the Favorites list. The Favorites list for each category is empty until you add assets to it. To add an item to the Favorites list, select an asset in the Site list and click the Favorites icon in the lower-right corner of the panel. Alternatively, you can right-click (Windows) or Ctrl-click (Macintosh) on the item in question and select Add to Favorites from the contextual pop-up menu. To view your Favorite assets, use the Favorites radio button at the top of the Assets panel.
We've learned a tremendous amount about Dreamweaver site management in this chapter. In the next chapter, we cover ways to keep your HTML code tidy and how to use find and replace to update multiple documents.
Back to: Dreamweaver in a Nutshell
© 2001, O'Reilly & Associates, Inc.