You are on page 1of 74

Dreamweaver CS5 Tutorial

by Christopher Heng, thesitewizard.com

CHAPTER 1 Dreamweaver CS5 Tutorial: How to Design a Website with Dreamweaver CS5

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

Compiled by: Vipul Sharma

There's more to creating a website than just using a web editor like Dreamweaver. If you are new to website creation, I strongly recommend that you first read How to Make / Create Your Own Website: The Beginner's A-Z Guide, found at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml 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

Compiled by: Vipul Sharma

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. 1. Start up Dreamweaver. 2. 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. 3. 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.) 4. 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".

Compiled by: Vipul Sharma

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. 5. 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. 6. 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

Compiled by: Vipul Sharma

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. 1. 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.

2. 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. 3. 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
Compiled by: Vipul Sharma

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. 4. Click the "Create" button in the bottom right of the dialog box. 5. A new dialog box, entitled "Save Style Sheet File As", will appear. Click the "Save" button in that dialog box. 6. 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, 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.

Compiled by: Vipul Sharma

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


1. 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 sub-headings. 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. 2. 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"

Compiled by: Vipul Sharma

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. 3. 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

Compiled by: Vipul Sharma

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 fullyfunctional 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. 4. 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

Compiled by: Vipul Sharma

own chapter since it relies on you having additional knowledge before you can work on it. 5. 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 6. 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,

Compiled by: Vipul Sharma

you will have mastered what is one of the largest technical challenges 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. 1. Click the "Site | Manage Sites..." menu. A dialog box, "Manage Sites" will appear. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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".

Compiled by: Vipul Sharma

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.) 8. 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. 9. 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. 10. 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 to which you're connecting 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.

Compiled by: Vipul Sharma

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. 11. 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

Compiled by: Vipul Sharma

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.) 12. Click the "Save" button when you've finished configuring the FTP settings. 13. 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. 14. Once that you've finished configuring Dreamweaver for your site, it's time to publish your home page. To do this, click "Site | Put". 15. 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.
Compiled by: Vipul Sharma

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.

Compiled by: Vipul Sharma

CHAPTER 2 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 thisDreamweaver 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. (In fact, if you're reading this article just to find out what creating a website is all about, you may find the article How to Start / Create Your Own Website: The Beginner's A-Z Guide to be a more useful and informative starting point.)

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.

1. 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.

Compiled by: Vipul Sharma

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.

2. Product Photos and Other Types of Images (Optional)

Compiled by: Vipul Sharma

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. Note: there is no such physical book, so please don't email me to ask where you can buy the guide. If you want to read it, the complete guide is available online (and you can read it free of charge; there's no need to buy anything) at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml

How to Add a Logo to Your Dreamweaver CS5 Website 1. 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
Compiled by: Vipul Sharma

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

2. 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

Compiled by: Vipul Sharma

copied to your local website's images folder. You can now close both those windows. Don't close Dreamweaver itself. You still need it.

3. 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.

4. 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 to the next step.

5. 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.

Compiled by: Vipul Sharma

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.

6. 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.

Compiled by: Vipul Sharma

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.

Compiled by: Vipul Sharma

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

Compiled by: Vipul Sharma

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.

7. 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. For those curious about what "CSS" is, please see the article What is HTML? What is CSS? What are JavaScript, PHP and Perl? for more information.

8. 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.

Compiled by: Vipul Sharma

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. 1. 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. 2. 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. 3. 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. 4. Your image will be inserted into your web page, possibly in as awkward a position as that shown in the image below.

Compiled by: Vipul Sharma

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
Compiled by: Vipul Sharma

satisfactory results. To adjust the vertical space between your picture and the words, use the "V Space" field in the same way. 5. 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.

CHAPTER 3 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

Compiled by: Vipul Sharma

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

Compiled by: Vipul Sharma

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.) 1. 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. 2. 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.

Compiled by: Vipul Sharma

3. 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. 4. 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. 5. Click the "OK" button. 6. 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,

Compiled by: Vipul Sharma

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 myFree 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.

Compiled by: Vipul Sharma

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


If 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. 7. 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. 8. Now select the text you want modified. One way to do this is to drag your mouse over the words to highlight it.
Compiled by: Vipul Sharma

9. 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. 10. 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. 11. 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? 1. 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,

Compiled by: Vipul Sharma

the "Class" field in that panel will show the name of the class you want to change. 2. Now look at the right hand side of Dreamweaver, at the CSS STYLES panel (see picture). 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 dropdown 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 preassigned to the content of your whole page. All you need to do is to modify this existing class to use the new font. 1. The simplest way to do this is to click "Format | Font" and select the new font you want.

Compiled by: Vipul Sharma

2. In the "New CSS Rule" dialog box that appears, select "Class (can apply to any HTML element)" for the Selector Type field. 3. 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 preassigned class is "container".) 4. Click the "OK" button. 5. 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. 1. Click "Format | Font" and select the font series you wish to use. 2. Select "Class (can apply to any HTML element)" for the Selector Type field. 3. 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. 4. Click the "OK" button. 5. 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

Compiled by: Vipul Sharma

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.

CHAPTER 4 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.

Compiled by: Vipul Sharma

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

Compiled by: Vipul Sharma

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 1. 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
Compiled by: Vipul Sharma

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

Compiled by: Vipul Sharma

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.

2. 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.

3. 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 "Backgroundcolor". This invokes the colour picker which you have already met in chapter 3. Choose a new colour from the selection offered.

4. 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"
Compiled by: Vipul Sharma

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. 5. Click the "OK" button to accept your changes. 6. 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 "Backgroundimage" field. If you like, you can also delete your selection in the "Backgroundrepeat" 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.

