• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Preparing a New Site > Define a Static Site in Dreamweaver

Define a Static Site in Dreamweaver

In this task, you will define the site in Dreamweaver's Site Manager. Now that the page design has been exported out of Fireworks, you need to reconstruct the full design (remember, the sliced file that you exported was simplified somewhat) and start building individual pages for the Jade Valley Web site.

Copy all the files in the Lesson04/Start/jade_valley folder to your desktop. Allow your files to be overwritten to use ours, or disallow to use your own.

This version of the folder contains several new files that are needed to complete this and later lessons. If you like, you can use your version of template.html and all the GIF files that you exported from Fireworks, or you can use the ones included in the folder. In either case, be sure all the new files and folders, most of which you haven't yet seen, are in your working directory.

Open Dreamweaver. From the main menu, click Site > Manage Sites.

Dreamweaver's Start page awaits you when you first launch Dreamweaver, which enables you to easily and quickly open a recent document, create a new document, or create a document from sample pages. In addition, you can also take a quick tour about the program, go through the tutorial, or access Dreamweaver Exchange.

Choosing Manage Sites brings up the Manage Sites dialog, which lists all the currently defined sites as well as a series of options. If this is your first time in Dreamweaver, no sites are listed.

When you define a site, Dreamweaver remembers the site's root folder (the folder that contains all of the files within the site) and defines every asset within the site (including the assets nested in folders) relative to the root folder. Defining a site is critical, because it activates Dreamweaver's site management features.

As with Windows Explorer or Macintosh Finder, you can create, move, and delete files in Dreamweaver's Site Manager. Unlike Windows Explorer or Macintosh Finder, Dreamweaver helps ensure that if you move files around, links in other documents are updated accordingly. Another nice feature of the Site Manager is that you can use it to check for broken links sitewide.

As a custom tool for the management of complex Web sites, the Site Manager is a powerful ally in site development. Dreamweaver makes it comparatively hard to work on individual HTML files without defining sites, and you should always define a site before you start working on a file.


Neither Windows Explorer nor Macintosh Finder have features to maintain the integrity of links within a site, so you should never use them to move, rename, or delete files from within a Dreamweaver site. Always move, rename, or delete files from within Dreamweaver.

Click New in the Manage Site dialog and select Site from the drop-down.

Use this dialog to manage whole sites—as opposed to files within sites, which you do with the Site Manager. From this dialog, you can create new sites, or edit, duplicate, or remove existing sites.


Removing sites does not actually affect the actual site files on your hard drive; it just means that Dreamweaver no longer tracks them as a site.

Click to select the Advanced tab in the Site Definition dialog.

The default Basic tab is a little more wizard-like, but you have more options by using the Advanced tab.

In the Local Info category of the Site Definition dialog, name the site jade_valley. Beside the Local root folder field, click the folder button to browse to the jade_valley folder. Navigate to the image subfolder in the jade_valley folder and select it as the Default image folder. Leave the remaining options at their defaults.

In this step, you are naming your site. This name is arbitrary, and will not affect the site in any way; it is used by Dreamweaver to identify and track your site. However, try to give the site a meaningful name, so that you know what it is eight months from now when you need to update the site, for example.

The root folder is an important concept. All site files are located inside this folder (possibly in subfolders) and are defined in relation to this folder. This relative addressing is important, because when the site is uploaded to a Web server, the location of the folder in relation to the server is likely to be different than it is on your hard drive. But all of the files inside the root folder will be in the same place in the folder as they are in the folder on your hard drive, which means that wherever you copy this folder on any workstation or server, the links will always work.

Designating a default image folder is also important when you first set up your site in Dreamweaver. By so doing, not only are the files and assets of your site better organized based on their nature and functions, Dreamweaver will also make copies of the images that are not currently in the default image folder and save them in the default image folder to prevent broken image links when you upload your site to the hosting Web server.

In the left pane of the Category list, click the Remote Info category.

You enter the information Dreamweaver needs to access the remote site in the Remote Info category, that is, the actual Web server where this site will be published. You choose an access method, including network, FTP, SFTP, and so on, in the Access drop-down menu. This information, which your server administrator or Internet host can give you, greatly facilitates uploading the files.

You will not be uploading the Jade Valley site, so you can leave this setting at the default None.

Click OK at the bottom of the Site Definition dialog.

You have defined the local root folder. By clicking the OK button, Dreamweaver creates a site cache for your site. In other words, Dreamweaver creates a file containing information about the names and locations of your files and folders, and also tracks the links within those files.

When it is finished, you are returned to the Manage Sites dialog, with the new site highlighted.

Click Done in the Manage Sites dialog.

After you click Done, you are sent back to the Start page, with your site visible in the Files panel. The Files panel should display by default, but if you don't see it, you can access it by choosing Window > Files.

Take a moment to look over the folder structure.

It is important when you begin a large project that your structure is flexible enough so the site can grow without becoming unmanageable. Often when creating new sites, you should create folders to hold different types of content; for the images, CSS, Flash, and more. When creating a site, build a comprehensive structure even if you don't initially have assets planned for all of them yet. For example, the flash folder is currently empty, but if later on you add a Flash movie, you have a place to put it.

The images folder is an old standby—most sites use this structure. You should place all of your production GIFs and JPEGs in this folder. In addition to the images folder, there is also a fireworks_source folder where you should put all of the original Fireworks PNG files. It is helpful to put the source Fireworks PNG files in the local version of the site, since doing so enables certain features of Fireworks-Dreamweaver integration. You should keep the Fireworks PNGs files in a separate folder from the production images (that is, not in the images folder), though, so that they are all in one place and so that you don't accidentally upload them. In the same vein, the text_files folder contains source scripts. These text files can be any content written in a word processor that needs to be converted to HTML, Flash, or whatever. In this book, the folder contains the text of pages you will be creating.

The css folder is used for the site's style sheet(s). In large sites, it is possible that you might have multiple style sheets—for example if you have different sections or themes—and keeping them all in one folder, simplifies organization.

What should be clear from this structure is that each folder contains a type of asset—image, HTML file, cascading style sheet, etc. All files of one type are stored in one folder. You will not find GIFs anywhere but the images folder. Sticking to this scheme saves production time as you develop the site, and perhaps more important, it vastly simplifies long-term site maintenance, a need often neglected in the early design stage.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint