How To Setup Your Website With Dreamweaver - Part I

Usually I try not to get too much into web development through this blog, I rather try to focus on Web Hosting but today we’ll make an exception.

By popular demand, I will show you how to get started with Dreamweaver, a popular HTML editor. In fact, Dreamweaver is not just an HTML editor, it’s a full web design and development tool.

You can buy it online from Adobe here. There’s also a free trial available for download.

Now before going further, you must understand that not all web hosts have the same directory structure. Therefore I cannot write a single tutorial that will work with every web host. That said, I chose to write this tutorial for those who use cPanel hosting.

cPanel is a great web control panel that allows you to manage your website (but not it’s content though!) and is very, very popular. It doesn’t matter who’s your web host, as long as they provide cPanel you will be able to use this tutorial.

Setting Up Your Local Directory Structure

First of all, let’s create the appropriate directories on your local computer. It’s important to have a good structure otherwise things get messed up.

As you may have guessed it, I have tens of websites to take care of so I like to have one folder in which I create subfolders for every website I have. So let’s start by creating a directory named “www” at the root of your C: drive:

Now under C:\www, create a sub-directory named “mywebsite” (you may choose a better name for this directory, it doesn’t matter). I also like to put all my images in the same folder. Let’s create a sub-directory, this time in c:\www\mywebsite, which will be named “images”. If you’ve followed all these steps correctly, you should have a directory structure like this:

That’s all for the local directories, now let’s head over to Dreamweaver.

Defining A Website With Dreamweaver

For this part of the tutorial, I’ll be using Adobe Dreamweaver CS3 but chances are this will work with Dreamweaver MX or 8 also.

Ok start by launching Dreamweaver and click on Site => New Site from the top menu. Enter the information as show below. Of course, you’ll need to enter the information corresponding to your website such as your HTTP address.

Now select the Remote Info category from the left panel. In order to upload files to our hosting account, we’ll be using FTP (File Transfer Protocol). On the web server, all the main website’s files are located in a folder named public_html (remember this is for cPanel hosting only!).

You’ll also need to enter your account username and password. This information has been provided to you when you signed up for your web hosting account.

We’ll also check the Use Passive FTP checkbox. If you ever encounter some uploading problems later, try unchecking this option.

Hit the Test button to see if Dreamweaver can connect to your website through FTP. If it’s not working, make sure you have the right FTP hostname and that you are using the right credentials. When you’re done, click on OK.

So we have now defined a new site in Dreamweaver!

Stay tuned for the second part of this tutorial where I’ll show you how to create your first web page and upload it to your website.

If you don’t have a web hosting account yet, here are a few suggestions: HostPapa.com, BlueHost and InMotion Hosting. Those are all great web host you can afford and they provide cPanel!

Bookmark It