How to define a site in Dreamweaver

In order for Macromedia Dreamweaver to keep track of links between web pages and dependent files, it is necessary to define a folder on the hard disk, or mapped drive, as the local root folder and to save all the files for the site in that folder. The local root folder should contain the web page files for the site as well as all images, cascading style sheet (CSS) files, templates, and other dependent files.

To better manage the site, you can create subfolders in which to put the above files. The Template and Library folders are created by Dreamweaver when a template or library file is created and saved. Dreamweaver creates the Templates and Library folders right under the local root folder, where they should remain for templates and library items to work properly. File and folder names should be one-word, lower-case, alphanumeric characters and should begin with a letter. The only special character that is permitted is the underscore (_).

After the site is defined, the pages for the site are created in Dreamweaver and saved inside the local root folder. Then the contents of that local root folder are uploaded to the web server. The local root folder and the folder on the server should have exactly the same folder structure. Dreamweaver automatically replicates the folder structure of the local root folder on the server when it uploads your files.

Do not create your local root folder in the Dreamweaver application folder because it contains the program files.

Note: A correctly defined site is essential in order for Templates and Library items to update pages when they are changed.

Preparing your site

All the files that make up the site should be contained in one local root folder. At this point you only need to point Dreamweaver to the folder and to the home page, the files do not need to be made yet. Identifying the local root folder and the home page will enable Dreamweaver’s site management features.

1. Create and name a folder on the hard drive that will contain all the site files and be the local root folder. Each site must have a separate local root folder.
2. Open a new or existing document and save it in the new local root folder as the home page. Servers often require that the home page be named index.htm or default.htm. This information can be obtained from your Internet Service Provider (ISP) or your server administrator.

   The home page can be a preexisting HTML file or a new Dreamweaver document. Later, content can be added or deleted. Creating the home page at this point enables Dreamweaver to build the Site Map during the site definition.

3. Dreamweaver provides the option of specifying the default images subfolder. For better organization, it is a common practice to keep assets, such as images, audio or media, in a subfolder for dependent files. If you work this way, create a subfolder for images now.
4. Gather any information you need to connect to the server that will house your final website.

   If you are designing dynamic web pages, make sure you also have connection information for the testing server.

5. Choose Site > New Site… to launch the Site Definition dialog box.

Using the Dreamweaver MX Site Definition dialog box

Dreamweaver MX provides a choice of two methods to define a site: the Basic Site Definition Wizard and the Advanced dialog boxes.

This TechNote navigates through the Advanced dialog mode to define the site. However, you will be able to follow in the Basic Site Definition Wizard if you prefer this method.

Click on the Basic tab to see the Basic Site Definition Wizard

• This method provides explanations of what kind of information belongs in the fields.
• Click through the Next buttons on the bottom of the dialog boxes to progress through the steps.

Click on the Advanced tab to see the Advanced Site Definition dialog box

• Use this method if you are familiar with the site definition process. These dialog boxes are similar to those in earlier versions of Dreamweaver.
• Choose from the Category list on the left side of the dialog box to set up different parts of the site definition.

Defining your site

As mentioned above, we will be using the Advanced Site Definition dialog box in Dreamweaver MX.

Note: If you are using earlier versions of Dreamweaver or Dreamweaver UltraDev you can skip the options that are not included in your version. Some categories and options may be renamed but are still recognizable. None have been dropped.

Local Info

This information identifies the site files in Dreamweaver and enables the site management features.

Note: Completion of this section is the minimum requirement for managing a site in Dreamweaver. The other options can be completed as information becomes available, and all settings can be edited at any time.

Note: To keep your links intact, rename or move files within the Dreamweaver Site Window.

1. Choose Local Info from the Category list.
2. Enter a name for your site in the Site Name field. The site name should not include any special characters but it may contain capitals and spaces.
3. Place the cursor in the Local Root Folder field, click the folder icon on the right, and browse to the folder that contains the site files. Click Select (Choose).

   Note: Browsing to the folder rather than typing the path name ensures a correct path.

