The preceding chapter helped you set up a folder on your computer in which to store all your files for your web site. After you have the local root site folder all set up, you will see that Dreamweaver has many tools available to help you make sure your site stays together as well as tools that allow you to do sitewide searches and changes. However, no one but you will see the site while it lives solely on your own hard drive. You need to publish your site by putting it on a computer that anyone can access, such as a web server. This server might be for an internal intranet or for the Internet.
Where you put your site so others can see it is called the remote site. The remote site is generally a web server. If you are running your own server on your computer, then the remote site can be as simple as another folder on your computer. In the long run, what makes your web site a success (or failure) is what is in your remote site, because that is what the world will see. Dreamweaver has many tools to help you make your remote site up-to-date and functioning properly. Topics discussed in this chapter include how to define a remote site, including various access methods, working with your remote site, including uploading and downloading files and keeping your local and remote sites synchronized.
Before delving into the remote site functions and features Dreamweaver provides, you need a basic understanding of how Dreamweaver thinks about your remote sites.
As you've undoubtedly wandered about on the Internet, you're sure to have noticed that the web page addresses typically follow a basic and hopefully intuitive naming scheme. For instance, many home pages, or default documents, are called index.htm. If you click to view a certain company's products page, more often than not you'll be directed to the products subdirectory. Not only does this allow for better organization and maintenance, it just makes sense.
When you upload, or put, your web site, Dreamweaver will mirror its structure as closely as possible (always with few exceptions) on the remote site. If you have a file called widgets.htm in the products subdirectory on your local site, after the site is published you'll end up with a widgets.htm file in the products subdirectory on your remote site. Although this might seem rudimentary, this mirroring helps out in a few ways, including
Assists in making updating and maintaining your site easier.
Helps prevent broken, orphaned, or otherwise incorrect links.
Helps prevent multiple copies of a web page or image file, conserving server space, and in some cases, the amount of bandwidth used.
Adds to the level of professionalism your page exhibits.
Makes it easier to understand and follow document-relative links.
In fact, to use many of the Dreamweaver remote file features, the local and remote site must mirror one another. Maintaining the file/folder structure is vital to maintaining all your links. This really isn't an issue, however, because Dreamweaver does this for you (including creating the required subdirectories) automatically with commands such as Synchronize, Get, Put, and so on. Next, you will learn how to properly configure your remote site in the Site Definition.
As with defining a local site, entering remote site information in Dreamweaver can be done either in Basic (Site Wizard) or Advanced mode. The latter is more efficient a little bit scarier for web publishing newbies than using the Site Wizard and offers more options.
To define remote information for a Dreamweaver site using Advanced mode, access the Site Definition dialog box by choosing Site > Edit Sites and, in the Edit Sites dialog box, select your site and click Edit. When the Site Definition dialog box appears, click the Advanced tab to bring it to the front. From the categories at the left, choose Remote Info (see Figure 23.1). The only option available when you first view the Remote Info section is the Access menu. What you select here will dynamically generate the remaining options. The following sections look at your choices here.
Choosing None as your access method offers no options and restricts you from uploading your site via Dreamweaver. You also cannot utilize some of the advanced site management features in Dreamweaver if you don't establish a remote connection.
Although having no remote access method established in the Site Definition prohibits you from using Dreamweaver to perform remote site functions (such as uploading your site), you can still do this with a third-party FTP client such as CuteFTP on Windows (http://www.cuteftp.com/) or Fetch on the Mac. If you're not familiar with such practices, however, it's strongly recommended you use the built-in remote site management features of Dreamweaver.
FTP stands for File Transfer Protocol and is easily the most widely used method for uploading web pages to a server (see Figure 23.2). You almost certainly will use this method when creating other organizations' web pages. Similar to HTTP (Hypertext Transfer Protocol, the protocol used to transfer web pages over the Internet), FTP requires a client and server application. In this instance, Dreamweaver acts as the FTP client. Software on the remote server acts as the FTP server. If you choose FTP as your access method in Dreamweaver, the Site Definition dialog box asks you for the following information (see Figure 23.2).
FTP Host. This enables you to specify the address for the remote host of your web server. An example would be ftp.remotehost.com or ftp.yourwebsite.com. If you don't know this information, contact your network administrator or host provider (ISP).
Host Directory. This specifies the directory on the server where your uploaded site will be located. A directory on the server is just like a folder on your local computer. A lot of servers have the site root set as www, htdocs, or public_html/. If you are unsure about the host directory, then leave it blank. This will default to the main directory of the FTP host. If there is an incorrect path in the host directory field, Dreamweaver might fail to connect even though your FTP information is correct, and you can connect with other FTP clients. If you are having trouble connecting, remove any value from the host directory field. After you can connect, then you can verify the correct folder.
Login. This is the username of your account.
Password. This is the password used to authenticate your account and gain access to the FTP server.
Use Passive FTP. This is required by some firewalls, and enables Dreamweaver to set up the FTP session instead of having the FTP server do it. If you're unsure what this should be, leave it unchecked and ask your network administrator.
Use Firewall. This dictates whether Dreamweaver should use the firewall preferences to connect to the FTP server. Ask your network administrator if you need to set these.
Use SSH Encrypted Secure Login. This allows you to encrypt your login information. It does not encrypt the files that are being transferred. To enable SSH, Dreamweaver uses Putty, a free program that does the encrypting. You need to download Putty and install it before you can use the encryption.
Use Check In/Check Out. This enables Dreamweaver's versioning software and is discussed in detail in Chapter 24, "Workplace Collaboration."
You can set several more options for all of your sites' FTP connections by choosing Edit > Preferences > Site.
A local/network connection is used when the web server you will be publishing your pages on is located on the same local area network (LAN) as you are. Often this option is used when developing a company intranet site, or if you are providing the design and hosting for a site.
For this connection type, you must provide the path to the remote folder (see Figure 23.3). You can either type the information or use the browse button to locate your remote site folder.
With this method of connection, you have the option of refreshing the remote file list automatically. If enabled, this causes Dreamweaver to refresh the file list for you (for example, reconnect to the remote folder and re-generate the list of remote files) every time files are added or deleted to the remote file. If you don't enable this option, you can still do this manually by choosing View > Refresh in the Site panel or Panel (Windows) or Site > Site Files View > Refresh (Mac).
Visual SourceSafe, RDS, and WebDAV are all versioning systems, meaning tools that allow multiple developers to work together and keep track of files so that developers don't overwrite each others work. Visual SourceSafe (VSS) is a Microsoft program. RDS and WebDAV are protocols (like FTP), meaning they are a set of rules used to communicate and track files. A protocol is a set of rules that computers agree upon to transfer files back and forth. These remote setting options are all just different ways of connecting to other computers and transferring files.
To learn more about Visual SourceSafe and WebDAV, and how they work in Dreamweaver, see Chapter 24.
What about the Site Wizard? In the Site Wizard (the Basic tab of the Site Definition dialog box), remote site information is added in the Testing Files section. When you get to this screen of the Wizard, you're asked "How do you connect to your testing server?" The answer to this wizard question gives Dreamweaver the information it needs to set up your remote site. The same basic choices are available here as in the Advanced tab of the dialog box, beginning with choosing an access method.
Exercise 23.1 Setting Up Remote Information for the Grandpa's Ice Cream Site
In this exercise, you will set up the remote site information for the Grandpa's Ice Cream Site.
First, make sure you have your local site defined and your local root folder established. The chapter_22 folder from the CD should be your local root folder. If you've already done the exercises in Chapter 22, "Local Site Management," you can use the same site and files for the exercises in this chapter.
If you haven't gone through those exercises, copy the chapter_22 folder from the CD to your hard drive. Define a site called Grandpa's Ice Cream, with the chapter_22 folder as the local root folder.
Now, set up the remote folder. For this exercise, you'll assume that your workstation will double as your web server, so your remote folder will be another folder on the same computer.
In the real world, if you were going to use your own computer as a web server, would you bother specifying a local and remote folder? Why not just publish the local folder and not have to worry about any remote site? Even in this unlikely circumstance, you're better off defining separate local and remote folders, because you can work on the local copies of your files while the general public is busy surfing your remote files.
Now that your ducks are in a row, it's time to define a site. Choose Site > Edit Sites. Select the Grandpa's Ice Cream site and click Edit.
This opens the Site Definition dialog box. Click on the Advanced tab to bring it to the front. From the categories at the left, choose Remote Info.
From the Access method pop-up menu, choose Local/Network. This adds a series of input fields to the dialog box.
The most important task here is to tell Dreamweaver where the remote folder is. Click the browse button and use the dialog box that appears to navigate to your chapter_23 folder. Dreamweaver/Windows users: Be sure you're inside the chapter_23 folder before clicking Select. Dreamweaver/Mac users: Be sure you're outside the chapter_23 folder and have it selected in the dialog box before clicking Choose.
You can also set your Local/Network connection options. Enable Refresh local file list automatically. Leave the other two options unselected.
That's it! Figure 23.4 shows what your settings should look like. Click OK to close the Site Definition dialog box. Then Click Done to close the Edit Site dialog box.
That's all there is to it! Now you are ready to rock and roll (and publish your site as well).
Now that you've set up the remote site information in your Site Definition dialog box, you can interact with the remote server. This section teaches you the steps involved in basic remote site file management. More advanced discussion, such as on the Synchronization feature, appears later in this chapter. This section discusses two primary functions: connecting to and disconnecting from the remote server, and uploading and downloading files. Figure 23.5 shows the Site panel with items relevant to remote site management highlighted.
When you expand the Site panel to show both its left and right panes, you have the option of showing the site map or the Remote File list in the left-hand pane. To show the Remote File list, click the Files icon at the upper-left corner of the expanded window (see Figure 23.5).
In contrast to Dreamweaver, most FTP programs show local information on the left and remote information on the right. If you would prefer your Site panel to use this setup, choose Edit > Preferences > Site and reverse the order there.
The Connect/Disconnect button (see Figure 23.5) enables you to connect to and disconnect from a remote FTP server. This option also is available if you use a source control system such as SourceSafe or WebDAV. If you publish to a server located locally on your computer or your network, this button will be grayed out because you are automatically connected to the local server. This button will also be grayed out if you have not specified a remote FTP server in your Site Definition.
If you are using an FTP connection, you would select the Connect button to connect to the FTP server before moving your files from the local to the remote folder. When you connect, a green light appears in the lower-left portion of the Connect button icon. This lets you know that you're connected to the remote server and toggles the button's function to Disconnect. Pressing the button in this state disconnects you from the remote server.
If you experience problems connecting to your remote server (or perhaps if you just want to know what Dreamweaver is really doing when you press the Connect button), you can view the FTP log by selecting View > Site FTP Log (Windows) or Site > Site FTP Log (Mac). This provides a real-time client/server log of your FTP requests and responses. This also shows you how Dreamweaver creates directories, uploads and downloads files, and uses many other FTP commands.
Macromedia maintains a TechNote that lists FTP commands and shows you how to interpret an FTP log. The address for this resource is www.macromedia.com/support/ dreamweaver/ts/documents/ftp_errors.htm.
After you're connected to your remote site, it's time to either place your files there or to download files from there to work on them. When you want to upload, or place a file on the remote server, it's called putting because you are putting your files on the remote site. When you want to download a file from the remote server, it's called getting because you are getting a file from the remote folder. In Dreamweaver, you can get and put in a variety of ways:
Select the files you want to upload or download and click the Get or Put button at the top of the Site panel (see Figure 23.5).
Select the files to upload or download and use the menu commands: Site > Get or Site > Put.
Select the files to upload or download and right-click (Ctrl click) on your selected files to access Get or Put in the contextual menu.
Select the files to upload or download and use the shortcut keys, Ctrl/Cmd+Shift+D or Ctrl/Cmd+Shift+U.
The fun but dangerous way, drag-and-drop your files from one site of the Site panel to the other.
When you put or get, if an older version of a file exists in the target location, it will be overwritten.
When you select to either Get or Put files, the Dependent Files dialog box appears, asking whether it should include all files linked to inside the HTML documents. These files include images and other media content. Select Yes or No accordingly. You also might tell Dreamweaver whether it should ask you this in the future. If you decide to have Dreamweaver not ask you in the future, you might decide later that you would like it to. You can turn on this prompt again by going to the Site section of your Preferences and checking Prompt on Get or Put. If you decide to leave this feature hidden, you might force Dreamweaver to ask you on a one-time basis by holding Alt (Windows) or Opt (Mac), while selecting the Get or Put buttons.
If you press the Get or Put button without being connected to the remote site, Dreamweaver will connect automatically if possible.
During your life as a web designer/programmer, you are sure to spend a late night or two trying to get a project done on time. It is possible that as the sun is rising and you are working away furiously that you might lose track of whether or not you have uploaded the most recent version of a document to the remote site. How can you keep track of the most recent files and whether they have been placed on the remote site? Dreamweaver offers two ways to do this: manually and automatically. The next section covers the old-fashioned manual method. Then the discussion turns to the powerful Synchronize command, which enables you to do this automatically.
You can use the Select Newer Local or the Select Newer Remote command to manually synchronize your sites. This function compares the modified date on the local machine for each file with the modified date on the remote server for each file.
To select the newer files on the local site, select Edit > Select Newer Local (Windows) or Site > Site Files View > Select Newer Local (Mac). After Dreamweaver has compared the modified dates on both the local and remote sites, it will highlight all the files in the local window that are more current than those on the remote site. From here, you can simply click the Put button and all the files that are more current on your local site will be uploaded to the remote site.
If you are working as part of a team on a single site, it is possible that the remote site has a more current version of a document than you have on your local site. In this case, before you make any changes on a document you should check to see if there is a more recent version on the remote server. You can do this by selecting Edit > Select Newer Remote (Windows) or Site > Site Files View > Select Newer Remote (Mac). In this case, the files that have a more recent modification date on the remote side as compared to your local site will be highlighted. Then all you need to do to get the most recent versions is click the Get button and they will be downloaded to your local site.
The first time you upload your files to the server, you might notice that your local modified dates are not accurate. With the initial upload, Dreamweaver will change the local timestamp so that it matches the server time. That way, in the future it can compare timestamps and calculate what files have been changed and should be synchronized.
If Dreamweaver is unable to determine the timestamp on the server, you'll get a warning that synchronization can't occur. You can still get and put files, but you will be unable to find the newer files, either on the local or remote site.
Because Dreamweaver highlights only files that are newer, those that are exactly the same (that is, those that have the same modification date and time) will not be selected. If your site is already synchronized, no files will be selected after running both of these commands. You might think that nothing happened, but it's just that the sites are already up-to-date.
Be aware that because Dreamweaver checks all the files of a site, the Select Newer Remote command could take a long time. This is the case if you have a slow connection to the remote server. Sometimes this might be mistaken as Dreamweaver "freezing." Please be patient, especially if you are connecting via a modem.
To access the Synchronize command, choose Site > Synchronize. The Synchronize command provides a much better way to synchronize your files than the method of manually selecting newer files. Part of the beauty and power of this command is that you can choose to synchronize as much or as little as you want. This means that you can synchronize just one folder, just one file, or the entire site. You also can choose to remove any file on the remote site that is not located on the local site copy, or vice versa. This is not possible with the previous (manual) method.
To synchronize your site using the Synchronize command, follow these steps:
Unless you want to synchronize the entire site, select the files you want to synchronize.
Choose Site > Synchronize. The Synchronize Files dialog box displays (see Figure 23.6).
From the Synchronize pull-down menu, choose whether to update the entire site or just the selected files.
From the Direction pull-down menu, select what you want to do from these options:
Put only those files that are newer locally to the remote site. (You will only send files.)
Get only those files that are newer remotely to the local site. (You will only receive files.)
Synchronize both the local and the remote site with each other. (You will both send and receive files.)
If you select Get and Put Newer Files from the Direction menu, go straight to step 6. If you select one of the other two directions, you can specify one additional option. If you are putting newer files to the remote site, you can select to delete remote files not on the local drive by checking the appropriate box. If you are getting newer files from the remote site, you have the option to delete any local files that aren't on the remote site. To select the delete option, check the box on the lower left. Remember that deleting a file is final and cannot be undone. Use this option with great care.
Press Preview. This processes your files for synchronization and opens the Synchronize window (see Figure 23.7). This gives you a preview of what will happen when you click OK, showing how many files are to be updated, the action that will be taken on that file (get, put, or delete), and the filename.
By default, all check boxes are checked in the Action column of this dialog box. Deselecting a check box removes the file from being processed. This enables you to ensure that you know exactly what is happening and lets you change what Dreamweaver does, just in case you know something that it doesn't.
When synchronizing with the Direction option Get Newer Files from Remote, you can delete files locally that aren't found on the remote server. When synchronizing the other way, with Get Newer Files from Local, you can delete files on the remote server that aren't found locally. Be extremely careful with both of these options, however. It is common to keep source files, such as Photoshop *.psd files or Fireworks *.png files in folders within your local site for convenience that shouldn't be uploaded or deleted. Similarly, you might have necessary files on the web server (the remote site) that don't have counterparts in your local site script files or web site stats, for instance.
After you have completed the synchronization, you will be able to see the actions that Dreamweaver performed. Dreamweaver shows the progress of the synchronization and, after it's done, enables you to save a text file of the procedure for future reference.
Exercise 23.2 Working with Grandpa's Local and Remote Sites
In this exercise, you will get some practice uploading, downloading, and synchronizing between the local and remote Grandpa's Ice Cream sites. Before going through this exercise, make sure you've defined the local and remote sites as outlined in Exercise 23.1.
Make sure Grandpa's Ice Cream is the active site. Expand your Site panel so you can view both local and remote file lists at the same time.
To start with, the remote folder for Grandpa's is empty! That's the way you normally start out when you create a new web site. There's nothing on the server.
To upload the entire site, click the folder at the top of your local Site Files list. This selects the entire site.
At the top of the Site panel, click Put. Dreamweaver will probably ask if you want to upload dependent files. Choose No. (Because you have all of your dependent files selected, it doesn't really matter what you choose in this dialog box.) Figure 23.8 shows the results of this.
You're going to test the Dreamweaver synchronization features by altering one of the local files and seeing if Dreamweaver notices.
From your local Site Files list, double-click our_flavors.htm to open it.
Change any of the ice cream flavors that you like. Add your favorite; subtract anything you think is disgusting. When you're finished, save and close our_flavors.htm.
Repeat the process to change buy_some.htm. Maybe you should remove Montgomery Wards from the list of stores, because it doesn't exist anymore. Any stores you'd like to add? When you're finish, save and close.
Choose Edit > Select Newer Local (Windows) or Site > Site Files View > Select Newer Local (Mac). Dreamweaver thinks for a split second, then highlights our_flavors.htm and buy_some.htm in the local Site Files list. Remember, the goal is to make the remote site a mirror of the local site. That's what synchronizing is all about.
Those are your two updated files. Now that they're selected, click the Put button to put them. (There's no need to upload dependent files.)
That was handy! Now, though, you'll try something a bit fancier. In the local Site Files list, right-click (Ctrl-click) on the local root folder and from the contextual menu choose New Folder. When the new folder appears, name it pages.
Still in the local Site Files list, move buy_some.htm, our_flavors.htm, and about_us.htm into the pages folder. (You're tidying up your site organization.) When Dreamweaver asks if you want to update your links, click Update.
Now try synchronizing again. Choose Edit > Select Newer Local (Windows) or Site > Site Files View > Select Newer Local (Mac). When Dreamweaver makes its selection, click the Put button to upload all selected files.
How do your remote and local sites look (see Figure 23.9)? Are they still mirroring each other? No! Dreamweaver added a new pages folder and filled it with pages but it didn't remove the old HTML files. Why not? Because it doesn't realize that you haven't created any new files, you've just rearranged existing files.
This is a good example of what happens quite frequently when dealing with local and remote sites. Slowly, over the course of editing and rearranging your files, old files start collecting on the web server, not doing any harm but taking up vital storage space. Manual synchronization doesn't get rid of them.
Time to synchronize the automatic way! Choose Site > Synchronize. When the dialog box appears, choose to synchronize the entire local site, putting newer local files to remote. And enable the Delete Remote Files Not on Local Drive option. (This is the Clean-up command.)
When you've set your options, click the Preview button. Dreamweaver now compares the modified dates of the local site and remote site and lists the items that are newer on the local site in the Synchronize window (Figure 23.7). Notice that from this list you can choose whether or not you want to upload, or put, each item individually. This is an important safeguard, giving you every chance not to delete needed files from the server. For this exercise, don't deselect any files.
Click Update. Now the list shows you that the extra files have been deleted and the synchronization is complete (see Figure 23.10).
Click OK. Your synchronization is done!
Because it is so common to keep assets in your local site folder that you never want to upload to your remote site, Macromedia has incorporated a cloaking function into Dreamweaver MX. Site cloaking allows you to exclude folders or file types in a site from certain site operations, such as Get or Put. Note that you can cloak file types, such as PNGs but not individual files. The items you choose to cloak are site specific meaning that each site on which you work can cloak different folders or file types. You can cloak folders or file types on either the local or remote site.
When a folder is cloaked, it will be excluded from the following operations:
Check In/Check Out
Select newer local/Select newer remote
Check links sitewide/Change links sitewide
Asset panel contents
Template updating/Library updating
The ability to use the cloaking feature is enabled by default. If you want to turn it off temporarily or permanently, you have that option. If you disable cloaking, all cloaked files will be uncloaked. If, later, you choose to use cloaking again, previously cloaked files become cloaked. To disable cloaking, choose Site > Cloaking > Enable/Disable Cloaking in Current Site (see Figure 23.11).
To cloak a folder, simply select the folder you want to cloak then choose Site > Cloaking > Cloak. You will see a red line through the folder icon in the Site panel (see Figure 23.12).
Cloaking specific file types is a little different. If you want to cloak a file type, you need to use the Advanced Site Definition options. Do it this way:
Select Site > Cloaking > Settings. This opens the Site Definition dialog box's Cloaking category.
Enable cloaking based on file type by clicking the Cloak Files Ending With check box. You can see that by default Dreamweaver is offering to cloak PNG and FLA files. (These are the authoring files for Fireworks and Flash.)
Specify the types of files to cloak by typing the three letter extension belonging to the file type you wish to cloak. Separate the entries with a space. If you don't want to cloak PNG or FLA files, just delete those entries.
When you're finished, click OK to close the Site Definition dialog box. Dreamweaver brings up an Alert dialog box indicating that the cache will be re-created. Click OK to close this window.
From now on, all files belonging to the type you designated show up in the Site panel with a red line through them.
To uncloak a specific file type, open the Site Definition window, go to the Cloaking category, and uncheck the Cloak Files box.
If you want to uncloak all cloaked files regardless of whether they were cloaked by file type or by location choose Site > Cloaking > Uncloak All. Dreamweaver makes sure you really want to perform this task by bringing up a dialog box that asks "Are You Sure You Want To Do This?". Click Yes. Now all files and folders are uncloaked, regardless of the technique used to cloak them.
In this chapter, you learned how to define a remote site. You learned how to work with your remote site, including uploading and downloading files. And finally, this chapter discussed the ways that Dreamweaver enables you to keep your local and remote sites synchronized and up-to-date (manually and automatically), and how to exclude certain files from synchronization by cloaking them. The next two chapters expand your site management horizons by looking at features aimed specifically at design teams working together on large sites.