Dreamweaver CS5 Tutorial: How to Design a

Website with Dreamweaver CS5

Chapter 1: Build and Create a Site with
Dreamweaver CS5

Dreamweaver CS5 Tutorial: How to Design a Website with

Dreamweaver CS5
By ODUMBO FRANCIS .O.

Adobe Dreamweaver CS5 is a computer program that you can use to create and maintain
a website. It lets you design websites visually on your computer, almost in the same way
you would use a wordprocessor like Microsoft Word or Office. It combines ease-of-use
with power, making it a favourite (or "favorite" if you use US English) among both new
webmasters as well as seasoned professionals.

Overall Goals of This Tutorial Series

This tutorial series guides you through the process of creating a complete, fully
functional, multi-page website using Dreamweaver CS5. Your site will have a home
page, a feedback form, an About Us page and a Site Map. In the process of creating this
site, you will learn how to create pages with multiple columns, add pictures and text,
create links, use different font sizes, customise the colours, add a menu bar, update the
design on multiple web pages in an easy way, etc.

As a result, not only will you have a working site at the end of this series, you will also
have gained the skills and knowledge to create, design and publish any other website you
wish.

Goal of This Chapter

In this chapter, you will create a basic two-column web page and put it on the Internet.
By the end of the chapter, you will be viewing that web page on the Internet using your
web browser.
Important: this tutorial was written as a hands-on tutorial. To benefit from it, or to even
understand it, you will need to actually perform the steps as I describe them. The
practical nature of this guide makes it difficult to follow if you're not doing the things
mentioned.

What You Will Need

At the very least, you will need the following:
Dreamweaver

Since this is a Dreamweaver tutorial, it stands to reason that you will need the
aforementioned web editor itself.

Note: this tutorial series assumes that you are using the CS5 version of Dreamweaver. If
you are using an earlier version, please go to the tutorial series for that version instead,
such as either the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial.
Although the CS3, CS4 and CS5 versions of Dreamweaver have many similarities, there
are some differences between them (especially between CS5 and earlier versions), so
you'll have an easier time if you simply read the tutorial specifically written for that
version.

Those using versions of Dreamweaver prior to CS3, such as Dreamweaver 8, will have to
upgrade to the current version to use this tutorial. The earlier versions lack certain
features used in the three tutorial series.

A Web Hosting Account

You will be placing your website on the Internet from this chapter onwards (yes, from
chapter one). For this to work, you will need a web host. A web host is (loosely speaking)
a company that has computers that are permanently connected to the Internet. After
you've finished designing your web pages, you will need to transfer them to your web
host's computer (called a "web server"), so that it can be seen by the rest of the world.
There are many web hosts around. If you don't already have one, you can find a list of
cheap web hosts at http://www.thefreecountry.com/webhosting/budget1.shtml

Note that I've omitted a number of important things from the above list, since you can
find such information from the Beginner's A-Z Guide mentioned above. Most crucially,
before you start, you should register your own domain name for reasons given in my
article on Is it Possible to Create a Website Without Buying a Domain Name? The High
Price of "Free"..

Setting Up Your Website in Dreamweaver's Site

Manager

Before you begin designing the appearance of your web page itself, you'll need to give
Dreamweaver some basic information about your website. This is done using its Site
Manager.

Start up Dreamweaver.

The Dreamweaver web editor will appear, the top half of which should appear something
like the picture below. The exact appearance of Dreamweaver on your computer will be

slightly different from my picture depending on how big your computer monitor is, and
whether you're running Windows 7, Vista, XP or Mac OS X. (And, of course, the words,
"thesitewizard.com Dreamweaver CS5 Tutorial" won't appear in your Dreamweaver
window either.)

Near the top of the window, you should be able to see a line of text that reads "File Edit
View Insert Modify Format Commands Site Window Help". This is the Dreamweaver
menu bar, and each word on that menu bar is a clickable item that leads to other menus.
We will be using this menu extensively in the course of this tutorial. The menu gives you
access to many of Dreamweaver's facilities.

Click the word "Site" on the menu bar. A drop-down menu will appear. Click the "New
Site..." item on that menu.
Important: from now onwards, in the interest of brevity, I shall refer to such a sequence
of clicking on the "Site" menu followed by clicking the "New Site..." menu item as "Site |
New Site...". That is, if I say click "File | Close" it means to click the "File" menu, and
when a menu appears, click the "Close" item on it. (This is just an illustration, do not
actually click the File menu at this time.)

A dialog box will appear. The dialog box should have a title like "Site Setup for
Unnamed Site 2". The actual number that follows the words "Unnamed Site" may be
different in your system, depending on whether you've ever used Dreamweaver on your
computer before. In any case, the number is unimportant. You're about to change the
entire text "Unnamed Site 2" to the name of your website anyway.

In the dialog box itself, you should see two fields, one labelled "Site Name" and another
"Local Site Folder".

Replace the default value of "Unnamed Site 2" in the "Site Name" field with the name of
your website. The name of your website can be any name you want. If you have bought
your own domain name, one way is to enter that domain into this field. For example, if
you have registered a domain called "example.com", simply type "example.com"
(without the quotes) into the field, replacing the words "Unnamed Site 2". Alternatively,
if you're creating a company website, you can type your company's name into this field.
For example, if your company is called "Example Company", you can enter "Example
Company" into that space.

The content of the "Site Name" field is for your own reference only. It is not actually
displayed publicly on your website, so you don't need to spend too much time coming up
with a perfect name to use here. It's there in case you create many different websites
using Dreamweaver and need a way to distinguish between them. For the sake of your
own sanity, I recommend that you do not leave it as "Untitled Site 2" but give it some
sort of informative and descriptive name. Otherwise, in the distant future, if and when
you have 100 sites, you'll be pulling your hair out trying to figure out which name
belongs to which website.

The "Local Site Folder" field tells Dreamweaver where it should save a copy of the files
you create. This is a location on your own computer. On Windows systems, if this is the
first time you're using Dreamweaver, it gives a default folder name of "Unnamed Site 2"
somewhere in your Documents folder. For example, if you're using Windows Vista or
Windows 7, you might get a suggested name like
"c:\Users\christopherheng\Documents\Unnamed Site 2\". To change the folder to some
other location, click the folder icon next to the field, and select a different folder.
Alternatively, if you don't mind the default location, but just don't like the "Unnamed Site
2" portion, simply click somewhere in the field, move your cursor to the "Unnamed Site
2" portion and replace it with your site name (eg, "example.com"). Be careful not to
overwrite any other part of the text; for instance, don't delete any of the backslashes ("\")
unless you know what you're doing.
If the above paragraph appears too complicated, and you feel panic rising just trying to
understand what I wrote, just leave everything at its default setting. While it's good to
have a descriptive folder name, so that you can easily locate your files in the future, it's
too minor a matter to be worth getting stuck over.

When you're satisfied with your changes, click the "Save" button at the bottom of the
"Site Setup" dialog box. The dialog box will disappear, and you'll be returned to the main
Dreamweaver window. You are now ready to design your first web page.

How to Create a Two Column Web Page with

Dreamweaver CS5

Different websites have different layouts. Some, like the Feedback Form Demo site have
all their content in a single column. Others, like thesitewizard.com's article pages, have a
two column layout. If you don't know what I mean, look at this very article that you're
reading. Notice that the leftmost column of the page contains thesitewizard.com's logo (at
the top of the page) and its navigation menu. The right column holds the actual article
text itself. Websites can of course have more than 2 columns: for example, at the time
this was written, I use a 3 column layout for my Site Map.

For the purpose of this tutorial, you will be creating a 2 column web page. The two
column format is a very popular layout among webmasters because it is both space
efficient and familiar to internet users. A layout that is familiar to users tends to be
perceived as user-friendly, since its familiarity means that users will know how to
navigate a website with that layout. It's always important to strive to make your website
as user-friendly as possible, so that your visitors actually know how to use your site.

Click "File | New...". If you remember what I mentioned earlier, this means to click the
"File" menu, followed by the "New..." item in the menu that appears.

A dialog box with a title "New Document" will appear.

In the Layout column, look for the line that says "2 column liquid, left sidebar, header
and footer" (see picture above). Click that line once.

On the rightmost side of the window, look for the field labelled "Layout CSS" (see
picture above). Click the drop down arrow in the box next to that label and select "Create
New File".

This causes Dreamweaver to save the information controlling the appearance of your
website (called "CSS") in a separate file. Since all the pages on your website will share a
common layout, placing all the information about the layout into a single file avoids
needless duplication of information, saving you disk space and bandwidth, and speeding
up the loading of your web pages if your users visit multiple pages on your website.

Click the "Create" button in the bottom right of the dialog box.

A new dialog box, entitled "Save Style Sheet File As", will appear. Click the "Save"
button in that dialog box.

By default, Dreamweaver creates your web page in what is known as the "Split" mode. In
this mode, your web page as it appears in a real web browser is shown on the right side.
This visually pleasing portion is called the "Design" mode in Dreamweaver. The left side
shows the underlying "raw" code for your website. This left side is called the "Code"
mode in Dreamweaver, and the code it shows is called HTML.

If you do not see this "Split" mode, but only see the visually pleasing version of your
website (the "Design" mode), or just the seemingly gibberish text of the "Code" mode,
don't worry. We are about to standardise the display mode for everyone.
No matter what you see on the screen, whether it's the "Split" mode I described earlier or
some other mode, click "View | Design" from the menu. The cryptic text of the "Code"
mode split screen should disappear, and the entire window should now be filled with the
your web page as it appears in a web browser (the "Design" portion). Note that you must
take this step if you wish to follow this tutorial series, since all the steps in this tutorial, as
well as the screenshots assume that you are working in Design mode. If you do not
switch to Design mode, you might get confused later when Dreamweaver does not
behave the way I describe.

Note: if, in the future, when you've completed this tutorial series, and you want to restore
the "Split" mode, you can. Just click "View | Code and Design" from the menu. The
screen layout will automatically revert to what you saw earlier. So fear not. You can
easily restore everything back to its original condition. But for now, please switch to the
Design mode.

Introduction to the Home Page: What Should I Put on

My Home Page?

Before we continue to replace the default text on the page with your real web page
content, it's important to understand the basic principles behind what you'll be doing.

The first page that you'll be designing is your website's "home page". The home page of a
website is basically its main page. It is the page that your visitors arrive at if they simply
type the domain name of your site. For example, if you type "thesitewizard.com" into
your browser, you will end up at my home page.

In terms of function, the home page of a website is similar to a combination of the front
cover of a magazine and its contents page. Like the front cover of a magazine, your home
page should give your visitors an idea of the sort of things that can be found on your site.
And like a magazine's "Contents" page, it should provide links to important pages (or
sections) on your site so that your visitors can get to whatever they're looking for on your
website.

So what does this mean in practical terms? If your website is one that sells products and
services, you may want your home page to mention your most important products and
services, as well as link to individual product description pages where visitors can find
more information and place an order. Even if you are just creating a personal website, or
a hobby website, you should still try to give your visitors an idea of the sort of things they
can expect to find on your website.
How to Design Your Home Page in Dreamweaver CS5

Let's familiarise ourselves with the default page that Dreamweaver has created for you.
The web page is currently filled with some placeholder text that you will be replacing
with your own content. If the default text looks suspiciously like instructions written in
technical jargon, it's because it really is a bunch of technical instructions. But you needn't
bother trying to decipher it. The parts that are relevant to you will be translated into plain
English in this Dreamweaver CS5 tutorial series.

Vertically, the page is divided into 2 columns. The left column contains the beginnings of
a navigation menu, something similar to what you see on thesitewizard.com. The right
column is where the bulk of your real content should go, and you'll be replacing the
existing placeholder text later in this chapter. At present, it contains the large-print title,
"Instructions", as well as paragraphs of text interspersed with smaller subtitles.

At the very top of the page is a small rectange labelled "Insert_logo (20% x 90)". Even
though it may not be obvious, this rectangle is actually sitting in the corner of a
horizontal band cutting across both columns of your web page. The entire top horizontal
band is meant for your logo, and you will be working on it in Chapter 2 of this tutorial.

Scroll to the bottom of the page. You can do this either by hitting the PgDn key on your
keyboard or by dragging the scroll bar on the right of your web page with your mouse.
Notice that there's another horizontal band spanning the width of your web page at the
bottom. This is the footer. You will be customising the text of this footer later in this
chapter.

Directly above your web page, in the part of the window that belongs to the
Dreamweaver program rather than your page, look for the word "Title" followed by a
field that currently contains "Untitled Document" (see picture below).

Click your mouse cursor somewhere in the words "Untitled Document", then use the
Delete or Backspace keys on your keyboard to remove the existing text. Replace it with
the name of your website. For instance, if your website is called "XYZ Company", type
"XYZ Company" into that field.

This "title" field is an internal field on your web page. It is not displayed in the body
(visible portion) of your web page. It is shown only in the title bar of the web browser
window itself. If you're not sure what I'm talking about, look at the top of your browser
window now. (Yes, this very moment.) Don't use the scroll bar and don't scroll to the top
of this page in any way. Just glance upwards to the top edge of your web browser. You
should be able to see the words "Dreamweaver CS5 Tutorial: How to Design a Website
with Dreamweaver CS5 (thesitewizard.com)", or at least the first part of it, in the top
frame of your browser window. I placed those words into the Title field of this particular
web page when I created it.

Although the "Title" field is just an internal field, it is an important part of a web page.
Search engines use the content of this field to list your website in search engine results. If
you leave your title set at "Untitled Document", your web page will appear in search
engine results as "Untitled Document" rather than "XYZ Company" or whatever name
you've given your website.

Now that you've finished replacing the title field, you can start working on the main
content of your web page. Typing text in a Dreamweaver window is similar to typing in
any wordprocessor. If you have ever used Microsoft Word or any other word processor,
the process is the same.

First replace the visible heading "Instructions" with the name of your website or some
other appropriate text, such as "About XYZ Company" or "Welcome to Shakespeare's
Website". To do this, click your mouse cursor somewhere in the word "Instructions" to
place the text cursor on the page. You can then use your arrow keys to move the cursor
around, the Delete and Backspace keys to remove existing text, and all the other
characters on your keyboard to insert text.

After that, move your cursor to the paragraphs and sub-headings below (using the arrow
keys on your keyboard or by clicking your mouse on the spot you want to change) and
replace them with the content you want on your home page. Bear in mind the things I
mentioned about what your home page should include in the section above. If you're at a
total loss as to what to write, take a look at the sample block of text below belonging to a
fictitious company and use that as a model. Obviously, you won't be able to use it
literally (since your company is unlikely to sell the same things), but it can be adapted to
suit your own business. If you're experiencing writer's block, many people find it helpful
to just type something, even if it sounds utterly mundane. Once you have something
down, you can always go back and refine it as the days go by.
Welcome to Example Co.

Example Co. is the world's leading business dealing with all manner of examples. We
have examples of famous literature, not-so-famous pulp fiction, reference books, movie
and television DVDs, office furniture, and so on. Our selection of examples is so
extensive that we even have examples of examples.
Featured Products

Dreamweaver Site: This is an example of a Dreamweaver site, created using

thesitewizard.com's tutorial on Dreamweaver. The tutorial shows you how to create a
basic but fully-functional website which you can modify and augment to suit your needs.

Mechanical Typewriter: Return to the glorious days of old, where documents have to be
typed on paper, and where, if you want multiple copies, you need carbon paper (not
included). No electricity or batteries are needed. This machine is powered by your
fingers.

Don't worry about changing fonts, making words bigger or smaller, underlining words,
putting text in italics or bold, making links, inserting pictures, making subtitles, and
things like that. For now, just concentrate on getting your words down. Polishing your
page to make it look nicer will be taught in the next few chapters.

Don't change anything in the left column and ignore the fact that the left and right
columns have uneven heights. The left column will be dealt with in its own chapter since
it relies on you having additional knowledge before you can work on it.

When you've finished with your content, scroll down to the bottom of the page to the
horizontal bar at the bottom, which Dreamweaver calls the footer. Move your mouse over
any of the words in the footer and click it once to place your text cursor there. Replace
the existing text with whatever you wish. Many webmasters place a copyright notice in
this section. A copyright notice is simply a sentence like "Copyright © 2010 by
Christopher Heng". The copyright symbol, ©, can be inserted by clicking "Insert | HTML
| Special Characters | Copyright" from the menu. For more information about copyright,
please read the article Copyright Issues Relevant to Webmasters, at
http://www.thesitewizard.com/general/copyright-issues.shtml