4. (Optional) If you have a subfolder that you wish to identify as the default image location, choose a Default Images Folder field. Place the cursor in the Default Images Folder field, click the folder icon on the right, and browse to the folder that contains (or will contain) the site image files.
5. (Optional) Select both Refresh Local File List Automatically and Enable Cache to Speed Link Updates options. These settings are always recommended for your convenience, except when the site is extremely large.
6. (Optional) The HTTP Address field is only likely to be useful if you are using absolute paths to refer to local files within your site.

Remote Info

This information is necessary to upload the site files to the web server. Dreamweaver MX allows users to upload site files using several various methods. Since the most commonly used connection is FTP, the steps and options described for the Remote Info category will be specific to the FTP connection method. Contact your server or ISP administrator to learn which method to use for your site.

1. Choose Remote Info from the Category list.
2. Select the access method from the Access drop-down menu. The access method determines how the files are moved from the local folder to the Internet. For the purposes of this TechNote, choose FTP.
3. Click in the FTP Host field and type in the FTP address or IP address that calls the server. The server address is provided by the server administrator.

   Note: The specific information required to make an FTP (or other) connection is unique to each domain and must be obtained from the ISP or system administrator.

4. (Optional) If instructed to do so, click in the Host Directory field and type in the directory name. The Host Directory specifies the exact folder on the server where the files will go.

   Note: In most cases, a server is configured to automatically route the files to the correct directory by default, in which case the Host Directory field should remain blank.

5. Type your login or user name in the Login text field, and type in the password into the Password text field. Unless you are connecting from a shared computer, you will want to choose the Save option.

   Note: The FTP Host, Login and Password fields are required and confidential to you and the server administrator.

6. The check boxes on this screen are optional:

   To determine whether or not any of these options should be checked, consult with the system administrator.

• Check the Passive FTP check box if the server security requires the files to be transferred in passive mode.
• Check the Use Firewall check box if your computer is behind a Firewall. You will also need to enter the correct Firewall Host and Firewall Port in Dreamweaver’s Preferences dialog box (Edit > Preferences).
• Check the Use SSH box if you are using Secure Shell (SSH) software to provide secure authentication.
• Check the Automatically upload files box to transfer files to server each time the page is saved.
• The Check In/Out feature is useful for web sites developed by a team or an individual editing from various locations. Use of this feature will help avoid overwriting each other’s recent edits.

Note: The Test button, new to Dreamweaver MX, merely tests that the FTP host specified in the FTP Host text field can be accessed. It does not test the rest of the connection information.

Testing Server

When developing dynamic pages, you will need a private place to act like a public server to test the applications and connections to the database—a testing server.

Dynamic pages differ from static pages by raising the level of communication possible between a browser and the web server. Dynamic pages have the ability to change content as a result of interaction between the user in a browser and server-side scripts and a database on a web server.

A dynamic page gets information from a user, and the code written in the page interacts with an application (server-side scripts) on the server. The application connects with the database to collect, deliver and/or generate information which will be added to the database or provided to the page in the browser or both.

Note: The Testing Server section does not need to be completed for a static web site. Or, as the site develops, the Site Definition can be edited when this information has been determined.

The Basic Site Definition Wizard does not support different remote and testing servers. In such an environment use the Advanced site definition dialog.

1. Choose Testing Server from the Category list.
2. From the Server Model drop-down menu, select the programming language the application will be written in.

   If you are using the ColdFusion server model, use the drop-down menu to tell Dreamweaver MX whether the pages of your site were developed using Dreamweaver MX, using Dreamweaver UltraDev, or using a combination of both.

