Saving, Uploading, and Viewing

After completing the “Try it Out” on the last page, we have some basic content in the form of an “index.html” file that has the image “bunny.jpg” on it.

Now it’s time to make the Remote copy of your Site match the Local copy of your Site. There are actually several ways to do this depending on how many changes you’ve made and how thoroughly you want to review each transfer operation.

Remember that the Local copy is the one that’s “living” on your computer: it’s only visible to you. The Remote copy, however, is the one that everyone can see; it’s the public version of your Site. These two copies of your Site are independent: Changing a page on your Local copy does not mean that your Remote Site will be updated accordingly, even if you save those changes.

Every time you view your Site in Dreamweaver or preview it from Dreamweaver’s “Preview in Browser” button, you are viewing the Local copy. Every time you view your Site on the internet (at an address starting with “http://”) you are viewing the Remote copy of your Site.

The rest of this page discusses how to transfer files between these two copies of your Site and how to synchronize the two.

Get and Put

Dreamweaver uses the terms Get and Put to talk about getting a file from the Remote copy and putting a file on the Remote copy. Dreamweaver uses a green down-facing arrow to indicate Get and a blue up-facing arrow to indicate Put:

The Files Palette

The Views Toggle Dropdown

Our last page focused primarily on the Properties Inspector. This page focuses primarily on the Files Palette.

The Files Palette is the primary method of transferring files between the Local and Remote copies of your Site. You can only view one copy of your site at a time, but you can toggle between these views using the Views Toggle Dropdown.

(Dreamweaver CS3 actually has a button that allows you to view both the Local and Remote sites side-by-side; it’s the last button on the row of buttons below, but we won’t discuss how to use this view.)

Buttons on the Files Palette

The Files Palette has a row of buttons from left to right:

1. Connect to remote host
   Use this when you are ready to start transferring files between your local and remote versions. The “remote host” is simply the server (computer) that stores the Remote copy of your Site.

   This icon is meant to resemble an electrical cord and a socket into which the cord plugs. When you are connected to the remote host the icon changes to one where the two plugs are joined and the gray circle is green.

2. Refresh
   When you connect to the remote host Dreamweaver asks the Remote Site what files it has. Rather than keep on asking this question over and over again, Dreamweaver just holds on to the Remote Site’s answer and assumes that nobody else has done anything to add, remove, or change the files there.

   This button, resembling an arrow looping back onto itself, allows you to force Dreamweaver to get the current contents of the Remote Site. This is useful if you’re trying to view your Remote Site in a web browser and it’s not matching up with what you see in Dreamweaver.

3. Get File(s)
   Used to transfer the selected files in the Files Palette to the Remote Site. This is most useful when the Views Toggle Dropdown is set to “Remote view.”

4. Put File(s)
   Used to transfer the selected files in the Files Palette to the Local Site. This is most useful when the Views Toggle Dropdown is set to “Local view.”

5. Check Out File(s)
   This button is not relevant to this curriculum.

6. Check In
   This button is not relevant to this curriculum.

7. Synchronize
   Allows you to let Dreamweaver automatically determine what files need to be transferred between the two copies of your Site to bring them to the same. More on this later.

8. Expand to show local and remote sites
   This button is not covered in this curriculum.

Before Your First Transfer

Before we start transferring files it’s important to make sure that we’re not going to accidentally overwrite any files you might already have. To do this:

1. Click the “Connect to remote host” button on the Files Palette, then

2. Toggle to the “Remote view” using the “Views Toggle Dropdown”, then

3. Click the “Refresh” button on the Files Palette.

If you already have a file called “index.html”, “index.shtml”, or a file named “index” with any extension, then you should rename it to something like “old_index.html” by clicking on the file’s filename and waiting briefly and typing in the new name.

This file might have been set up for you automatically when you first activated your web site or it might be the result of past web design attempts.

Click thumbnail to view full image.

In any case you should try visiting your Site on the internet. The address depends on a wide variety of factors, but if you’re a UW Student, the address is probably something like http://students.washington.edu /YOURUWNETID/.

This page should look something like the screen shot to the right. This is what is shown if you do not have an “index.html” file, as was discussed on our Getting Started page.

Putting a Single Page

Here’s how to upload your “index.html” file to the Remote Site:

1. Select “index.html” in the Files Palette

2. Click the (blue) “Put” button in the Files Palette. This will likely result in the following dialogue box:

   Click thumbnail to view full image.

   This dialogue box actually brings us back to an important bit of theory that we discussed on the Getting Started page. Namely, the notion that “Pages on Web Sites are just files”. In particular, you’re asking Dreamweaver to upload “index.html”, a file on your computer. The gotcha is that this file includes another file, namely bunny.jpg.

   When one file includes another file (such as a page including an image or a stylesheet) then Dreamweaver calls the other file (the image) dependent in the sense that the image depends on the page in order to be displayed in context.

   This is a long-winded way of saying that you do want to “Put dependent files” when Putting files. That is, press “Yes” in that dialogue box every time it comes up. Or simply check the box that allows you to always perform this action.

Upon clicking the Put button, Dreamweaver will Put your “index.html” and “bunny.jpg” files onto the Remote Site. You can verify this by toggling to the Remote Site in the Files Palette and clicking the Refresh button to see the two new files uploaded, as depicted in the screen shot to the right.

Other Ways

This method works but is slightly tedious. This operation is so common that Dreamweaver has duplicated the Get/Put buttons in the row of buttons above the Design View, as depicted in the screen shot to the right.

Dreamweaver also has a keyboard shortcut, Shift + Apple + U on the Mac and Shift + Control + U on the PC, that allow you to quickly and easily Put the file you’re currently working on.

Synchronizing Your Site

Arguably one of the more useful features of Dreamweaver’s built-in file-management tools is its ability to Synchronize your Local and Remote Sites.

Imagine you’ve just spent several hours updating a very large Site with several hundred files. You were making some pretty serious design changes so you didn’t Put each file as you were working on it (you didn’t want any visitors that caught you mid-update to get confused as to why some pages looked different than others). Now that you’re done with those changes on the Local copy of your Site, how do you transfer those changes?

You could manually try to figure out or remember which files you changed, but this is error-prone: you’re only human. You could opt to simply Put your entire Site, but your Site is very large, so this could take a long time and might actually not work the way you would expect with some of Dreamweaver’s plug-ins. You could simply give up and have some sorbet, but then you’ve just consumed calories needlessly.

The solution, while slightly less delicious sans sorbet, is quite ingenious: Dreamweaver keeps track of which files you’ve changed since you started editing and allows you to transfer only those files that have changed since then. This operation is known as Synchronizing the two copies of your Site.

You can Synchronize your Site at any time by clicking on the “Synchronize” button in the Files Palette. The icon looks like the green and blue Get and Put arrows circling back on each other.

Older versions of Dreamweaver also include this feature, but it’s slightly more hidden. In older versions of Dreamweaver you can click on Site > Synchronize… to get this same feature.

Synchronization Options

Dreamweaver is able to perform a Synchronize in many different fashions, and it allows you to select between them in the “Synchronize Files” dialogue box:

Click thumbnail to view full image.

The dialogue box has two dropdowns, Synchronize and Direction:

• Synchronize simply asks you what you want Syncrhonized, either the entire Site or only those files selected in the Files Palette.

• Direction asks you which copy of the Site is “newest”:

  • If you are saving your changes to the Remote Site, then you should select “Put newer files to remote” which will take all the files you’ve modified since you last Synchronized and Put them.

  • If you are just starting to make some changes to your Local Site, you should select “Get newer files from remote” which will look on the Remote Site and see if any files there have changed and are newer than your Local copies. This feature allows you to work on your Site from anywhere and always be able to keep those changes the next time you modify your changes from home.

  • “Get and Put newer files” is perhaps the most interesting of the options: it allows you to do a “merge” of your Local Site and your Remote Site. If your copy of “index.html” is newer than the Remote Site’s copy, then it will Put your Local copy. At the same time, if the Remote’s copy of “bunny.jpg” is newer (maybe you were doing some Photoshopping in the labs) than your Local copy, then it will Get it from the Remote.

This author’s preference is always select “Entire…” and “Get and Put newer files” options in the Synchronize Files dialogue box. This ensures your Local and Remote Sites are always the same.

Once you select the desired option, select the “Preview” button to see what Dreamweaver proposes it must do to perform this operation.

Synchronizing Danger

“What’s this ‘Preview’ thing about?,” you ask? Simply, performing a Synchronize can be dangerous. Dreamweaver knows to Get or Put a file based on its “Last Modification Time,” information that most operating systems keep track of for files. This means that Dreamweaver doesn’t really keep “track of which files you’ve changed since you started editing.” Rather, it just compares the Last Modification Time of the files in the Local Site to that of the files in the Remote Site, and if the two Last Modification Times differ, the newer of the files will be transferred.

To see why this is dangerous, imagine you go to the labs and make some significant changes to a file on your Site and you Put those changes and all is fine and good. Then you come home and make some small changes to that same file but you forgot to first Get that file from the Remote Site. Your Local copy of the file doesn’t have all those changes you made in the labs. When you go to perform a Synchronize, Dreamweaver will see that the Local file was modified more recently than the Remote file and will Put the file, overwriting all those changes you made in the labs.

(Yes, you’d have to be somewhat dense to not realize that all your prior changes weren’t there when you were editing your Local copy, but this can happen fairly easily in other contexts as well.)

It is for this reason that Dreamweaver asks for your approval before potentially modifying a large number of files on your two copies of your Site

Dealing with Synchronizations

If there are differences between your two copies of your Site (Local and Remote), then you’ll be given a dialogue box similar to this one asking you to review the operations Dreamweaver will perform to bring the two copies up to current with each other in a dialogue box similar to this:

Click thumbnail to view full image.

From here you can opt to go ahead with these changes by hitting “OK” or you can modify Dreamweaver’s course of action by selecting an item from the list of actions and using the arrows at the bottom to change the action.

Did All Go Well?

Once you’ve synchronized your Site you should be able to visit it at the same address as before. We used to have something like

Click thumbnail to view full image.

and if everything has gone well, we should now have something like

Click thumbnail to view full image.

If you do not have this, ensure your page is saved exactly as “index.html” and that you’ve properly Put the “index.html” file. You might also try refreshing your web browser and clearing its cache. If you’ve tried all of this and still can’t get your Site to come up at your “http://…” web address, please send us an email via our email address available from our Contact Us page.

What Next?

Now that we know how to add content and how to save that content and upload it to the world wide web, it’s time to get into designing your own layouts with Dreamweaver’s Layers.