Setting Up A New Website With Dreamweaver

Adobe’s Dreamweaver is my tool of choice when it comes to web design. I am currently using Dreamweaver 8.0 but I am looking forward to buying Dreamweaver CS3 soon.

Today I will show you how to set up a new website using Dreamweaver. If you don’t have it, you can download a free trial here or you can buy it from Shop.com.

Let’s start off by creating our directory structure before we even go into Dreamweaver. I suggest you start by creating a common folder where you will be storing all your website projects. I will be using C:\MyWebsites.

Within C:\MyWebsites, I will create a folder for each of my projects. Let’s say we want to create a website about traveling. We now need a directory for that website under C:\MyWebsites . Let’s simply call it “Traveling”. So now our directory structure looks like this :

C:\MyWebsites
—–> \Traveling

For my part, I like to have a directory in which I put all my source images. Those are images in Adobe Photoshop, Illustrator, Dreamweaver or any other image-editor format. Those files will never be published on your website. Let’s create a “Source Images” directory :

C:\MyWebsites
—–> \Traveling
———-> \Source Images

Now we need another directory where the root of our website is going to be. This is where we are going to store all the HTML files. Let’s call this directory “HTML” and create it under “Traveling” :

C:\MyWebsites
—–> \Traveling
———-> \HTML
———-> \Source Images

Under HTML we’re going to create an image folder in which we’re going to put all images that are to appear on our website. This directory is going to be under HTML. Your final directory structure should look something like this :

Note : All file and folder names stored in the “HTML” directory should be in lowercase as web servers are case-sensitive.

Your directory structure is created. Let’s start Dreamweaver. Click on Site => New Site from the top menu. From the Site Wizard window that appears, click on the “Advanced” Tab at the top :

Fill-in the fields as follow:

Site name : This is the name of your website to which you will reference to in Dreamweaver. This will not appear anywhere else.
Local root folder : This is where all your HTML files resides on your hard drive (C:\MyWebsites\Traveling\HTML).
Default images folder : Self-explanatory (C:\MyWebsites\Traveling\HTML\images).
Links relative to : Ok this one may be a little tricky if you’re not familiar with absolute and relative path. If that’s the case, set this value to “Document” instead of “Site Root”. I prefer using “Site Root” for dynamic websites for technical reasons.
HTTP Address : This is the URL of your website.

That’s it for the “Local info”. Click on “Remote info” :

Access : This is the protocol we’re going to use to transfer files to the web server. Set this to FTP as most web hosting services will provide this. If you’re unsure about that, contact your web hosting provider.
FTP Host : Set this to the host name of your web server.
Host directory : This is the directory on your webserver where all the HTML files need to be. Usually it’s a subdirectory named “public_html” or “htdocs”. Again, contact your service provider if you don’t have this information.
Login and Password : Enter your FTP authentication information so that you will be able to log on and transfer files to your web host.
Use passive FTP : I prefer using passive FTP but if you have problem transfering files, try setting this to active (uncheck Passive).
Automatically upload files to server on save : I like to have this feature enabled so that I don’t need to upload files manually every time I make a change.