You are on page 1of 6

Dreamweaver Tutorial: How to Create a Website with

Dreamweaver CS3 (Part 1)

by Christopher Heng, (
Adobe Dreamweaver Creative Suite 3 (CS3), formerly known as Macromedia Dreamweaver, is a fully-featured commercial web editor that
allows you to create, build and manage complex websites. The editor is a What-You-See-Is-What-You-Get (WYSIWYG) web editor
( , which means that you can design your web page visually and whatever you see on
the screen is what your visitors will see when they visit your website. Dreamweaver generates standards-compliant code for your website
which means your website will not become "broken" every time a new version of a web browser is released. For the technically inclined, the
HTML and CSS code that it creates for your website will validate correctly ( .
This tutorial guides you through the steps of creating your first website using Dreamweaver.
What You Will Need
Dreamweaver CS3
You will need Dreamweaver CS3 (obviously). The tutorial assumes that you are using Dreamweaver CS3. There are versions of
Dreamweaver for both Windows and Mac OS X either version will do fine. For the most part, both versions work in the same way.
Note: if you are using a different version of Dreamweaver, please see the tutorial series for that version instead: for example, Dreamweaver
CS6 Tutorial ( for CS6, Dreamweaver CS5.5 Tutorial
( for CS 5.5, Dreamweaver CS5 Tutorial
( for CS5, and Dreamweaver CS4 Tutorial
( for CS4.
A Web Hosti ng Account
You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has
computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to
your web host's computer (called a web server), so that the rest of the world can see it. There are numerous web hosts around you can
find a list of cheap web hosts ( on
/budget1.shtml (
There are other things involved in getting your first web site up and running, such as getting your own domain name
( , making your website search engine friendly (
/search-engine-friendly.shtml) and promoting your web site ( . This tutorial however does not
deal with those matters it is strictly about designing (creating) and publishing (uploading (
/faqs/glossary.shtml#uploading) ) your website using Dreamweaver. If you are a total beginner, you may want to consult my article How to Start /
Create Your Own Website: The Beginner's A-Z Guide ( for an overview of the entire
process and all the things you will need.
Overall Goals of the Dreamweaver Tutorial
By the end of this tutorial, you will have set up a working website with multiple pages, including a main page, a feedback form, an About Us
page, and a Site Map. Your pages will contain a sophisticated navigation menu bar, images, multiple columns, a form, links to other pages
within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website.
More importantly, you will know how to use Dreamweaver to create, design and publish your site so that you can design new sites any time
you want.
Goal of this Chapter
In this chapter, you will learn to create a rudimentary two-column web page (like this web page (
/dreamweaver1.shtml) that you are currently reading) and publish it so that it can be accessed on the Internet. By the end of this chapter, you
will be viewing your web page on the Internet with your favourite web browser.
Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The
practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.
Setting Up Your Website in Dreamweaver
Start up Dreamweaver.
Dreamweaver Tutorial: How to Create aWebsite with Dreamweaver CS3 (Part 1) (
1 of 6 09/10/2014 19:07
You will be greeted with a window with a top-half looks something like the picture above (without the words "Dreamweaver Tutorial" of course). Your picture may be slightly different depending on whether you are using Mac OS X, Windows XP or
Windows Vista.
If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert Modify Text Commands Site Window Help".
We will be accessing a lot of Dreamweaver's features via this menu bar.
The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar. A
drop-down menu will appear. Click the "New Site..." item in the menu bar.
Important note: in the interest of brevity, in the future, I shall refer to the sequence of clicking the "Site" menu, followed by clicking on the
"New Site..." item simply as "Site | New Site..."
A dialog box will appear with words to the effect "Site Definition for Unnamed Site 1". The number that follows the word "Site" may be
different if you have ever used Dreamweaver to set up a site before. Don't worry about that. We are about to change it anyway.
At the top of the dialog box is the "Basic" tab. If it is not currently selected, click on it to select it. If you're not sure, just click on it.
In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. If you are not sure what name you
want for your site, use your domain name ( . For example, if you have purchased a
domain ( called "", put "" (without the quotes) into the box.
For the purpose of this tutorial, I will assume that you have typed "Example Company" in the box.
Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of
your site?". For example, if you bought the domain "", your website address will be "" (without the
quotes), unless your web host tells you otherwise.
Click the "Next" button at the bottom of the window to proceed to the next screen.
Accept the default "No, I do not want to use a server technology" for now. Click the "Next" button again.
The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same
name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website
files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your
website on your own computer. If you don't know what to do here, just accept the default.
When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and
click "Next" again. You will then be given a "Site Definition" summary. Click "Done".
Creating a Simple Two-Column Web Page with Header and Footer
You will now create the main page of your website. For the purpose of this tutorial, we will be creating a two-column web page for the main
page. A two-column web page basically means that the page will have two vertical columns. Websites typically use one of the columns to
hold the website's logo and navigation buttons and the other column to hold the main content. For example, on's article
pages, such as the one you are reading now, the left column holds the navigation menu while the right column holds the article text.
Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears. A new window entitled "New
Document" will appear.
Look in the "Layout" column in the window that appears and locate the item "2 column liquid, left sidebar, header and footer". Select the item
by clicking on it once.
Look at the rightmost side of the same window and locate the item "Layout CSS". Click the drop-down box and select "Create New File". This
will cause Dreamweaver to save certain types of information about the appearance of the web page (called CSS) in a separate file. One of
the ways in which this is useful is that when we design other pages of the site, we can reuse the same information by simply loading it from
the same file.
Click the "Create" button.
A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clicking the "Save" button.
Dreamweaver Tutorial: How to Create aWebsite with Dreamweaver CS3 (Part 1) (
2 of 6 09/10/2014 19:07
Dreamweaver now presents you with a page with two columns with some dummy content typed in. We will be replacing some of the dummy
content with our own content.
Designing the Home Page: Preamble
The page you are about to design will serve as the website's "Home Page", which means that it is the main page of your website. It is the
page that visitors will see if they type your website's address without specifying any page name. For example, if your domain is called
"", and your visitor types "", they will see this page.
A home page typically contains brief information about what the site is about as well as links to the other pages of your website. If this is the
home page of your personal site, you will probably want to welcome your visitors and mention briefly what they can hope to see on your site.
If this is the home page of a company site, it will typically mention briefly what the company sells, it's main products and point the visitors to
individual product pages or other pages on your site.
For the purpose of this tutorial, I will provide example text for a fictitious company called "Example Company", selling some fictitious
products. You should of course use your own text rather than my supplied text. For example, if your company is called XYZ Inc, go ahead
and use "XYZ Inc" in places where I use "Example Company". Likewise if you are creating a personal website, and you are out of ideas as to
what to call your site, call it by your name. For example, if your name is Shakespeare, call it Shakespeare's Website.
Steps to Designing Your Dreamweaver Site
Take a look at the page that is displayed. You will see that there is a band spanning the entire top row of the page. The words in that
band currently read "Header". Below that there are two columns: a narrow left column, called the sidebar, and a wider right column with
the heading "Main Content". All the text that is given in the window can be replaced by your own content.
To replace the content, simply click on the word you wish to replace, delete it and type your own. The first thing you should do is to
replace the word "Header" with the name of your website. To do this, click somewhere in the word "Header". A blinking text cursor will
appear. Using the delete or backspace key as needed, delete "Header". Type the name of your website. If you don't know what to type,
type in your name or your company's name. For the example site that I create here, I will replace "Header" with the words "Example
Directly above where you typed to replace the "Header" text is a small edit box with the words "Untitled Document". Click the word
"Untitled". Use the delete or backspace key to remove the existing text and replace it with the name of the site you typed earlier. This will
be the text that the search engines show for this web page when it displays the results of a search. Again, for this tutorial's example site, I
will simply replace it with the word "Example Company".
You should now replace all the text in the right column with your own text. Simply click on the "Main Content" title and replace it with
some appropriate content. You can take a look at the text that I will be using below as an example. When you've finished with that, click
on the "Lorem ipsum dolor sit amet" (etc) words, delete them and replace them with your message. Typing and editing of text within the
page works more or less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter key (Windows) or
the Return key (Mac OS X).
Repeat the process with the "H2 level heading" subtitle and the words that follow. J ust replace it with whatever you want your website to
display. If you want, you can replace the words with the example text below. However, it's best to write something that is relevant to your
site so that you don't need to go back and re-edit it later.
Exampl e Company deal s wi t h al l manner of exampl es. We have exampl es of l i t er ar y wor ks, pul p f i ct i on,
t ext books, movi e r evi ews, scr i pt s, chai r s, t abl es, househol d appl i ances, and so on. We even have
exampl es of exampl es.
Featured Product
Dr eamweaver Si t e: Thi s i s an exampl e of a Dr eamweaver si t e, cr eat ed wi t h t he hel p of
t hesi t ewi zar d. com' s t ut or i al on Dr eamweaver . The t ut or i al t eaches you how t o cr eat e a basi c but f ul l y-
f unct i onal websi t e whi ch you can modi f y and augment t o sui t your needs.
Leave the left column (sidebar) alone for now. We will add a navigation menu to this section in later chapters of this tutorial. 4.
Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at the bottom of the page. For
example, you can place your copyright notice in place of this word. If you need to insert the copyright symbol, "", click "Insert | HTML |
Special Characters | Copyright" from the menu.
Once you are satisfied with your page, click "File | Save As...". A dialog box will appear asking you where to save the page. Type
"index.html" (without the quotes) into the "File name" edit box, and click the "Save" button.
Be sure to type the name "index.html" exactly as I gave it that is, entirely in small letters (lowercase), with no spaces in the word.
"index.html" is a special name in that it is regarded as the default file name for most web servers. When you publish that page to your
website at (say), the index.html page is the one that will be displayed when a visitor types
Dreamweaver Tutorial: How to Create aWebsite with Dreamweaver CS3 (Part 1) (
3 of 6 09/10/2014 19:07
"" without any filename. It is thus very important that you do not change the name of the file to something else.
Uploading or Publishing Your First Web Page with Dreamweaver: Preamble
Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason
we're going to do this now, even before we've finished the page, is that Dreamweaver needs the information about your actual website's
address (or URL) before it can correctly handle things like links and images on your web page. Even though you entered it earlier when you
set up your site, it only integrates such information into its system when you publish your page. So even though the page is probably an
embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.
Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site
exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you
happened to sign up for a web hosting account today. It's not that easy to get visitors.
Another reason that you're publishing your page at this time is so that you can get familiar with both the major stages in the design of a web
page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer,
you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though it's
actually quite easy!
Steps to Publishing / Uploading Your Dreamweaver Site
To publish your website, start up the Site Manager again. To do this, click "Site | Manage Sites...", that is, click on the "Site" menu
followed by the "Manage Sites..." item on the menu that appears. In the dialog box that appears, click on your website's name, then the
"Edit..." button.
The dialog box you encountered when you first set up your website appears. Click "Next..." until you come to the screen with the message
"How do you want to connect to your remote server?" In the first part of the tutorial, we selected "None". We will now change it to the
actual values we need for uploading (publishing) your web page. In the drop down box, select "FTP".
Basically you will need to enter the information that your web host ( provided you
when you first signed up for a web hosting account. Web hosts typically provide you with a whole bunch of details about your account
when you first sign up. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by
which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to
your web host's computer is known as "publishing" or "uploading" your pages.
In the empty box for "What is the hostname or FTP address of your Web server?" enter the FTP address that your web host gave you. If
you have your own domain and are hosted on a commercial web host ( , this address
is typically your domain name prefixed by "ftp". For example, if your domain is "", many web hosts set up your FTP address
as "". Check the email you received from your web host for more details, or ask them if you cannot find the details. If the
address is indeed "", enter that in the box here.
To answer "What folder on the server do you want to store your files in?", check the message from your web host again. Some web hosts
tell you that you need to place your web pages in a folder called "www". Others require you to place them in a "public_html" directory. Still
others say that you are to place your files in the default directory that you see when you connect by FTP.
If your web host tells you to simply upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you
need to publish your files in a "www" directory or some other folder name, enter that folder name in the box given. If the host does not
mention this at all, chances are that you can simply leave the box blank.
Enter your FTP user name or login name into the box for "What is your FTP login?". Again, this information has to be supplied by your
web host.
Enter your password in the box for "What is your FTP password?". Get your password from your web host if you don't already know it. If
you don't want to have to keep entering your password every time you publish your page, you can leave the "Save" checkbox activated.
Otherwise, if you are sharing your computer with others and don't want Dreamweaver to save your password, you can uncheck the box.
If you like, you can click the "Test Connection" button to check that you have entered all the information correctly. When you are finished,
click "Next..." and "Done" to complete the configuration.
Finally, to publish your website, click "Site | Put". When Dreamweaver pops out a message asking you whether it should "Put dependent
files?" answer "Yes". This merely means that it is to upload things like your images and CSS files that are required by your web pages.
Testing the Web Page
Before you proceed further, you need to test the version of the web page you have uploaded. This way, you will know whether you've made
any mistake when entering your details earlier.
Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier.
For example, type "" if that is your URL.
If you have entered the FTP details correctly, you should see the page you created earlier in your web browser.
If you get an error like "No DNS for" or "Domain not found", it probably means that your domain name has not yet
propagated to your ISP. Put simply, this means that you probably only just bought your domain name (
/registerdomain.shtml) . It takes time for a new domain name to be recognized around the world (usually 2 or more days), so it's possible that
your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can
use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly.
Otherwise, you'll just have to wait.
Dreamweaver Tutorial: How to Create aWebsite with Dreamweaver CS3 (Part 1) (
4 of 6 09/10/2014 19:07
If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check that
you have entered the correct folder in answer to the question "What folder on the server do you want to store your files in?". It is possible that
you did not specify the correct directory on your website to publish your web page.
To fix the error, simply click "Site | Manage Sites..." and "Edit" and click the "Next..." button till you get to the appropriate screen to modify.
If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It
may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.
Next Chapter: How to Add Pictures to Your Website
In the next chapter of the Dreamweaver tutorial ( , you will learn how to improve
this basic page by adding pictures ( . You will also be adding a logo to your
website ( .
Copyright 2007-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this ( , on web design, promotion, revenue and
scripting, from ( .
You are here:
Top ( Getting Started with Your Website (
How to Create / Make Your Own Website: The Beginner's A-Z Guide ( List of
All Dreamweaver Tutorials (
Dreamweaver Tutorial: Chapter 1: How to Create a Website wi th Dreamweaver CS3 (
Chapter 2: How to Spice Up Your Website with Images in Dreamweaver CS3 (
Chapter 3: How to Add Links, Change Fonts and Change Colours in Dreamweaver CS3 (
Chapter 4: How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS3 (
Chapter 5: How to Use Templates to Manage Your Website in Dreamweaver CS3 (
Chapter 6: How to Add a Feedback Form to Your Website in Dreamweaver CS3 (
More Dreamweaver Tutorials (
thesitewizard News Feed (RSS Site Feed) (
Do you find this article useful? You can learn of new articles and scripts that are published on (
by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at
/thesitewizard.xml ( . You can read more about how to subscribe to RSS site feeds
( from my RSS FAQ ( .
Please Do Not Reprint This Article
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission
( .
Related Articles
Which Web Host Do You Recommend? (FAQ) (
How to Choose a Good Web Host (
Tips on Choosing a Good Domain Name (
How to Make Money From Your Website (
How to Accept Credit Cards on Your Website (
Free Customized Feedback Form Wizard ( get a feedback form for your website
How to Design and Publish Your Website with KompoZer (
New Articles
How to Add a Feedback Form to Your Website with Dreamweaver CS6 (
How to Create and Manage Multiple Pages on Your Website with Dreamweaver CS6 (
Why Is the Pound Symbol ("") Displayed as a Question Mark or Rectangular Box On My Web Page? (
Dreamweaver Tutorial: How to Create aWebsite with Dreamweaver CS3 (Part 1) (
5 of 6 09/10/2014 19:07
Which Web Hosting Package / Plan Should You Choose? How to Plan for the Traffic (Bandwidth) and Disk Space You Need
Can I Recover My Files From a Website Discontinued a Long Time Ago? (
BlueGriffon Tutorial: How to Create a Website with the BlueGriffon Free Web Editor (
How to Reserve a Domain Name. Do You Need a Web Host if You Want to Reserve a Domain for Future Use? (
What's the Difference Between a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?
How to Centre a Background Image or Photo on Your Web Page Using KompoZer (
How to Create Rounded Corners for Your Box Borders in CSS (
Popular Articles
How to Make / Create a Website: The Beginner's A-Z Guide (
Tips on Choosing a Good Domain Name (
How to Create a Search Engine Friendly Website (
Dreamweaver Tutorial: How to Design a Website with Dreamweaver CS6 (
How to Design and Publish Your Website with KompoZer (free WYSIWYG web editor) (
Free Customized Feedback Form Wizard (PHP / Perl Script) (
How to Link to This Page
To link to this page from your website, simply cut and paste the following code to your web page.
It will appear on your page as:
Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (
Copyright 2007-2014 by Christopher Heng. All rights reserved.
thesitewizard, thefreecountry and HowToHaven are trademarks of Christopher Heng.
This page was last updated on 18 September 2014.
Dreamweaver Tutorial: How to Create aWebsite with Dreamweaver CS3 (Part 1) (
6 of 6 09/10/2014 19:07