Once you're satisfied with the changes you've made (so far), save the page by clicking
"File | Save As..." from the menu. A dialog box, with a title "Save As", will appear. Type
"index.html" (without the quotation marks) into the "File name" field and click the
"Save" button.

IMPORTANT: do not use any name other than "index.html" as your filename. Make sure
you type it exactly as I mentioned, completely in small letters (lowercase) with no spaces
in the word. Do not use any other name. The name "Index.html" is wrong, as is the name
"INDEX.HTML". Use only "index.html".

Additional information: the name "index.html" is a special name that is recognised by

most web servers. If it is published to the right location, it will be sent to your visitors if
they simply type your domain name (eg, "http://www.example.com/") in their browser.
This is the behaviour you want, since you're designing your home page.
How to Publish / Upload Your Web Page with Dreamweaver CS5

You are now going to publish your page to your web host. That is to say, you are about to
transfer your web page and its associated files to your web host's computer so that it can
be viewed on the Internet.

I know that some of you are probably reeling back in horror at the thought, since the page
is far from finished. But there is really no cause for concern here. Since your website is
new, and you have not advertised your website's address (called "URL" in webmaster
lingo) to anyone, no one will even know your website exists. Not even the search
engines. As a result, the only one who will see your unfinished web page is you. As you
will discover in time, it's not that easy to get visitors.

The main reason that we're publishing your page at this time is to allow you to get
familiar with all the major stages of the design of a web page: that is, creating a web page
involves not only crafting the page, but 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!

Another important reason for publishing now is to let you test your design in a web
browser when your page is on the Internet. Even though you can always test your site on
your own computer, it's not the same. It's possible to make mistakes that don't show when
your page is on your computer, but appear only when it is on the Internet. Testing your
page on the Internet after every stage allows you to catch those errors early. Otherwise,
when the mistakes accumulate, it may become difficult for you (as a newcomer) to figure
out where it went wrong.

Please do not skip this step if you're following this tutorial series. I will assume you have
done this in future chapters, and you may find it difficult to follow what I'm saying there
if you skip this.

Click the "Site | Manage Sites..." menu. A dialog box, "Manage Sites" will appear.

Click the "Edit..." button. This will open up a dialog box "Site Setup for [your site
name]" where "[your site name]" will be replaced with whatever name you entered when
you first set up your site. The contents of the dialog box should also be familiar from
your initial setup.

Look at the left column of the dialog box. The "Site" line should be currently selected.
Click the "Server" line to select it. When you do so, the contents of the right side of the
dialog box will change.

On the right column of the dialog box, look for a "+" (plus sign). It should be just under
the blank list box in the middle of that column. Click it. An untitled dialog box will
appear.
There should be two tabs at the top of the dialog box, "Basic" and "Advanced". To make
sure that you're on the correct tab, click the "Basic" tab.

Enter anything you like into the "Server Name" field. This field is merely for your own
information, so it doesn't really matter what you enter here. One simple way is to enter
something like "example.com's server". The name you enter here will be displayed in the
blank list box you saw earlier, and you can always change it later if you find you prefer
something else.

At this point, you will need the information that your web host furnished you when you
signed up for a web hosting account. Web hosts usually send you a lengthy list of details
about your account when you first sign up. Among these is something known as your
"FTP address" (sometimes called "FTP hostname" or "FTP server" by web hosts). FTP
stands for "File Transfer Protocol". It is the usual method by which you transfer your web
page from your computer to your web host's computer. This act of transferring your files
from your system to your web host's system is 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 on your computer so that you can refer to it. I personally
prefer to open it in another window so that I can simply cut and paste the information
from that window into Dreamweaver, thus avoiding typing errors. However, do whatever
suits you best.

Put the FTP address that your web host gave you into the field for "FTP Address". If you
have your own domain name, and you're hosted on a commercial web host, this address is
typically your domain name prefixed with "ftp". For example, if your domain name 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 information anywhere. If the address is indeed "ftp.example.com" enter
that into the "FTP Address" field.

(Note that you cannot just randomly guess your FTP address and enter it here. It has to be
what your web host has supplied to you. Not all web hosts use the "ftp.example.com"
form. Some just ask you to enter your domain name ("example.com") while others supply
you a name completely unrelated to your domain name. If you are not sure what the FTP
address for your site is, ask your web host. Guesswork is pointless.)

Leave the port field set at the default of "21" unless your web host has instructed you to
use a different port address. If your web host didn't mention any port number, leave the
field alone.

Enter your FTP user name and password into the "Username" and "Password" fields
respectively. Obtain this information from your web host if you don't already know it. If
you don't want to keep entering your password every time you publish a page, leave the
checkbox beside "Save" activated (a tick automatically appears in that box when you type
your password). If you are sharing your computer with others, and don't want
Dreamweaver to save your password, click the box containing the tick to uncheck it. Note
that I will assume that you have left the box checked in this tutorial, since that is what the
majority of thesitewizard.com's Dreamweaver readers do.

To make sure that you've entered your username, password and FTP address correctly,
click the "Test" button under the password field. If you are successful, you will get a
message saying "Dreamweaver connected to your Web server successfully". Click the
"OK" button to dismiss it.

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" button again.

If the "Test" button fails, Dreamweaver will pop up a message advising you to activate
either the "Use Passive FTP" or "Use IPv6 transfer mode" options. To do this, click the
triangle beside "More Options". You can find the words "More Options" just above the
"Help", "Save" and "Cancel" buttons near the bottom of the dialog box. The More
Options section will be expanded, revealing a section where you can further configure
your FTP settings. Click the "Use Passive FTP" checkbox to activate it and test again. In
most cases, setting the "Passive FTP" mode is enough to make the test succeed.

If the test continues to fail even after you've checked the "Use Passive FTP" box, it's
possible that you've entered your FTP address, username or password wrongly. To make
sure that those are typed in correctly, do not manually type them, but copy and paste them
from the information supplied by your web host.

