To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Installation and Site Definition

This section will provide you with step-by-step instructions for unpacking and archiving your new DesignPack™ and also creating your new site in Dreamweaver.

1. Archiving Your DesignPack™

We strongly suggest that you follow these guidelines to create a permanent "Archive" copy of your Designpack™. This will allow you always have a "unaltered" version of the pack to use as a reference or backup.

Create a directory named "Studio7" to store this and any other DesignPacks™ you have acquired.

Unzip the StudioDP_Jazz.zip file into this directory. The folders and files should look like this:

Keep this as an archive only. Never make any changes to the files in this folder. To build your actual site, you will copy and paste files from this archive.

 

2. Define Your New Site

Now we'll create a new working site in Dreamweaver. This site is the one you will be making modifications to and eventually publishing.

Create a new directory on your hard drive and give it a meaningful name . For this example we will use the name "MyNewSite" and we will create a new directory: C:\MyNewSite.

Navigate to the StudioDP_Jazz archive folder you created earlier and Copy (select all) files and folders in that directory. Do not copy the parent folder, just copy the folder's contents.

Paste the contents of the StudioDP_Jazz folder into the new site directory you created in step 1. Your new site folder should look like this:

Open Dreamweaver

Open the Site Manager window if it is not already open.

Choose Site>New Site... on the Site manager menu.

Enter a meaningful name for your site in the Site Name box, we have used MyNewSite for this example.

Click the folder icon to Browse to the directory you created in Step 1 and click Select. We have used C:\MyNewSite for this example.

Click OK to create the new site.

Also click OK if Dreamweaver asks you to create initial site cache.

Your new site is now set up and ready for use. The Site Manager window should look similar to this:

To view the site, double-click index.htm to open the page. Familiarize yourself with the layout but make no changes yet.

Press F12 to preview the page in your default browser. Go ahead and test all of the functionality on the page and check all of the links to be sure that each page of the site loads correctly.

Now is the time to familiarize yourself with the general organizational layout of the site, as well as all of the various special features. Preview each page and become familiar with the overall design concept, the styles being used and the various dynamic features of the site.

3. Before You Begin To Make Changes

The Jazz Designpack™ is driven by CSS Style Sheets and specialized JavaScripts to obtain the functionality of the site. Therefore, edits and modifications MUST be made using the techniques we outline in the remaining chapters of this User Guide.

DO NOT ATTEMPT TO MODIFY THIS SITE without first reading the Site Modifications sections of the User Guide.

The Jazz DesignPack™ utilizes some groundbreaking techniques to manage and modify the site content and appearance. We suggest that you approach any modifications by first reviewing, and working with, the following sections:

  1. CSS in Jazz -will familiarize you with the style sheets used in this DesignPack™ and show you how to build your own styles from the ground up.
  2. Site Modifications -will walk you through the step-by-step process of making all of the various menu modifications, including a unique approach to managing the images.
  3. Site Themes -will show you how easily this site can be radically changed with just a few simple steps.

Things Not to Do

  • Don't dive right in and attempt to make changes to the site. You may fix something that was not broken.
  • Don't make any text edits using the Property Inspector. This site is totally CSS driven and in-line font tags will have undesirable effects.
  • Don't make any changes to the Style Sheets without first reading the CSS Style Sheet section.