Intro to Dreamweaver and MAMP

 

Created by:

Russell Taylor - A professional web developer and entrepreneur based out of California with over 8 years experience in the industry. His latest project is CSS Menu Maker which provides free css drop down menus to web developers and a Dreamweaver menu extension for the Dreamweaver crowd.  

As a web developer, one of the most important capabilities you must have is the ability to create and text your work before making it live. Dreamweaver is the best web design software available, but you are required to provide your own testing server. MAMP (WAMP on Windows) gives you the ability to set up your own texting server on your computer, allowing you to test your work before making it live.

The first thing that we need to do is go to http://www.mamp.info and download MAMP. Installation is very easy, since all you have to do is drag the specified folder to your applications folder. When you first start MAMP, a dialog box comes up. This is where you can start or stop your servers. You can also configure what happens when you start up MAMP in the Preferences Panel.

Dreamweaver MAMP Startup Screen

 

Set Up MAMP to Make Things Easy

Go into your computer files within the Applications folder. Double-click the MAMP folder and you will see the directory of files available for the MAMP software. Find htdocs, and click and drag that folder to your sidebar in your finder window. This is where all of your testing site files will be stored, so this will make it easy to find this folder in the future.

Make a Shortcut For htdocs

 

One good tip about MAMP is that you will need both the Apache Server and the MySql Server in order to test normal sites, and Wordpress themes. If you are experiencing trouble with the Apache server not coming up, then you will want to make sure that web sharing is turned off in System Preferences under Sharing.

Next, we need to set up our site in Dreamweaver. Open up Dreamweaver and go to Site> New Site and a dialog box will come up.

Dreamweaver Server Setup

 

Name your site and the next line will ask you where your site files will be stored. Click the folder icon and you will be able to point to the folder on your computer where you want to store your site's files. Choose htdocs and create a new folder and name it the same name as your site so you know what is is. Don't click save just yet, because we have to set up or testing server, so that we can preview our site before making it live.

Setup Your Testing Server

 

Click Servers on the left and you will see a blank window. Click the "+" icon to bring up another dialog box. Inside this box, we will determine how our server is setup. For Server Name, name it the same as your site. Under Connect using, click the drop down menu and choose local/network. The rest of the options will change, and instead you will see only 2 more blank menus. For Server Folder, choose the same folder that you made in htdocs.

Specify your local server in Dreamweaver

Server Settings in Dreamweaver

 

For web url, you will specify the url that your testing browser will go to when previewing your testing site. The term for your computer's home or local server is called localhost. Then you place a "/" after localhost and then name the folder where your site's files are located, followed by another "/". Therefore, if you have names your site folder TestSite, your web url would be http://localhost/TestSite/.

Localhost in Dreamweaver