Dreamweaver: Setting up a new Site

One thing that people new to web development, and more specifically - Dreamweaver, fail to do is to create and manage web sites using its built in web manager.

To get the most out of Macromedia's Dreamweaver, you really shouldn't just work with individual pages. Instead you should take the time to define a DreamWeaver Site so that all your files are kept together, and so that Dreamweaver can ensure that things like your internal site links are all working correctly. It also allows you to upload your site to your web server via its built in FTP system.

This tutorial covers the simple task of setting up a new site, and the basics of using the DreamWeaver FTP functions. The tutorial does not cover any web development concepts. Just how to setup a web site that can be managed and handled by Dreamweaver.

Creating a Site in DreamWeaver

Before you can create a site in dreamweaver, you must first create a directory on your hard-drive to hold all of the web sites files. This can be anywhere you like, even on a network drive or a removable media drive. As long is the location has read and write access, it will qualify as a valid place to hold your local copy of the web site.

Once you have done this, fire up Dreamweaver and click on the Site Menu and select the 'New Site...' option. You will be presented with the site creation window. In this window you can either run in wizard mode or advanced mode. Advanced mode is the best to use if you know what you are doing. I will go over setting up a new site from the Advanced view.

The Advanced tab of the site properties window contains a number of different sections that you can fill in to enabled various functionality in dreamweaver. I will cover the various sections below.

The Local Info Section

The first section - the 'Local Info' part, is where you define where your site is stored locally (on your computer or network). This is the most single important page on the window as without completing this you will not be able to setup a web site. This is the only tab that you are required to fill in to get a Dreamweaver site setup.

Complete the required fields by entering a name for the web site, selecting the folder you created to hold the site and also by specifying a default images folder within the parent folder so that you will have a place to hold any images you import.

You can also enter the URL of where your web site will be held online. This is only for Dreamweaver so that it can check all of your links in your pages are in the correct format and are all linked correctly.

Finally, you have the option of creating a cache. This setting is optional, but enabling the cache will mean you can work quicker when you have a lot of files in your site. Because Dreamweaver checks all your files and how they are linked whenever you delete a file or rename one etc, using the cache means that it can check links against its cache instead of scanning the entire site every time you need to perform one of the mentioned functions.

The Remote Info Section

The next section on the list is the 'Remote Info' pane. This is where you provide Dreamweaver with the information it needs to connect to your web server so that you can upload files to it and make them available on the Internet.

The first thing you must do is select the access method. More often than not, this will be FTP. I will not cover the other options here, just FTP.

To setup your FTP details, simply complete the required fields. You can hit the test button to check the connection, and once it is valid you are ready to go!

The Check in/out options at the bottom of the pane are provided for it there will be one or more people working with the files on your web site. When a file is checked in, it means that anyone can open and edit it. When they open a file, the file is checked out and Dreamweaver will not let anyone else open the file until it has been checked back in by the person editing it. This is an advanced feature that I will not cover in this tutorial.

The Testing Server Section

The third and last section of the Dreamweaver Web Site Configuration Window that I will cover in this tutorial, is the Testing Server section. If your web site uses a Server Scripting Language such as ASP of PHP, you will not be able to see the results of the server scripted pages unless they are called from a web server. Usually this means that you will have to upload the files to your web server before you can preview their output

However, if your computer is setup with its own web server, you can upload the files to the local web service running on your computer and use it as a testing server, before you upload the final versions to your live web server. This is an advanced feature and is configured the same way as the Remote Info Section.

Using your New Dreamweaver Site

Now that you have successfully setup your new Dreamweaver site, you can start using it. Back in the main Dreamweaver workspace, you should see a set of panels down the right hand side of the screen, (depending on the layout you chose when you installed Dreamweaver).

One of these panels will be titled 'Files', and this is where you can see what files are held in your web sites Local, Remote, and Testing server. (See screen shot below.)

The files pane consists of a number of features:

• The Server connection button
  Clicking on this button will connect you to either your Remote (Live) web server, or your testing server - which ever of the two you last selected from the View drop down list.

• The Refresh Site list button
  This button will refresh the files list and rebuild the site cache.
  
• The Get Selected Files Button
  This button will retrieve, (download), the selected files in the files list from either the Remote (Live) web server, or the testing server. Which ever you are connected to. The default is the Remote Server.
  
• The Put Selected Files Button
  Same as above, only this button will Put, (Upload), the selected files to either the Remote Server or your testing server, (whichever you are connected to).
  
• The Checkout Selected Files button
  If you enabled the Check In/Out feature for the selected web site, this feature will lock the selected files on the server so that no one can edit them until you check them back in. Checked out files appear in your file list with a green tick by their name.
  
• The Check in Selected Files button
  As above, except this option will upload the selected files and remove the locks so that people can access them for editing. Checked In Files appear with a Pad Lock icon to indicate they are currently open for editing.
  
• The FTP window Button
  This button will take you to a dual pane window, which contains the file list of your local site copy in the right pane, and the file list contents of either your remote server, or your testing server - which ever you are connected to. Here you can transfer files from one site to another by dragging them between the panes.
  
• The Web site Selection Drop down box
  When have setup more than one site, this drop down list will allow you to change between the web sites you are working on. The file list will change to show the files of the selected site.
  
• The Web Site View Box
  This drop down box lets you choose whether the file list (detailed below) is display the contents of either the Local Copy of the selected Site, The Remote Copy of the selected site, or the Test Copy of the selected site.
  
• The Current Web Site View Files List
  This lists the files of the selected site. Green folders indicate that you are looking at the files of the local copy of the selected web site. Yellow folders indicates that you are looking at the Remote (live) version of the web site, and red folders indicate that you are looking at the files on the testing server for the selected web site.

You know how enough information to start working with your new site! When you have a site selected, when you save files, make sure you save them within the defined web sites root folder.

For more information about using Dreamweaver to its fullest potential, You should look up the following, (especially if you are just starting out in web development)