If, having done that, you still find that you cannot connect, look at your FTP address
field. Does it contain your domain name or some modification of your domain (like
"ftp.example.com" where "example.com" is your own domain name? If so, and you've
only just bought your domain name within the last 2 days, it's possible that your domain
name has not yet propagated throughout the Internet. What this means is that when a new
domain name is bought, it takes a while (usually about 2 days) before it is recognised
throughout the world. In such a case, your only recourse is to wait a day or so before
testing again. There's nothing anyone can do to make it happen faster.

You can also ask your web host for help in checking your settings (in case you actually
got your FTP address, username or password wrong). But remember that if the problem
lies with a new domain name that has not propagated, you just have to be patient and
wait. There's nothing your web host can do to help you in such a case.
The next field that you have to complete is the "Root Directory" field. This is needed
because you can't simply publish your web page to any folder you want on the web
server, and expect it to appear on the Internet. Web hosts usually configure their
computers so that only files placed in specific folders are considered as part of your
website. This is needed, otherwise anyone on the Internet can read your private files, like
your email, etc.

Go back to the information provided by your web host again, and look to see if they
mention the name of a folder (or "directory" or "subdirectory") where you need to place
your files into. Some hosts tell you to place your website files in a directory called
"www". Others say that you need to place them in a folder called "public_html". Still
others tell you to place your files in a folder named after your domain name. And there
are also hosts that say that you can simply upload or publish your files into the default
directory you see when you connect by FTP.

Like your "FTP address", this is not something you can randomly guess. If you don't
already have the information, find out by asking your web host.

Once you have the information, enter the folder name into the "Root Directory" field. For
example, if your web host tells you to publish your files to a "www" directory, enter
"www" into the field. If they tell you to just use the default directory when you connect,
leave this field blank.

(One last thing: note that where most web hosts are concerned "www" and "WWW" are
two different words. Hint: for those who can't detect the difference between them, look at
the capitalisation of the word. In other words, if they say, use "www" to store your
website files, make sure you put "www" and not "WWW" in the "Root Directory" field.)

Click the "Save" button when you've finished configuring the FTP settings.

You'll be returned to the "Site Setup" dialog box. Notice that your entry is now listed in
the list box on that page. Should you ever need to make changes to your settings, click
the pencil icon at the bottom of the list box. The pencil icon can be found directly after
the "+" and "-" icons.

For now, click the "Save" button on this window. Dreamweaver may issue a dialog box
with the message "The cache will now be recreated because the name, root folder, HTTP
address, or cloaking settings of the site have been changed." Click "OK". You'll be
returned to the "Manage Sites" dialog box. Click the "Done" button.

Once that you've finished configuring Dreamweaver for your site, it's time to publish
your home page. To do this, click "Site | Put".

When a dialog box with the title "Put dependent files" appears, click the "Yes" button.
Dependent files are the additional files that your web page needs so that it is displayed
correctly in a web browser. Don't take too long to click "Yes" or Dreamweaver will
automatically select "No" for you, which is not what you want. You must click the "Yes"
button or your web page will not look the same in your web browser.

(If you've waited too long, and have found that Dreamweaver has automatically
dismissed the dialog box for you, click "Site | Put" all over again. This time, be sure to
click the "Yes" button when the dialog box appears.)

Dreamweaver will then issue a dialog box informing you of its progress. The dialog box
will automatically disappear when it has completed the uploading of your web page.
Testing Your Web Page

Now that you've published your web page, you will need to check it using a web browser.
Although Dreamweaver does a good job of showing you what your web page will look
like, it is not really a web browser but a web editor. As such, there are some things you
can't effectively test in Dreamweaver itself.

To test your home page, type your website's address ("URL") into your browser. For
example, type "http://www.example.com/" if that is your site's URL. Notice that I did not
ask you to type the "index.html" filename. If you've set things up correctly, even though
you didn't type the "index.html" portion, you should still see the contents of the
"index.html" file.

If you get a "404 File Not Found" error instead of the web page you designed, or you get
your web host's preinstalled default page, you may have entered the wrong folder name
into the "Root Directory" field I mentioned earlier. Go back and fix the error. That is,
click the "Site | Manage Sites..." menu item, click the "Edit..." button, click the "Servers"
line in the left column, click the name of your server in the list box on the right side to
select it, and click the pencil icon under the list box. You can then change your Root
Directory to the correct location. When you've finished, be sure the click the "Save"
button in both that dialog box as well as the "Site Setp" dialog box, and finally click the
"Done" button in the "Manage Sites" window.

If you get a "No DNS for www.example.com" (or whatever your domain name is) or
"Domain not found" error, you may be facing the domain propagation issue I mentioned
earlier (where a domain is so new that it is still not yet recognised by your Internet
broadband or dialup provider). Another possibility is that you're using a web host that has
not set up the "www" subdomain for you, and you typed in "www.example.com" into
your browser. Not all web hosts do this automatically for you. If this is the case, try
typing your URL without the "www", for example type "http://example.com/" into your
browser.

If you get no errors at all, but see the page that you designed earlier, congratulations! You
have created and published your first web page using Dreamweaver CS5. It may be a raw
and unfinished page (for now), but you have successfully walked through all the essential
steps of designing and uploading a web page.
Next Chapter: How to Add Pictures to Your Website

How to Add Pictures and a Site Logo to Your

Website Using Dreamweaver CS5
Chapter 2: Inserting Images, Graphics and Photos
into Your Web Pages

How to Add Pictures and a Site Logo to Your Website

Using Dreamweaver CS5
One of the most common operations that every web designer does is to insert images or
pictures into a web page. As a webmaster, even if you don't intend your website to be
carpeted with graphics, you will still need to add at least one image into your website:
your website's logo. This chapter shows you how you can add photos, logos, and other
types of pictures to your website using Dreamweaver CS5.

If you have only just arrived at this chapter and are otherwise unfamiliar with the
Dreamweaver web editor, you may want to start at the first chapter of this Dreamweaver
Tutorial series. I will assume that you have already completed all the steps described in
chapter 1, namely, created a 2 column website, added content into the main content
column, and published a preliminary version of your home page to the Internet.

Goal of This Chapter

By the end of this chapter, you will have added a logo to your home page, as well as
(optionally) embedded some pictures (either product photos, personal photos or some
other type of picture) in that web page.
How to Get Images for Your Website
You will need to have the following pictures for your website.

Website Logo
If you look at most of the websites on the Internet, you will notice that they all sport
some sort of logo on their pages. For example, the logo for thesitewizard.com can be
found at the top left corner of its pages. Since you will be adding a logo to your website
in this chapter, you will need to have a unique image to serve as that logo if you are to
complete this chapter.

Those who are creating a website for a company that already has a logo can simply use a
digital copy of that logo for the site. The digital copy must be in either the GIF, JPG or
PNG graphics format. If your logo is in some other file format, get an image editor to
convert the picture into one of those three formats. There are many image editors around,
from famous commercial ones like Adobe Photoshop to free ones like those listed on the
Free Image and Photo Editors page. If you don't have a digital copy lying around, but
have a printed version, scan or take a digital photograph of that logo and use that image.
Again, the scanned output or digital photo must be in either the JPG, PNG or GIF format.
This should generally not be a problem since most modern cameras and scanners can
output JPG files.

If you don't already have a logo, you should create one for use in your website. I don't
recommend that you use any of the free images you find around the Internet, even if the
copyright owner of that image says that you can use it royalty-free on your site. Logos
are like a brand symbol for your website so you will want them to be unique to your site.
To create your own logo, either directly create them on your computer or draw them on a
piece of paper and scan it. For those who have not created a logo before, and are not sure
how to go about it, take a look at the article How to Create a Logo for Your Site the
Quick and Easy Way found at http://www.thesitewizard.com/webdesign/make-site-logo-
banner.shtml

No matter how you obtain your logo, whether by drawing them yourself or by scanning
the logo from your letterhead, you will probably want to resize your logo to fit your web
page. Since the web page template that you're using from chapter 1 gives you the entire
width of the page for the logo, your logo can be quite wide. That is, you don't need to
make it as small as thesitewizard.com's logo, which I created so that it could squeeze into
the corner.

What is a good width for the logo then? There are no hard and fast rules. We'll be
(optionally) centring ("centering" in US English) your logo on the page, so don't worry
about making it fit perfectly between the left and right edges. There's no way to get a
flush fit anyway, since your page width will vary according to how big your visitor's
monitor is. Centring the logo means that even if your image isn't very wide, it may still
look okay on the page. For example, Google's default logo is actually fairly narrow, not
substantially wider than thesitewizard.com's, but it still looks okay on their page because
they've put it in the centre. If you're at a complete loss, just pick a random size (eg, 450
pixels wide and 100 pixels high) and work from there. If it doesn't look good, you can
always go back later and resize your picture in your image editor, and reinsert it into your
web page.

Product Photos and Other Types of Images (Optional)

Apart from your website logo, you may want to have other images for display on your
site, such as product pictures, photos of yourself, photos of scenery or even drawings to
beautify your website. If so, get them ready before you begin this tutorial.

If you are selling a digital product that is downloadable from your website, and thus does
not have a physical form that you can take a photograph of, you may want to consider
creating a picture of it for display purposes anyway. Having a picture on your website of
your product somehow makes your product seem more tangible in the minds of readers
than just talking about it.

For example, if you're selling computer software, you can draw a picture of a software
box for display on your website either using a drawing program like those I mentioned
above, or with a specialised 3D box drawing software. Free versions of such software can
be found on the Free 3D Software Box Image Makers page.

Likewise, if you're selling or giving away an electronic book (or "ebook"), you may want
to create an image of your book. There aren't any free ebook cover makers that I know of,
so you will either have to use a commercial program like Box Shot 3D or manually draw
one using a graphic editor. For example, the picture here of my How to Make / Create a
Website: The Beginner's A-Z Guide was created using BoxShot3D. The software can
also create things like CD boxes/envelopes (if you're selling your own music), software
boxes, bottles, paper bags, cans, etc.
How to Add a Logo to Your Dreamweaver CS5
Website

Create a Folder for Your Images in Your Local Website

Folder
Start up Dreamweaver CS5, if you don't already have it running.

You will now need to create a folder to store the images that you want to use on your
website. Yes, I know you already got your images stored in some other folder on your
computer. However, in order to use those pictures on your website, you will need to copy
those images into the folder hierarchy containing the rest of your website files, or
Dreamweaver won't recognise them or publish them to your website. For example, if
your local website folder, which you created in chapter 1, is called
"c:\Users\chris\mywebsite", then you will need to copy those images either into that
folder, or a subfolder like "c:\Users\chris\mywebsite\images". For the purpose of this
tutorial, we will create an "images" subfolder. (Note: this is true whether you run
Windows or Mac OS X.)

Look at the panels in rightmost column in Dreamweaver. You should be able to spot the
"FILES" tab midway down the window. (It should be next to a tab labelled "ACCESS".)
Under the FILES tab, you should be able to spot a list box with two files listed:
"index.html" and "twoColLiqLtHdr.css". You created those files in chapter 1.

Move your mouse to a blank spot underneath the two files but still within the FILES
panel. Right click your mouse: that is, click the right button on your mouse. A menu
should appear. Click the "New Folder" item in that menu. Dreamweaver will create a new
folder, temporarily named "untitled", under your two files. The "untitled" should be
currently highlighted, allowing you to change its name. Replace the existing name with
"images", without the quotes and entirely in small letters (lowercase), and hit the ENTER
key (or the RETURN key if you use a Mac). The folder name should now be changed to
"images".
Copy Your Pictures into Your Local Website's Images
Folder
Now you will need to copy all your pictures into that "images" folder that you've just
created. The exact procedure for this varies from system to system.

For example, if you use Windows, try this. Right click your images folder in
Dreamweaver. A menu will appear. Click the "Explore..." item in that menu. A window
will open, showing you the contents of that folder. For now, it's empty, since you haven't
copied anything there yet. Now click the Windows Start menu and the "Computer" item
(for Windows Vista and Windows 7; it's called "My Computer" in Windows XP) in the
menu that appears. A new window will open, giving you an overview of all the drives
you have on your computer, among other things. With this second window, navigate to
the place where you keep your pictures. Select all the images that you want to use on
your website. Right click that selection, and choose "Copy" from the menu that appears.
Switch to the other window (the one that you opened from within Dreamweaver). Right
click the blank space in that window and click "Paste" from the menu that appears. The
pictures you previously selected will be copied to your local website's images folder. You
can now close both those windows. Don't close Dreamweaver itself. You still need it.

Open Your Web Page

If you have closed Dreamweaver (that is, exited the program) after you completed
chapter 1, you probably don't have your index.html file open in Dreamweaver when you
restarted it for this chapter. To reopen the file you created earlier, doubleclick the
"index.html" item in that FILES tab. Dreamweaver will load your home page, and display
it as it did previously.

Delete the Existing Logo Placeholder

Right click the "Insert_logo (20% x 90)" rectangular box. A menu will appear. Click the
"Remove Tag <img>" item in that menu. The rectangular block will be removed, and
your top horizontal header bar will collapse to become a narrow strip across the top. If
you look carefully, you should also see the blinking text cursor at the left edge of that bar.

Do not move your text cursor. Do not click anywhere on your web page. Just go straight
on to the next step.
Insert the Logo

Click "Insert | Image". As you may remember from chapter one, this means that you are
to click the "Insert" item from the menu bar, then click the "Image" item in the menu that
appears.

A dialog box with a title of "Select Image Source" should appear. Somewhere in the
middle of that window, you should be able to see two folders: a "_notes" folder and an
"images" folder. (Don't worry if you don't see the "_notes" folder. It's irrelevant for our
purposes.) The "images" folder is the same one you created earlier in this chapter.
Doubleclick that folder (that is, move your mouse over the "images" word, and click it
twice in quick succession) to open it.

Dreamweaver will now display all the images in the folder that you copied earlier. Select
the picture you want to use for your logo. If you've previously copied a lot of pictures
into this folder, and are not sure which file contains which picture, you can see a preview
of each image in the "Image preview" space on the right side of the dialog box. Simply
click once on each filename to select it, and Dreamweaver will show you a preview of
that picture in that space. Once you're satisfied that you've selected the correct file for
your logo, click the "OK" button.

A dialog box entitled "Image Tag Accessibility Attributes" will appear. Enter "[your site
name]'s logo" (where "[your site name]" is the name of your website) into the "Alternate
text" field.

The "Alternate text" (often abbreviated as "alt text" by webmasters) field is a brief
description of what the image contains. It is displayed by a web browser if your visitor
disables the loading of all graphics in the browser. It is also read aloud by screen readers
(used by the blind), and indexed by search engines as the description for that picture.
Although this Alternate Text field is optional, you should always complete it to make
your website accessible to the blind.

Ignore the "Long description" field and click the "OK" button.

For better or for worse, your logo will now appear at the top of your web page. If this is
your first attempt, there's an even chance that it is "for worse", since you won't have
previous experiences to guide you. If the logo is too big or too ugly and you want to get
rid of it and start all over again, right-click the logo and click the "Remove Tag <img>"
item.
Note: if you use Dreamweaver to resize your picture instead of a specialised graphics
editor, be sure to right-click the image and select "Optimize..." from the menu after you
finish resizing. Dreamweaver will then make the size change permanent and save the
resized image over your existing file. Personally, I prefer to use a proper image editor
even when doing things like resizing pictures. Image editors tend to give you more
control over your pictures; after all, images are their raison d'être.

How to Centre the Logo Horizontally on the Web Page

If your logo looks good in its current position, and you don't want to centre it, feel free to
skip this step. Otherwise, read on.

Click once on your logo to select it.

Look at the bottom of your Dreamweaver window to locate the PROPERTIES panel
(pictured below).

Look for the field labelled "W". This field gives the actual width of your image. For
example, if the "W" field says "450", it means that your picture is 450 pixels wide. Note
down this value somewhere (for example, either memorise it or scribble it down on a
piece of paper). You'll need it shortly.

Look for the "CSS STYLES" tab in the right side of your Dreamweaver window. It
should be some distance above the "FILES" pane which you used earlier to create your
images folder. There should be an "All" tab immediately below the "CSS STYLES" tab.
If you do not see the "All" tab, but instead see a "BUSINESS CATALYST" tab directly
underneath "CSS STYLES", it means that the CSS STYLES tab has not been expanded.
Doubleclick the CSS STYLES tab to expand it. You should now see the "All" tab and a
bunch of text that looks like technical gibberish. (Note: if you doubleclicked the CSS
STYLES tab and find that you've collapsed the panel, simply doubleclick it again to
expand it.)

Just above the "BUSINESS CATALYST" tab, in the portion of the column that is
actually still part of the "CSS STYLE" panel, you should be able to spot a few small
icons. Those are actually clickable buttons. When you hover your mouse over one of
those icons, a tool tip window will appear telling you the purpose of each button. Try it to
see what I mean, but don't click any button at the moment. Find the icon that has a tool
tip window that says "New CSS Rule". If you can't be bothered to hover your mouse over
every button to find it, just look at the picture below to see what I'm talking about.
Click the icon that has the "New CSS Rule" tooltip (the icon that is circled in the picture
above).

A dialog box with a title field "New CSS Rule" will appear. The Selector Type field is a
drop-down box probably containing a default value of "Compound (based on your
selection)". Click the down arrow at the right of the drop-down box and select the "Class
(can apply to any HTML element)" line.

The Selector Name field should now be blank. Click the field to place your text cursor
there, and type "logo", without the quotes, and entirely in small letters (lowercase).
Below that field, an explanatory comment, "This selector name will apply your rule to all
HTML elements with class 'logo'", should appear.

Click the "OK" button.

A new dialog box, entitled "CSS Rule Definition for .logo in twoColLiqLtHdr.css",
should appear.

Click the "Block" line in the "Category" column (left column). The contents on the right
side of the dialog box should change. Near the bottom of the right side is a drop-down
box labelled "Display". Click the down arrow for this field and select the "block" item.

Now click the "Box" line in the "Category" column to select it. Enter the width of your
image into the "Width" field, and leave the field beside it selected at "px" (pixels). For
those who are not sure what I'm talking about, the width of your image is the number you
noted down earlier from the PROPERTIES panel.

Somewhere below the "Height" field are two columns, although it doesn't appear like 2
columns. The left column has the heading "Padding". The right column has the heading
"Margin". Uncheck the box "Same for all" in the "Margin" column (circled in the picture
below). Then click the down arrow for the "Right" field in that same column, and select
"auto". Do the same for the "Left" field in the "Margin" column: that is, click the down
arrow next to that field and select "auto". If you find that both the "Left" and "Right"
fields are disabled, it means that you did not uncheck the "Same for all" box. You'll need
to uncheck that box first before you can select "auto".

Click "OK".

Make sure that your logo is still selected. If you're not sure, just click the logo once. Click
the Class field in the PROPERTIES panel at the bottom of the Dreamweaver window. It
should show a long list of items. Click the "logo" line in that list.

Your logo should now be centred horizontally on your web page.

Save Both the Web Page and the CSS File

Save your work by clicking "File | Save All". Notice that I said "Save All" not "Save".
The CSS rules you added to centre your image was added by Dreamweaver to the
"twoColLiqHdr.css" file, not your "index.html" file. Hence, if you simply click "File |
Save", you'll only save part of the changes you made so far.

Publish and Test Your Updated Web Page

Publish your web page using "Site | Put" as before. Again, when Dreamweaver asks you
whether you want to put dependent files, make sure you click "Yes", otherwise your logo
will not appear on your web page. Then test your home page with a web browser. If you
have any problems with this step, and you did not start this series from chapter 1, please
return to chapter 1 to read the important information that you missed.

How to Insert Images into Your Web Page with

Dreamweaver CS 5 (Optional)

This section deals with the insertion of product pictures, photographs, artwork, or other
images that you want to insert into the main body of your web page. The pictures can be
inserted either between paragraphs of text, such as what you see in many of my pictures
above, or with your text flowing around it either on the right or on the left, such as what
you see in my picture of the How to Create / Set Up a Website: The Beginner's A-Z
Guide book. Scroll up to see the different ways pictures can be inserted to see what I
mean.

Setting background pictures, so that they form the backdrop of your web page, will be
taught in a later chapter.

The process for inserting an image into a web page is mostly the same as that for adding
your site logo.

First click the spot in your web page where you want the picture to go. For example, if
you want the picture to appear before a particular paragraph of text, put your text cursor
at the very start of that paragraph.

Click "Insert | Image" and choose your picture from the "images" folder, and click the
"OK" button. If your picture isn't in that folder, click the Cancel button, copy the graphic
file into that folder, then try again.

Enter the alternate text for that picture. For example, if the image is a photo of a book
you're selling, put the title of your book into the "Alternate text" field. If it's a photograph
of your family at a picnic, say something like "My family at a picnic". In other words,
briefly describe your picture.

Click the "OK" button when you've finished.

Your image will be inserted into your web page, possibly in as awkward a position as that
shown in the image below.

If you want your image to appear completely before the paragraph, click anywhere within
a word in the paragraph, and use your cursor key to move it to the very start of that
paragraph. Hit the ENTER (or RETURN) key.

On the other hand, if you want the words to flow to the right of the image, with the
picture itself on the left, click the image once to select it. Then, click the down arrow
beside the drop down box for "Align" in the PROPERTIES panel. Select "Left" (since
you want the picture on the left).

If you want the picture on the right, you should select the "Right" option in the "Align"
field instead of "Left".

Notice, however, that after you do the Align operation, your words will go right up to the
edge of your picture (see the screenshot above). This is usually not what most people
want. To adjust the horizontal space between your picture and the words, enter a number
into the "H Space" field in the PROPERTIES pane. For example, try typing "5" (without
the quotes) into that field and hit the ENTER (or RETURN) key. Dreamweaver will
insert a bit of horizontal space between your picture and your words. If this results in a
space that is either too narrow or too wide, increase or decrease the number until you get
satisfactory results. To adjust the vertical space between your picture and the words, use
the "V Space" field in the same way.

Save your work with "File | Save", publish it, and test it in a web browser.

Congratulations. You've now polished up your web page so that it now contains a site
logo and some pictures, making it look more like a finished product.
Next Chapter

In the next chapter, you will learn how to change fonts, text colour, add bold and italics,
as well as adjust font sizes.

How to Change Fonts, Text Size and Colours in

Dreamweaver CS5
Chapter 3: Switch fonts, put text in bold and
italics, increase / decrease font sizes, etc

How to Change Fonts, Text Size and Colours in

Dreamweaver CS5
Even if your website is blanketed in graphics, perhaps to the extent that its primary focus
is the graphics, you will still have to deal with text. And any time you need to handle text,
you'll probably want to know how to do things like change font size, put words in bold or
italics, change text colours ("colors" in American English), and even change the font
itself. This is the topic of this chapter of the Dreamweaver CS5 tutorial.

For the newcomer who has only just arrived at this page, you may want to start at the first
chapter of the Dreamweaver CS 5 tutorial. The current chapter assumes that you have
completed all the steps of the previous two chapters, and indeed have all the prerequisite
knowledge and skills taught there. (Incidentally, if you are new to making websites, and
are here to find out what it involves, the article How to Make / Create Your Own
Website: The Beginner's A-Z Guide may be a better starting point.)

Goal of This Chapter

By the end of this chapter, you will be able to change fonts, use bold and italics, and
modify the size and colour of your text content using Adobe Dreamweaver CS5. This
chapter also introduces you to Cascading Style Sheets ("CSS") and shows you how you
can take advantage of it to style your text.

Introduction to Cascading Style Sheets (CSS)

You have met the term "CSS" in passing before, first when you created a 2 column
website from one of Dreamweaver's pre-packaged templates, and then later when you
centred your site logo in the middle of your home page.

However, before we move on to the rest of the tutorial series, it's a good idea to get a
better understanding of what this "CSS" thing is. Although, theoretically, a visual editor
like Dreamweaver insulates you from having to deal with a lot of the technical low-level
stuff like CSS, HTML and other such mumbo jumbo, a little knowledge about what goes
on behind the scenes as you work goes a long way in helping you work more intelligently
and confidently.

Cascading Style Sheets, or "CSS" for short, is the name of the underlying technology that
Dreamweaver uses to control the appearance of your website. As you work in
Dreamweaver to do things like centre your logo (last chapter), change fonts, text size and
colours (this chapter), Dreamweaver actually generates CSS code in the background to do
the job.

You normally don't see the actual CSS code created by Dreamweaver. It is automatically
inserted into a CSS file called "twoColLiqHdr.css" (if you used the default name in
chapter 1) for you. This is the reason why you must always make sure you use "File |
Save All" (introduced last chapter) when you make any kind of visual change to your
web page. Otherwise Dreamweaver will only save the HTML file (the actual web page)
you're currently working on, and not save the CSS file as well. It is also the reason why
you need to make sure to click the "Yes" button when Dreamweaver asks you whether it
should upload your dependent files during a "Site | Put" (introduced in chapter 1)
operation. Otherwise your CSS file on your website will not be published, with the result
that any changes to the appearance of your website, however assiduously applied, will
not be shown in your actual web page.
The lines of CSS code controlling the appearance of your web page are, unsurprisingly,
called "CSS rules". They are rules in the sense that web browsers are obligated to follow
those rules in rendering (ie, displaying) your web page. For example, when you centred
your logo in chapter 2, you created a rule that indirectly ordered the web browser to put
an equal amount of blank space on the left and right of your picture (effectively putting
your image in the centre of your page).

CSS rules can be applied to anything on your web page. To make it easier to apply a CSS
rule to an element on the web page, we normally label the element we want to change
with some arbitrary name. That way, we can easily refer to that specific object by label in
our CSS rule. We call such labels "classes" in CSS.

For example, we labelled your site logo in chapter 2 "logo" (by selecting "logo" from the
Class field in the PROPERTIES panel), and created a CSS rule to put anything labelled
"logo" in the centre of the page. Or, in more accurate technical lingo, we assigned your
site logo a class of "logo", and created a CSS rule to centre any picture with a class name
of "logo".

Yes, I know. The above paragraph is a bit of revisionist history. The truth is, we actually
created the CSS rule for a class named "logo" first. Then we assigned the class to our
actual logo. In fact, this seemingly backwards way of working, where we create the rule
for a label first, then label the object later, is what we will do in Dreamweaver for the
most part, mainly because it makes our job easier.

By the way, the "object" or "element" that I mentioned above can be anything appearing
on your web page. It can be pictures, snippets of text, words, whole paragraphs, the left
or right columns or even the entire web page. And you can assign many different objects
on your website the very same label (class).

Don't worry if the above is a bit confusing. Things will clear up as we actually carry out
the procedure below. I just wanted to give you an overview of what we're about to do, as
well as an explanation as to why we're doing what we're doing. If you've got a headache
trying to visualise what I just said, don't bother (to visualise). Just move on to the next
section.

How to Change Fonts, Text Size and Text Colour in

Dreamweaver CS5

The following steps apply whether you want to change fonts, adjust the size of the text, or
change the colour of your words. Note that these steps deal with the changing of your text
styles on specific snippets of text or bigger paragraphs of text. If you want to change the
default font used on your entire web page, or the entire left or right column, you will find
the procedure in a later section (below). However, you will still have to read this section,
because those sections don't provide some of the essential background knowledge and
skills taught here. (Sorry. But there's just too much information to repeat everywhere.)

Start up Dreamweaver and doubleclick the "index.html" filename in the FILES pane on
the right. This opens the home page that you have been working on in the last 2 chapters.

Click "Format | CSS Styles | New...". If you remember the convention used here, this
means to click "Format" from the menu bar. Then, when a drop down menu appears,
click the "CSS Styles" item. Following this, click the "New..." item in the submenu that
appears.

A dialog box, entitled "New CSS Rule", will appear. Select "Class (can apply to any
HTML element)" from the drop down box underneath "Selector Type". Do this whether
or not it is already selected.

If there is any existing text in the "Selector Name" field, delete it. To do this, just click
once in the field, and use your backspace or DEL key to get rid of everything in that box.

We will be entering the name of a class into this field. This "class" is the label that I
mentioned earlier. It's the class that we'll be assigning to the pieces of text for which you
want the font changes made (whether it is to change the font itself, or change the text
size, etc). To make it easier to understand what I'm talking about here, let's suppose that
you want to change the font for all your product names appearing on your website. To do
this, you can enter a class (label) like "productname" (without the quotes) into this field.
Later, you will assign this "productname" class to every instance of product names on
your site.

In other words, the name you enter in this field is actually any word of your choosing.
You'll have to make it up yourself. The class name should begin with a letter of the
alphabet. The rest of the name can contain letters and numbers but must not include any
punctuation marks or spaces. For example, "productname" and "welcomemessage" are
acceptable names for classes, but not "product name" or "welcome message".

Try to make the name descriptive of the content and not the appearance. For instance,
"companyname" is better than "bigarialfont", since in the future, you may decide that
your company name should not appear in Arial but in Times New Roman.

In any case, don't spend too much time trying to figure out a class name. It is just a
descriptive label for you to use to make font changes and the like. It is not actually
displayed in the web browser so you don't need to come up with anything fancy. If you're
really stuck and can't think of a name, just use generic things like "subheadings",
"productnames", "productfeatures", "welcomemessage" (all without the quotes) and the
like.

Once you've decided on a class name, type it into the Selector Name field.
Click the "OK" button.

A new dialog box, with a title of "CSS Rule Definition for .[your class name] in
twoColLiqLtHdr.css", will appear, where "[your class name]" is the name you entered
into the Selector Name field.

Notice that the right side of this dialog box lets you change many aspects of the fonts on
your web page. For example, you can select a font from the "Font-family" drop down
box, change the text size from the "Font-size" fields, put text in bold using the "Font-
weight" field, put text in italics through the "Font-style" field, and change the colour of
your text with the "Color" box. I will discuss each of these items separately in the
paragraphs below. Please read what I have to say about these fields before you go wild on
a customisation frenzy.

Font-family: Understanding the Lists of Fonts

When you click the "Font-family" drop down box, you will notice that each line in the
list contains multiple fonts, such as "Verdana, Georgia, sans-serif".

They are listed this way because not all computers have the same fonts installed. If you
select, say, "Times New Roman, Times, serif", your visitor's web browser will use Times
New Roman to display your text if it's available on that computer. If Times New Roman
is not installed in his/her computer, the browser will use the next font given in the list,
which, in this case, is Times. If that is also not available, the browser will use any serif
font it can find on the computer. In other words, web browsers will go down the list,
giving the first font priority, and using the next one on the list only if the previously listed
font is not available.

For this reason, if you actually want your web page to be displayed using (say) Times
New Roman, you should select the line "Times New Roman, Times, serif" and not the
line "Georgia, Times New Roman, Times, serif" even though Times New Roman is listed
in both series. Otherwise, your page may end up being displayed using Georgia on most
of your visitor's computers (which was not your intention).

Dreamweaver only lists a few series of fonts in its default list. You can add new items to
the list, if you wish, by selecting the "Edit Font List...", although you should note that if
the font you want is not found in Dreamweaver's list, there is a strong chance that many
of your visitors will not have it on their computers. In such an event, your website will
only look good on your own computer, but will appear ugly on everyone else's system.
For example, if you got the font from my Free Fonts page, it's unlikely that the majority
of your visitors will have the same font on their computers. To learn more about choosing
fonts for your website, as well as what "serif" and "sans serif" mean, please see Which
Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website.

For the curious, since you're using the two column liquid template, the default font series
used for your web page is "Verdana, Arial, Helvetica, sans-serif". And so that you don't
have to write to ask me, thesitewizard.com currently uses "Arial, Helvetica, sans-serif".
Both these sets of fonts are considered by many webmasters as safe bets since the fonts
listed are found practically everywhere.

Font-size
To change text size, enter a number into the "Font-size" field. For example, you can enter
"120" (without the quotes). The adjacent field on the right will immediately be enabled.
Click the drop-down box for that field and select the appropriate unit of measure for your
new font size, eg "%" for percent. Entering "120%" in this way means that your text will
now appear 20% larger than its existing size.

Although you can use other units of measure besides "%", for things like web pages, it's
best to stick to using either "%" (percent) or "em". Things like "pt" (point), which you
may be familiar from using wordprocessors like Microsoft Word, are better suited to the
print medium than to the computer monitor. In case you're wondering, your current text
size is regarded as 100%. Setting it to 90% means that it becomes 10% smaller than its
current size. Conversely, setting it to 110% means that it becomes 10% larger.

Changing Text Colour

f you want to change the colour of your text, click the square box beside the word
"Color". This box is actually a clickable button. A colour picker window will appear,
letting you choose a new colour for your text.

Underline
Although you can underline any text you want by checking the box here, it's generally
best not to underline ordinary text on your web page. By convention, underlined text on
web pages is almost universally used only for links, and you will confuse your users if
you underline things for emphasis. Use bold or italics to create emphasis instead.
Bold and Italics
You do not have to create a new CSS rule just to put isolated words in bold or italics. The
bold and italics options in the "Font-weight" and "Font-style" fields are meant for
instances where you are applying other stylistic changes to your text as well. For
example, it is useful if you're changing the fonts for your paragraph headings and want to
make the text bold at the same time. If you only want to put certain words in your
paragraphs in bold or italics to emphasize those words in a sentence, like this, read the
section entitled How to Make the One-Off Bold and Italics Text below specifically
dealing with that.

When you've finished with the text style changes, click the "OK" button. This dismisses
the dialog box, but nothing will have changed on your web page. This is because you
haven't assigned the class to any piece of text yet.

Now select the text you want modified. One way to do this is to drag your mouse over the
words to highlight it.

In the PROPERTIES panel at the bottom of the Dreamweaver window, click the drop-
down box beside "Class". A box will appear, listing all the different classes that have
been created so far. You should be able to find the class you created somewhere in the
list. (You may have to scroll up or down that list to find your new class.) Click the class
name.

This assigns the class you created to the piece of text you selected. The font change on
your web page should be immediate, although if your changes are very small (eg,
increasing the text size to 101% from the default of 100%), they may not be sufficiently
distinct for you to notice any difference.

Repeat with any other pieces of text that you want to have the same class (and thus also
the same text style). That is, highlight another snippet of text that you want to have the
same font changes applied, and select the same class name from the "Class" box in the
PROPERTIES panel.

You can assign the same class to as many pieces of text on your web page as you wish.
For example, if you want every instance of your company name on your web page to
have the class "companyname" (with its, say, Courier New font setting), then, one by
one, highlight the company name and assign the "companyname" class to that snippet.
Repeat for the next occurence of your company name until every instance has the
"companyname" class. Every piece of text that has that class name assigned to it will
share the same font changes (or size changes or colour changes or whatever) that you
made for that class.

If you want a different text style for some other block of text, you'll have to create a new
class for it. That is, go back to the step where you used "Format | CSS Styles | New..."
and make a new class with the different text style settings (fonts, colours, sizes,
whatever).

What If I Change My Mind About a Font, or the Text

Size, Text Colour, etc?
What if, after doing the above, you have a change of heart about the text style options
you've used for your page? For example, what if you decide that Comic Sans wasn't a
good choice for your company name after all, and you want Times New Roman instead?

To change the settings you made earlier, click somewhere in the middle of a block of text
that has previously been assigned the class you created earlier. Do not select the text —
just click to put your cursor somewhere in the middle of that block. Try not to put the
cursor at the very first character, in case you accidentally place it outside the block. You
can verify that your cursor is in the correct spot by looking down at the PROPERTIES
panel. If you do it correctly, the "Class" field in that panel will show the name of the class
you want to change.

Now look at the right hand side of Dreamweaver, at the CSS STYLES panel (see
picture). Bellow
 Locate the part of the CSS STYLE section that says 'Properties for ".[your class name]"'
where "[your class name]" is the actual name of the class you created. If your
Dreamweaver window (or computer monitor) is too small that you cannot really see
much of that portion, click the scroll bar at the side of that 'Properties for ".[your class
name]"' to move its content up and down. (Note: if your window is big enough so that the
entire 'Properties for ".[your class name]"' section is shown, there will be no scroll bar,
since there's nothing more to see.)

If you made a font change for that class, you should be able to see a line under that that
says "font-family" followed by the name of the font you set earlier. If you made other
changes, you should be able to see the other properties you set in that section as well,
such as font-size, etc.

To modify those fields, just click the value portion of those fields. For example, if you
have set the Comic Sans MS font for your class, and have now changed your mind, click
the word Comic Sans MS to change it into a drop-down box which you can modify.
Actually, you can also doubleclick the word "font-family" to create the same effect. Note:
my use of "font-family" here (as well as in the picture) is just an example. If you didn't
change the font, but changed the font size instead, you will see "font-size" in that section,
which you can doubleclick to make modifiable.

How to Change the Font for the Entire Web Page

If you want to change the font for your entire web page, you do not have to create a new
class just for this purpose. Since your page is based on one of Dreamweaver's pre-
packaged templates, you can use the class that Dreamweaver has already pre-assigned to
the content of your whole page. All you need to do is to modify this existing class to use
the new font.

The simplest way to do this is to click "Format | Font" and select the new font you want.

In the "New CSS Rule" dialog box that appears, select "Class (can apply to any HTML
element)" for the Selector Type field.

