Setting Up a Site in Dreamweaver

A videocast, podcast and iPodcast on an important first step in using Dreamweaver.

Video Podcast: Setting Up a Site (About ten minutes)
It will start when it's about 10% loaded.

Audio Podcast: Setting Up a Site (About ten minutes)

iPod video: Setting Up a Site (About ten minutes)

Transcript:

Today we're going to talk about setting up a web site in Dreamweaver. It’s the one thing you must absolutely learn to do if Dreamweaver is to be able to do everything it can to speed up your work. The purpose of setting up a site is to let Dreamweaver know that a group of web pages belongs together in a single web site.

The benefit to you is that dozens of Dreamweaver tools start to make sense and work as you might expect them to. Even if you have only one web site on your computer, defining the site is important. I know from personal experience that people like to dispense with this step in their zeal to get started right away, but as I found out, things go much better once you take a moment to figure out how to do this.

First, let's open up Dreamweaver. Notice that we have the four-part layout – several toolbars across the top, files and assets down the right-hand side in openable-closable sections, a large work area, and, below that, the all-important Properties bar, which is a context-sensitive bar that will reveal to you lots of things about whatever is going on where your cursor is.

To set up a site, first find the menu bar across the top. There you'll see the usual "File, Edit, View" dropdown menus. Look a little further to the right on the menu bar and you'll see "Site" (just before "Window" and "Help")… Click on "Site", and, from the drop-down menu, select "New site" if you are setting up a site for the first time, or "Manage sites" if you are editing a site that has already been started. Let's assume this is the first that you've set up this site.

Okay, here we are going to set up a fictitious library web site, The Extra Mile Public Library. Rather than use the site setup wizard that is under the Basic tab, we're going to use the Advanced tab, so that we can see all of the information that we need to supply at one time. Click on the Advanced tab, and notice that we are in the "Local Info" category, which is listed in the box to the left.

Let's give our site a name. This name is a "casual" name, only seen by you when you are working in Dreamweaver, so it can be anything you like. For now let's call it "EMDPL Staging", since we're planning to put it in a staging area rather than on the production server while it's under development. The staging area is often on a different web server from the production web site, but should somewhere on the public Internet so where the site can be viewed and tested and approved before going live.

Next, we need to tell Dreamweaver where the files for this site are stored on your computer. Click on the little folder icon to the right of the "Local root folder" box and navigate to the place where your files are kept for this site. If you already have a web site, and you are setting up Dreamweaver to be able to edit it, you simply click on the site folder. Its name will appear in the "Select" box (near the top of the dialog box). You click on the "Select" button to, uh, select it.

If you do not yet have a folder for your files, navigate to the directory where you want to create the folder – somewhere in "My Documents" is a good place – and click on the little "new folder" icon to create the new folder. Again, this is also a name that will be seen only by you, but I would recommend it be called something that others would also recognize. Don't call it "new site" because everything new becomes old pretty fast. Call it something like "EMDPL website". If you know the domain name of your site, you might want to spell it the same way. At this point, spaces in the name won't hurt you, but beyond this point, you should start using some very specific naming rules.

One of my big rules is "Don't use spaces in your file names or your folder names." Most modern computers handle spaces just fine, but there are some web servers out there that change all spaces to their ASCII character equivalents, which in the case of a space is "%20". Other servers will probably correctly interpret the "%20" as a space, but on rare occasions, a server will interpret the "%20" as a… "%20" instead of a space, and your image, or your web page, will simply not be found.

We can set up the default images folder as well, though frankly, I've never noticed much benefit to doing so. Nor any harm, either. Click on the little folder icon to the right of the "Default images folder" box and navigate to the new "EMDPL website" folder, or whatever you called yours, and create an "images" folder. I use lower case names for my folders because I am lazy and do not want to have to hit the shift key. Also, by being consistent in naming everything with lower case letters, I don't have to remember whether there is a capital letter in the name or not. Case matters on most web servers (a capital A is not the same as a lower-case a), and your links and your filenames have to match up exactly or your pages or images will not be found. Dreamweaver does most of the work of keeping all of that straight, but just in case I have to use my occasionally imperfect brain to remember a folder or file name, sticking with a naming convention saves me from a lot of frustration.

Next, make sure the "Links relative to Document" button is selected, ignore the HTTP address box, and check the "Use case-sensitive link checking" and "Enable cache" boxes. These are both very useful tools.

At this point, you are done with site setup if you do not already have your web site set up on a web server. Setting up the web server is the job of the system administrator – it's not done through Dreamweaver. The next section assumes that your system administrator has set up the site on the web server already. If you do not know who your system administrator is, you'll need to find out, because he or she will need to supply you with certain pieces of information.

If, however, your site is already set up on a web server, and you can contact your systems administrator, you can connect your local Dreamweaver development area with the staging server or production server. Here's how:

Look at the Categories in the box on the left-hand side of the Advanced tab. Currently, "Local Info" is probably selected. Click on the second one – Remote Info.

When you first get to the Remote Info page, it's a little daunting, because all you see is "Access: none". But never fear, just click on the little down arrow next to the box that says "none" and you'll get a list of access types.

The most usual way to connect to a web server is to use FTP, File Transfer Protocol. Once you click on it, you will see the types of information you need to get from your systems administrator.

The ftp host has a name, (or numbers). It might be ftp.extramilelibrary.com, or www.exramilelibrary.com or ftp.earthlink.com or ftp.129.10.10.80, or some such thing.

You may or may not need to know the Host directory. If your web site is the only thing on the web server, then you probably don't need to put anything. But occasionally, a web server is set up so that the site is in a sub directory, and that's what you'd put here if it is set up that way.

You will definitely need to know the login (or user name) and password. If you are on a fairly protected machine, you can check the "Save" box next to the Password box. If your web development machine is in a public space, however, I'd leave it unchecked. It's a pain to have to remember it every time, but less than the pain of having someone log in and change the web site without authorization.

In some rare instances, you may need to check "Use passive FTP" but you can usually leave it unchecked.

If you are behind a firewall (a computer firewall, that is, not a brick one), ask your systems administrator for help in putting in the firewall settings.

You will also not be using Secure FTP unless you have a specialized need for it.

Leave "Maintain synchronization information" checked.

Leave UNchecked "Automatically upload files to server on save". You want to be in control of when your files are uploaded or downloaded.

Leave UNchecked "Enable file check in and check out." That is for use when a web site is updated in a highly collaborative environment, that is, when you have more than two people, let's say, working on the web site. For regular use, it just adds unnecessary overhead.

Click OK now, and you're done with site setup!

This podcast was recorded on January 27, 2007.