CHAPTER 5 How to Make Your Images and Text into Clickable Links with Dreamweaver CS5

Compiled by: Vipul Sharma

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.thesitewizard.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.thesitewizard.com/dreamweaver/dreamweaver-cs5-tutorial5.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
Compiled by: Vipul Sharma

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 likehttp://www.thesitewizard.com/dreamweaver/. It then appends the new filename index.shtml to what remains, giving a final URLhttp://www.thesitewizard.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. 1. Start up Dreamweaver and open your web page. 2. Click once on your site logo, or any other image that you want to make into a clickable link, to select it. 3. Look at the PROPERTIES panel at the bottom of your Dreamweaver window (see picture).

Compiled by: Vipul Sharma

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. 4. 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. 1. Select the text you want to make into a link. You can do this by dragging your mouse over the text to highlight it. 2. 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.

Compiled by: Vipul Sharma

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.

CHAPTER 6

Compiled by: Vipul Sharma

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. 1. Start up Dreamweaver and open your "index.html" page. 2. 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
Compiled by: Vipul Sharma

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. 3. Now modify the other buttons so that you get the following (in any order you like): o 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.
o

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.

Compiled by: Vipul Sharma

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. 1. 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. 2. 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. 3. 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. 4. 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. 5. 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

Compiled by: Vipul Sharma

If you have created one too many buttons, and want to remove one of them, here's one way of doing it. 1. 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. 2. Hit the DEL key. This removes the words, but leaves a narrow horizontal gap in your menu. 3. Move your mouse pointer so that it is directly over the narrow space in that gap. Click the right mouse button. 4. 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. 1. 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. 2. Look in the CSS STYLES panel on the right side of the Dreamweaver window. Notice the following two lines in the Rules section: o 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 nothovering over it). o 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".

Compiled by: Vipul Sharma

(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.) 3. 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. 4. Click the colour picker box next to the "Background-color" field to change the colour. 5. 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.

Compiled by: Vipul Sharma

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.

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 totest 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

Compiled by: Vipul Sharma

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 Operaweb 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.

Compiled by: Vipul Sharma

CHAPTER 7 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.
Compiled by: Vipul Sharma

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


1. 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). 2. 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. 3. A dialog box entitled "Save As Template" will appear. Click the "Save" button. 4. Another dialog box saying "Update Links?" should pop up. Click the "Yes" button. 5. 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

Compiled by: Vipul Sharma

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 content 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. 6. To mark an area as editable, drag your mouse over that area to select it. As I said earlier, you're not limited in what you can select. If you like, you can even select all the titles, sub-headers, and paragraphs in your right column in one go. 7. Click "Insert | Template Objects | Editable Region" from the menu. 8. 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. 9. 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

Compiled by: Vipul Sharma

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. 10. 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. 11. 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 will 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. 1. 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. 2. Click "File | New". You will be greeted by the old familiar "New Document" dialog box that you met in chapter 1. 3. Look in the left column of that dialog box and click the line "Page from Template". 4. 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.)

Compiled by: Vipul Sharma

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. 5. You should now see a page identical with your home page. Click "File | Save As...". 6. 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. 7. 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. 1. If your home page is still open, close it by clicking "File | Close All". Again, this is optional, but it's good to do it to avoid careless mistakes later on. 2. Click "File | New..." again, and select "Page from Template" in the left column, if it's not already selected. 3. 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. 4. 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.

Compiled by: Vipul Sharma

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. 5. 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.

Compiled by: Vipul Sharma

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. 6. 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.) 7. 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. 1. By now, you should be quite familiar with creating new pages from your template, having already created two. Create another one now. 2. 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.) 3. 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. 4. 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.
Compiled by: Vipul Sharma

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: 1. 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.) 2. 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. 3. 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. 4. When you've completed your changes, click "File | Save". 5. 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. 6. 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. 7. 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
Compiled by: Vipul Sharma

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. 8. 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. 1. Click "Site | Synchronize Sitewide...". 2. 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.

Compiled by: Vipul Sharma

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. 3. 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.

Compiled by: Vipul Sharma

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. 4. 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 multipage 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.

Compiled by: Vipul Sharma

CHAPTER 8 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 multipage 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
Compiled by: Vipul Sharma

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.

Compiled by: Vipul Sharma

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 1. 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 o 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. o 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/thankyou.html URL of "Error" Page: http://www.example.com/error.html
o

Compiled by: Vipul Sharma

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 offeedback.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. o 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.
o

2. How to Save the Feedback Form Script the Correct Way


o

o o o o

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.

Compiled by: Vipul Sharma

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. (Note: for most people, simply clicking somewhere in the box should automatically cause all its contents to be selected. If this is the case for you, there's no need to use Ctrl+A to select everything, although doing so will do no harm.)

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. o Switch back to Dreamweaver. Do NOT close your web browser. We're still not done with it yet. o 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.
o

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.
o

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.

Compiled by: Vipul Sharma

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.

3. 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.
o o

o o

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. o Click "View | Design" to return to Dreamweaver's Design mode. You should now be able to see the form.
o

4. How to Customise the Feedback Form

Compiled by: Vipul Sharma

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.
o

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


Compiled by: Vipul Sharma

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.
o

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.

5. 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".
Compiled by: Vipul Sharma

6. 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 message, like:

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 "thankyou.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 properlyformed email message from the form submission, the script (by default) displays the "Error" page if any of those fields are empty.
Compiled by: Vipul Sharma

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.

7. 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:

1. 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.

2. 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

Compiled by: Vipul Sharma

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.

3. 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! Copyright 2010-2011 by Christopher Heng. All rights reserved.

Compiled by: Vipul Sharma