Remove any existing text in the Selector Name field by deleting it. Then enter
"container" (without the quotes) into that field. (Yes, the name of the pre-assigned class is
"container".)

Click the "OK" button.

Your entire web page should reflect the change immediately.

How to Change the Font for the Entire Left or Right

Columns
If you want to change the font for the entire left or right columns, do the following. We
will take advantage of the fact that Dreamweaver has already assigned the class
"sidebar1" to the left column, and the class "content" to the right column, for pages based
on the particular template that you're currently using.

Click "Format | Font" and select the font series you wish to use.

Select "Class (can apply to any HTML element)" for the Selector Type field.

Delete any existing text in the Selector Name field. Enter "sidebar1" (without the quotes)
if you want the font change to be applied to the entire left column. Alternatively, enter
"content" (without the quotes) if you want it to be applied to the entire right column.

Click the "OK" button.

Your entire web page should reflect the change immediately.

How to Make the One-Off Bold and Italics Text

Sometimes, you may want to emphasize a word or phrase in your content. You do not
have to create an entire class just to do this.
Simply highlight the word, phrase or sentence that you want to put into bold or italics. As
before, you can do this by either dragging your mouse over the text you want, or holding
down the SHIFT key and moving the arrow keys.

Look at the PROPERTIES panel at the bottom of the Dreamweaver window. Notice that
there are 2 characters, "B" and "I" just to the right of the Class fields. These are actually
clickable buttons. If you want your selected text in a bold font, click the "B" button in
that panel. If you want your text in italics, click the "I" button. The changes should be
immediate.

Note: if you are an experienced wordprocessor user, the same keyboard shortcuts that you
use to make text bold or put it in italics (Ctrl+B and Ctrl+I in Windows) also work in
Dreamweaver. If you don't understand this paragraph, don't worry: just stick to clicking
the "B" and "I" buttons mentioned above.

Saving, Publishing and Testing Your Web Page

Save your web page and its associated CSS file with "File | Save All". (Note the use of
"Save All" instead of "Save".) Then publish it to your website with "Site | Put".
Remember what I said about the importance of clicking "Yes" when Dreamweaver
prompts about your dependent files. Then check your home page in a web browser.

Congratulations! Your home page, now with both graphics and appropriate text styling, is
well on its way to being completed. Don't worry, I know it's not finished yet. But it's
already developing into something that you can be proud of.

In the next chapter, you will learn how to change the background of your web page. This
includes changing the colours of the background or using an image as its backdrop.

How to Change the Background of Your Website

in Dreamweaver CS5
Chapter 4: How to add a background image or
change background colours

How to Change the Background of Your Website in

Dreamweaver CS5
Unless you like the current background colour ("color" in US English) of your web page,
or it already matches the colour scheme of the existing images on your page, chances are
that you'll either want to change the colour or use a picture as the backdrop. This chapter
shows you how you can do this.

If you have only just arrived at this page, and are a newcomer to Dreamweaver CS5, you
may want to start with chapter 1 of the Dreamweaver CS5 Tutorial. This chapter builds
on the things taught in the previous chapters, and thus glosses over a great many things
(both theoretical and practical) already mentioned earlier. In fact, if you are totally new to
creating websites, and are here because you're curious about what it involves, you may
find the article How to Create / Set Up Your Own Website: The Beginner's A-Z Guide a
better starting point.

Goal of This Chapter

By the end of this chapter, you will be able to change the background colours of various
parts of your web page. You will also be able to use an image to form the backdrop of
your web page if you wish.

Preliminary Matters: Terminology

The web page that you're currently designing, created in chapter 1 based on
Dreamweaver's "2 column liquid, left sidebar, header and footer" template, provides
many different sections which you can customise. While this increases the design
possibilities for you, it also makes it very difficult for me to refer to the various parts of
your web page in an unambiguous way. As such, to ensure that you understand accurately
which part of the web page I'm talking about, please use the following picture as a
reference.

I know that, by now, your web page probably looks different from what you see in the
picture, since you would have changed the text, used your own logo, etc, as a result of
following the previous three chapters. However, the basic layout should still be identical,
making it possible for you to locate the sections on your site corresponding to those
mentioned here.

I have labelled certain parts of the web page in the picture with words written vertically
(perpendicular to the words in the main content). The label "body" refers to the
background behind the 2 columns of your web page. The background of the left column
is labelled "sidebar1", and the right column "content". The background for the horizontal
bar at the top of the page containing your site logo is labelled "header". Although not
shown in the picture above, the background of the bottom horizontal bar, probably
showing your copyright notice at the moment, is labelled "footer".

Please make a mental note of these labels mentioned above (including the "footer" label
not actually shown in the picture). We will be using them to customize the background of
the various sections. Since you have already learned about CSS classes in the chapter on
changing fonts and other text styles, you will probably understand me when I say that
these labels correspond to the names of the classes Dreamweaver has assigned to those
parts of your web page. Yes, the names I used are not arbitrary. I selected them because
they are also the class names of those sections. (Note, though, that "body" is not actually
a class name, but for the purposes of this chapter, that label will work the same way.)

Anyway, there's no need to memorise anything. If you forget which name refers to which
section, just scroll back to this section and check the picture.

For the observant reader, who may have noticed that I did not give a label to the
navigation menu (the part that says "Link one", "Link two", etc), please note that all
customisations pertaining to that menu will be taught in the chapter dealing with it.

How to Change the Background Colour or Use a

Background Image for Various Parts of Your
Web Page

