This tutorial introduces you to the concept of an Adobe Dreamweaver CS4 site and shows you how to set up the project files for the Check Magazine sample website. In Dreamweaver, a site generally consists of two parts: a collection of files on a local computer (the local site) and a location on a remote web server to which you upload files when you're ready to make them publicly available (the remote site). You use the Dreamweaver Files panel to manage the files for your site.

The most common approach to creating a website with Dreamweaver is to create and edit pages on your local drive, and then upload copies of those pages to a remote web server for viewing on the web. In this tutorial, you'll learn how to set up only the local site so you can begin building web pages right away. Later, after you've completed the website, you'll learn how to create a remote site so that you can upload your files to a web server.

In this tutorial, you will complete the following tasks:

• Learn about Dreamweaver sites
• Set up your project files
• Define a local folder

Requirements

In order to make the most of this tutorial, you need the following software and files:

Dreamweaver CS4

• Try
• Buy

Sample files:

• check_magazine.zip (ZIP, 480K)

Prerequisite knowledge

This tutorial requires no previous knowledge of Dreamweaver. However, familiarity with web design concepts such as HTML and CSS will be helpful. The tutorials in this series are designed to be completed in order.

Learn about Dreamweaver sites

In Dreamweaver, the term site can refer either to a website or a local storage location for the documents that belong to a website. The latter is what you need to establish before you begin building your website. A Dreamweaver site organizes all the documents associated with your website and lets you track and maintain links, manage files, share files, and transfer your site files to a web server. Think of your Dreamweaver site as the "bucket" that contains all of the files and assets for your website.

A typical Dreamweaver site has three parts, depending on your computing environment and the type of website you are developing:

• Local folder is your working directory. Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard drive.
• Remote folder is where you store your files for testing, production, collaboration, and publication purposes, depending on your environment. Dreamweaver refers to this folder as your remote site. The remote folder is a folder on the computer that's running your web server. The computer running the web server is often (but not always) the computer that makes your site publicly available on the web.
• Folder for dynamic pages (Testing Server folder) is the folder where Dreamweaver processes dynamic pages. This folder is often the same folder as the remote folder. You do not need to worry about this folder unless you are developing a web application. For more information about the Testing Server folder, see Set up a testing server in Dreamweaver Help.

When setting up a Dreamweaver site you have two options:

• Use the Site Definition Wizard, which guides you through the setup process.
• Use the Site Definition Advanced settings, which let you set up local, remote, and testing folders individually, as necessary.

In this tutorial you'll use the Site Definition Advanced settings to set up a local folder for your project files. In a later tutorial, you'll learn how to set up a remote folder so that you can publish your pages to a web server and make them publicly available.

For more information about Dreamweaver sites in general, see Setting up a Dreamweaver site in Dreamweaver Help.

Set up your project files

When you create a local site, you can place any existing assets (images or other pieces of content) in the local site's root folder (the main folder for the site). That way when you add content to your pages, the assets are there and ready for you to use.

The sample files included in the download ZIP file contain assets for the sample website you'll build using this tutorial series. The first step in creating the site is to copy the sample files to an appropriate folder on your hard drive:

1. Create a new folder called local_sites on your hard drive. The folder can be anywhere on your computer. For example:

   • (Windows) C:\local_sites (This is where I like to keep mine. The less buried it is the easier it is to find later.)
   • (Mac OS X) Macintosh HD/Users/your_user_name/local_sites

   Note: Mac OS X includes a Sites folder in your user folder. Don't use this folder as your local folder; the Sites folder is where you place your pages to make them publicly accessible when you're using your Mac as a web server.

2. Download and unzip the check_magazine.zip sample files if you haven't done so already.
3. Copy the check_magazine folder into the local_sites folder.

The check_magazine folder is the folder you will use as the root folder (main folder) for your Dreamweaver site.

Note: The local root folder of your Dreamweaver site is often the main or top-level folder for your website. It usually corresponds to an identical folder on the remote site (web server). The root folder also defines the first part of your website's URL following the domain name. For example, if your local root folder is called mywebsite and you have an identical root folder defined on the remote site, the URL for your website would be something like http://www.yahoo.com/mywebsite.

In some cases, the local root folder may not have an exact name equivalent on the remote site. For example, if you own the domain name www.mywebsite.com, with a remote root directory of public_html, your local root folder could still be called mywebsite. The files in both the local and remote root directories would be identical; only the folder names (public_html on the remote site and mywebsite on the local computer) would be different.

Define a local folder

You must define a Dreamweaver local folder for each new website you create. The local folder is the folder that you use to store working copies of site files on your hard drive. If you don't define a local folder, certain features in Dreamweaver cannot work properly.

Defining a local folder also allows you to manage your files and to transfer files to and from your web server by using a number of file-transfer methods.

Next, define the check_magazine folder you copied into the local_sites folder as your local folder:

1. Start Dreamweaver and select Site > Manage Sites. The Manage Sites dialog box appears.
2. Click the New button and select Site. The Site Definition dialog box appears.
3. If the wizard (Basic tab) appears, click the Advanced tab and select Local Info from the Category list (it should be the default).
4. In the Site Name text box, enter Check Magazine as the name of the site.
5. In the Local Root Folder text box, specify the check_magazine folder that you copied to the local_sites folder in the previous section. You can click the folder icon to browse to and select the folder, or enter a path in the Local Root Folder text box.

6. In the Default Images Folder text box, specify the images folder that already exists in the check_magazine folder. You can click the folder icon to browse to and select the folder, or enter a path in the Default Images Folder text box.

   The Site Definition dialog box should now look like Figure 1.

   

   Figure 1. The Site Definition dialog box at this point.

   Note: The file paths might differ, depending on where you created the local_sites folder on your hard drive.

7. Click OK. The Manage Sites dialog box appears, showing your new site.
8. Click Done to close the Manage Sites dialog box.

The Files panel in Dreamweaver now shows the new local root folder for your current site (see Figure 2). The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a desktop.

Figure 2. List of files in the Files panel.

For more information about how the Files panel works, see Work with files in the Files panel in Dreamweaver Help.

You've now defined a local root folder for your site. The local root folder is the place on your local computer where you keep the working copies of your web pages. Later, if you want to publish your pages and make them publicly available, you'll need to define a remote folder—a place on a remote computer, running a web server that will hold published copies of your local files.

Where to go from here

Now that you have finished defining your site, you can begin building your web pages by following Part 2 in this series, Creating the page layout.

Note: You can follow the rest of the tutorials in this series to create the Check Magazine sample site, or you can work on your own web pages. When you're finished creating and editing pages, proceed to defining a remote folder on a server and publishing your pages. For more information, see Creating your first website – Part 6: Publishing your site.

Creating your first website with Dreameaver CS4

For your reference, here are all the parts in this series:

Part 1: Setting up your site and project files
Part 2: Creating the page layout
Part 3: Adding content to pages
Part 4: Adding the main image text
Part 5: Adding the Spry menu
Part 6: Publishing your site

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

About the author