When creating a website using Dreamweaver, the first thing you’ll need to do is to set up a new Site. Dreamweaver assigns different attributes to every Site you create, such as FTP (File Transfer Protocol) settings which will change depending on who will be hosting your website online.
When you set up a Site, you point Dreamweaver to the folder where your website files are kept, and then tell it where the files will be uploaded to when finished. Once Dreamweaver is open, go to:
A dialogue box will open with Basic and Advanced written in tabs at the top (figure 1).
The Basic tab takes you through a standard setup ‘wizard’, but I think it would be more useful to use the Advanced tab, because it helps to explain what all the fields do. At this stage I won’t overload you with every detail about what every single field, button and palette do in Dreamweaver - it’s easier to take it in gradually, so I’ll just focus on the bits we’re actually going to use for this tutorial.
Some fields are self-explanatory, and some not so much. A Category list on the left takes you through the available options, and for now we’re only going to need ‘Local Info’ and ‘Remote Info’.
The Local Info pane requires the following information about the website files on your computer and how to treat them:
I’ll call mine Using Dreamweaver… imaginative, I know
Local root folder:
Click the folder icon to the right of the field and navigate to your website directory where all your website files are going to be kept. If you’ve been through the ‘How to Slice up a Photoshop Visual into Background Images’ article, you should already have an images folder in there containing four images.
Default images folder:
Click the folder on the right and navigate to your images folder.
Links relative to:
This setting determines whether or not every link you create on any page in the site automatically has your domain name stuck in front of it (‘absolute’), or if the links are relative to the document being browsed (‘relative’). For example, if you’re working on a page called ‘test-links.html’ which resides in a folder on your site called ‘test-documents’ and you want to link to the home page (‘index.html’) which sits in the top level directory, here’s how both types of link would look:
Normally I select relative links, so click the Document radio button in this case.
Put your domain name in here - for example, ‘http://www.using-dreamweaver.com/’
leave this unchecked
leave this checked
The Remote Info pane requires the information shown below about where your website files will be uploaded to. If you’ve set up a hosting package for your website, this is where you’ll need to input the host information and access details. If you haven’t set it up yet you can just leave the Access menu set to None for now.
If you have set up the hosting, select FTP from the little menu and enter the following information into the dialogue box (figure 2):
This will be supplied by your chosen hosting company. It’s normally an address like ‘ftp.something.com’ or it might be your actual website address.
Unless you’re told this directory name, leave it blank for now. This is the name of the folder that holds you files online, and it’s usually something like ‘public’, ‘web’, ‘html’, ‘htmldocs’ or similar. Once you’ve connected, you’ll see what it’s called and you can then return here to enter its name.
As supplied by your host
As supplied by your host
Use passive FTP:
Check this box. If you have problems connecting (other than login/password problems) try unchecking this box.
leave on default settings for now.
Once you’ve entered the information (which should be made available to you by your chosen hosting company after signing up with them) and tested the connection (click ‘Test’ next to the Login field), you’re good to go.
If you get an error message after clicking Test, check and double-check your FTP settings, particularly your host name, login and password. 99 times out of 100 this is where the problem will be.
All other settings here can be left for now - some will be covered in later tutorials when they become necessary.
When you open your Files window (WINDOW/FILES) I find it easiest to click the ‘Expand to show local and remote sites’ button in the top right corner. This does exactly what the rollover tooltip suggests - it shows your local files (so far just an images folder) in the right pane, and the remote files (if any) in the left pane.
Now you’re ready to start building.