Invoke the CSS Rule Definition Dialog Box

What you'll be doing in this section is invoking the CSS Rule Definition dialog box for
each section of the web page that you want to customise. Since Dreamweaver has already
created all the necessary classes for the various sections, the trick is to get the web editor
to show the CSS Rule Definition window for the section we want.

Let's say that you want to change the background for the part of your web page labelled
"body" in my picture. Click somewhere in the blank space to the left of your left column,
in the portion of the page I labelled "body". Do this even if you don't actually want to
change the background for that section, otherwise you won't know what I'm talking about
in the next paragraph. (Don't worry, you don't have to change anything later if you don't
want to. You can always hit the ESC key to get out of dialog boxes you invoke by
mistake.)

Look at the CSS STYLES panel on the right of the Dreamweaver window (see picture
below). The "Rules" section of that panel should have 2 lines: the first line saying "body
<body>" and the second ".container <div>". Actually, we don't care what the second line
says. The important part is the line that says "body <body>" since it's the "body" that we
want to customise. Doubleclick that "body <body>" line. It doesn't matter whether you
doubleclick the "body" word or the "<body>" portion.

The CSS Rule Definition dialog box for "body" will appear. You can verify that this
particular CSS Rule Definition window is for the "body" section by reading the entire
title of the dialog box: "CSS Rule Definition for body in twoColLiqHdr.css" (emphasis
mine). If you really want to configure the background for body, leave this dialog box
open so that you can use it in the next step. Otherwise, either click the "Cancel" button or
hit the ESC key on your keyboard to get out.
Basically, you have to do the same thing for the section of your web page you actually
want to change. For example, to configure the "sidebar1" portion, click somewhere in the
left column (but not in the menu buttons part, that is, not in the part with the words "Link
one", "Link two", etc). The CSS STYLES panel should show "sidebar1 <div>" as one of
the lines in the Rules section. Doubleclick it to get the CSS Rule Definition dialog box
for "sidebar1". To ensure that you really clicked the right place, always check the title of
the dialog box to make sure the rules are for the correct class. In the case of the left
column, the title should say that it is "for sidebar1".

For the sake of those not confident that they'll click the right place on the page, I'll just
briefly mention where to click to get the correct entries in the "Rules" section of the CSS
STYLES panel. To configure the header, click your site logo once. Then doubleclick the
".header <div>" entry in Rules. To change the footer, click somewhere within the words
in your footer, then doubleclick ".footer <div>" in Rules. Your right column can be
configured by simply clicking somewhere in one of the sentences in your main content,
and doubleclicking the ".content <div>" line in Rules. In all cases, you should get a CSS
Rule Definition dialog box, and you can, if you like, make sure you clicked the right spot
by checking the title.

Select "Background"
Click the "Background" line in the left column of the CSS Rule Definition dialog box.
The contents of the right side of the dialog box should change.

Change the Background Colour

If you want to use a background image instead of changing the background colour, skip
to the next step. Otherwise read on. Note: you can do both if you wish: that is, you can
change the background colour and use a background image. In such a case, carry out the
procedure in both these steps.

To change the background colour, click the square box beside "Background-color". This
invokes the colour picker which you have already met in chapter 3. Choose a new colour
from the selection offered.
Use a Background Image

If you only wanted to change the background colour and don't want to add a background
image, just skip to the next step.

On the other hand, if you intend to set a background image, copy that picture to the
images folder of your website as you did in chapter 2. If you don't know what I'm talking
about here, or you've forgotten how it's done, please go back to that chapter to refresh
your memory. Don't skip this part.

Then click the "Browse..." button for the "Background-image" field and select the file.

Click the drop-down arrow for the "Background-repeat" field. You'll need to select one of
the various options given here. Your visitors' web browsers will use the option you select
if your picture is smaller than the amount of space available for the background. If you
choose "no-repeat", the picture will be placed on your web page as-is. The option
"repeat" will cause duplicates of your image to fill the background (like the tiles on the
floor). Select "repeat-x" or "repeat-y" if you only want the image to tile horizontally or
vertically respectively. And before you ask, there is no "stretch" option to make your
picture fill the entire window.

Click the "OK" button to accept your changes.

Save your modifications with "File | Save All" and publish it to your website. As always,
make sure you test your changes with a web browser.

Incidentally, if after testing, you decide that you want a different colour scheme or some
other picture as the background image, simply return to the CSS Rule Definition dialog
box the same way you invoked it in the first place. That is, just repeat the above
procedure and choose some other colour or image. If you had previously set an image as
the background and don't want it any more, return to the CSS Rule Definition dialog box
and delete the name of the file in the "Background-image" field. If you like, you can also
delete your selection in the "Background-repeat" field. In both cases, when I say delete, I
mean to use the DEL or Backspace key, found on your keyboard, on the contents of those
fields.

How About the Space Below the Content and Sidebar?

If you have configured the colours of the "content" or "sidebar1" columns, you may have
noticed that the background below those columns continue to remain white. Note that I'm
not talking about the part labelled "body" in my diagram. If you don't know what I mean,
scroll down your page in Dreamweaver after you've set your colours. Just above your
footer bar and below your left and right columns is a span of white space. It's this portion
of your page that I'm referring to. To get the CSS Rule Definition dialog box for this
region, click somewhere in that space. Then doubleclick the ".container" <div>" line in
the Rules section of the CSS STYLES panel, and continue as you did above to set the
colours or use a background image.

Note that if you did not previously set a colour for your "content" section and you now
set one for "container", the colour for "container" will bleed through to your content
section. To solve that, explicitly set a colour for "content", even if that colour is white.
Next Chapter

In the next chapter, you will learn how to make words and pictures into clickable links.

How to Make Your Images and Text into

Clickable Links with Dreamweaver CS5
Chapter 5: How to Use Hyperlinks on Your
Website

How to Make Your Images and Text into Clickable Links

with Dreamweaver CS5
Hyperlinks, or "links" for short, are one of the characteristic features of a website. They
are the reason why all the sites in the world are collectively referred to as the "World
Wide Web", since directly or indirectly, the sites all link to each other like the threads in
a spider's web. In this chapter of the Dreamweaver CS5 tutorial, you will learn how to
make your pictures and text into clickable links.

Note that this tutorial assumes that you've completed the earlier chapters of the
Dreamweaver tutorials. If this is not true, and you don't have extensive prior
Dreamweaver experience, you may want to start with chapter 1. In fact, if you're
completely new to creating websites, you may find the article How to Make / Create a
Website: The Beginner's A-Z Guide a better starting point.

Goal of This Chapter

By the end of this chapter, you will have learnt how to make any picture or string of text
into a clickable link.
What is a URL? Introduction to Absolute and Relative
URLs
If you glance upwards at the location bar of your web browser, you should be able to see
a string of text that reads
"http://www.naijadonloadz.lefora.com/dreamweaver/dreamweaver-cs5-tutorial-5.shtml".
This web address is known as a URL, short for Uniform Resource Locator. The "http"
portion of the URL indicates that this article is to be accessed using a communications
procedure (technically referred to as a "communications protocol") called "HTTP".

URLs for your web pages can be specified as either absolute URLs and relative URLs.

Absolute URLs are addresses like

http://www.naijadownloadz.lefora.com/dreamweaver/dreamweaver-cs5-tutorial-5.shtml.
They contain all the necessary bits of information so that a web browser knows where
and how to retrieve a particular web page. The "http://" part tells a browser that it needs
to use the HTTP communications protocol. The "www.thesitewizard.com" component
tells it that the document it wants can be found (loosely speaking) on a domain called
"www.thesitewizard.com". Finally, the "dreamweaver/dreamweaver-cs5-tutorial-5.shtml"
portion tells it that the web page has a filename of "dreamweaver-cs5-tutorial-5.shtml"
and can be found in the "dreamweaver" folder of that domain.

Specifying an absolute URL is like giving your friend your full home address in the real
world, telling him/her not just your street and house number, but also the city, state and
country.

Relative URLs, on the other hand, are short form web addresses like "index.shtml",
where neither the protocol (the "http://" part) nor domain name is specified. It can only be
used if the web browser already know what protocol or domain name to use. It's like
telling someone your home address only by mentioning the street name and house
number. It is only meaningful if both of you happen to be in the same city, state and
country, and that person will interpret the address that way.

For example, if I link to a web page using a relative URL of "index.shtml" from the page
you're reading at this very moment, your web browser will try to construct an absolute
URL for this partial address. First it will strip away the filename of this page from its full
URL. This gives the web browser an address like
http://www.slimsoft.com/dreamweaver/. It then appends the new filename index.shtml to
what remains, giving a final URL
http://www.naijadownloadz.lefora.com/dreamweaver/index.shtml. It will use this
reassembled URL to retrieve what was linked to.
In view of this, you can only use relative URLs to link to pages within your own website.
For example, I cannot put a link with a relative URL of "newpage.html" and hope that
web browsers will read my mind and figure out that I'm talking about
"http://www.example.com/newpage.html" and not my own site. Any link pointing to
pages outside your site has to be specified in full form, using an absolute URL. Pages
within your own website, on the other hand, can be linked to using either a relative URL
or an absolute URL. It's up to you which to use.

How to Make Images, Including Your Site Logo, into

Clickable Links
If you hover your mouse over thesitewizard.com's logo, at the top left hand corner of this
page, you will find that it is actually a clickable link. (Go ahead and move your mouse
over the logo now, to see what I mean.) Clicking it will take you to my home page. This
practice of making the site logo a hyperlink pointing to a website's main page is not
unique to thesitewizard.com. Many, if not most, websites do this.

Since it's such a common practice, experienced users on the Internet have come to expect
that any time they need a shortcut to the main page of the site, they can simply click the
site logo. Since, as webmasters, we want to make our websites as usable as possible so
that visitors find it easy to get to where they want to go on our sites, it is a good idea to
add this facility to your website as well.

Note that although I mention your site logo in the steps below, the same method can be
used for any image on your website.

Start up Dreamweaver and open your web page.

Click once on your site logo, or any other image that you want to make into a clickable
link, to select it.

Look at the PROPERTIES panel at the bottom of your Dreamweaver window (see
picture).

If you want to use an absolute URL for your link, enter the URL manually into the Link
field. For example, if the main page of your site can be found at "www.example.com"
and you want your picture to link to it, type "http://www.example.com/" (without the
quotes) into that field and hit the ENTER key (or the RETURN key if you use a Mac). If
you've forgotten what an absolute URL means, please return to the section on absolute
and relative URLs.

On the other hand, if you want to use a relative URL for your link, click the icon that
looks like a folder near the URL field. (It's actually a clickable button.) A dialog box
entitled "Select File" will appear. Select the file you wish to link to, and click the "OK"
button. As is obvious from this dialog box, you can only use this method for web pages
that you have already created, and that are located on your own website. As mentioned
earlier, if you're linking to some other website, you'll have to use an absolute URL.

Enter "0" (zero, without the quotes) into the "Border" field of the PROPERTIES panel. If
you don't do this, some browsers will show a blue border around your picture to indicate
that it is a clickable link. By entering "0", you are giving the border a width of zero,
effectively removing it.

That's it. Your image is now a clickable link.

How to Make Pieces of Text into Clickable Links

The same method is used for making words, phrases, sentences or other pieces of text
into links.

Select the text you want to make into a link. You can do this by dragging your mouse
over the text to highlight it.

Either type the absolute URL into the "Link" field in the PROPERTIES panel (and hit the
ENTER or RETURN key), or click the folder icon near that field to select the file (and
click the OK button). If you're not sure what I'm talking about here, please go back and
read the section above on making an image into a clickable link.

Your words should now appear as underlined text in Dreamweaver.

Publishing and Testing Your Website

Publish your website and test it in your browser as before.

If you receive a "404 File Not Found" error message when you test the link on your page,
it means that you've linked to a non-existent page. If you intended your link to point to
your home page (which should obviously exist, since it is the very page doing the
linking), it probably means that you tried to use an absolute URL and you made errors in
typing your address. Of course, if you deliberately linked to a page that you have not
created yet (but intend to in the future), then the 404 error occurred because you haven't
created the page yet. In such a case, don't worry, the error will go away when you
actually create the page. On the other hand, if you linked to another website (not your
own), and you got a 404 error, it probably means that you typed the link wrongly.
Next Chapter

Now that you know how to link to other pages and sites, you can proceed to the next
chapter to configure the navigation menu in the left column of your web page.

How to Customize Your Website's Navigation

Menu Bar with Dreamweaver CS5
Chapter 6: Modify, Add, Remove, Customise
Your Website's Navigation Menu Bar

How to Customise Your Website's Navigation Menu

Bar with Dreamweaver CS5
Many websites have a common set of links on every page to the main sections of their
website. These links afford visitors a quick way to access other parts of the site. They are
usually positioned in a standard place on a web page, and are sometimes dressed up to
look like clickable buttons. By convention, this set of links is referred to by webmasters
as a "navigation menu". This chapter of the Dreamweaver CS5 Tutorial shows you how
you can customise the navigation menu on your website.

Note that I will assume in this article that you have been following the earlier chapters of
the tutorial. If this is not true, you may want to start with chapter 1. In fact, if you are
completely new to creating websites, most people find the article How to Make / Create
Your Own Website: The Beginner's A-Z Guide a better starting point.

Goal of This Chapter

By the end of this chapter, you will know how to add and remove items from your
navigation menu, change the text in the menu into clickable buttons, and customise the
colours ("customize the colors" if you use some other variant of English) of the menu
button. This chapter also discusses some ways to solve the problem of the uneven
columns on your web page.

How to Modify the Buttons in Your Navigation Menu

As I'm sure you've already realised, the web page that you're currently working on,
derived from Dreamweaver CS5's two column template, already has the skeleton of a
navigation menu built into its left column. It actually functions somewhat like
thesitewizard.com's menu, which you can find on the left column of this page that you're
reading, in that whenever you hover your mouse over a button, it changes colour. The
only reason your menu doesn't appear to work at the moment is because we haven't
actually pointed the "Link one", "Link two", etc, buttons to anywhere useful.

Start up Dreamweaver and open your "index.html" page.

Select the words "Link one" by dragging your mouse over them, and type "Home"
(without the quotes). This will replace the existing words. Alternatively, you can click
your mouse somewhere in those words and use your DEL or Backspace key to remove
the existing words, and replace them with "Home". Leave your text cursor in that button.
Do not click elsewhere.

In the PROPERTIES panel at the bottom of the Dreamweaver window, replace the hash
("#") mark in the "Link" field with your home page's URL. If you're not sure what I
mean, please return to Chapter 5: How to Make Your Images and Text into Clickable
Links with Dreamweaver CS5. The only difference between what I'm describing here and
what you did in the last chapter is that, here, you've got to delete the "#" mark first.

You now have a "Home" button as the top button in your navigation menu, pointing to
your website's home page. In other words, there are now 2 links on your web page that
point to your home page: your site logo and the "Home" button of your navigation menu.
This is standard practice on many websites.

Now modify the other buttons so that you get the following (in any order you like):

Make a "Site Map" button with a link pointing to "sitemap.html" (without the quotes). If
you prefer absolute URLs (explained in chapter 5), make the link point to
"http://www.example.com/sitemap.html" (without the quotes). You should of course
replace "www.example.com" with your actual web address.

Note: I know you don't have a page called "sitemap.html" yet. You'll be creating it in the
next chapter. Since it doesn't exist at the moment, if you're using relative URLs, you
obviously won't be able to click the folder button to select a file, so just type
"sitemap.html" (without the quotes) into the Link field, replacing the "#" sign.
Make a "Feedback" button with a link pointing to "feedback.html" (without the quotes).
If you don't like the word "Feedback", use "Contact Us", "Contact Form" or "Support" or
something like that. As before, if you prefer to use absolute URLs, point the link to
"http://www.example.com/feedback.html" instead. Again, replace www.example.com
with your actual URL.

Important: even if you create a button called "Contact Form" or "Support" or some other
thing, the link must point to "feedback.html" (or the absolute URL version of
"http://www.example.com/feedback.html"). This is because we'll be creating a feedback
form with a filename of feedback.html for your website in chapter 8, and if you change
the link here, your button will lead to a 404 File Not Found error.

Let me say that again: change the visual label on the button to any word (or words) you
like. But the filename must remain feedback.html (or its absolute URL version).

Optional: If you like, you can also make an "About Us" button with a link pointing to
"about.html" (without the quotes). As before, you can use an absolute URL if that's what
you've been using above.

An "About Us" page is used by some sites, particularly commercial ones, to give visitors
some information about the people or company behind the website. For personal
websites, some webmasters place their resume or curriculum vitae here, presumably to
attract prospective employers.

This is an optional button. You don't have to link to an "About Us" page if you don't plan
to create such a page later.

Depending on whether you created the "About Us" button or not, you either have one
unused button (with the words "Link four") or no more buttons left. Don't panic. Just read
on. The next sections will show you how to add new buttons and delete buttons from
your menu.

How to Add Additional Buttons to Your Navigation

Menu
For many webmasters, four buttons aren't enough to contain all the important links they
want to place in their navigation menu. To add additional buttons to your menu, do the
following.

Put your text cursor in the last button in your navigation menu by clicking your mouse
somewhere there. Use the arrow keys on your keyboard to move the text cursor to the end
of the word (or words) in that button.
Hit the ENTER key (or RETURN key on the Mac). A new button will be created.
However, this new button will not have the appearance of the previous ones. Don't worry.
Read on.

Type the word or words you want to appear on that button. For example, if you have a
"Price List" page, type "Price List" (without the quotes) into that space. Yes, I know that
the words will not be centred ("centered") on the page and the background colour is still
wrong. This will change in the next step.

Select the words you just typed. Again, one way of doing this is to drag your mouse over
those words. Leave those words selected and go immediately to the next step.

Enter the URL (whether absolute or relative) of that page in the "Link" field in the
PROPERTIES panel. (Just click to place your text cursor in the "Link" field and type the
address of the page you want to link to.) If you feel a sense of deja vu here, it's because
it's exactly the same procedure you used to create your other text links in the previous
chapter.

When you have finished typing your URL, hit the ENTER key (or RETURN key on the
Mac). The appearance of the button will immediately change to match those of the other
buttons supplied by Dreamweaver.

The above steps can be repeated to create as many buttons as you wish.

How to Delete a Button From Your Navigation Menu

If you have created one too many buttons, and want to remove one of them, here's one
way of doing it.

Select the text on the button you want to delete. For example, you can do this by dragging
your mouse over the words on the button to highlight it.

Hit the DEL key. This removes the words, but leaves a narrow horizontal gap in your
menu.

Move your mouse pointer so that it is directly over the narrow space in that gap. Click the
right mouse button.

A pop-up menu should appear. Click the "Remove Tag <li>" item on that menu. Your
button should disappear.
How to Change the Colour of Your Navigation Menu
Buttons
Your menu buttons are not exactly the same as the other text on your web page. As I'm
sure you already know when you tested your website in the previous chapters, when you
move your mouse over those buttons in a web browser, the buttons change colour. (You
won't be able to see that colour change in Dreamweaver since it is a web editor, not a real
web browser.)

In view of this, if you want to change the colour of your menu buttons, there are two sets
of colours that you can fiddle with. The normal colour of the button when the mouse is
not hovering over it, and the colour of the button when a mouse moves over it.

Important: the steps below assumes that you are familiar with the procedure taught in
chapter 4 on How to Change the Background of Your Website in Dreamweaver CS5. It's
exactly the same procedure. You may want to review that chapter if you've forgotten it.

Place your text cursor in one of the buttons of your navigation menu. One way to do this
is to click somewhere in the "Home" button. Actually, it doesn't really matter where the
text cursor lands on, as long as it's in one of the buttons.

Look in the CSS STYLES panel on the right side of the Dreamweaver window. Notice
the following two lines in the Rules section:

The line "ul.nav a, ul.nav a:visited <a>" is the line to doubleclick if you want to configure
the colour of the normal button (when the mouse is not hovering over it).

The line "ul.nav a:hover, ul.nav... <a>" is the line to doubleclick if you want to configure
the colour of the button when the mouse pointer is hovering over it. (Look for the word
"hover" in the line if you have trouble distinguishing between those two lines.)

Be sure to doubleclick only one of the above two lines. Do not doubleclick the "a:hover,
a:active, a:f... <a>" line. That is for the normal links on your web page. The line you're
looking for must start with the text "ul.nav".

(If you cannot locate those two lines, make sure that you've clicked somewhere in one of
the buttons of the menu. You may also have to scroll down the Rules section. If you can't
even find the Rules section, please refresh your memory by looking at chapter 4 again.)

The CSS Rule Definition dialog box that you're probably familiar with by now will
appear. Click the Background line in the left column. The contents of the right side of the
dialog box should change.

Click the colour picker box next to the "Background-color" field to change the colour.
When you're done, remember to click the "OK" button on the CSS Rule Definition dialog
box.

Cleaning Up the Rest of Your Left Column

At this point, your home page is almost complete. All that remains is to delete the
placeholder text under your navigation menu (assuming you've not already done so). This
is the dummy text that begins "The above links demonstrate a basic navigational
structure..." (etc). The text can be deleted the same way you delete any other text on your
web page, that is, by clicking to put your text cursor somewhere among the words and
using the DEL or Backspace key.

When you've done that, you'll probably realise that you've created a new problem. Your
left column is now substantially shorter than your right column.

(Okay, you didn't actually create that problem. It was there all the time, disguised only by
the placeholder text Dreamweaver put in that column. In any case, you can't exactly leave
the placeholder text there in your website.)

How to Solve the Problem of the Uneven Columns on

Your Web Page
Depending on your colour scheme and how much text you've placed in your right
column, the short left column on your web page may either be a horrifying eyesore or not
even noticeable.

If you're not sure what I'm talking about here, it probably means that under your current
screen resolution, your right column is approximately the same length as your left
column. Another possibility is that you've set the same colour for both your columns as
well as for the space behind the two columns. Otherwise, you'll probably have noticed
that your left column stops short halfway down the page since your left column, in all
probability, is shorter than your right column. And it's noticeable all the more because, by
default, it has a non-white background, in contrast with the right column and the space
behind the two columns.
There are two ways of solving this problem.

1) Fiddle with the Background Colours: Eg, Set the Same Colour for
Both Columns and The Space Behind
The easiest way around this is to set the same background colour for your left and right
columns as well as for the space behind them. This is the solution I adopted for
thesitewizard.com. You only have to look at the page you're reading to see what I mean.
The left column is actually very much shorter than the right column. Had I set a different
background colour for that column, you will immediately notice that it does not extend
all the way down the page. But since I didn't, the left column merely looks like an empty
patch of space where I paste my navigation menu and other material. In other words, it
doesn't really look like a column.

If you want to take this approach, return to the chapter on setting background colours in
Dreamweaver CS5 to change the colours of those three sections.

Note that your web page background does not have to be all white like mine for this to
work. If you are creative, you can still play around with colours and/or background
images so as to provide your site with a unique look.

2) Add Blank Lines to Your Left Column

Another way is to add blank lines to the left column. To do this, just click somewhere in
the space under your navigation menu (where you just deleted Dreamweaver's
placeholder text). Then hit the ENTER (or RETURN) key multiple times until the
column has the length you like.

This is not really a foolproof method, since web browsers will resize your web page
columns to fit your visitors' computer monitors. What might appear on your computer as
perfectly balanced columns might appear on a bigger or smaller browser window as
uneven in some way. The best you can do in this case is to test under the common screen
resolutions and make sure your website looks reasonably okay under the most common
ones.

Incidentally, your web page's ability to adapt to different window sizes and monitor sizes
is the consequence of using a "liquid" layout (since your page is based on Dreamweaver's
two column liquid layout). If you're interested in knowing more about this, please read
What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed
Layouts? That article however predates Dreamweaver CS5, and so refers to additional
templates using the "Elastic" and "Hybrid" layouts. These layouts no longer exist in CS5,
probably because they are superfluous and, in my opinion, not actually useful in real life.

Saving, Publishing and Testing

Once you've finished configuring, save your work with "File | Save All" (not "File | Save"
if you have changed the colours). Then publish and test your site as before.

