Defining a Site in Dreamweaver

The following tutorial will explain why you must define a site in Dreamweaver before using PluginLab extensions and how to do it correctly.

 

1. "Please define a site first" message

If you install a PluginLab Extension and open it in Dreamweaver, you may see a message like this:

This will only occur if you do not have a site defined in Dreamweaver.

 

2. Have you defined a site?

Check to see if you have defined a site:

In Dreamweaver MX 2004 or Dreamweaver 8, go to Site > Manage Sites:

If there are no sites listed in the Manage Sites dialog box, you need to define a site before you can use your PluginLab extension.

Why? PluginLab Extensions save a JavaScript file in a location relative to your Site Root folder. Without a Site Root folder defined it doesn't know where to save it.

 

3. How to define a site

You can set up a Dreamweaver site in two different ways:

a) In Dreamweaver MX 2004 or Dreamweaver 8, go to Site > Manage Sites... > New... > Site
The Site Definition dialog box appears.

b) Do one of the following:

  • Click the Basic tab to use the Site Definition Wizard which leads you through setup steps;
  • Or, experienced Dreamweaver users might prefer to use the Advanced settings tab.

You can set up a Dreamweaver site completely or you can just start with the first step, setting up your local folder. Read more about Defining a Site in Dreamweaver Help Files: (MX 2004 or 8) Help > Using Dreamweaver > Contents > Dreamweaver Basics > Setting Up a Dreamweaver Site > Setting up a new Dreamweaver site.

 

4. Site Definition Settings

We recommend the following Site Definition settings to use with PluginLab extensions:

  • Quick & Easy Local Directory Setup
  • The Best Local Directory Setup
  • Testing Server Setup

4.1. Quick & Easy Local Directory Setup

For those not using a local web testing server, such as IIS, here is a quick and easy way to define your site and get going. Its minor limitation is the setup uses only document-relative links. For information about site root-relative and document-relative links, see Dreamweaver help files: Help > Using Dreamweaver > Adding Content to Pages > Linking and Navigation > Understanding document locations and paths.

Defining a new site with Dreamweaver Site Definition Wizard (the Basic tab, Site Definition)

  1. Editing Files:
    You have to name the site first. Then define the URL of your site, and click Next.
  2. Editing Files, Part 2:
    Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?
    Select - No, I do not want to use a server technology, and click Next.
  3. Editing Files, Part 3:
    How do you want to work with your files during development?
    Select - Edit local copies on my machine, then upload to server when ready (recommended).
    Where on your computer do you want to store your files?
    Enter the path to your Site Root folder (For example, C:\Intetpub\My Site), and click Next.
  4. How do you connect to your remote server?
    Select - None, and click Next.
  5. You should see a summary like the following one. Click Done.

You may always review and change these settings later.

Setting Path to Image or URL in Extension
Select Relative to Document.

Preview in Browser Setting
Edit > Preferences > Preview in Browser:

Check the box for Preview Using Temporary File. F12 to preview in browser; should see path to temporary file such as: C:\mysite\TMPj5vh9zimlu.html in browser address bar.

4.2. The Best Local Directory Setup

If you prefer to work in Dreamweaver using a local directory, as opposed to a local testing server, the best setup is to use a directory mapped as a drive for the Site Root.

Setting Up a Directory Mapped as a Drive

To map a local directory as a drive and define the site, do the following steps:

  1. Create a directory on your local drive, for example, C:\mySite\Tutorial.
  2. Go to Start > Run... and use the "subst" command to map the local path (above) to a virtual drive letter you specify. Here we will use P:\ as the virtual drive letter. At the command line enter, for example, subst P: C:\mySite\Tutorial
  3. In Dreamweaver, define your site and set the Local Root Folder to the virtual drive letter specified in Step b, for example, Site Root = P:\. See the site definition settings below.

Defining a new site with Dreamweaver Site Definition Wizard (the Advanced tab, Site Definition)

  1. Local Info: You have to name your site first. Then define your local Root folder as P:\. Refresh Remote File List Automatically = checked. And skip the rest.
  2. Remote info: Access should be selected as None.
  3. Testing Server: Select: Server model - None; Access - None.

You may skip the rest of the settings and review or change them later.

Click OK when finished.

Setting Path to Image or URL in Extension
Either Relative to Document or Relative to Site is OK.

Preview in Browser Setting
Edit > Preferences > Preview in Browser: Either Check or Uncheck the box for Preview Using Temporary File are OK. F12 to preview in browser, should see path such as: P:\mySite\filename.html in browser address bar.

Mapping Note:

Mapping a directory using the subst command will only last until you reboot or log off. To make the subst run automatically on startup, you may perform one of the following:

Methods to Run Subst Command Automatically on Startup

a) Create a batch command file in the Startup group:

  • Start > All Programs > Accessories > Notepad.
  • Type or paste in your subst command, "subst P: C:\mySite\Tutorial"
  • Save file as .bat into the startup directory, i.e., C:\Documents and Settings\username\Start Menu\Programs\Startup\MyMap.bat

This will add an entry in Start > All Programs > Startup group.

To remove the batch command, simply delete the .bat file created above.

b) Add command to the Registry:

  • Start > Run..., at the command prompt type "regedit" and click OK.
  • Open: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run key
  • Right-click on "Run", select New > String Value.
  • Name it as you like (i.e., MyMapping).
  • Right-click the name, select Modify, type or paste in "subst P: C:\mySite\Tutorial" into the Value Data field.

To remove the registry command, simply delete the String Value created above.

Note: Even advanced users should be aware that if you use Registry Editor incorrectly, you can cause serious problems that may require you to reinstall your operating system. Microsoft recommends that before you edit the registry, back it up and understand how to restore it if a problem occurs. You may read more from the Microsoft Knowledge Base article, How to Back Up, Edit, and Restore the Registry in Windows XP.

4.3. Testing Server Setup

For those using a local web testing server, such as IIS:

PluginLab extensions use root-relative paths, therefore you need to correctly identify the testing server folder. In the Site Definition Dialog, the "Testing Server Folder" field should contain the path of your testing server folder and nothing else.

Testing Server with Dreamweaver Site Definition Wizard (the Advanced tab, Site Definition)

  1. Local Info: You have to name your site first. Then you need to define local root folder: C:\Inetpub\wwwroot
  2. Remote info: Should be selected as None.
  3. Testing Server: Select:
  • Server model: None;
  • Access: Local/Network;
  • Testing Server Folder:
  • C:\Inetpub\wwwroot; Refresh Remote File List
  • Automatically = checked; URL prefix: http://localhost/.

You may skip the rest of the settings and review or change them later.

Click OK when finished.

Notes for using extensions with this setup:

Setting Path to Image or URL in Extension
Select Relative to Site.

Preview in Browser Setting
Edit > Preferences > Preview in Browser:
Uncheck the box for Preview Using Temporary File.

F12 to preview in browser, should see path such as: http://localhost/filename.html in browser address bar.

Web Server FAQs:

What is a web server?
A web server is software that serves files in response to requests from web browsers. It is sometimes called an HTTP server.

Do I have a web server installed?
A web server may already be installed. Check your folder structure to see if it contains the 'C:\Inetpub or D:\Inetpub' folder. PWS and IIS create this folder during installation. If you see the Inetpub directory, you have a web server installed.

How do I install a web server?
Windows users can get a web server up and running quickly on their local computer by installing either PWS or IIS. If you want to install PWS or IIS, follow the instructions in Dreamweaver Help files by going to: Help > Getting Started and Tutorials > Installing a Web Server.