Tutorial: Defining a site in Adobe Dreamweaver CS 5

Hi. Again this month...
I know posts have been slow for the last month, but have been very busy with a few projects. Today I am going to share a basic tutorial on how to define a New website in Dreamweaver CS5 and linking it to your local testing server and testing the pages.

Also we are going to use XAMPP as the local server in this tutorial, therefore please follow more information below regarding XAMPP, it's a great application which makes life easier on web designers who want to test their pages on local server, test simple PHP pages etc. before launching on live server. You can also use IIS built-in Windows.

Category: Adobe Dreamweaver CS5
Skill Level: Novice to Beginner
Environment: Windows, XAMPP ( or Local server like IIS /Apache)

Author: Iqtidar Ali @ Soul Designs

XAMPP:
XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start. For more information please follow this link http://www.apachefriends.org/en/xampp.html

Step 1:
Open Dreamweaver CS5 and and If you have the layout in Designer Mode, which I assume is, Click on the "Files" button to open File Management window of Dreamweaver. Alternatively you can goto " Window -> Files " or Simply press "F8" to bring up the "Files" window. See Screen 1-0

Screen 1-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 2:
Open the drop down under "Files" and click on "Manage Sites". See Screen 1-0

Step 3:
New Window of "Manage Sites" will open now, click on "New..." as you can see in Screen 3-0

Screen 3-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 4:
Now's the time to define our new site in Dreamweaver. In the new dialogue box opened We will put the name of the site, in this example I have used the name "Example Site" and we will click on the folder link to define a local folder for the site where we will store our website's files. See Screen 4-0

Screen 4-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 5:
Now we will define the testing server for this site. On the left of the dialogue box under "Site" there's another tab "Servers" click on servers tab, the new box will appear, see on the bottom left of the blank box there should be a "+" sign click on the plus-sign.

After clicking the "+" sign anothe pop-up box will opened to ask you information regarding the server. Because in this example we are using our local-computer as testing server, we will use the option "Connect using: Local/Network"

Screen 5-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Now Browse for the foloder in which your server keeps http files / htdocs / public html , In my case the server folder is located in "C:/xampp/htdocs/example_site". Now press "Save" button and for more guidance look at Screen 5-0

Step 6:
Click to check the Check-box under "Testing" to make our defined server as the testing server as well. Press "Save" to save the site settings. See Screen 6-0

Screen 6-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 7:
Create a new HTML document by Pressing "CTRL+N" or going to "File -> New". See Screen 7-0

Screen 7-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 8:
Save the document in the local site directory's root as "Index.html" or "Index.php" the one suits you better and create some Copy / Tables /DIVs etc and Save the document. Open "Files" window again and Press the "Up Arrow" which says "Put files", this will upload your local files to testing/remote server. See Screen 8-0

Screen 8-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 9:
Now's the time to test your website. Put the local server address in your browser's address bar and it should work fine. In my case the address is "http://localhost/example_site", hurraaah... it works.... See Screen 9-0

Screen 9-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.