Now that your home page is complete, you should take the time to check your website
under different screen resolutions. You don't have to buy multiple computers to do this.
Simply resize your web browser. If you use Windows, one way to do this is to use the
method I mentioned in my article How to Test Your Website Under Different Screen
Resolutions under Windows the Easy Way. Alternatively (whether you use Windows,
Mac, Linux or FreeBSD), download and install the free Opera web browser, go to its
"Tools | Preferences" menu, click the Advanced tab, select the Browsing line in the left
column, and check the box "Show Web page dimensions in title bar". Use Opera to load
your website, resize the window to some common screen resolutions like 1024x768,
1280x800, 1366x768, 1680x1050 and so on. Look at the top of the Opera window (in its
title bar) as you resize so that you can get the screen width you want.

Bear in mind as you test your navigation menu on your home page that you haven't
actually created any of the other pages your menu links to (other than the Home page).
As a result, you will probably get 404 File Not Found errors when you click buttons other
than the "Home" button. This is normal so don't panic when it happens. We will fix most
of those File Not Found errors in the next chapter. (Of course if you get a File Not Found
error when you click your Home button, then you need to fix your link to your Home
page, since that already exists.)

If everything works, congratulations are in order. You've completed your website's home
page.

Next Chapter

In the next chapter, you will learn how to use Dreamweaver's famous template system.
This system allows you to create and manage multiple pages on your site in a convenient
and efficient fashion. With this system, whenever you need to make a common design
change to your website, you only need to change it in one place, and Dreamweaver will
automatically update all your pages for you. At the same time, you will also be creating
other pages on your site.

How to Manage and Auto-Update Multiple Pages

with Dreamweaver CS5's Template System
Chapter 7: Automate the Management of a Multi-
Page Website

How to Manage and Auto-Update Multiple Pages on

Your Website with Dreamweaver CS5's Template
System
Nearly all websites have more than one page. Creating multiple pages for a website is
a relatively simple task; things only get troublesome when you want to make a design
change that affects all the pages of your website. Imagine having to go through every
page on a site with hundreds of pages, just to (say) add a new button to your navigation
menu. Here's where Dreamweaver CS5 shines in helping you automate the task of
creating and maintaining a multi-page website.

Since this is chapter 7 of the Dreamweaver CS5 Tutorial series, you will probably need to
start with chapter 1 if you aren't already very familiar with Dreamweaver CS5. I will
assume knowledge of all the things I've mentioned in the previous chapters. In addition,
for those who are completely new to making a website, I strongly recommend that you
read How to Make / Create Your Own Website: The Beginner's A-Z Guide first.

Goal of This Chapter

 By the end of this chapter, you will have created nearly all the pages of your website.
You will also learn how to use Dreamweaver CS5's template system to create new pages
based on the custom design and layout that you've been working on in the previous
chapters as well as to automate the updating of all the pages of your site when you make
a design change. Finally, you will also learn how to get Dreamweaver to automatically
figure out which pages of your site to upload without your having to manually open and
upload every one of them.

Introduction to Dreamweaver's Template Facility

If you look at all the pages on thesitewizard.com, you will probably have noticed that
practically every page shares the same basic layout. There is a logo and a navigation
menu in the left column, and the content specific to each page is housed in the right
column. This common design is the result of my basing all my pages on a template
containing all the above elements (logo, navigation menu, 2 column layout, etc). Using a
template makes the job of adding new pages to thesitewizard.com much easier than it
would otherwise have been: any time I want to add a new article, all I need to do is to use
that custom template and insert my article content into the right column.

Not only does Dreamweaver allow you to create such a customised ("customized" in
other variants of English) template for your website, its template system also includes
additional features meant to make a webmaster's typical tasks more productive. In
particular, if you ever decide to change the design of your website, all you need to do is
to modify the template, and Dreamweaver will automatically update all the pages on your
site derived from that template. You do not need to manually go through every page to
make those design changes.

To facilitate this auto-updating feature, Dreamweaver requires that you indicate which
portions of your page constitute the fixed part of your design and which portions contain
the content that varies from page to page. We shall do this below.

How to Create a Template in Dreamweaver CS5

Start up Dreamweaver CS5 and open the "index.html" file that you've been working on
in the previous chapters. For those who have forgotten how to do this, doubleclick the
"index.html" line in the FILES panel (found on the right hand side of the Dreamweaver
window).
Click "File | Save as Template...". As you will recall, this is my shorthand notation for
clicking the "File" item on the menu bar, and when the drop-down menu appears, click
the "Save as Template..." item in that menu.

A dialog box entitled "Save As Template" will appear. Click the "Save" button.

Another dialog box saying "Update Links?" should pop up. Click the "Yes" button.

