TechNote (Archived)

Use the Site Window to develop site structure

Create a directory structure for site files

Organizing files is a key component of Web site construction. Files may be stored in separate subfolders, organized by subject or file type, or by section of the Web site. Devising a method for storing files categorically allows for quick retrieval when an individual file needs revisions. The actual structure and names of files is at the discretion of the developer, but it is important that a strategy is employed to facilitate efficiency.

Getting started

The first step to creating a structure is to define a site. Please see How to define a site in Dreamweaver (TechNote 14028)

Creating a site structure

For information on setting up a site directory, please see Building a folder structure (TechNote 14029)

Storyboard the flow of information using the Site Window

The Site Window in Dreamweaver 2.0 has many features that can help build the series of folders that will hold the site elements. Files and folders can be opened, created, deleted and uploaded to a remote server. Once the site has been defined, the local root folder has been established and the foundation of subfolders can be created. The subfolders can also be viewed as an outline, by choosing the Site Map Layout. The Site Map can be saved and printed out for approval, and it might even be incorporated into the site itself, to clarify navigation. Naming the subfolders and planning a directory structure before generating files reduces the chances of having to relocate files after they have been linked.

Design the site structure by building a series of subfolders:

Choose Window > Site Files (or press F5). The Site Window appears.
By default, the right side of the window contains the local files. The local root folder is the top level. To create new folders or files, right-click (Windows) or Control-click (Macintosh) in the local root folder area of the site window to access the contextual menu.
Select the New Folder option to create a new subfolder. Type in the highlighted area to name the folder. Using this method, create subsets of folders to hold different types of Web files. Select New File to create new, blank files. Type in the highlighted area to name the files.
The context menu also allows folders and files to be deleted or renamed, if necessary. To edit a specific file in the Document Window, choose Open or double-click on a file. To view a file locally, choose Preview in Browser from the menu.
Once the series of folders and files have been named, the resulting structure can be viewed in the site map layout mode. In order to see the files, an index page must be created and the file must be identified to Dreamweaver. Select Define Sites from the pop-up menu next to the connect button.
In the Define Sites dialog box, highlight the site and select Edit. The Site Definition dialog box appears. Choose the last category, Site Map Layout. The dialog box provides the option of selecting a home page. Click the file folder icon to the right of the Home Page field, to browse for the home page.
Navigate to locate the home page inside the local root folder. This is often a file called index.htm. Highlight the file and choose Open to select it. Choose OK to close the Site Definition window, then Done to close the Define Sites dialog box.
The Site Map button is the second button from the left, in the upper portion of the Site Window. When selected, it displays the site map on the left side of the window, with the home page on top. Any files that are linked to the home page will be displayed beneath, with lines to indicate the links.
The Site Map also provides the ability to add new files or link to existing ones. Right-click (Windows) or Control-click (Macintosh) on a file to access the context menu.
Create new files by selecting Link to New File. In the Link to New File dialog box, enter the File Name, Title of page and Text of Link information. It is important to save each HTML file before attempting to link the page to other existing files. When linking pages in the site window, the file name of the page being linked to will appear on the page that is being linked from, with a link automatically applied to the file name.
To save the site map as an image file, do the following:

On Windows, select File > Save Site Map As. The dialog box appears, providing the option to save the Site Map as a PNG or BMP.

On Macintosh, select Site > Site Map View > Save Site Map as PICT. This menu is accessed in the main document area, not in the Site window. Select the folder to save the PICT, and give the file a name.

Note: If the Site Map is to be incorporated into a Web page as a navigation tool, the file must be exported as a GIF or JPG in an image editing program before inserting it into an HTML file.