Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 1 of 15
Dreamweaver CS4 Tutorial: How to Create
a Website with Dreamweaver CS4
by Christopher Heng, thesitewizard.com (http://www.thesitewizard.com/)
For those who don't know, Adobe Dreamweaver Creative Suite 4 (CS4)
(http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG) , is a well-known commercial web
editor that enables you to design, build and manage complex websites. The editor is a WhatYou-See-Is-What-You-Get (WYSIWYG) web editor
(http://www.thefreecountry.com/webmaster/htmleditors.shtml) , which means that you can create
your web page visually and whatever you see on the screen while designing is what you will
get when your site is loaded in a normal web browser.
As far as WYSIWYG web editors go, Dreamweaver does a very good job of generating
standards-compliant code for web pages. This means that your site will not break in newer
versions of web browsers. For the technically inclined, the HTML and CSS code that it
creates for your website will validate correctly
(http://www.thesitewizard.com/webdesign/htmlvalidation.shtml) .
Overall Goals of this Tutorial Series
By the end of this tutorial series, you will have created a complete website with multiple
pages, including a home 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 have learned how to use Dreamweaver to set up, design and
publish your site. You will thus be able to update your site and design new sites any time
you want.
Goal of this Chapter
In this chapter, you will learn to create a basic two-column web page and publish it so that it
can be accessed on the Internet. By the end of this chapter, you will be viewing this page on
the Internet with your 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.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 2 of 15
What You Will Need
Creating a website involves far more than just designing the visual appearance of the web
page itself. If you are not familiar with all the aspects of website creation, I recommend that
you take a look at How to Start / Make a Website: The Beginner's A-Z Guide
(http://www.thesitewizard.com/gettingstarted/startwebsite.shtml) found at
http://www.thesitewizard.com/gettingstarted/startwebsite.shtml
At the very least, you will need the following:
• Dreamweaver
Since this is a Dreamweaver CS4 tutorial, it goes without saying that you will need the
editor itself.
Note that this tutorial assumes that you are using Dreamweaver CS 4
(http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG) . If you have Dreamweaver
CS3, please read my Dreamweaver CS3 Tutorial
(http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml) series instead. While CS4
and CS3 are very similar, there are small differences (like new features in CS4 that are
not present in CS3), so it'll make your life easier if you use the tutorial specifically written
for the version that you have.
Those using earlier versions of Dreamweaver, like Dreamweaver 8, will need to upgrade
to the current version to use this tutorial. The earlier versions are missing key features that
will prevent you from completing either of the CS3 or CS4 tutorials.
• A Web Hosting Account
You will also need a web host for your site. For those new to web development, a web
host is (loosely speaking) a company which has computers that are permanently
connected to the Internet. After you have designed your web pages, you will need to
transfer them to your web host's computer (called a web server), so that the rest of the
world can read them. There are many web hosts around. If you don't already have one,
you can find a list of cheap web hosts
(http://www.thefreecountry.com/webhosting/budget1.shtml) on
http://www.thefreecountry.com/webhosting/budget1.shtml
Although not in the above list (since you don't need it to succesfully complete this tutorial), I
also recommend that you register your own domain name
(http://www.thesitewizard.com/archive/registerdomain.shtml) . A domain name is a name like
"thesitewizard.com". It is a means by which people can reach your website. While it's
possible for you to get by initially without your own domain, you will encounter innumerable
problems (http://www.thesitewizard.com/domain/website-without-domain-name.shtml) down the
road if you do so. However, since this tutorial is strictly devoted to designing (creating) and
publishing your website with Dreamweaver, I shall leave not delve further into this matter.
Instead, I will refer you to the Beginner's Guide
(http://www.thesitewizard.com/gettingstarted/startwebsite.shtml) mentioned above for this and all
the other non-design aspects of creating a website.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 3 of 15
How to Set Up Your Website with Dreamweaver CS4's
Site Manager
1. Start up Dreamweaver.
2. A window with a top half that looks something like the picture below (without the words
"thesitewizard.com Dreamweaver CS4 Tutorial
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml) " of course) will
appear. The actual appearance of the window will be slightly different depending on
whether you are using Mac OS X, Windows XP or Windows Vista.
Near the top of the window is a menu bar with the words "File Edit View Insert Modify
Format Commands Site Window Help". This menu bar allows you to access many of
Dreamweaver's features. We will be using this menu bar extensively in the course of the
tutorial.
3. To create a website that you can manage using Dreamweaver, the first thing you should
do is to invoke the Site Manager. To do this, click "Site" in the menu bar. When the dropdown menu appears, click the "New Site..." item on that menu.
Important note: in the interest of brevity, I shall refer to such a sequence of clicking the
"Site" menu, followed by clicking the "New Site..." item simply as "Site | New Site..."
4. A dialog box box will appear with a title bar that reads "Site Definition for Unnamed Site
2". The actual 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. You are about to change it
anyway.
If you were to look at the top of the dialog box, you will see two tabs: the "Basic" and the
"Advanced" tab. You should currently be using the "Basic" tab. If this is not true, click the
"Basic" tab to select it. If you don't know which is currently selected, click the "Basic" tab
to be sure.
In the main part of the dialog box, you should be able to see a field just under "What
would you like to name your site?" This is where you enter your website's name. If you're
not sure what to call your website at this point, and you have already registered your own
domain name (http://www.thesitewizard.com/archive/registerdomain.shtml) , simply enter your
domain name here. For example, if you have bought a domain called "example.com",
enter "example.com" (without the quotation marks) into the box. If you're creating a
company website, enter your company name instead. Don't worry too much about this
field: it's merely for your own personal reference in case you create many websites and
need to distinguish between them. The words typed here won't appear on your site.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 4 of 15
For the purpose of this tutorial, I will assume that you have typed "Example Company"
into the box. However, there's no need for you to use this name just because you're
following this tutorial. Use your site's real name.
Underneath your site's name is a field for you to enter the web address of your website,
following the question "What is the HTTP Address (URL) of your site?". If you have
bought the domain "example.com", enter your website address as
"http://www.example.com/" (without the quotes), unless your web host tells you
otherwise.
Once you've finished entering the above two fields, click the "Next" button at the bottom
of the window.
5. In the next screen that appears, accept the default "No, I do not want to use a server
technology" and click the "Next" button again.
6. The next window that appears lets you to control 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. You should always keep a copy of your website on
your own computer. If you don't know what to do here, just accept the default and click
"Next".
7. When the window with the question "How do you connect to your remote server?"
appears, click the down arrow in the drop-down box and select "None". You will change
this later when you publish your site, but for now, selecting "None" allows you to quickly
get started with your site with minimum fuss. Click the "Next" button.
8. You will then be presented with a "Site Definition" summary. Click "Done".
How to Create a Two Column Web Page with Header and
Footer in Dreamweaver CS4
Now that you have provided Dreamweaver with the basic information needed for it to
manage your website, you will now create your first web page.
For the purpose of this tutorial, we will create a two-column web page. By 2 columns, I mean
that the page will have two vertical columns. This is a popular layout among many websites
because it is both space-efficient and familiar to users (and as a result of that, user-friendly).
One of the columns is usually used to hold the site's logo and navigation menu while the
other column the main content. For example, if you were to look at any of
thesitewizard.com's article pages, like the one you're reading, you will see that the left
column contains the the navigation elements while the right column contains the article itself.
1. Click "File | New...". If you remember what I said earlier, this means to click the "File"
menu, followed by the "New..." item on the menu that appears. A window with the title
"New Document" will appear.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 5 of 15
2. In the Layout column of the window, locate the line that says "2 column liquid, left
sidebar, header and footer". Select that item by clicking it once.
3. Now glance at the rightmost side of the same window and look for the item "Layout
CSS". It should be somewhere near the bottom of the window. Click the drop-down box
and select "Create New File". This causes Dreamweaver to place information controlling
the appearance of your web page (called "CSS") in a separate file. We want this because
all the pages on your site will share the same basic layout, and having such information
contained in a single file saves disk space, bandwidth and speeds up the loading of your
web page if your visitors load multiple pages of your website.
4. When you've finished doing the above, click the "Create" button.
5. Dreamweaver will issue a dialog box with the title "Save Style Sheet File As". Accept the
default name and location by clicking the "Save" button.
6. Once you've done that, Dreamweaver will proceed to create a 2 column web page with
some dummy content typed in.
7. Dreamweaver CS4 displays a slightly different screen layout depending on how large
your monitor resolution is. If your screen resolution is large, Dreamweaver may start up in
what it calls the "Split" mode, that is, it may show the underlying "raw" code of your web
page in the top half of the window (the "Code" portion), and the visually pleasing version
(the "Design" portion) in the bottom half. If your screen is smaller, Dreamweaver will
simply start up in "Design" mode, where only the visually pleasing version is displayed.
To standardize the appearance of the Dreamweaver window, for the sake of this tutorial,
please click "View | Design" from the menu if you're in the "Split" mode. If you're not sure
which mode you're in, just click "View | Design" anyway; no harm will come from doing it.
This switches the layout to "Design" mode, where only your web page, as it appears in a
browser, is shown. Don't worry. If at any time, you feel nostalgic for the original "Split"
layout, just use "View | Code and Design" from the menu to get it back. Note, however,
that all the steps in this tutorial, as well as the screenshots, assume that you are in the
"Design" mode, so if you don't switch, you might get confused later when the screen
doesn't appear the way I describe it.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 6 of 15
Introduction to the Home Page
Before you proceed to replacing the "lorem ipsum dolor sit amet" text currently used as filler
material, it's important to understand the basic theory behind what you'll be doing.
This first page that you'll be designing will be your website's "Home" page. The home page
is the main page of your site. It is the page your visitors see when they go to your site by
simply typing your domain name (http://www.thesitewizard.com/archive/registerdomain.shtml) in
their browser. For example, if your domain name is "example.com", and your visitor types
"http://www.example.com/" into their browser, they will end up on your home page.
Since the home page functions almost like the front door of your website (or as close to a
front door as a website can have), it should contain some information about what your site is
about, as well as links to important pages (or sections) of your website. Some webmasters
also use this space to welcome their visitors and give a short description about what they
can hope to see on the site. For example, a company website that sells products or services
should have a home page that gives visitors an idea of its products and services, as well as
point visitors to individual product description pages where they can find more information
about the product and place an order. Even if your site is a personal website, you will still
want your main page to give visitors an idea of what to expect on your site, and to link to
other pages (or at least the main sections) on your site.
For this tutorial, I will supply example text for a fictitious company called "Example
Company", selling fictitious products. I strongly recommend that you use your own text
instead of slavishly copying my supplied dummy text. For example, if your company is called
"XYZ Inc", go ahead and use "XYZ Inc" in places where I use "Example Company".
Similarly, if you're making a personal website, and have named your website after you, such
as "Shakespeare's Website", substitute that name in places where I use "Example
Company". The same goes for the actual content.
How to Design the Home Page of Your Website in
Dreamweaver CS4
1. Let's take a look at the default two column web page generated by Dreamweaver. There
is a horizontal bar stretching across the top part of your page labelled "Header". This is
where you will place the visible name of your website. Under the header are two
columns. The narrow left column, called the "sidebar" in Dreamweaver, is where you will
eventually place your navigation menu. The wide right column, currently entitled "Main
Content" is where you will place the bulk of your web page's content.
2. Directly above "Header", in the part of the window that belongs to Dreamweaver rather
than your web page, you should be able to see a section that says "Title:" followed by a
field that currently contains "Untitled Document". This field is the text that the search
engines will show as being the title of your web page when it displays the results of a
search. It is also the text shown by a web browser in the title bar of the browser window
when it displays your page.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 7 of 15
Click somewhere in the word "Untitled", and use the delete or backspace key to remove
the existing text. In its place, type the name of your website. For example, if your site is
called "Example Company", replace "Untitled Document" with "Example Company".
Note that this title field is an internal field. The web browser does not display it in the
body (visible portion) of your web page. As mentioned above, the field is only shown in
the title bar of the browser window itself. If you're not sure what I'm talking about, look at
the browser window of this tutorial now. Don't use the scroll bar nor scroll to the top in
any way. Just glance upwards at the top edge of the browser window. It should have the
words "Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4
(thesitewizard.com)" or at least the first part of it. I placed those words into the title field
for this page when I created it. Although it doesn't show in the body of a web page, it is
still an integral part of the page, so you should not leave it set as "Untitled Document".
3. Now we move on to the visible portion of your web page. Begin by replacing the word
"Header" with the name of your website. As before, you can do this simply by clicking
somewhere in the word "Header". A blinking text cursor will appear. This text cursor
behaves exactly the way the cursor behaves in a normal word processing program like
Office or Word. You can move it with your arrow keys as well as use the DEL and
backspace keys to delete characters.
Use the delete or backspace key to remove the existing word and enter your site's name
instead. For example, replace "Header" with "Example Company" if that's the name of
your site.
4. Once you've figured out the above, it's a trivial matter to replace the "Main Content"
section of the web page with your real content. As before, click somewhere in the words
"Main Content", delete the existing text and replace with some appropriate content.
Once you're done with replacing the "Main Content" header, proceed to replace the
"Lorem ipsum dolor" (etc) gibberish. Just click somewhere in the top line, delete them,
and type your own words. Typing and editing of text in Dreamweaver works more or less
the same as it does under a wordprocessor. If you need to create new paragraphs, hit
the ENTER (Windows) or Return key (Mac).
The "H2 level heading" subtitle is there merely to show you that you can have subtitles in
your documents as well. Replace it, along with the text below with whatever you want.
If you are really at a loss as to what to type, you can use the following example text,
either literally or as a model. However, it's best to write something relevant to your
website so that you don't have to go back and re-edit it later.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 8 of 15
Welcome
Example Company deals with all manner of examples. We have
examples of literary works, pulp fiction, text books, movie
reviews, scripts, chairs, tables, household appliances, and so
on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site,
created with the help of thesitewizard.com's tutorial on
Dreamweaver. The tutorial teaches you how to create a basic but
fully-functional website which you can modify and augment to
suit your needs.
5. Don't change anything in the left column (sidebar). You will be adding a navigation menu
to this section in later chapters, so just leave it unchanged for now.
6. Scroll down to the bottom of the page and locate the horizontal bar labelled "Footer".
Replace the word "Footer" with anything you like. Many webmasters place a copyright
notice in this section. Very briefly, a copyright notice is simply a sentence like "Copyright
© 2008 by Christopher Heng". The copyright symbol
(http://www.thesitewizard.com/faqs/copyright-symbol.shtml) , ©, can be inserted by clicking
"Insert | HTML | Special Characters | Copyright" from the menu. For more information
about copyright, see my other article on Copyright Issues Relevant to Webmasters
(http://www.thesitewizard.com/general/copyright-issues.shtml) , at
http://www.thesitewizard.com/general/copyright-issues.shtml
7. Once you're satisfied with your web page, save it by clicking "File | Save As...". A dialog
box will appear. Type "index.html" (without the quotation marks) into the "File name" field
and click the "Save" button.
IMPORTANT: make sure that you type the name "index.html" exactly as I gave it, entirely
in small letters (lowercase) with no spaces in the word. Do not use any other name. Files
with the name "index.html" are regarded as special files by most web servers. Published
correctly, when a visitor accesses your website by just the domain name, like
"http://www.example.com/", the web server will automatically deliver to them the
"index.html" file in your site's main folder.
Introduction to Publishing Your First Web Page
Before we move on to polishing the page up so that it looks at least half-way decent, you will
need to publish the page to your web host
(http://www.thefreecountry.com/webhosting/budget1.shtml) . That is to say, you will now learn
how to transfer your web page and its associated files to your web host so that the page
becomes "live" on the Internet.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewiz... Page 9 of 15
Although you are probably embarrassed to do this at this point, because the page is
incomplete, there is actually no cause for worry. If you have not advertised your website's
address ("URL") to anyone, no one will ever know your site exists. As a result, this early
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. Neither will the
search engines even know your site exists. As you will discover over time, it's not that easy
to get visitors.
The main reason that we're publishing your page at this time is that you can get familiar with
all the major stages in the design of a web page: that is, creating a web page involves not
only crafting the page, but it also involves getting the page from your computer onto your
web host's computer. Once you get this hurdle out of the way, you will have mastered what
is one of the largest technical challenge a newcomer is likely to face. Don't let this scare you,
though; it's actually quite easy!
Note that you should not skip this step if you want to follow this Dreamweaver CS4 tutorial
series (http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml) . All my
subsequent chapters will assume that you have already done this step. If you miss out this
step, some of the things described in the next few chapters may not work the way they are
supposed to.
How to Publish Your Web Page Using Dreamweaver
1. Start up the Site Manager again. This can be done by clicking "Site | Manage Sites..."
from the menu. A dialog box entitled "Manage Sites" should open, with your website's
name highlighted in the box in the main part of the window. If it's not highlighted, click the
name to highlight it. Then click the "Edit..." button.
2. The Site Manager wizard that you encountered earlier in this chapter will pop up. Click
the "Next" button until you arrive at the screen with the message "How do you connect to
your remote server?". In the first part of this tutorial, you selected "None" for this answer.
You will now have to change this to the actual values that you will need in order to
publish your web page.
In the drop down box for the question, select "FTP". When you do so, the blank section
underneath will be populated with a number of additional questions.
3. Essentially, you will need to enter the information that your web host
(http://www.thefreecountry.com/webhosting/budget1.shtml) provided you when you first signed
up for a web hosting account. Web hosts typically send you a lengthy list 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. This act of transferring
your files from your computer to your web host's computer is variously known as
"uploading" or "publishing".
If your web host sent you the information in an email message, either print the message
out or open it in another window so that you can refer to it. Personally, I think opening it
in another window is better because you can then cut and paste the necessary
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesite...
Page 10 of 15
information from one window to another and avoid typing errors. However, everyone has
their own way of working, so do what suits you best.
4. Put the FTP address that your web host gave you into the answer field of the "What is
the hostname or FTP address of your Web Server?" question. If you have your own
domain and are hosted on a commercial web host
(http://www.thefreecountry.com/webhosting/budget1.shtml) , this address is typically your
domain name prefixed by "ftp". For example, if your domain is "example.com", many web
hosts will set up your FTP address to be "ftp.example.com". Check the email you
received from your web host for this information, or ask them if you cannot find the
details. If the address is indeed "ftp.example.com", enter that in the box here.
(Note: not all web hosts follow the "ftp.example.com" convention. Some web hosts ask
you to simply use your domain name (ie, "example.com") for the FTP server. Others
provide you with a hostname that is totally unrelated to your own domain. Make sure you
really read the information given by your web host instead of randomly guessing a value
to enter here.)
5. The next question from Dreamweaver that you'll need to answer is "What folder on the
server do you want to store your files in?". Basically, you cannot simply upload (publish)
your files into any folder you like on the web server and hope that they end up in the
correct directory for your website. Some web hosts tell you that you need to place your
web pages in a folder called "www". Others require you to publish them into a folder
called "public_html". Still others say that you should place them 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.
6. Type your FTP user name into the "What is your FTP login?" field. As before, this
information has to be supplied by your web host.
7. Enter your FTP password into the "What is your FTP password?" field. Obtain this
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 a page, leave the "Save" checkbox
activated (it automatically becomes checked when you type your password). If you are
sharing your computer with others, and don't want Dreamweaver to save your password,
click the check mark to uncheck it.
8. If your web host tells you that the information you entered above is for SFTP or "Secure
FTP", click the "Use Secure FTP (SFTP)" checkbox. Otherwise leave it blank. If you don't
know what to do, and your web host didn't say anything about it, leave it unchecked.
(Note that if you check the secure FTP option, make sure you re-look at the information
provided by your web host to make sure that the default folder to publish your files is still
the same. Some web hosts log you in to a different folder when you connect by SFTP
from the one you get when you connect by FTP. As such, you may have to adjust the
folder name to account for this if you use the SFTP option. In general, if you are
confused or not sure, just leave the box unchecked to use normal FTP. You can always
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesite...
Page 11 of 15
experiment with this option in the future when you've become more experienced and
confident with publishing using Dreamweaver. For now, let's just get everything working
first.)
9. Click the "Test Connection" button to check that you have entered all the information
correctly.
Note: If you use Windows Vista, the Windows firewall may issue a message asking
you whether to block or unblock the connection. Be sure to click the "Unblock" button,
or you'll be blocking FTP connections for Dreamweaver. By default, FTP connections
are two-way, requiring the server you're connecting to to make a connection back to
you, hence the warning by the firewall. This is normal, so don't panic when you get that
message from Vista. The interference by the firewall may also cause your first test in
Dreamweaver to fail, leading Dreamweaver to issue a dialog box telling you to use
Passive connections. Just click OK to that message, and click the "Test Connection"
again.
If the "Test Connection" button fails, Dreamweaver will display a dialog box asking you to
try connecting with Passive FTP. To do this, look at the top of the dialog box to locate the
"Advanced" tab. Click it. Somewhere in the middle of the page is a checkbox for "Use
passive FTP". Click the box to activate it. Then click the "Basic" tab at the top of the
dialog box again, to return you to the wizard view. Finally, click the "Test Connection"
button again.
If the test continues to fail, it is possible that you've entered some information incorrectly
earlier. Recheck everything. If in doubt, contact your web host and ask them what
information you need to enter for each field. (Only your web host has such information.)
If the test succeeds, click the "Next" button until you get to the final Summary page again.
Then click the "Done" button. Do not click the Cancel button for a shortcut out of this
dialog box or you may have to re-enter everything you typed in earlier.
10. Click "Done" again to dismiss the "Manage Sites" dialog box.
11. Now that you've properly configured Dreamweaver for your site, it's time to finally publish
your web page. To do this, click "Site | Put". Dreamweaver will issue a variety of
messages to let you know the progress of the upload.
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 Your Web Page
Now that you have published (uploaded) your web page and its associated files to your site,
you will need to test it by loading it in a web browser. This will let you know whether you
have made any mistakes when entering your details earlier (such as uploading the files to
the wrong directory).
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesite...
Page 12 of 15
Start up your web browser, and type the web address ("URL") of your site. This should be
the same address that you typed into the "HTTP address" field earlier in Dreamweaver. For
example, type "http://www.example.com/" if that is your URL.
If you have entered the FTP details correctly, you should see the page you designed earlier
in the browser.
If you get an error like "No DNS for www.example.com" or "Domain not found", it probably
means that your domain name has not yet propagated to your Internet provider ("ISP"). Put
simply, this means that you probably only just bought your domain name
(http://www.thesitewizard.com/archive/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.
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?". Such
errors mean that the web server did not find your web page in the location it was supposed
to be in.
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
have created and uploaded your first web page using Dreamweaver CS4. It may be a
rudimentary page (for now) 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 CS4 tutorial
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-2.shtml) , you will learn
how to spruce up this basic page by adding pictures and a logo to your website
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-2.shtml) .
Copyright © 2008-2009 by Christopher Heng. All rights reserved.
Get more free tips and articles like this
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml) , on web design,
promotion, revenue and scripting, from http://www.thesitewizard.com/
(http://www.thesitewizard.com/) .
If you find this article useful, please consider making a donation.
You are here:
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesite...
Page 13 of 15
Top (http://www.thesitewizard.com/) » Getting Started with Your Website
(http://www.thesitewizard.com/gettingstarted/index.shtml) »
How to Create / Make a Website: The Beginner's A-Z Guide
(http://www.thesitewizard.com/gettingstarted/startwebsite.shtml) » List of All Dreamweaver
Tutorials (http://www.thesitewizard.com/dreamweaver/index.shtml) »
• Chapter 1: How to Create a Website with Dreamweaver CS4
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml)
• Chapter 2: How to Add Images to Your Website in Dreamweaver CS4
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-2.shtml)
• Chapter 3: How to Change Font Typefaces, Weight, Style, Colour and Sizes in
Dreamweaver CS4 (http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial3.shtml)
• Chapter 4: How to Change the Background of Your Website in Dreamweaver CS4
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-4.shtml)
• Chapter 5: How to Make Pictures and Text into Clickable Links using Dreamweaver
CS4 (http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-5.shtml)
• Chapter 6: How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS4
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-6.shtml)
• Chapter 7: How to Use Dreamweaver CS4's Templates to Manage and Auto-Update
Multiple Pages on Your Website (http://www.thesitewizard.com/gettingstarted/dreamweavercs4-tutorial-7.shtml)
• Chapter 8: How to Add a Feedback Form to Your Website with Dreamweaver CS4
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-8.shtml)
Get Adobe Dreamweaver CS4 (http://www.jdoqocy.com/a6106wktqks7DB8CHB798CEHDBG)
thesitewizard™ News Feed (RSS Site
Feed)
(http://www.thesitewizard.com/thesitewizard.xml)
Do you find this article useful? You can learn of new articles and scripts that are published
on thesitewizard.com (http://www.thesitewizard.com/) by subscribing to the RSS feed. Simply
point your RSS feed reader or a browser that supports RSS feeds at
http://www.thesitewizard.com/thesitewizard.xml
(http://www.thesitewizard.com/thesitewizard.xml) . You can read more about how to subscribe to
RSS site feeds (http://www.thesitewizard.com/faqs/howtoreadsitefeeds.shtml) from my RSS FAQ
(http://www.thesitewizard.com/faqs/howtoreadsitefeeds.shtml) .
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 (http://www.thesitewizard.com/feedback.php) .
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesite...
Page 14 of 15
Related Pages
• How Much Does It Cost to Set Up a Website?
(http://www.thesitewizard.com/gettingstarted/cost-setting-up-website.shtml)
• Important Precautions to Take When Buying a Domain Name
(http://www.thesitewizard.com/gettingstarted/precautions-to-take-when-buying-domainnames.shtml)
• How to Accept Credit Cards on Your Website
(http://www.thesitewizard.com/archive/creditcards.shtml)
• The Fine Print in Web Hosting: Resource Usage Limits
(http://www.thesitewizard.com/webhosting/fine-print-resource-usage-limits.shtml)
• The Myth of "Unlimited" in Web Hosting (http://www.thesitewizard.com/webhosting/unlimitedspace-bandwidth.shtml)
• Should I Use a Temporary Domain Name Till My Preferred Domain Becomes Available?
(http://www.thesitewizard.com/domain/temporary-domain-name.shtml)
• Which Web Host Do You Recommend? (FAQ)
(http://www.thesitewizard.com/archive/webhosting.shtml)
• Should You Use Cloaked Domain Redirection to Point to Your Website?
(http://www.thesitewizard.com/sitepromotion/cloaked-domain-redirection-issues.shtml)
New Pages
• How to Put a Clickable Email Address on Your Web Page Using Dreamweaver
(http://www.thesitewizard.com/dreamweaver/clickable-email-address.shtml)
• How to Point a Domain Name to Your Website (Or What to Do After Buying Your Domain
Name) (http://www.thesitewizard.com/domain/point-domain-name-website.shtml)
• What Does It Mean to Park a Domain Name? Domain Name Parking Explained
(http://www.thesitewizard.com/domain/domain-name-parking-explained.shtml)
• How to Install PrestaShop Shopping Cart on Your Website
(http://www.thesitewizard.com/revenue/prestashop-shopping-cart-tutorial.shtml)
• How to Make Your Links Change Colour When the Mouse Hovers Over It Using
Dreamweaver: Creating Mouseover / Rollover Effects
(http://www.thesitewizard.com/dreamweaver/mouseover-rollover-effect-dreamweaver.shtml)
• Will I Have to Continue to Pay a Fee to Keep My Domain Name After I Buy It?
(http://www.thesitewizard.com/domain/renewing-domain-name.shtml)
• How to Delete a Web Page from Your Website: Removing an Already Uploaded File
(http://www.thesitewizard.com/general/remove-uploaded-file.shtml)
• What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed
Layouts? (http://www.thesitewizard.com/webdesign/liquid-elastic-fixed-relative-layout.shtml)
• How to Upload and Link to a PDF File (or PDF Ebook) in KompoZer and Nvu
(http://www.thesitewizard.com/faqs/link-pdf-kompozer-nvu.shtml)
• What is HTML, CSS, JavaScript, PHP and Perl? Do I Need to Learn Them to Create a
Website? (http://www.thesitewizard.com/html-tutorial/what-is-html.shtml)
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesite...
Page 15 of 15
Popular Pages
• How to Make / Create Your Own Website: The Beginner's A-Z Guide
(http://www.thesitewizard.com/gettingstarted/startwebsite.shtml)
• Tips on Choosing a Good Domain Name
(http://www.thesitewizard.com/archive/domainname.shtml)
• How to Create a Search Engine Friendly Website
(http://www.thesitewizard.com/sitepromotion/search-engine-friendly.shtml)
• How to Create a Website with Dreamweaver CS4 (Dreamweaver Tutorial)
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml)
• How to Design and Publish Your Website with KompoZer (free WYSIWYG web editor)
(http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml)
• Free Customized Feedback Form Wizard (PHP / Perl Script)
(http://www.thesitewizard.com/wizards/feedbackform.shtml)
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.
<a
href="http://www.thesitewizard.com/gettings
tarted/dreamweaver-cs4-tutorial-1.shtml"
target="_top">Dreamweaver CS4 Tutorial:
How to Create a Website with Dreamweaver
It will appear on your page as:
Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4
(http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml)
Copyright © 2008-2009 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
Last updated: 2 November 2009.
http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml
11/28/2009