When you do this, Dreamweaver will create a new subfolder, called "Templates", in your
website directory. You should be able to see this new folder in your FILES panel. The
page you see displayed in Dreamweaver is also no longer "index.html" but a file called
"index.dwt". This is your template file. It looks exactly like your home page at the
moment because you used your home page as the basis for this template (via "File | Save
as Template..."), but you can verify that you are indeed no longer working on your
"index.html" file by looking up at the tab under your menu bar in Dreamweaver (near the
top of the Dreamweaver window). The tab should say index.dwt instead of index.html.

Now you'll have to decide which part of your web page is going to be invariant across
your site, and which portions will contain content that will be different from page to
page. On most websites, the site logo and left column (containing your navigation menu)
are usually considered part of the fixed design for the website. (If you're not sure what I
mean, take a look at the part of thesitewizard.com's left column containing my site logo,
search field and navigation menu. It's exactly the same on every page of the site.) It's
usually only the right column that contains variable content.

By default, Dreamweaver regards the entire template as part of your fixed design. If you
want any part of your page to contain information different from what you see in your
template now, you will need to mark that portion as "editable". You can have as many
editable regions in your template as you wish, and your editable regions can be
interspersed with the invariant content. Your editable region can be as small as a single
word on your page (or even a letter or digit if you like), or as large as the contents of the
entire column (probably even the whole page, but that will defeat the whole purpose of
using a template). In other words, it's up to you to decide what to make editable and what
to leave as fixed.

To make sure that you are clear about what I'm talking about here, let me draw out the
implications of the fixed and editable regions in your template. When you decide that a
section of your web page is to remain part of the fixed design, Dreamweaver will not let
you change that portion in the individual web pages that are derived from this template
(since it's supposed to be fixed). But you're still in control here. Any time you want, you
can still modify the design of the fixed portion in the template itself. If you do that,
Dreamweaver will assume that you want to change the appearance of your whole
website, and proceed to go through every web page based on this template and update it
to your new design.
As such, if you want to put unique content in certain sections of your web page, you will
need to mark those sections as "editable". Let me suggest that this probably include huge
swathes of your right column, and the date portion (or more accurately, the year) of the
copyright notice in your footer.

To mark an area as editable, drag your mouse over that area to select it. As I said earlier,
you're not limited to what you select. If you like, you can even select all the titles, sub-
headers, and paragraphs in your right column in one go.

Click "Insert | Template Objects | Editable Region" from the menu.

A dialog box, entitled "New Editable Region", will appear, asking you to name that
editable region. This is just an internal label for your personal reference: the name you
give will not be displayed in the visible portion of your actual website. While you can
accept the default name given by Dreamweaver (probably some unhelpful name like
"EditRegion3" or the like), if you can think of a more meaningful name, use that instead.
Examples of useful names: "Page Title", "Page Content", "Copyright Year", "Product
Description", "Product Name", etc. Anyway, it's just an internal label, so don't lose sleep
over it. Even if you label it with some cryptic name like "Section 1", it's unlikely to
hinder you in any way in the future. Most webmasters know what they want the various
portions of their web page to contain, whether or not they label it with a relevant name.

Click the "OK" button. The section you marked will now be outlined in a blue box, and a
small label containing the name you gave will appear on the top left of that box. Don't
worry. As I said earlier, you will only see this box and label within Dreamweaver itself.
(It's meant to help you find all the editable regions.) It will not appear when you view
your website in a web browser.

Go ahead and repeat the above steps for any other region of your web page that you want
to make editable, giving each region a different name. The regions do not have to be
contiguous or anything like that.

When you've completed marking the editable regions of your template, click "File |
Save".

Depending on what you selected when you created your editable regions, you may get a
dialog box appearing with a message like 'You placed the editable region "[Some-name-
or-other]" inside a block tag. Users of this template will not be able to create new blocks
in this region. Move the region outside the block tag if you want users to be able to do
this.' where [Some-name-or-other] is the name of one of your editable regions. Just click
the "OK" button.

How to Associate Your Home Page with Your Template

 Now that you've created a template for your website, you can easily create new web
pages for your site without having to go through everything you did in chapters 1 to 6 all
over again. However, before you do that, you will need to associate your home page with
this new template you made. Remember that your home page was created before you
made this template. As such, at this point, if you change the design in your template,
Dreamweaver will not update your home page since it does not realise that the two are
connected in any way.

There are many ways to do this, but the least troublesome way is to simply overwrite
your old "index.html" file with a new page created from your template. Since you have
not actually modified your template in any way (other than to add the editable regions),
you'll end up with a new "index.html" that will appear identical to your old "index.html",
but one that Dreamweaver will regard as having been derived from your template.

Close all files by clicking "File | Close All". Although this step is not strictly necessary,
my experience working with newcomers is that if you don't do this, you may accidentally
end up working on the wrong file later if you click something wrong by accident.

Click "File | New". You will be greeted by the old familiar "New Document" dialog box
that you met in chapter 1.

Look in the left column of that dialog box and click the line "Page from Template".

You should now see the name of your website in the "Site" column, and the name "index"
in the adjacent 'Template for Site "[your-site-name]"' column. A thumbnail picture of
your template should also appear on the right side of the page. (Don't worry if the
thumbnail picture is not very accurate in its representation of your site.)

Make sure that the box "Update page when template changes" is checked. (It should be
by default, but make sure anyway.)

Click the "Create" button.

You should now see a page identical with your home page. Click "File | Save As...".

The "Save As" dialog box should appear. Click the "index.html" filename in the window
to select it. The filename "index.html" (without the quotes) should appear in the "File
name" field. Click the "Save" button.

A message box with the text "The file you selected already exists. Would you like to
overwrite this file?" will appear. Click "Yes".

Your original home page has now been overwritten by a new version. While this new
version appears identical to your old one in a web browser, it actually contains some
invisible markers that will allow Dreamweaver to automatically update it if you ever
make a design change in your template.
How to Make a New Page from Your Dreamweaver CS5
Template
At this point you are ready to create other pages for your website. You should at least
create the "Site Map" page which you have previously linked to in your navigation menu.
If you have also created a button pointing to your "About Us" page, you will need to
create that page too.

How to Create a Site Map

A site map is a comprehensive (or perhaps even exhaustive) list of all the pages on
your website.

If your home page is still open, close it by clicking "File | Close All". Again, this is
optional, and it's good to do it to avoid careless mistakes later on.

Click "File | New..." again, and select "Page from Template" in the left column, if it's not
already selected.

Make sure that the "index" template for your site is selected, and the "Update page when
template changes" box is checked. Then click the "Create" button.

Change the Title field in the Dreamweaver window to "Site Map" or "Site Map -
Example Co" (where "Example Co" is the name of your site). For those who have
forgotten where the Title field is, please refer to the picture below, taken from chapter 1.

You'll need to remember to change this title field every time you create a new page from
your template, or all your web pages will have the same title. Don't worry that you did
not mark this Title field as editable in your template. The Title field is always considered
an editable field by Dreamweaver.

Now replace the content of your editable region(s) on the page with a list of links to all
the pages on your website. For example, click to put your text cursor into one of the
editable regions, and use the DEL or Backspace key to remove the existing content. Then
type the name of each page on your site on a separate line, and make it into a link the way
you were taught in chapter 5.

For those who are not sure what a site map looks like, check out thesitewizard.com's Site
Map. It's basically just a list of links to all the pages on my site. (Don't be distracted by
my use of 3 columns on that page. The reason I used 3 columns there is because I have so
many pages on thesitewizard.com that if I use my default layout, that page will be
excessively long.)

I realise that, at this point in time, your website contains so few pages that you probably
feel silly creating a site map. However, your site map will become useful, over time, as
your site grows. The site map has the dual purpose of improving the usability of your
website, as well as helping the search engines locate all the pages on your website. You
may want to read my article on Appearance, Usability and Search Engine Visibility in
Web Design if you're not convinced.

If you find that hitting the ENTER (or RETURN) key creates too much blank space in
between each line, and you prefer that the lines be more closely spaced, do this instead of
hitting the ENTER key. After you type a line, say the word "Home", click "Insert |
HTML | Special Characters | Line Break" from the menu. (If you are using Windows, you
can hold down the Shift key and hit the ENTER key to accomplish the same thing.)
Nothing will appear to happen visually, but if you immediately type "Feedback" after
that, you'll see that "Feedback" is placed in a new line below "Home" without an
intervening blank line.

For the curious, the reason for this is that the ENTER key creates a new paragraph, hence
the extra blank line, while "line break" merely moves what follows to the line below.

Click "File | Save As..." and type "sitemap.html" (without the quotes) into the "File
name" field of the dialog box that appears. Do not use capital letters (uppercase), insert
spaces or otherwise change that filename. If you do, your filename will not match the
URL you previously set in your navigation menu, and you will get a 404 File Not Found
error when you click your Site Map button later. (I'm assuming here, of course, that
you've actually followed my instructions in chapter 6 and created a button for the "Site
Map" pointing at "sitemap.html" or its absolute URL equivalent.)

Click the "Save" button.

Remember to return to your Site Map to add a link to any new page you create for your
website. This includes the pages you create later in this chapter.
How to Create an About Us Page (Optional)
If you have not created a button to an "About Us" page in chapter 6, feel free to skip
this section. It is meant only for those who want an About Us page.

By now, you should be quite familiar with creating new pages from your template,
having already created two. Create another one now.

Replace the "Title" field in the new page with something like "About Us: Example Co",
where "Example Co" is the name of your site. Alternatively, you can use "About
Example Co", "About Me" or "About [Your Name]" if you wish. (Actually, you can use
whatever title you want. There are no fixed rules about your page titles. I'm merely giving
suggestions.)

Replace the content of your page with whatever you wish to reveal about your company
or yourself. As with all things on the Internet, be circumspect about what you say, since
the information will be publicly accessible. You don't know who is going to be reading
your site: it may be a future employer, or some crank living in your neighbourhood.

Save the page as "about.html" (without the quotes), again assuming that you used the
filename I suggested in chapter 6 for your navigation menu button.

Creating Other Web Pages

Create the other pages of your site the same way. When giving filenames to your
new pages, it's best to use small letters (lowercase) for all your filenames, with no spaces
in between, to avoid problems. Please see the article How to Create Good Filenames for
Your Web Pages for more information.
Do not create your Feedback Form (or Contact Form) page yet. You will do this in the
next chapter. There's more involved in creating a form than just designing an ordinary
web page.

For important pages, you may also want modify your navigation menu to add buttons to
them. What constitutes an important page? It depends on the nature of your site. If you're
selling things on your website, the "Order" or "Buy Now" page (where your customers
can place an order), the "Price List" page (where you list the prices of your products), and
"Products" page (where you list all the products you're selling) should be considered
important pages. They should always be in your navigation menu. See my article Is Your
Website Design Driving Away Your Customers? Some Basic Usability Tips for
Commercial Websites for a discussion of this if you're creating such a site. On the other
hand, if you're creating a personal site, put whatever you think visitors will want to access
into that menu.

Since your navigation menu is probably not in an editable region of your web page, you
will need to modify your template to include these new buttons. Which brings us to the
topic of the next section.

How to Modify Your Template in Dreamweaver CS5

If you find that you need to change something in the fixed portion of your website, for
example, to modify an existing button or to add a new button to your navigation menu, do
the following:

Close all files using "File | Close All". (This is just a precaution. You can actually leave
them open if you know what you're doing.)

Open your template. To do that, doubleclick the "Templates" folder in your FILES panel
(on the right side of the Dreamweaver window). This will expand the folder and show
you the "index.dwt" file. If doubleclicking causes the Templates folder to collapse and
hide the files instead, just doubleclick it again.

Doubleclick the "index.dwt" file in that folder.

Modify your template the way you would any ordinary web page. That is, everything that
you've learnt in the previous chapters about editing a web page applies to your template.

When you've completed your changes, click "File | Save".

The same dialog box telling you that you have placed some editable regions inside a
block tag may appear again. Just click the "OK" button to dismiss it.
A new dialog box, entitled "Update Template Files", will appear. The dialog box will list
all the web pages derived from this template and ask you whether Dreamweaver should
update all those files.

Click the "Update" button. This will update all your individual web pages with the
changes you've just made.

Another dialog box, entitled "Update Pages", will appear. By the time you see this dialog
box, Dreamweaver will already have modified all your other web pages to include the
changes you made in the template. The message is shown merely to report to you that the
job is done. If you want to see a list of files that it updated, put a check in the "Show log"
box by clicking it. When you're done, click the "Close" button to dismiss the dialog box.

Now click "File | Close" to close your template. (This is to protect you from accidentally
working on the template when you mean to work on some individual web page. You can
always open it again at a later time when you really mean to change something in the
template.)

I know that I sound like a broken tape recorder, repeating the same old thing over and
over again, but you won't believe the number of email messages I get from users facing
problems because they tried to edit the template when they meant to edit an individual
web page, or vice versa.

Now that you have learnt how to edit both templates and normal web pages, and you
have more than one web page to manage, always look at the tab under the menu bar to
make sure that you're editing the right thing. Your current template file has a filename of
"index.dwt". If you see that on the current active tab, it means you're editing the template.
If the tab shows a filename ending in ".html", you're editing a normal web page.

(And if you don't know what I mean by a "tab", doubleclick the "index.html" file in your
FILES panel to open it. You should be able to see an "index.html" tab, together with an
"x" for closing the tab, just under the menu bar near the top of the Dreamweaver
window.)

Any time you see multiple tabs at the top, it means that you have a few files open at the
same time. Learn to recognise the colour of the active tab, the one that indicates which
file you're currently working on. This way, you won't accidentally modify the wrong file.
There's nothing wrong with having many files open at the same time; most of us do it all
the time. You just need to be careful about what you're editing, especially when you're
new to working this way.

How to Publish Multiple Web Pages the Easy Way with

Dreamweaver CS5: Using Site | Synchronize
 Now that your website has many pages, it's no longer efficient to use "Site | Put" to
upload your site. That method was useful when you only had one page to publish. With
multiple pages to upload, what we want is a way to get Dreamweaver to figure out which
pages have been modified (or are new) and automatically upload these changed or new
files.

Click "Site | Synchronize Sitewide...".

A dialog box, "Synchronize Files", will appear. Leave the default options of
"Synchronize: Entire '[Your-Website-Name]' Site" and "Direction: Put newer files to
remote", and click the "Preview..." button.

Dreamweaver will then connect to your website to find out which files have been
previously published (and probably also their date of publication). When it is done, you
will see a new dialog box, "Synchronize" with a list of files that need to be uploaded to
your website.

By default, Dreamweaver will also publish your template file, "Templates/index.dwt".

This file is actually not needed for your website to function properly, and if you don't
want it to be uploaded, right click the line containing that file (that is, move your mouse
pointer over that filename and click your right mouse button). In the menu that appears,
click the "Ignore Selection" item. When you do this, the "Action" column will show
"Ignore" instead of "Put" for "Templates/index.dwt".

Should you upload your Dreamweaver template file?

The Dreamweaver template file does not actually form part of your website. It is not
linked to from any of your web pages (nor should it be), nor do web servers require or
expect it to be present on a website.

If you upload your template, your visitors will be able to retrieve your template by typing
"http://www.example.com/Templates/index.dwt" into their browser, where
www.example.com is replaced by your real domain name. This may or may not be what
you want. As far as I can tell, from my limited testing, the template file doesn't appear to
contain secret information like your FTP password or FTP user name. Even so, I
personally dislike the thought of having extraneous files that are not part of my website in
a public area of the site. Indeed, since I don't control the file format of the Dreamweaver
template, even if the file appears harmless at this time, I don't know if the Dreamweaver
developers will change the format in the future and include things that you might not
want revealed to the world.

So is there any compelling reason to let Dreamweaver upload the file at all? Some
webmasters don't actually back up their computers (that is, make a copy of the contents
of their computer and put it in a safe place). As a result, when their system breaks down
or becomes badly corrupted with a virus or something like that, they lose everything,
including their local copy of their website.

In such a situation, they often resort to using my instructions for How Do I Import an
Existing Site into Dreamweaver to get the online version of their website back into
Dreamweaver. I think you can probably see where I'm going with this. If they don't
upload their template file to their site, they can only recover their web pages from their
online site. The web pages will no longer be associated with any template, since they
won't have a copy of the template.

If you want my personal opinion on the matter, the best solution is to really back up your
computer on a regular basis, instead of relying on a template file dumped on your public
website as a sort of second-rate backup. It seems to me to be almost like storing your
dirty linen in public (if I may be allowed to mangle a metaphor). There are many free
hard disk backup programs around, so even if you can't afford to buy a commercial
program to do the job, there is little excuse not to keep an up-to-date backup of your work
yourself.

Click the "OK" button to let Dreamweaver "put" the files it deems to have changed.
When it has finished uploading everything, the dialog box will disappear on its own
accord.

Testing Your Website

Load your website in your browser. Now that your website is practically complete,
you should check everything on your site to make sure it works. Click the links on your
pages to test them; remember to also check those in your navigation menu as well as
those in your Site Map.

If all goes well, congratulations! You have not only completed most of your multi-page
website (only the feedback form remains), but you have also learnt most of the common
features of Dreamweaver that a webmaster typically needs for designing and maintaining
a website.
Next Chapter

In the next chapter, we will add the final set of pages to your website, namely the
feedback form and its associated pages. This form will provide an online interface for
your visitors to contact you without leaving your site.
How to Add a Feedback Form to Your Website
with Dreamweaver CS5
Chapter 8: Adding a Contact Form to Your
Website

How to Add a Feedback Form to Your Website with

Dreamweaver CS5
A feedback form, also called a contact form, allows your visitors to send you a
message from a web-based form. The message will be delivered to you via ordinary
email. In this final chapter of the Dreamweaver CS5 Tutorial, you will add a feedback
form to your website, thereby completing it.

As with the other chapters of this Dreamweaver tutorial series, this article assumes that
you have completed the earlier chapters, and thus makes references to concepts and
techniques taught there. If you are not an experienced user of Dreamweaver CS5, you
may want to begin with chapter 1. In fact, if you are new to web design, it's best to start at
the real beginning, with the guide How to Make / Create Your Own Website.

Goal of This Chapter

By the end of this chapter, you will have added a feedback form to your website. In
fact, you will also have completed your website, and have a fully functional multi-page
website. In addition, you will have learnt most of the commonly-used skills needed to
create and maintain a website using Dreamweaver CS5, and be able to create other
websites any time you want.
Before You Begin
You will find it much easier to understand this chapter if you have some experience
using a feedback form as an ordinary user. As such, please go to Feedback Form Demo
Site and use the form. Don't worry: the form on that site is just a demo, so you can test it
to your heart's content without spamming anyone. The messages sent go into a black
hole.

Even if you're a seasoned user of web forms, please go to that site and use the form there
at least once. That way, I can refer to elements of that form in this tutorial without
wondering whether you know what I'm talking about. The form you create in this chapter
will be based on the exact same technology that the demo form uses. So please do it now
before you proceed.

Special Requirements
You will need the following. This list is not optional. You must have the following or
your form will not work.

A web host that lets you run scripts that send email

Your website needs to be hosted on a web host that lets you run scripts
(computer programs) on their computer. Not only that, they must allow your scripts to
send email.

Most (if not all) commercial web hosts, including the one I currently use, allow this.

If you're not paying for your web hosting, for example, if you're using a free web host, or
you're using the free hosting that comes with your broadband connection, or you're using
one of those "free starter websites" that some domain registrars give you when you buy a
domain name, chances are that the things described in this chapter will NOT work for
you. If you're not sure, ask your web host.

Your web host must support PHP 4.2 and above

The feedback form script (computer program) requires a technology called PHP
to be installed on your website's web server. See the article What is PHP? for a plain
English explanation of what "PHP" means. You don't really need to read it if you're
feeling lazy, but it'll help you understand things a bit better if you do.
For those using a paid web host that lets you run scripts, it's likely that you will already
have PHP available for your site's use. The PHP needs to be at least version 4.2. (Before
you ask, PHP 5 or any bigger number is fine too.)

Parts of the Feedback Form System

As you will have noticed when you tried the demo feedback form, you will be creating
the following components:

The Feedback Form

This is the form itself. You will create it using thesitewizard.com's Free
Feedback Form Script Wizard, and, optionally, customise ("customize" in US English) its
appearance in Dreamweaver.

The form, by itself, doesn't do anything. Your visitors can click the "Send Feedback"
button till they are blue in the face, and nothing will be sent. The real job of sending the
email is done by the next component.

The Feedback Form Script

The feedback form script is the computer program that takes whatever
your visitors submit through the form and transforms it into an email message. It then
passes the message on to the email system installed on your web host's computer. Your
web host's email system then does the work of actually transmitting the message to your
email account. (It's a bit more complicated than that, but that's the gist.)

Like the form, you will be using the Free Feedback Form Script Wizard to create a
customised version of this script. Don't worry. It's all free.

The Thank You Page

After the script passes the message to your web host's email system, it
will tell your visitor's browser to retrieve the "Thank You" page from your site. This is
just a straightforward web page that tells your visitors that their message has been sent.
You will be designing this page yourself in Dreamweaver.

The Error Page

The "Error" page will be shown to your visitors if they fail to enter
some crucial information into your feedback form. Like the "Thank You" page, it is just
an ordinary web page that you will design using Dreamweaver.
How to Add a Contact Form for Your Website in
Dreamweaver CS5

Generate the Feedback Form and Script

The first thing you will need to do is to go to the Feedback Form Wizard and
generate your customised feedback form and script. The wizard can be found at
http://www.thesitewizard.com/wizards/feedbackform.shtml

Read the introductory page of the wizard, choose the option to create a PHP feedback
form script, and click the "Go to Step 2" button.

In Step 2, enter the information required by the form:

Email: Enter the email address at which you wish to receive the mail from your site's
visitors.
URL of Feedback Form: http://www.example.com/feedback.html
URL of "Thank You" Page: http://www.example.com/thanks.html
URL of "Error" Page: http://www.example.com/error.html

You should of course replace the www.example.com part with the real address of your
website. However, do NOT change the filenames, especially that of feedback.html since
you have used that name in your navigation menu in the previous chapters. If you change
the name now, the button in your navigation menu (and any other links pointing to your
contact form) will break. In addition, if you dislike the names I gave above so much that
you plan on changing them, be sure to read the article How to Create Good Filenames for
Your Web Pages so that you don't create problematic filenames that will cause trouble.

Read the licence agreement. If you agree to the terms, indicate it in the form and click the
"Generate script" button to continue.

A new page, containing customised versions of the contact form and script, will appear.
Do NOT close this page. Leave it open while you carry out the next few steps in
Dreamweaver. We will need the code generated by the wizard for your site.

How to Save the Feedback Form Script the Correct

Way
 Start up Dreamweaver and click "File | New..." from the menu. If you will remember
from the previous chapters, this means to click the "File" item from the menu bar, and
then the "New..." item in the drop down menu that appears.

Click "Blank Page" in the leftmost column. Notice carefully that I said click "Blank
Page" and not your template.

In the "Page Type" column, click the line that says "PHP".

Click the "Create" button.

A page that looks blank will appear. Unfortunately, this page is not actually blank, and
we need to delete the invisible rubbish that Dreamweaver inserted when it created the
page.

(Note: if you don't see a blank page, that is, a page that is completely white, but see your
2 column website design, it means you did not follow my instructions above. Close the
page without saving it and go back to the beginning of this section. This time, make sure
you click "Blank Page" as I mentioned.)

VERY IMPORTANT: click "View | Code" from the menu. You should now see the
HTML code that Dreamweaver inserted into your PHP page. Select everything on that
page. If you use Windows, an easy way to select everything is to use Ctrl+A, that is, hold
down the Ctrl key and type "a". (I believe that Mac OS X uses Command+A instead of
Ctrl+A.) Alternatively, you can also drag your mouse across everything to highlight it. If
you use the mouse method, make sure that you've really selected everything. Then hit the
DEL key.

Your window should now be blank.

Switch back to your web browser without quitting Dreamweaver.

The first section on the web page should have a heading "Feedback Form Script". Notice
that there is a box in that section. This box contains your feedback form script.

Select everything in that box. The best way to do this is to click your mouse somewhere
in the box to put your text cursor there. Then hit Ctrl+A (probably Command+A on the
Mac) as you did earlier. This should highlight everything in the box, but not on the rest of
the web page.

Copy the selected text to the clipboard. The easiest way to do this in Windows is to type
Ctrl+C (hold down the Ctrl key, and type 'c'). Alternatively, you can click your right
mouse button (while the mouse pointer is in the box) and select "Copy" from the menu
that appears.
Switch back to Dreamweaver. Do NOT close your web browser. We're still not done with
it yet.

Click "Edit | Paste" from the menu. The entire script generated by the Feedback Form
Wizard should appear in your blank document. The last line in the window should be a
red "?>". Above that line, you should see lines in various colours, namely red, blue,
green, purple and, if your screen is big enough, some orange.

If you don't see the things I mentioned above, close this Dreamweaver window (using
"File | Close") without saving anything. Then go back to the start of this section (click the
link to find the exact place to go to) and redo everything.

