Set Up Dreamweaver

We'll use Dreamweaver in this course to create our HTML, CSS, and JavaScript files. You can use any text editor to create interactive web pages, but Dreamweaver has lots of features that can help us with our code projects. Before you open Dreamweaver, you'll need to create a main folder for all the projects you build in this course.

Create Your Main Folder

Create that main folder on your computer in a place that makes sense for you. Generally for projects that last a semester or more, you'll create your folder on your hard drive's Documents or My Documents folder. On a Mac, the file path to your Documents folder is something like this: Macintosh HD:/Users/YourName/Documents. On a PC, the file path to your My Documents folder looks something like this: Local Disk C:/Users/YourName/MyDocuments. (YourName is your account name; for example, my account name is gthomas.) We'll discuss file paths a little later in this week's technical topics.

Once you've found the place to create your folder, make a folder by pressing Shift + Cmd + N on a Mac or Shift + Ctrl + N on a PC. Give your folder a descriptive name—I called my folder interactive-basics. You'll save all your work for the class in this folder.

Add Subfolders

Help keep your files organized by creating subfolders inside your main folder. Always create a subfolder for each exercise, assignment, or project you develop. (You'll soon be trying out an exercise called Hello World, so you could start by adding a hello-world subfolder to your interactive-basics main folder.) Inside each subfolder, I recommend making at least three sub-subfolders for images, cascading style sheets, and javascript files. I've named my sub-subfolders: img, css, and js. (Some of the early exercises won't have CSS files or graphics, but it doesn't hurt to get in the habit of creating those three folders—img, css, js—inside each exercise, assignment, and project subfolder.

Set Up Your Site

When you open Dreamweaver, the first thing to do is set up your site. Select Site>New Site from the top menu and give your site a name. I called my site, Interactive Basics.

Next, direct Dreamweaver to the location of your main folder—under Local Site Folder click on the folder icon and navigate to your main folder. The file path to my main folder is /Users/gthomas/Documents/interactive-basics.

Press Save. Now Dreamweaver knows where your main folder is located and can help you with your file paths as your create your web pages and scripts.

To see your folder and its subfolders, open Dreamweaver's File panel—go to the top menu and select Window>Files or press F8.

When you return to Dreamweaver on the same machine at a future date, Dreamweaver remembers where your site is located. Bring that site up by selecting Site>Manage Sites from the main top menu and select your site by name. With your site selected, you're ready to start coding.

Next up, learn about file naming conventions for the web.