As an Adobe Certified Dreamweaver Instructor (ACI) who has had the opportunity to teach Adobe Dreamweaver to thousands of students over the past decade, I am often asked the same questions. Not just how do I do this, but when and why. This blog post hopes to answer one of those common questions thoroughly. Of course, to find all the answers to all your questions, I encourage you to sign up for Dreamweaver Training - the only Dreamweaver training in the USA that includes a website and web hosting.

After you create a composite layout of your website in Photoshop (refer to this post for more information), the next step is to define a website with Adobe Dreamweaver. The purpose of defining a new site is tell Dreamweaver where your files are located. In particular you will set a local root folder which tells Dreamweaver where to locate the html, flash and images (jpg/gif) displayed on your web pages.

Steps to Define a New Website with Adobe Dreamweaver

1. Select the Site menu > New Site command;
   
2. In the Site Definition Dialog, switch from the Basic tab to the Advanced tab
   
3. In the Local Info Category type a Site name; This can be anything you want, and can include spaces/punctuation; If you develop multiple sites with identical names but different suffixes (i.e.: .com, .org., .net, .biz extensions) then it’s a good idea to include the suffix in the site name.
4. Next, select the Local Root Folder. The Local Root Folder is a folder on your computer’s hard-disk that will store the html files and images you will eventually post to the internet. To select the Local Root Folder, click the browse for folder icon. Then, create a new folder somewhere on your computer and click the Select button.
5. 
   
6. Although optional, best-practice is to also include a Default Images Folder that should be located inside the local root folder. The default images folder is often named images, and is used to help organize all graphic content into one location.
7. At this stage, don’t worry about the Links Relative To setting. This option becomes important when you begin to write scripts or work with dynamic database driven content. For now, leave this set to Relative To Document. When links are relative to document they would appear in this format:../contact/contactus.htmWhen links are relative to the Site root they would appear in this format:/contact/contactus.htm
   
8. Other options you should not be too concerned with at this stage:
   a) Case Sensitive Links: This is important if you host your website on a Unix server (Apache, Linux, BSD, etc) as Unix servers are case-sensitive. Windows servers are not case-sensitive. For example:contactus.htm
   ContactUs.htm

   

   eamweaver Training – Define a Site Links Relative

   is two unique files on a Unix operation system (Linux, Apache, CentOS, RedHat, etc), but one single file under a Windows operating system.

   b) The site cache: Best-practice is to leave the site cache enabled.

   The purpose of the site cache is keep track of files, images, and links; In theory, it should speed up the operation of switching from one site to another, although in practice it often slows your computer down. Dreamweaver features that utilize the site cache are the Assets Panel, the Check Links feature, and the Site Map; If you don’t enable the cache, Dreamweaver will recreate it each time you access one of these three features. Of the three features mentioned, check links probably is the most often used. This feature is utilized when you delete, move, or rename any file in your site.

9. When you want to publish your web pages you will need to utilize the Remote Info Category. The remote info category allows you to create an ftp connection to your web host. Change None to FTP. FTP is an acronym for File Transfer Protocol. FTP is used to pass files between computers in different locations.
   
10. FTP Host: YourSite.com (Note this varies by web host. Some hosts, like networksolutions.com use bizarre prefixes and codes to cloak the FTP username and password, which is not a secured file transfer).
    Host Directory: Can be either blank, www, htdocs, YourSite.com – depends on remote server configuration; This is the public folder that maps to your Local Root Folder from step 4.
    Login: The username your web host assigns to you.
    Password: The password your web host assigns to you.
    Use Passive FTP: If active FTP (best choice) fails to transfer your files, sometimes passive FTP will make the connection work; Passive FTP means that if the web server is busy, wait until it’s ready to receive your uploaded data.
    Use Firewall: Not recommended, the firewall will block incoming and outgoing traffic. FTP uses port 21 and you would have to program the firewall to leave port 21 open. Also, if you use Windows, I recommend you turn off the windows firewall (via the Start button > Control Panel > Windows Firewall).
    
11. Click the Test button to determine if you have correctly entered the ftp host, login and password.

How to Modify the Site Definition

After you define a website you can modify the site definition. Either:

A) Select the Site menu > Manage Sites command. Select a website from the list and click the Edit button.

B) Double click the site name in the files panel.

Add Files & Folders to Your Site

When you need new pages for your website, you could create them by choosing the File menu > New command, then selecting the Blank Page HTML option and clicking the Create Button. Then, you would have to use the Save As command to make sure you put the new file inside the local root folder. This is not the recommended approach since it requires and extra step during save.

The recommended method to add a new page to your website:

1. In the Files Panel, right click on the site folder
   (if on a macintosh and no 2-button mouse, use Ctrl+click).
2. Select the New File command
3. Type a name and be sure to also type the .htm file extension, Dreamweaver does not automatically add it for you.

Set Page Properties

THE FIRST TASK TO PERFORM AFTER ADDING A PAGE TO YOUR SITE IS TO SET THE PAGE PROPERTIES.

Page properties define the default fonts, font sizes, margins, link colors and page titles.

To Set Page Properties

With a file open, select the Modify menu > Page Properties command.

On the Properties Panel, select the Page Properties … button.

In the page properties dialog you should:

Appearance Category:

Page Font: Set a default font (serif or sans serif);

Text Color: Choose a default text color if it is something other than black (the default);

Background Color: Change this if the page background will be something other than white (the default);

Margins: Set all Margins to 0 (very important, every browser has different default margin settings).

Links Category:

If you want to change the default link font or link color

Title Category:

Page Title: Very Important! Search engines like Google and Yahoo return the first 60 characters from your page title after a user searches. The Page Title can/should contain your .com name (which should also include keywords you want found in searches) as well as keywords that can be found on your web page.

If you have and questions or comments about this blog post, you are encourage to post your comments for review.