With my last tutorial I examined how to setup a MAMP server and now we are going to look at setting up a site in Dreamweaver which will connect to that MAMP server. When we left off the last thing we did was create a sample HTML page showing how diverse HTML is and how HTML translates well into any program. But let’s say you want to move onto the professional tools and organize your sites, how do we get started and connect to that testing server. Well, let’s take a look.
Getting Started
For purposes of this tutorial we will be using the latest available release of Adobe Dreamweaver, version CS 6. Now there are many new features with this release with regards to responsive design and Business Catalyst just to name a few, but for the most part the definition of a new site has been about the same since the CS4 release. I mention the latter, Business Catalyst, because there is a new option within Dreamweaver to create a Business Catalyst site separate from creating a standard Dreamweaver Site definition.
Unlike previous versions of Dreamweaver where you had a choice of a wizard and an advanced site setup screen, the CS6 release of Dreamweaver features only the advanced site setup option as most users in a professional environment were opting for that anyways.
The first step in creating a Dreamweaver site is to define your local folder. Like many other HTML editors, Dreamweaver requires that you define a folder on your hard drive as the local site. Now there are some cases out there where some users may wish to work with only temporary files in the case of editing single remote files. For the purpose of this tutorial we will not be covering this and will assume you have a local site folder. In keeping with Part 1 of this tutorial series we will assume that you created a folder in MAMP with the path /Users/[your_username]/Sites/[your_site_name]. Dreamweaver will automatically fill in the [your_site_name] piece as you fill out the Site Name field, but you may need to adjust the path using the Browse function, the Folder icon.
Unlike previous versions of Dreamweaver where you would be able to click the “Next” button in the Site Setup wizard, we now will navigate on the left hand side to go to the next steps of the Site Setup process. Click on the Servers button to continues.
As you view this next step in the process Dreamweaver will let you know that this process is not necessary to begin your work, but what they don’t say is that without this information you cannot build or test dynamic content. While this may have been ok 10 years ago, it is not anymore because everything you will want to use will require server-side functions and the ability to edit/test these functions. An example of this is a WordPress blog which utilizes PHP and mySQL, Drupal, PyroCMS, vBulletin, Invision Power Board, etc., etc., and the list goes on. So let’s click the Plus button at the bottom left and enter in our testing server information.
Basic Site Setup
Despite Dreamweaver breaking up the Site Setup into 2 sections, both are necessary for creating sites with dynamic content like Drupal or WordPress.
- Server Name
This is the name of the server that you are setting up. It can be anything you wish. - Connect Using
Here you have a choice of FTP, SFTP, FTPS or FTP over SSL/TLS (implicit/explicit), Local/Network, WebDav, RDS. I won’t go into details about the differences, but you should know that the testing server and/or remote server does not have to be the “local” computer that you are working on. You can choose to FTP to a testing server before using FTP to send the files to a live server. - FTP Address
This is where you would enter the remote address of your computer if it is not your local machine. - Server Folder (not pictured)
The server folder is if you choose Local/Network. This is the folder on your computer where the website will be served from. If you used the previous tutorial this will be the same as your site root, but it does not have to be. You could allow DW to create temporary files in another location of your server while you work on the files in a different location. - Root Directory
In the case of many Unix hosts this is a path like “/www” or “/public_html”. This is the path to where the server will serve the files from. - Web URL
This is the address that you would type into your browser to access your website. It could be “http://yourdomain.com” or “localhost/myfolder”. - More Options
The two options I have checked here for Passive FTP and FTP Performance Mode are usually the ones that cause the most issues. If you are having issues with your FTP connection, try toggling these two options to see if that solves the problem. - Maintain Synchronization Information
This just pops up a warning if the file was changed via another source. This can be helpful if you use another FTP program on the side. - Enable File Check-Out
This is a feature to use if you have multiple Dreamweaver users working on the same site. If a file is being edited by someone else, you will get a prompt stating that “user x and email address y has the file checked out”. - Server Model
This is the option that allows you to use PHP pages and connect to databases on your site. In the case of a WordPress or Drupal installation choose “PHP mySQL” for your Server Model to tell Dreamweaver you want to use PHP pages with a mySQL database.
Version Control
This is a more advanced feature and if you are just starting out it’s probably well over your head. The basic principal is like the Check-In/Check-Out feature but in shared repositories. One important item to note is that Dreamweaver supports Subversion 1.6.9, not 1.7. So keep that in mind if you are looking to use it.
Advanced Settings
- Local Info
Here you can set a default images folder which is not used much anymore. You will also be able to set up where the media query file for responsive web design should be kept if you want to separate it. Lastly, the “Links Relative To” can be important. This states whether links are made relative to the document you are working on or relative to the site root. If you are working with dynamic sites you may be better off setting this to “Site Root” as opposed to document. - Cloaking
Let’s you hide certain file extensions from site operations. - Design Notes
Self explanatory, notes. Don’t use them personally or see the need for anyone to use them. - File View Columns
Change what columns are shown/hidden in the Files panel - Contribute
Its status as a program is questionable. It’s further use is doubtful - Templates, Spry, WebFonts
These are all folder definitions where you can change the DW default. If you do change the default, just know what it should be in case you run into errors with DW saying it cannot find the path.
Final Steps
Now that you have an understanding of the setup screen let’s fill in the information. First create a folder in the Users/{username/Sites folder. You can call it whatever you want at this point. Next, for the Server Name, let’s call this “Localhost” so we know that this is the local site. Then for Connect Using choose “Local/Network”. The Server Folder will be the “Users/{username}/Sites/{foldername}” that you just created. Next, set the Web URL to be “http://localhost/{foldername}” using the folder name from the Sites path. Your local site definition is now set.
When you click Save to finish, you are not back in the Site Definition. Be sure to check the box under “Testing” for Dreamweaver so it knows to treat this address as the testing server and not the Remote server that the public sees when they visit your URL.
The last step we will cover is the Advanced Settings –> Local Info. If you plan on using a CMS like WordPress, Drupal, Joomla, PyroCMS, etc. change the Links Relative To setting to “Site Root”.
That’s it. You have now successfully completed setting up a site in Dreamweaver.