Let’s take a look at how to create a website properly using Adobe Dreamweaver, this tutorial will go over the straight from the start of the process to uploading your website to a web server on an Internet Service Provider. I’ve purposely tried to keep this tutorial fairly basic as it’s designed to a new web designer and can be considered fairly basic but at the same time, I wanted to introduce some of the more complex concepts we find in Dreamweaver and on the web in general.

Preparing a website in Adobe Dreamweaver

As we prepare to create a website in Adobe Dreamweaver, we first have to understand what a website is and how we can make the most of it. Frankly, anybody can create a website and there are a million tutorials out there which will teach you how to do it but if I’m going to take the time to write about it, I’d like to help you learn to do it the right way.

What is a website?

A website is a collection of documents, images, text, media and links associated in a common place. Most likely it’s hosted on the Internet but it doesn’t have to be, most importantly it’s a collection of web pages.

What is a web page?

A web page is a document written in the Hyper Text Markup Language and is designed to be read by web browser software. A web page may contain text, graphics, images, rich media and links. Why am I taking the time to explain it to you at this basic a level? Ironically in my career I’ve found a lot of web professionals who don’t really understand the basic concepts so if you’re new to this, it’s worth a review.

Now, a web page may seem like a simple thing but before we go and start creating a million fancy pages we want to create the website container in Dreamweaver so that all of our pages are properly associated and we can take advantage of Dreamweaver’s site management functions. If you don’t already have a copy of Dreamweaver, you can download a trial version at www.adobe.com

Creating your first site in Dreamweaver

Adding a site in Adobe Dreamweaver is fairly simple, along the top menu you can create a New Site … under the Site menu item. Once created a dialog box will appear. The are two modes to add a website to Dreamweaver, Basic and Advanced. Let’s make sure you have Basic selected and take a look at the options provided.

First, you’ll need to create a name for your website. You can call it what ever you like, this title is for you and you alone. I’m going to call mine Unnamed Site 2 because I’m original and like the sound of it.

The HTTP address is the website address of your site. If you don’t already have a domain name, don’t worry about it. Otherwise, fill in the URL of your website here. For example, my website address is http://www.thisismyurl.com.

Clicking on the Next button will bring us to a screen asking about Server Technology. For now, let’s say that we do not want to use a server technology. Using this option later will let us use a scripting language such as PHP but we’ll get to that later.

We click the Next button again and Dreamweaver wants to know where we’d like to edit our site. We can choose to edit on our local computer, in which case we’ll need to add a local folder to our hard drive or we can edit remotely on an FTP server. So let’s add a local folder and link it in the dialog box provided.

When we click the Next button again you’ll find yourself on a screen asking about remote access. This is for people who want to FTP or upload their websites to a remote web hosting company. By default Local/Network is selected but I want you to change it to None and press Next. We’re going to cover how to FTP our site and things later on, so let’s not get too bogged down in technical talk at this point.

If you’ve done everything correctly you’ll now see a Done button and you’re ready to get started with your website. At this point, you’re going to notice that it’s not very exciting. In fact, it’s empty but that’s OK because that is exactly how we want to start a website.

Adding files to your website

If the purpose of a website is to hold web pages, we now need to add a web page. To create a new web page in Dreamweaver we have a few choices:

• You can create a new page using the short cut key Control-N (Apple-N on a Macintosh)
• You can create a new page using the menu option File > New …
• You can right click (ctrl-click on a Macintosh) the Site name in your Files panel to the right. If you don’t have a Files panel, hit F8 or go to your Windows > Files menu item.

Now, if you took the first two options you’ll see a big and scary dialog box (the third option skipped this step) asking you what type of page you want to create. Let’s keep the ball rolling on the simple tutorial and select Blank Page : HTML : <none> from the menu. Don’t worry about the rest of the items, just click Create to continue. This will create a new file but it’s not added to our site yet.

To add the site to your website you need to File > Save (Control-S / Apple-S) your document. For the sake of compatibility down the road, I’d like you to name this file index.html and save it. Now, on in your Files tab you should see your Site as well as a single file named index.html. Congratulations, you’ve created your first (single page) website.

You can repeat the steps outlined above to add three more pages to your website, in the end you should have:

1. index.html
2. about.html
3. contact.html
4. services.html

In our next lesson we’ll learn how to create a website Template file which is used to control the structure of your website. Before then, why don’t you take the time to add a couple paragraphs of text to each of the pages? Remember to make sure you’re in Design view by going to your View > Design option (if there’s a check mark on it you’re OK). Having a hard time thinking about what to say? No problem, at this point in the process why not just copy some Lorem Ipsum into each page?

This tutorial will be broken down into the following chapters, each published individually over the coming weeks.

1. Preparing a website in Adobe Dreamweaver
2. Building your first Dreamweaver Template file
3. Structuring your website with Adobe Dreamweaver
4. Improving the common elements in Dreamweaver
5. Placing page content in Adobe Dreamweaver
6. Hyper linking in Dreamweaver
7. Working with Images in Adobe Dreamweaver
8. Adding Cascading Style Sheets with Dreamweaver
9. Putting your website on a remote web server with Adobe Dreamweaver
10. Adding Google Analytics and other neat tricks to your Dreamweaver Template

Was this tutorial easy enough to follow? Let me know through your comments below.