WARNING: do NOT change anything in this window. Leave everything as it is. There is
nothing that you should be customising here: in spite of the English words in some parts
of the file, this is not a web page that you are looking at. It is a computer program. It is
not displayed to your visitors. Modifying anything here may cause your feedback form to
fail to work correctly. Let me say it again: do not add, subtract or modify anything. Do
not even add blank lines.

Click "File | Save As...". When the "Save As" dialog box appears, type "feedback.php"
(without the quotes) into the "File name" field. Do not use any other name. Do not add
spaces to the name. Do not use capital (uppercase) letters. The name must be exactly as I
said. Click the "Save" button.

Click "View | Design" from the menu. You should see a blank page. Do NOT type
anything here. You're still looking at the feedback form script, albeit in Design view.
Click "File | Close" from the menu immediately to close the window before you
accidentally add or change something here.

How to Create the Feedback Form

You will now create the web page containing your feedback form. This web page is
just an ordinary web page, like the ones you've created in the earlier chapters of this
Dreamweaver tutorial series.

Click "File | New..." from Dreamweaver's menu.

Click "Page from Template" in the left column and select the template that you designed
in chapter 7. Since your feedback form is part of your website, it should probably have
the same layout and design that you've given the rest of your site. Click the "Create"
button.
You should now be back in familiar territory. As usual, remember to change the "Title"
field above your web page to an appropriate title, for example, "Feedback Form",
"Contact Us", "Contact Form" or "Support" (or whatever else you like). Add a visible
heading of "Feedback Form" (or whatever) into the editable portion of your web page,
and delete the placeholder content from your template's editable regions (if any).

Switch back to your web browser, and look for the section entitled "HTML Code" (scroll
down the page to find it). As before, there should be a box in that section. Select
everything in that box and copy it to the clipboard. If you've forgotten how to do it, go
back to the above section to refresh your memory.

Switch back to Dreamweaver. Click to put your text cursor in the spot on your web page
where you want the form fields to appear. Note that the cursor should be on a blank line.
If you don't have a blank line, make one by hitting the ENTER key (or the RETURN key
on the Mac).

Click "View | Code" from the menu.

Dreamweaver will display the underlying code for your web page. Your text cursor
should be positioned somewhere in a line that says "<p>&nbsp;<p>". In fact, to be
specific, the cursor should be after the first "<p>" and before "&nbsp;<p>".

Use the arrow keys on your keyboard to move the text cursor to the end of the line, that
is, to immediately after "<p>&nbsp;<p>" on the same line.

Click "Edit | Paste" from the menu to paste the HTML code you copied to the clipboard
from your browser earlier.

Click "View | Design" to return to Dreamweaver's Design mode. You should now be able
to see the form.

How to Customise the Feedback Form

This section deals with how you can customise the visual appearance of the
feedback form. You do not have to customise anything if the form already looks fine to
you. If you don't want to change anything, just skip to the next step. Otherwise, read on.

The form obeys the same CSS rules as the rest of your web page. As such, you can use
the techniques taught in chapter 3 to change the fonts, text size and colours if you wish. I
will not go through those steps again below. Instead, I will deal with the things you have
not yet learnt in previous chapters, namely, with how to change the widths of the various
fields in your form.
Before you begin, though, I should probably mention that the width and height of the
various fields do not affect how much information your visitors can enter into your form.
It's just a visual gimmick. Even if you create a very narrow field, your visitors can still
enter very long names, email addresses or comments. The web browser will simply scroll
to allow them to continue typing whatever they want to type.

Having said that, it's still useful to be able to change the sizes of the various fields so that
the form fits better into the visual design of your web page.

How to Widen the Name and Email Address Fields

To increase the width of the "Name" or "Email address" fields, click the field you
wish to change to select it.

In the PROPERTIES panel at the bottom of the Dreamweaver window, change the
number in the "Char width" field to any number of your choosing. The default width is
"25". If this is too narrow, change it to a bigger number (eg, "30", without the quotes) and
hit the ENTER key. If the results are still not to your liking, modify it again till you get
the width you want.

How to Widen the Width and Height of the Comments Field

To change either the width or height, or both, of the Comments field, click the box
under "Comments" to select it.

Look at the PROPERTIES panel at the bottom of the Dreamweaver window. The "Char
width" field, with its default of 45, controls the width of the box, while the "Num lines"
field, with its default of 15, controls the height. Feel free to change those numbers to
create a width and height that suits your site's design. Again, remember that you don't
have to create a really big box just to allow your visitors to send you long messages. The
web browser will scroll when necessary.

How to Change the Send Feedback Button

To change the text appearing on the "Send Feedback" button, click the button once
to select it.

Change the words "Send Feedback" in the "Value" field in the PROPERTIES panel of
Dreamweaver.

What Else You Can Change, and What You Should NOT Change
The feedback form and the feedback form script were created to work with each
other. The script depends on certain things in the form being left at its original value, and
if you change those things, the form may not work correctly. As such, let me mention the
things that you can change in the form, and the things that you should not change.

The general rule of thumb is that only things that appear (that is, are visible) on your web
page can be modified. That is, you can change the words "Name:" and "Email address:"
that appear next to the Name and Email Address fields. You can change the word
"Comments" that appear above your comments box. You can change the widths and
heights of the various fields. You can change the text "Send Feedback" that appears on
the button. You can also freely change the colours of the text and the background (as
taught in the earlier chapters).

Apart from the above, do not change anything else. For example, do not change anything
other than "Char width" and "Num lines" in the PROPERTIES panel for your 3 fields. Do
not change anything other than the "Value" field for the "Send Feedback" button. I know
the PROPERTIES panel provides other tantalising fields that may tempt the compulsive
customisers among you to modify. Specifically, do not change the words "fullname",
"email", "comments" in the "TextField" boxes in the PROPERTIES panel. The words in
those "TextField" boxes are not displayed on your web page, so you don't have to worry
about them. They are for internal use by the script.

Saving the Feedback Form

When you've finished customising your form, click "File | Save As..." and type
"feedback.html" (without the quotes) into the "File name" field of the "Save As" dialog
box. As usual, do not use any other name, do not change the capitalisation (case) of the
name and do not add spaces into the name. Use the name exactly as I gave it. This is
important because you entered this filename to the Feedback Form Wizard earlier, and it
embedded the name into the script. If you change it now, you may lose some of the
functionality of the script.

Close the feedback form with "File | Close".

Create the "Thank You" and "Error" Pages

You will need to create 2 additional web pages for the feedback system to function
properly. These are just ordinary web pages, so you should be able to create them
yourself without help. After all, you've already created so many web pages in the last
couple of chapters.

The first page to create is the "Thank You" page. This page is displayed to your visitors
after the feedback form script successfully passes their message to your web host's email
system. The main purpose of this page is to let your visitors know that their message has
been sent. Most websites take this opportunity to also thank their visitors for their
comments.

Create the page the way you did the other pages of your site (like your home page, site
map, etc), based on your custom website template. Remember to replace the "Title" field
with something meaningful like "Feedback Sent", "Message Sent Successfully", "Thank
You" or some other phrase of your choosing.

In the main content section of your web page, say whatever you want to your visitors. For
those who are not sure what to say, here's one possibility:

Message Sent

Your message has been sent to the webmaster. Thank you for your comments.

If you are running a business, you may want to give a more customer-friendly messag

Thank You for Your Feedback

Thank you for your comments. If your message requires a reply, I typically reply
within 24 hours of the receipt of the message.

After you complete the page, save it with a filename of "thanks.html" (without the
quotes). This is the name you provided to the Feedback Form Wizard earlier, and the
name is embedded in the feedback form script. If you use a different name, change the
case or add spaces, your visitors will be greeted with an unfriendly 404 File Not Found
error when they submit their message.

The other page that you will need to create is the "Error" page. This page is shown to
your visitors when they fail to provide their email address, name or message. Since such
information is needed for the script to create a properly-formed email message from the
form submission, the script (by default) displays the "Error" page if any of those fields
are empty.

Like the "Thank You" page, feel free to write whatever you want. One possibility is to
say:

Error Sending Message

Please complete all the fields in the form before clicking the "Send Feedback" button.
Click the "Back" button in your browser to return to the form to fix the error.
As before, remember to enter something meaningful in the "Title" field of the page. For
example, you can use "Error" or "Missing Information" (without the quotes) as the title.

When you've finished with the page, save it with a filename of "error.html" (without the
quotes). Again, don't change the name in any way, not even the capitalisation (case). The
filename must be identical with what you furnished the Feedback Form Wizard earlier, or
your visitors will get a File Not Found error instead.

Publish Your Pages

Publish your site with "Site | Synchronize Sitewide..." as you did in chapter 7. Your
form page, feedback form script, thank you and error pages should appear in
Dreamweaver's list of files to be published.

Testing the Feedback Form

To test your feedback form, connect to your site in a web browser. Make sure you
test the following:

Check if you named your "Error" page correctly

To check if you've named your error file correctly, and that the name matches what
you gave the wizard, do not enter your email address in your first test of your form. In
fact, don't bother to enter anything at all. Just click the "Send Feedback" button. You
should get your error page. If not, and you get a File Not Found error when you submit
the form, it probably means that there is a name mismatch: the name (or web address)
you gave the wizard is not the same as the name (or web address) of the error file you
actually created. Another possibility is that you failed to publish your error page or saved
it to the wrong folder.

Check if you named your "Thank You" page correctly

To check if you've named your "Thank You" page correctly and saved it in the
right place, write a message to yourself using that form. Make sure you complete all the
fields properly. If you get a 404 or File Not Found error when you submit the form, it
again means there is a name or web address mismatch somewhere. Either you've saved
your "Thank You" page with a different name from what you furnished the Feedback
Form Wizard, or you saved your page to the wrong folder, or you failed to upload the
page.
Check if your web host's email system has delivered the
message
After you get your "Thank You" page, you should log into your email account and see if
you have received your email. If not, go through the checklist of things to do when you
don't receive your email.

If you run into some other problems testing the script, please see the Frequently Asked
Questions (FAQ) about the Feedback Form Wizard. You may also want to reread this
chapter to make sure you didn't miss anything crucial.

Congratulations and Where to Go From Here

Congratulations! You've done it! You've not only created a fully functional multi-
page website, you've also mastered all the basic skills needed to design a website using
Dreamweaver CS5.

For those who want to explore Dreamweaver further, you may find tutorials on
accomplishing specific tasks with Dreamweaver in my List of Dreamweaver Tutorials.
These include tasks that are not covered in this main tutorial series because not everyone
needs to do them. In addition, as you may already know, Dreamweaver itself also
includes a help system from which you can find other pieces of information. I know some
of you did not use the help system because you didn't understand what it said. However,
now that you have successfully created a site from start to finish using Dreamweaver, you
may find that the things that you couldn't grasp before are now actually quite
comprehensible.

There are also other aspects to running a website besides the visual design part. You may
want to return to the How to Make / Create Your Own Website: The Beginner's A-Z
Guide to read an overview of the rest of the things you should probably do.

Finally, I would like to ask that you remember thesitewizard.com even when you've
finished your site. Link to it and recommend it to others. (Thanks!)

All the best for your site!