Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Defining a Static Site in Dreamweaver

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

This folder contains several new files that are needed to complete this and later lessons. If you like, you can use your version of templat218 and all the GIF files you exported from Fireworks; alternatively, you can use the ones included in the Start folder. In either case, be sure all the new files and foldersmost of which you haven't yet seenare in your working directory.

When you launch Dreamweaver, you'll see the Start page, 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 of the program, go through the tutorial, or access Dreamweaver Exchange.

Tip

Neither Windows Explorer nor Macintosh Finder has 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.

You 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.

Note

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

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

[View full size image]

In this step, you're naming your site. This name can be anything you like, and will not affect the site in any way; it's 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 when, for example, eight months from now you need to update the site.

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 from what it is on your hard drive. But all 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 no matter where 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, but Dreamweaver will also make copies of the images that are not currently in the default image folder and save them in this folder to prevent broken image links when you upload your site to the hosting Web server.

You enter the information Dreamweaver needs to access the remote site in the Remote Info categorythat 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.

[View full size image]

You've 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.

After the file is created, you're returned to the Manage Sites dialog, with the new site highlighted.

When you click Done, you're 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.

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

The images folder is an old standby; most sites use this folder. You should place all your production GIFs and JPEGs there. In addition to the images folder, there's also a fireworks_source folder where you should put all the original Fireworks PNG files. It's helpful to put the source Fireworks PNG files in the local version of the site, because doing so enables certain features of FireworksDreamweaver 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're all in one place so they don't get accidentally uploaded. 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 t228, Flash, or whatever format is appropriate. In this book, the folder contains the text for pages you'll be creating.

The css folder is used for the site's style sheet(s). In large sites, you might have many style sheetsif you have different sections or themes, for exampleand 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, and so on. All files of one type are stored in one folder. You will not find GIFs anywhere but the images folder, for example. Sticking to this scheme saves production time as you develop the site, and, perhaps more importantly, it vastly simplifies long-term site maintenance, a need often neglected in the early design stage.