Setup An Online Workspace With Dreamweaver

Recently, Frank Verhoeven and I started working on a WordPress theme. This WordPress theme would be customized online on a dummy WordPress installation. Frank and I should both be able to apply changes to the files. With FTP, this isn’t a problem.

However we were editing and uploading the same files and this caused some problems.  The changes he applied weren’t in my stylesheet, so when I uploaded my changes, his changes were lost. And visa versa. We needed to think of a workable solution.

Adobe’s Dreamweaver “Define A Site”

We found the solution via Adobe’s Dreamweaver “define a site”-feature. Any user in the team (Frank and me in this case) should define the same site in Dreamweaver and check files in/out (more info on check in/out below). These files were uploaded right back to the server once it was done.

This is the perfect solution for working in a team on one website. That’s why I will teach you exactly how to set up such “site”.

Before we can start

Before we can actually set up this connection between Dreamweaver and your site, we need a couple things ready. You need these:

1. FTP information
2. Dummy WordPress installation (or any other folder you would like to edit)
3. Folder on your local computer where you can store the files.

Setup the Connection

I will guide you through a step-by-step process of setting up the connection. It isn’t that hard, but you need to follow the guide step by step.

In this version of the tutorial, I used Dreamweaver 8. Any later version of Dreamweaver should have almost identical steps, so it shouldn’t be a problem.

Step by Step

Step 1. Open Dreamweaver. Go to “Site > New Site”. You should choose the basic setup.

Step 2. Name your site and enter the HTTP address of that site. Click next.

Step 3. Do you want to use a Server technology? Yes, we would like. WordPress runs PHP and MySQL. Click next.

Step 4. How do you want to work with your files during development? I suggest you choose option “Edit locally, then upload to remote testing server”.

“Where on your computer do you want to store your files?” You have to enter the folder where you develop your site on your own computer. Choose next.

Step 5. When we proceed, we have to connect to a testing server. I think it’s easiest to set up a FTP connection. Enter your FTP information and check if Dreamweaver can make the connection.

“What folder on the testing server do you want to store your files in?”. You should choose the complete path here. Usually this is something like “/public_html/WordPress/wp-content/themes“. Click next.

Step 6. Enter the root URL of your site and click next.

Step 7. We see some options for sharing files. You should enable “check in and check out”, because you want to make sure your co-workers don’t edit the same file at the same time you are busy with that file.

Step 8. Enter your name and email address. After this step you will be given a summery. Click done.

Upload on Save

Dreamweaver has the function to upload the file as soon as you hit the save button. This means you don’t have to upload anything anymore, because that will be done automatically.

Step 1. Site > Manage Sites
Step 2. “Edit” your site
Step 3. Advanced options
Step 4. Remote Info
Step 5. Check “Automatically upload files to server on save”

And we are done. Your saved files will be uploaded to the server immediately.

Checking In / Checking Out

Here is some extra information about checking in and checking out files.

When you are connected and you want to edit a file, you double-click on the filename (you “check in”). This means that you give Dreamweaver the sign that you are editing a file from your site. Your co-workers see this “check in” sign too, and they know you are editing it so they can not edit that file.

“Check Out” is when you are finished with a file and you are releasing it to the public workspace again. Your co-workers can see this too and if they want, they can now edit the file.

After the setup

Once all your co-workers have defined the same “site”, your online workspace is done. Everyone can now reach the most up-to-date file.

More Resources?

Here are a number of other resources and links.

• Checking In/ Checking out
• How to define a site in Dreamweaver
• Adobe
• Setup a site in Dreamweaver

Questions

If you have any question about this tutorial, or something isn’t clear, I will be happy to reply to your comments.

I have a question for you too: Did you set up such online workspace? Or is there any other (and better?) program that can do this?