Getting Ready

A basic web site is a collection of files living under a single folder, including HTML pages, images, audio files, movies, Flash documents, and possibly others. This folder is called the "document root." It's very important to  place  all web-ready  files into the document root before attempting to make them part  of your web pages. It's also important to make sure  that the document root contains only the files that actually comprise  the web site, and nothing more (extra/unused files are called "orphans" and do nothing but take up disk space and make things more cluttered  than they need to be).

Good housekeeping is essential, and needs to be considered before you even begin working on a web site. We strongly recommend creating a folder structure something like this:

sitename
     site
    source

So for a site called Mixed Nuts, you might have a folder structure that looks like this:

The source folder is where you'll put the raw materials you're working with - uncompressed audio or video, Photoshop files etc. It's also a good idea to keep these materials organized in separate subfolders, such as images, video or audio.This material will not be uploaded to your web server, but it's convenient to keep it close by and all under one roof. Good housekeeping is essential to a successful Web project.

The site folder is where you'll keep your final HTMLpages, compressed video, and so on that will go onto the Web server. Only files that you want on the public to see on the Web sever will be in this folder. Into the site folder  go all of the files  that actually make up your web site, and nothing more. All media files under "site" should be compressed and sized appropriately.

You may want to create subfolders inside of the site folder named for sections of your site. For example, you may want to have separate folders for products, services, and brochures. In some cases, you may want separate folders for different types of media, such as images, video or audio.

You'll need to  know what  filetypes  are acceptable for  use on the web. Here's a handy cheat  sheet to cover  most cases:

Source	Site
.doc .tiff .psd .wav .fla uncompressed media	.html .jpg .gif .png .mov .swf .pdf .mp3

Sticking to this system will have a big payoff  down the road. All of the bits and pieces  will be  easier to find, and your site won't swell in size or complexity as time goes on.

When working for  the web, there are some folder  and filenaming conventions that will make  sure you have clean URLs and that sites don't break when moved  from one web server to another. These are not hard and fast rules, but you'll probably avoid some grief down the road  if you  remember these three  rules  when naming files and folders that comprise your site:

• All files must  have an appropriate  3- or 4-letter extension (e.g. .jpg  or .html)
• All filenames should  be in lowercase
• Do not use spaces or  special characters in filenames. Use  a hyphen or  an underscore  in place of spaces.

Getting Started 

Once your basic folder  layout has  been created, launch Dreamweaver.

What you see on your screen as you create a Web page in Dreamweaver also will be very close to what the page will look like when viewed in a Web browser, making the design of your page more intuitive.

When you open the Dreamweaver program, you should see a screen that looks something like this:

The layout may appear somewhat different depending on whether you're using Windows, Mac OS 9, or Mac OS X. The screenshots here show Mac OS X, but the principles and functionality remain constant across platforms.

If you don’t see the Properties panel (shown above at the bottom), in the Dreamweaver menu at the top select Window...Properties. You also can deselect any other toolbars or palettes that are checked in the Window menu to remove them from your screen, thus reducing clutter. Alternatively, select Window...Hide Panels to get rid of all the toolbars and other panels.

The main section of the screen is a blank canvas on which you create your Web page by typing in text, applying formatting, and laying out page designs.

The Properties panel is used to automate the process of formatting and aligning text and adding hyperlinks.

Managing Websites

Dreamweaver helps you do more than just create and edit Web pages -- it also vastly simplifies the process of managing web sites. For example, if you ever rename a page or folder on your site, Dreamweaver will automatically update links to that page or folder on all your other HTML pages so the links aren't broken. Dreamweaver also will help keep a site on your Web server in sync with a copy of that site you may have on your hard drive.

Dreamweaver includes tools to help keep files and links synchronized and working, but you do need to tell the program a bit about your setup.

In order to accomplish this, you need to tell Dreamweaver a few things about your site's configuration, a process called "defining" a site. This is the first thing you should do when starting work on a new site.

Defining a Site

Now that the skeleton of your site exists on your computer (or on a storage device like a Firewire drive), it's time to tell Dreamweaver about it - a process called defining a site. To do this, in the Dreamweaver menu at the top select Site...Manage Sites...

In the panel that appears, select New...

You'll now see a panel with two tabs at the top, labeled Basic and Advanced. The Basic tab offers a wizard that will take you through the process of setting up a site. The Advanced mode assumes you can enter information into fields without being prompted.

The Advanced mode isn't really any harder to use, and it's a lot faster to fill out, so click on the Advanced tab.

Give your site an intuitive name that will help distinguish it from other sites you may have defined on the same computer. For example, you might call this site Mixed Nuts.

Next, click the folder icon to the right of the Local Root Folder field and navigate to and select the site root you set up earlier, which in our example is:

Desktop:Mixed Nuts:site

The Default Images Folder is where Dreamweaver will first look for images to be included in your site. If you haven't already, create an images subfolder inside of the site folder, then use this dialog to navigate to and select that folder.

The HTTP Address is where the final site will live on your server on the Internet. Paste or type in the full address, if you know what it is. If not, leave it blank for now.

Next, select the Remote Info entry in the list at the left.

This is where you tell Dreamweaver how to transfer finished Web pages from your computer to your Web server. You'll either be accessing the remote files via File Transfer Protocol (FTP), such as if you're working from home, or over a network (LAN), such as if you're working on a network connected to the Web server.

If you don't know this information already, ask your systems administrator. If you're working with a commercial ISP, you should find documentation on their Web site about how to access their FTP server. The information needed is quite minimal: server name, login or user name, password, and an optional "host" or starting directory.

(You also can leave these entries blank for now, build your Web site on your computer and then fill in the Remote Info fields later when you're ready to upload your site to the live Web server)

Although the advanced tab of the Define Sites panel has many more options, this is enough information to get started with Web page creation.

Opening a Site

Now that your site has been defined, you can return to it at any time to work on it by selecting it in Dreamweaver. To do this, in the Files panel to the right, click just below the word Files and select your site from the list (if you don't see the Files panel, in the menu at the top click on Window and check the Files entry).

And if you've created and defined multiple sites on you computer, you can easily toggle between them by selecting them in the list in the Files panel.

(Note: if you're going to be working on your site using more than one computer, such as in a lab with shared computer workstations, you'll have to go through this process of defning your site on each individual computer you use)