3. Choose the Access method. The method of access to the testing server is determined by where the testing server is located and the type of server it is.
• If you have already set up the Remote Info category, Dreamweaver MX automatically populates the Testing Server Access setting and the rest of the fields from the information already entered. You can change this as appropriate.
• Use the steps described in the Remote Info category to set up the FTP connection.
• Commonly, a development copy of the application server is installed on the web developer’s computer to help build and test pages from the same location. In this case, Local/Network would be the access method.
4. Assuming that you have a development application server installed on your local computer, type or browse to the address of the testing server.

   Note: For the example site, the local root folder and the testing folder are the same.

5. Type in the URL Prefix. This setting is critical if using the Live Preview feature with your dynamic pages. Type in the URL that would precede the file name if the file was viewed directly from the testing server environment.

   Note: If you are using a development server on your local computer, Dreamweaver MX recognizes it and automatically completes the last field.

Cloaking

New to Dreamweaver MX, cloaking allows you to specify file types or specific files that you do not want uploaded to the server. This will keep the source files like PNGs & DWTs with the local development files. This category is optional.

The cloaking feature works with the Put (blue up arrow) or Get (green down arrow) commands. Cloaking will not protect files when using the Synchronize feature.

1. Choose Cloaking from the Category list.
2. Choose the Enable Cloaking option.
3. To cloak files by file type, choose the Cloak Files Ending With option, and type the file extensions—preceded by a period and separated by a space—of the file types that you want to cloak from the server.
4. An alert box will pop up warning that this function works with the Get & Put features only, not with batch procedures such as Synchronization. Click OK.

Design Notes

Design Notes is a collaboration tool that keeps notes regarding the development of the page or site. Dreamweaver creates Design Notes to keep track of integration with Fireworks and Flash. Design Notes can also be created by the developers to communicate on subjects ranging from the status of the page to marketing tactics. This category is optional.

Note: Design Notes are accessible from the File menu with a document open or from the context menu (right-click on Windows or Ctrl + click on Macintosh) in the Site window. Files that have Design Notes associated with them will appear with a yellow talk balloon beside them in the site window. A folder called _notes is created in your local site, but this directory is not visible in your site window.

1. Choose Design Notes from the Category list.
2. Choose the Maintain Design Notes option.
3. If you wish to share Design Notes with the rest of your development team, choose the Upload Design Notes for Sharing option. This option must be chosen if you wish to use File View Column sharing (described below).

Site Map Layout

The Site Map Layout feature can be useful for understanding how your site files connect to one another. This category is optional. To take full advantage of Dreamweaver’s site map features, identify the home page in the site definition.

1. Choose Site Map Layout from the Category list.
2. Specify the location of the home page by clicking the folder icon next to the Home Page text field and browsing to the home page file in the local root folder. Select the file and click Open (Choose).

   Note: The home page should not be located in a sub folder.

3. The rest of the options are arbitrary, and the defaults may be used.
• The Number of Columns field sets the limit of links displayed in a single row of the site map.
• The Column Width field sets the pixel width of each column. (If it is too small you won’t see the full file names.)
• Note the difference between File name and the Title of your pages.
• The last two options—Display Files Marked as Hidden and Display Dependent Files—are self-explanatory.

File View Columns

This is another organizational tool. If you want to share the custom columns with other developers, then Design Notes must be enabled as well. This category is optional.

1. Choose File View Columns from the Category list.
2. The columns already in use by Dreamweaver appear in the grid. To reorder the columns, choose a column name and click the up or down arrow.
3. Choose the Enable Column Sharing option to modify anything but the order of preexisting columns. To add a column, click the plus button, then set the following settings:
• Type in the Column Name in the text field.
• Choose a design note setting from the Associate with Design Notes drop-down.
• Choose an Align setting for the column data.
• The last two options—Show and Share with All Users of This Site—are self-explanatory.

Click OK at any point in the Site Definition, and the site will be created with the settings you have already defined.

Once the site has been defined, the Site panel will change to show the newly-defined site. On a Macintosh, the Site Window will open as with earlier versions of Dreamweaver. You are now ready to build your web site.