Setting up Dreamweaver in OS X

setting up dreamwweaver in os x - 2005-11-12

If you are a website designer and have recently switched from Windows to a Mac, you probably want to read on. This article details my experience of getting Macromedia Dreamweaver to preview websites on new Mac just as it did on my PC. Specifically, this relates to the ability (or should I say inability?) of the Mac platform to use the browser preview function if you use absolute pathnames like I do.

As I already mentioned, this is really directed to website designers, particularly those who maintain several sites. If you work only with one site, then the Mac is ready to work for you right out of the box.

I’m assuming that you’re familiar with how the browser preview function works on a PC. You press F12 and see what the page you’re working on will look like in your default browser minus any dynamic content.  Structure is pretty accurate and the page shows the images, Flash files or whatever else even if you use absolute path names.

This is NOT the case with OS X and Dreamweaver. I go back to approximately 20 sites on a fairly regular basis. I assumed that my transfer to a Mac would be relatively painless, and thankfully it has been, with the exception of setting up Dreamweaver for previewing.  I found it next to impossible to find all of the information I needed in one place on the web, and I hope that my documentation can prevent someone else the frustration I experienced when I first set up my Mac for web design.

The instructions below outline setting you’re your folder structure; configuring Apache, your local host, and Dreamweaver; and turning Apache on.  I’ve created a client named Foobar for my example below. 

Firstly, as far as I can tell, you must have the websites you are maintaining in the Users/YOUR USERNAME/Sites folder if you want to eventually be able to preview with absolute pathnames working.

Setting Up Your Folder Structure

On a PC, you can save your website files wherever you’d like – in [My Documents], or a file you name yourself, for example.  You just need to point Dreamweaver in that direction and you’re ready to preview.  On a Mac, your computer is a server, which has many benefits but requires a lot of setup if you’re maintaining multiple sites.  The first step is setting up your folder structure.

Your websites must be stored in the Users/YOURUSERNAME/Sites folder.  You can create whatever sub-directories you need in the sites folder, but you must start there.

This is the file path I would use for my Foobar client on my Linear Design account:
Users/lineardesign/Sites/clients/foobar/projects/website/content

Once you’ve set up your directory – congratulations!  You’ve just completed the easy part.  Take a deep breath and read on.

Configuring Apache

With a Mac, your computer is your server, and Apache is your pre-installed web hosting software.  It’s a great program, and it’s pre-installed, but you have to make quite a few adjustments to make it work with multiple sites. 

You’ll need a third-party text editor to modify some config files that need root user access.  I found a free one called TextWrangler from Bare Bones.  You can download it here: http://www.barebones.com/products/textwrangler/download.shtml

The next steps guide you through the config file adjustments.

1. Locate your Mac hard drive in the finder.  Select the [Go] menu, and then select [Go to folder].  Enter “etc” (without the quotation marks) and press enter. 
   


2. In the Etc folder, select the httpd folder.  Select the httpd.conf file.  Press [Ctrl] and select the httpd.conf file again, and select [Open With].  Click [Other], and browse to TextWrangler.  Open the file with TextWrangler.
   


3. This is your Apache config file and it is very complex and large. You need to find the virtual hosts section, which is located near the end of the document. Select Edit > Find “Virtual Hosts,” to take you there.


4. You need to uncomment NameVirtualHost 127.0.0.1:80.  I’ve included the original version you need to locate below, followed by the update you need to make.     
   
   Locate:
   # NameVirtualHost 127.0.0.1:80
   
   Update:
   NameVirtualHost 127.0.0.1:80

1. You need to set up the virtual host now. Find the following:
   
   #<VirtualHost *:80>
   #    ServerAdmin webmaster@dummy-host.example.com
   #    DocumentRoot /www/docs/dummy-host.example.com
   #    ServerName dummy-host.example.com
   #    ErrorLog logs/dummy-host.example.com-error_log
   #    CustomLog logs/dummy-host.example.com-access_log common
   #</VirtualHost>
   
   Replace with this (filling in your information for the site name, your e-mail address and your client directory):
   
   # foobar
   <VirtualHost 127.0.0.1:80>
   ServerName foobar
   ServerAdmin admin@lineardesign.ca
   DocumentRoot /Users/lineardesign/Sites/foobar/projects/website
   </VirtualHost>


2. Select the [File] menu, and then select [Save]. You will be prompted to enter your admin password, do so.

You just finished the hardest part!  Give yourself a pat on the back.

Configuring Your Local Host

Now you need to set up your Mac so that your browsers will automatically direct to your local directory should you wish to preview outside of Dreamweaver.

1. Go to Utilities and select [NetInfo Manager].


2. This information is locked; click the lock icon at the bottom of the screen and enter your username and password.  Then, open [Machines] and select [local host].  Click the [Duplicate] button.


3. Select the new file called [localhost copy].  In the Values section, double-click the name and enter “foobar.”  The default values can be used for all other information, including the IP Address and Servers.


4. Click the lock icon again to confirm your changes.

Configuring Dreamweaver

This isn’t much different than setting up Dreamweaver on PC.  Finally, a part of this process looks familiar! 

1. Open Dreaweaver.


2. From the Sites menu, select [Manage Sites].


3. Set up the Local & Remote information just as you usually do.


4. In the [Testing Server] tab select:
   server model: php MySql
   access: local/network
   folder: Macintosh HD:Users:lineardesign:Sites:foobar:projects:website

Turning on Apache

This is the last part of the process.  If you’ve made it this far, don’t give up now!

1. Go to System Preferences > Sharing > Services and turn on Personal Web Sharing.

Note: You have to turn this off and on again for any changes you made to your httpd.conf file to work.

That’s it

1. Do a browser preview from Dreamweaver that shows up perfectly even if you have absolute pathnames.


2. See php or dynamic content in your preview.


3. Enter http://foobar/ into your browser to view your local site.

I hope this information is helpful.  Good luck!

by James.