Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4

by Christopher Heng, thesitewizard.com For those who don't know, Adobe Dreamweaver Creative Suite 4 (CS4), is a well-known commercial web editor that enables you to design, build and manage complex websites. The editor is a What-You-See-Is-What-You-Get (WYSIWYG) web editor, which means that you can create your web page visually and whatever you see on the screen while designing is what you will get when your site is loaded in a normal web browser. As far as WYSIWYG web editors go, Dreamweaver does a very good job of generating standards-compliant code for web pages. This means that your site will not break in newer versions of web browsers. For the technically inclined, the HTML and CSS code that it creates for your website will validate correctly.

Overall Goals of this Tutorial Series

By the end of this tutorial series, you will have created a complete website with multiple pages, including a home page, a feedback form, an About Us page, and a Site Map. Your pages will contain a sophisticated navigation menu bar, images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website,. More importantly, you will have learned how to use Dreamweaver to set up, design and publish your site. You will thus be able to update your site and design new sites any time you want.

Goal of this Chapter

In this chapter, you will learn to create a basic two-column web page and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing this page on the Internet with your web browser. Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.

What You Will Need

Creating a website involves far more than just designing the visual appearance of the web page itself. If you are not familiar with all the aspects of website creation, I recommend that you take a look at How to Start / Make a Website: The Beginner's A-Z Guide found at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml At the very least, you will need the following:
1

Dreamweaver
Since this is a Dreamweaver CS4 tutorial, it goes without saying that you will need the editor itself. Note that this tutorial assumes that you are using Dreamweaver CS 4. Dreamweaver CS5.5 users should read the Dreamweaver CS5.5 Tutorial, Dreamweaver CS5 users the Dreamweaver CS5 Tutorial and Dreamweaver CS3 users the Dreamweaver CS3 Tutorial. While CS3, CS4, CS5 and CS5.5 have some similarities, there are still enough differences between them that it will be much easier to just use the tutorial specifically written for the version that you have. Those using earlier versions of Dreamweaver, like Dreamweaver 8, will need to upgrade to the current version to use this tutorial. The earlier versions are missing key features that will prevent you from completing any of the CS3, CS4, CS5 and CS5.5 tutorials.

A Web Hosting Account

You will also need a web host for your site. For those new to web development, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you have designed your web pages, you will need to transfer them to your web host's computer (called a web server), so that the rest of the world can read them. There are many web hosts around. If you don't already have one, you can find a list of cheap web hosts on http://www.thefreecountry.com/webhosting/budget1.shtml

Although not in the above list (since you don't need it to succesfully complete this tutorial), I also recommend that you register your own domain name. A domain name is a name like "thesitewizard.com". It is a means by which people can reach your website. While it's possible for you to get by initially without your own domain, you will encounter innumerable problems down the road if you do so. However, since this tutorial is strictly devoted to designing (creating) and publishing your website with Dreamweaver, I shall leave not delve further into this matter. Instead, I will refer you to the Beginner's Guide mentioned above for this and all the other non-design aspects of creating a website.

How to Set Up Your Website with Dreamweaver CS4's Site Manager

1. Start up Dreamweaver. 2. A window with a top half that looks something like the picture below (without the words "thesitewizard.com Dreamweaver CS4 Tutorial" of course) will appear. The actual appearance of the window will be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.

Near the top of the window is a menu bar with the words "File Edit View Insert Modify Format Commands Site Window Help". This menu bar allows you to access many of Dreamweaver's features. We will be using this menu bar extensively in the course of the tutorial. 3. To create a website that you can manage using Dreamweaver, the first thing you should do is to invoke the Site Manager. To do this, click "Site" in the menu bar. When the drop-down menu appears, click the "New Site..." item on that menu. Important note: in the interest of brevity, I shall refer to such a sequence of clicking the "Site" menu, followed by clicking the "New Site..." item simply as "Site | New Site..." 4. A dialog box will appear with a title bar that reads "Site Definition for Unnamed Site 2". The actual number that follows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Don't worry about that. You are about to change it anyway. If you were to look at the top of the dialog box, you will see two tabs: the "Basic" and the "Advanced" tab. You should currently be using the "Basic" tab. If this is not true, click the "Basic" tab to select it. If you don't know which is currently selected, click the "Basic" tab to be sure. In the main part of the dialog box, you should be able to see a field just under "What would you like to name your site?" This is where you enter your website's name. If you're not sure what to call your website at this point, and you have already registered your own domain name, simply enter your domain name here. For example, if you have bought a domain called "example.com", enter "example.com" (without the quotation marks) into the box. If you're creating a company website, enter your company name instead. Don't worry too much about this field: it's merely for your own personal reference in case you create many websites and need to distinguish between them. The words typed here won't appear on your site. For the purpose of this tutorial, I will assume that you have typed "Example Company" into the box. However, there's no need for you to use this name just because you're following this tutorial. Use your site's real name. Underneath your site's name is a field for you to enter the web address of your website, following the question "What is the HTTP Address (URL) of your site?". If you have bought the domain "example.com", enter your website address as "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.
3

Once you've finished entering the above two fields, click the "Next" button at the bottom of the window. 5. In the next screen that appears, accept the default "No, I do not want to use a server technology" and click the "Next" button again. 6. The next window that appears lets you to control where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. You should always keep a copy of your website on your own computer. If you don't know what to do here, just accept the default and click "Next". 7. When the window with the question "How do you connect to your remote server?" appears, click the down arrow in the drop-down box and select "None". You will change this later when you publish your site, but for now, selecting "None" allows you to quickly get started with your site with minimum fuss. Click the "Next" button. 8. You will then be presented with a "Site Definition" summary. Click "Done".

How to Create a Two Column Web Page with Header and Footer in Dreamweaver CS4
Now that you have provided Dreamweaver with the basic information needed for it to manage your website, you will now create your first web page. For the purpose of this tutorial, we will create a two-column web page. By 2 columns, I mean that the page will have two vertical columns. This is a popular layout among many websites because it is both space-efficient and familiar to users (and as a result of that, user-friendly). One of the columns is usually used to hold the site's logo and navigation menu while the other column the main content. For example, if you were to look at any of thesitewizard.com's article pages, like the one you're reading, you will see that the left column contains the navigation elements while the right column contains the article itself. 1. Click "File | New...". If you remember what I said earlier, this means to click the "File" menu, followed by the "New..." item on the menu that appears. A window with the title "New Document" will appear.

2. In the Layout column of the window, locate the line that says "2 column liquid, left sidebar, header and footer". Select that item by clicking it once. 3. Now glance at the rightmost side of the same window and look for the item "Layout CSS". It should be somewhere near the bottom of the window. Click the drop-down box and select "Create New File". This causes Dreamweaver to place information controlling the appearance of your web page (called "CSS") in a separate file. We want this because all the pages on your site will share the same basic layout, and having such information contained in a single file saves disk space, bandwidth and speeds up the loading of your web page if your visitors load multiple pages of your website. 4. When you've finished doing the above, click the "Create" button. 5. Dreamweaver will issue a dialog box with the title "Save Style Sheet File As". Accept the default name and location by clicking the "Save" button. 6. Once you've done that, Dreamweaver will proceed to create a 2 column web page with some dummy content typed in. 7. Dreamweaver CS4 displays a slightly different screen layout depending on how large your monitor resolution is. If your screen resolution is large, Dreamweaver may start up in what it calls the "Split" mode, that is, it may show the underlying "raw" code of your web page in the top half of the window (the "Code" portion), and the visually pleasing version (the "Design" portion) in the bottom half. If your screen is smaller, Dreamweaver will simply start up in "Design" mode, where only the visually pleasing version is displayed. To standardize the appearance of the Dreamweaver window, for the sake of this tutorial, please click "View | Design" from the menu if you're in the "Split" mode. If you're not sure which mode you're in, just click "View | Design" anyway; no harm will come from doing it. This switches the layout to "Design" mode, where only your web page, as it appears in a browser, is shown. Don't worry. If at any time, you feel nostalgic for the original "Split" layout, just use "View | Code and Design" from the menu to get it back. Note, however, that all the steps in this tutorial, as well as the screenshots, assume that you are in the "Design" mode, so if you don't switch, you might get confused later when the screen doesn't appear the way I describe it.

Introduction to the Home Page

Before you proceed to replacing the "lorem ipsum dolor sit amet" text currently used as filler material, it's important to understand the basic theory behind what you'll be doing. This first page that you'll be designing will be your website's "Home" page. The home page is the main page of your site. It is the page your visitors see when they go to your site by simply typing your domain name in their browser. For example, if your domain name is "example.com", and your visitor types "http://www.example.com/" into their browser, they will end up on your home page. Since the home page functions almost like the front door of your website (or as close to a front door as a website can have), it should contain some information about what your site is about, as well as links to important pages (or sections) of your website. Some webmasters also use this space to welcome their visitors and give a short description about what they can hope to see on the site. For example, a company website that sells products or services should have a home page that gives visitors an idea of its products and services, as well as point
5

visitors to individual product description pages where they can find more information about the product and place an order. Even if your site is a personal website, you will still want your main page to give visitors an idea of what to expect on your site, and to link to other pages (or at least the main sections) on your site. For this tutorial, I will supply example text for a fictitious company called "Example Company", selling fictitious products. I strongly recommend that you use your own text instead of slavishly copying my supplied dummy text. For example, if your company is called "XYZ Inc", go ahead and use "XYZ Inc" in places where I use "Example Company". Similarly, if you're making a personal website, and have named your website after you, such as "Shakespeare's Website", substitute that name in places where I use "Example Company". The same goes for the actual content.

How to Design the Home Page of Your Website in Dreamweaver CS4

1. Let's take a look at the default two column web page generated by Dreamweaver. There is a horizontal bar stretching across the top part of your page labelled "Header". This is where you will place the visible name of your website. Under the header are two columns. The narrow left column, called the "sidebar" in Dreamweaver, is where you will eventually place your navigation menu. The wide right column, currently entitled "Main Content" is where you will place the bulk of your web page's content. 2. Directly above "Header", in the part of the window that belongs to Dreamweaver rather than your web page, you should be able to see a section that says "Title:" followed by a field that currently contains "Untitled Document". This field is the text that the search engines will show as being the title of your web page when it displays the results of a search. It is also the text shown by a web browser in the title bar of the browser window when it displays your page.

Click somewhere in the word "Untitled", and use the delete or backspace key to remove the existing text. In its place, type the name of your website. For example, if your site is called "Example Company", replace "Untitled Document" with "Example Company". Note that this title field is an internal field. The web browser does not display it in the body (visible portion) of your web page. As mentioned above, the field is only shown in the title bar of the browser window itself. If you're not sure what I'm talking about, look at the browser window of this tutorial now. Don't use the scroll bar nor scroll to the top in any way. Just glance upwards at the top edge of the browser window. It should have the words "Dreamweaver CS4 Tutorial: How to Create a Website with
6

Dreamweaver CS4 (thesitewizard.com)" or at least the first part of it. I placed those words into the title field for this page when I created it. Although it doesn't show in the body of a web page, it is still an integral part of the page, so you should not leave it set as "Untitled Document". 3. Now we move on to the visible portion of your web page. Begin by replacing the word "Header" with the name of your website. As before, you can do this simply by clicking somewhere in the word "Header". A blinking text cursor will appear. This text cursor behaves exactly the way the cursor behaves in a normal word processing program like Office or Word. You can move it with your arrow keys as well as use the DEL and backspace keys to delete characters. Use the delete or backspace key to remove the existing word and enter your site's name instead. For example, replace "Header" with "Example Company" if that's the name of your site. 4. Once you've figured out the above, it's a trivial matter to replace the "Main Content" section of the web page with your real content. As before, click somewhere in the words "Main Content", delete the existing text and replace with some appropriate content. Once you're done with replacing the "Main Content" header, proceed to replace the "Lorem ipsum dolor" (etc) gibberish. Just click somewhere in the top line, delete them, and type your own words. Typing and editing of text in Dreamweaver works more or less the same as it does under a wordprocessor. If you need to create new paragraphs, hit the ENTER (Windows) or Return key (Mac). The "H2 level heading" subtitle is there merely to show you that you can have subtitles in your documents as well. Replace it, along with the text below with whatever you want. If you are really at a loss as to what to type, you can use the following example text, either literally or as a model. However, it's best to write something relevant to your website so that you don't have to go back and re-edit it later.

Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.

Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs. 5. Don't change anything in the left column (sidebar). You will be adding a navigation menu to this section in later chapters, so just leave it unchanged for now.
7

6. Scroll down to the bottom of the page and locate the horizontal bar labelled "Footer".

Replace the word "Footer" with anything you like. Many webmasters place a copyright notice in this section. Very briefly, a copyright notice is simply a sentence like "Copyright 2008 by Christopher Heng". The copyright symbol, , can be inserted by clicking "Insert | HTML | Special Characters | Copyright" from the menu. For more information about copyright, see my other article on Copyright Issues Relevant to Webmasters, at http://www.thesitewizard.com/general/copyrightissues.shtml 7. Once you're satisfied with your web page, save it by clicking "File | Save As...". A dialog box will appear. Type "index.html" (without the quotation marks) into the "File name" field and click the "Save" button. IMPORTANT: make sure that you type the name "index.html" exactly as I gave it, entirely in small letters (lowercase) with no spaces in the word. Do not use any other name. Files with the name "index.html" are regarded as special files by most web servers. Published correctly, when a visitor accesses your website by just the domain name, like "http://www.example.com/", the web server will automatically deliver to them the "index.html" file in your site's main folder.

Introduction to Publishing Your First Web Page

Before we move on to polishing the page up so that it looks at least half-way decent, you will need to publish the page to your web host. That is to say, you will now learn how to transfer your web page and its associated files to your web host so that the page becomes "live" on the Internet. Although you are probably embarrassed to do this at this point, because the page is incomplete, there is actually no cause for worry. If you have not advertised your website's address ("URL") to anyone, no one will ever know your site exists. As a result, this early version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. Neither will the search engines even know your site exists. As you will discover over time, it's not that easy to get visitors. The main reason that we're publishing your page at this time is that you can get familiar with all the major stages in the design of a web page: that is, creating a web page involves not only crafting the page, but it also involves getting the page from your computer onto your web host's computer. Once you get this hurdle out of the way, you will have mastered what is one of the largest technical challenge a newcomer is likely to face. Don't let this scare you, though; it's actually quite easy! Note that you should not skip this step if you want to follow this Dreamweaver CS4 tutorial series. All my subsequent chapters will assume that you have already done this step. If you miss out this step, some of the things described in the next few chapters may not work the way they are supposed to.

How to Publish Your Web Page Using Dreamweaver

1. Start up the Site Manager again. This can be done by clicking "Site | Manage Sites..." from the menu. A dialog box entitled "Manage Sites" should open, with your website's name highlighted in the box in the main part of the window. If it's not highlighted, click the name to highlight it. Then click the "Edit..." button. 2. The Site Manager wizard that you encountered earlier in this chapter will pop up. Click the "Next" button until you arrive at the screen with the message "How do you connect to your remote server?". In the first part of this tutorial, you selected "None" for this answer. You will now have to change this to the actual values that you will need in order to publish your web page. In the drop down box for the question, select "FTP". When you do so, the blank section underneath will be populated with a number of additional questions.
3. Essentially, you will need to enter the information that your web host provided you

when you first signed up for a web hosting account. Web hosts typically send you a lengthy list of details about your account when you first sign up. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. This act of transferring your files from your computer to your web host's computer is variously known as "uploading" or "publishing". If your web host sent you the information in an email message, either print the message out or open it in another window so that you can refer to it. Personally, I think opening it in another window is better because you can then cut and paste the necessary information from one window to another and avoid typing errors. However, everyone has their own way of working, so do what suits you best.
4. Put the FTP address that your web host gave you into the answer field of the "What is

the hostname or FTP address of your Web Server?" question. If you have your own domain and are hosted on a commercial web host, this address is typically your domain name prefixed by "ftp". For example, if your domain is "example.com", many web hosts will set up your FTP address to be "ftp.example.com". Check the email you received from your web host for this information, or ask them if you cannot find the details. If the address is indeed "ftp.example.com", enter that in the box here. (Note: not all web hosts follow the "ftp.example.com" convention. Some web hosts ask you to simply use your domain name (ie, "example.com") for the FTP server. Others provide you with a hostname that is totally unrelated to your own domain. Make sure you really read the information given by your web host instead of randomly guessing a value to enter here.) 5. The next question from Dreamweaver that you'll need to answer is "What folder on the server do you want to store your files in?". Basically, you cannot simply upload (publish) your files into any folder you like on the web server and hope that they end up in the correct directory for your website. Some web hosts tell you that you need to place your web pages in a folder called "www". Others require you to publish them

into a folder called "public_html". Still others say that you should place them in the default directory that you see when you connect by FTP. If your web host tells you to simply upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you need to publish your files in a "www" directory or some other folder name, enter that folder name in the box given. If the host does not mention this at all, chances are that you can simply leave the box blank. 6. Type your FTP user name into the "What is your FTP login?" field. As before, this information has to be supplied by your web host. 7. Enter your FTP password into the "What is your FTP password?" field. Obtain this password from your web host if you don't already know it. If you don't want to have to keep entering your password every time you publish a page, leave the "Save" checkbox activated (it automatically becomes checked when you type your password). If you are sharing your computer with others, and don't want Dreamweaver to save your password, click the check mark to uncheck it. 8. If your web host tells you that the information you entered above is for SFTP or "Secure FTP", click the "Use Secure FTP (SFTP)" checkbox. Otherwise leave it blank. If you don't know what to do, and your web host didn't say anything about it, leave it unchecked. (Note that if you check the secure FTP option, make sure you re-look at the information provided by your web host to make sure that the default folder to publish your files is still the same. Some web hosts log you in to a different folder when you connect by SFTP from the one you get when you connect by FTP. As such, you may have to adjust the folder name to account for this if you use the SFTP option. In general, if you are confused or not sure, just leave the box unchecked to use normal FTP. You can always experiment with this option in the future when you've become more experienced and confident with publishing using Dreamweaver. For now, let's just get everything working first.) 9. Click the "Test Connection" button to check that you have entered all the information correctly. Note: If you use Windows Vista, the Windows firewall may issue a message asking you whether to block or unblock the connection. Be sure to click the "Unblock" button, or you'll be blocking FTP connections for Dreamweaver. By default, FTP connections are two-way, requiring the server 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. The interference by the firewall may also cause your first test in Dreamweaver to fail, leading Dreamweaver to issue a dialog box telling you to use Passive connections. Just click OK to that message, and click the "Test Connection" again. If the "Test Connection" button fails, Dreamweaver will display a dialog box asking you to try connecting with Passive FTP. To do this, look at the top of the dialog box to locate the "Advanced" tab. Click it. Somewhere in the middle of the page is a checkbox for "Use passive FTP". Click the box to activate it. Then click the "Basic"

10

tab at the top of the dialog box again, to return you to the wizard view. Finally, click the "Test Connection" button again. If the test continues to fail, it is possible that you've entered some information incorrectly earlier. Recheck everything. If in doubt, contact your web host and ask them what information you need to enter for each field. (Only your web host has such information.) If the test succeeds, click the "Next" button until you get to the final Summary page again. Then click the "Done" button. Do not click the Cancel button for a shortcut out of this dialog box or you may have to re-enter everything you typed in earlier. 10. Click "Done" again to dismiss the "Manage Sites" dialog box. 11. Now that you've properly configured Dreamweaver for your site, it's time to finally publish your web page. To do this, click "Site | Put". Dreamweaver will issue a variety of messages to let you know the progress of the upload. When Dreamweaver pops out a message asking you whether it should "Put dependent files?" answer "Yes". This merely means that it is to upload things like your images and CSS files that are required by your web pages.

Testing Your Web Page

Now that you have published (uploaded) your web page and its associated files to your site, you will need to test it by loading it in a web browser. This will let you know whether you have made any mistakes when entering your details earlier (such as uploading the files to the wrong directory). Start up your web browser, and type the web address ("URL") of your site. This should be the same address that you typed into the "HTTP address" field earlier in Dreamweaver. For example, type "http://www.example.com/" if that is your URL. If you have entered the FTP details correctly, you should see the page you designed earlier in the browser. If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your Internet provider ("ISP"). Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized around the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait. If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check that you have entered the correct folder in answer to the question "What folder on the server do you want to store your files in?". Such errors mean that the web server did not find your web page in the location it was supposed to be in.

11

To fix the error, simply click "Site | Manage Sites..." and "Edit" and click the "Next" button till you get to the appropriate screen to modify. If you get no errors at all, but see the page that you've designed earlier, congratulations! You have created and uploaded your first web page using Dreamweaver CS4. It may be a rudimentary page (for now) but you have successfully walked through all the essential stages of designing and uploading a web page.

How to Add Images to Your Website in Dreamweaver CS4

by Christopher Heng, thesitewizard.com In this chapter of the Dreamweaver CS4 tutorial, I will deal with how you can add logos, photos and other types of pictures to your website in Dreamweaver CS4. For those who have just arrived at this chapter and are otherwise not familiar with Dreamweaver, you may want to read the first chapter of this tutorial series, How to Create a Website with Dreamweaver CS4. This chapter assumes that you have already completed the steps given in that earlier chapter, created a 2 column website and uploaded a preliminary version of your home page to your site.

Goal of This Chapter

By the end of this chapter, you will have added a logo to your 2 column web page, as well as (optionally) embedded some pictures (either product photos, personal photo or some other picture) into your home page.

How to Get Images for Your Website

You will need to have the following pictures for this tutorial:

1. A small image to serve as the logo for your website

Most websites, including thesitewizard.com, have a logo that appears on every page of the website. Since this tutorial will show you how you can place that logo on your web page, you will need to have a unique image to serve as your site logo if you're to complete this chapter. For those who are designing a company website, chances are that you already have some sort of logo around (for example, on your letterhead). If you can get hold of an electronic version of that logo, either in the GIF, JPG or PNG image formats, then you're all set. Otherwise, scan or take a digital photograph of that logo, and use that image. Make sure the image is in the GIF, JPG or PNG formats (which shouldn't be a problem since most cameras and scanners support the JPG file format).

12

If you don't already have a logo, you should create one to use here. For things like logos, it's best not to use one of those free images you see on the Internet, even if the author says that you can use it royalty-free on your site. You will want your logo to be unique to your website, and not something other sites also sport. You can create logos either by drawing them on paper and then scanning them, or by using a drawing program or an image editor such as one of the free ones found on the Free Drawing and Painting Software, Image and Photo Editing Programs page. For those who have never created a logo before and are not sure how to even start, 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 You should also read that tutorial if you're not sure how wide your picture should be. While there are no rules for the width or height of an image for a website, if your picture is too wide, you'll have a very difficult time getting it to fit into your web page. Again, remember this cardinal rule: pictures of any sort that you want to place your site must be in either the GIF, JPG or PNG file format. Do not use any other format.

2. Product images, photos and other types of pictures (Optional)

If you want to place other types of pictures on your website, such as pictures of your products, photos of yourself and scenery, and so on, you should also get them ready before you begin the tutorial. For those of you selling software (or giving it away free) only in electronic form, you can also use a program like a 3D software box software to create an image of the box to place on your site. Free versions of such software can be found on the Free 3D Software Box Image Makers page. Images of physical software boxes tend to make your software look more valuable in the minds of visitors. Likewise, if you are selling (or giving away) electronic books and want to create images of such books, either use a drawing program to draw it manually, or get commercial software (there are no free ones that I know of) like Box Shot 3D (which can create both 3D software boxes and books) to do the job. For example, the picture here of my How to Make / Create a Website: The Beginner's A-Z Guide was created with BoxShot. 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
13

can read it free of charge; no need to buy anything) at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml

How to Add a Logo to Your Dreamweaver CS4 Page

1. Create a Folder for Your Images in Your Website Directory
Start up Dreamweaver CS4. Look at the right panel of the web editor. You should see at least two major sections: the top section has a tab entitled "INSERT", and the bottom section has a tab labelled "FILES" (adjacent to another tab called "ASSETS"). In this FILES section, you should see a list of files that are currently part of your website, namely "index.html" and "twoColLiqLtHdr.css". Both were created in chapter 1. To create a new folder to store your images, right click the blank space immediately underneath these two files. In the menu that appears, click "New Folder". A folder called "untitled", with its name highlighted, will appear in that window. Type "images" to replace the default "untitled" label, and hit the ENTER (or RETURN) key.

2. Copy Your Images into Your Website's Images Folder

Copy all the images that you want to use on your website into the folder you created in the above step. The method for copying files differ from system to system. For example, if you're using Windows Vista, click the windows button (the "Start" menu) on your task bar, and select "Computer". Navigate to the folder currently containing your images. Select all the images you need, right click them and select "Copy" from the menu that appears. Then navigate to the folder where you keep your website's files and where you just created the "images" folder. For example, if your Vista username is "chris" and your website is called "Example Company", and you didn't change the Dreamweaver defaults in chapter 1, the folder is probably in "c:\Users\chris\Documents\Example Company\images". Open that images folder, right click the blank space, and click "Paste" in the menu that appears.

3. Open Your Web Page

Switch back to Dreamweaver and double-click the "index.html" file in the FILES panel on the right side of Dreamweaver. This will load the page you created in the previous chapter.

4. Insert the Image

When you first open the web page, the blinking text cursor should be located just before your website's name in the header. If it's not, move your mouse there and click it to place the text cursor there. (If the text cursor ends up somewhere in the middle of
14

the name in the header, you can use your left arrow keys on the keyboard to position it at the beginning.) This is the place where you will be inserting your site logo. Click "Insert | Image" from the menu. If you remember from the previous chapter, my shorthand notation "Insert | Image" means that you are to click the "Insert" menu, and then click the "Image" item in the menu that appears. A dialog box should appear. If you have been following my instructions, there should be two folders listed here, "_notes" and "images" (which you created in an earlier step). Doubleclick the "images" folder to open it. A list of images that you copied to this folder earlier should appear. If you've copied many images here, and are not sure which one is your logo, click once on each item in this dialog box to see the picture in the "Image preview" box in the right side of the dialog box. When you're satisfied that you've got the correct image, select it and click the OK button. A new dialog box, with the title "Image Tag Accessibility Attributes" will appear. Enter "Example Company's logo" into the "Alternate text" field (if "Example Company" is the name of your website). Basically this "alternate text" is just a text description of what your image is about. It is shown in the browser if your visitor goes to your site with graphics disabled. It is also read aloud by screen readers (used by the blind), and indexed by search engines as the description for that picture. Although Dreamweaver does not force you to enter anything, you should always do so anyway to make your website accessible to the disabled. Ignore the "Long description" field, and click the OK button. For better or for worse, the logo will now appear beside your site name in the header. If you find that your logo is too big (or ugly or whatever) and you want to redo it, click it once with your mouse to select it, and hit the DEL key (on your keyboard). This will remove the logo. You can then go back and recreate the logo, save it into the "images" folder, and repeat the insertion procedure again. Alternatively, if your logo is one of those that should take up the entire horizontal space of your website, and you want the name of your site underneath the logo, click your mouse between the image and the first letter of your site name. The blinking text cursor should now appear just after the logo and before the name of your site. Hit the ENTER (or RETURN) key to move the site name under the image. If the result is not to your liking, you have at least two options. If you simply want to reverse what you just did, click "Edit | Undo New Paragraph" from the menu to undo the operation. Alternatively, you can re-create the logo you made so that it includes your website's name. That way, instead of having the logo and the text version of your site name, you can completely delete the text and let the picture take its place completely. Your picture will then have both the logo and the name of your site. If you choose this route, make sure that your site name appears in the "Alternate text" of the picture (and preferably elsewhere on the page as well), otherwise when visitors search for your site by name in the search engines, your site will not be listed.
15

5. How to Fix the Spacing Between the Logo and Your Site Name
Even if your logo is small enough to fit beside your site name in the header, you will probably find that it is uncomfortably close to the name. To introduce some space between the logo and the name, click the picture once to select it. Look at the bottom of your Dreamweaver window. You should be able to see a panel with a single tab labelled "PROPERTIES". This is the Properties pane. When you click your picture to select it, the Properties pane should be populated with a variety of fields that you can configure for your image (see picture below).

Enter "5" (without the quotes) into the "H Space" field and hit the ENTER key. Notice that some space has been added to either side of your logo when you do so. If the space is either too large or too small, adjust the number you entered till you are satisfied with the results. As you may have guessed, a larger number increases the horizontal space around the image while a smaller one decreases it. You can also put a number into the "V Space" to adjust the vertical space around the image.

6. Save and Publish Your Web Page

Save your web page ("File | Save"). Since you have already set up your site details in the previous chapter, all you need to do to publish the revised page is to click "Site | Put". When Dreamweaver asks you whether you should "put dependent files", click "Yes". This will cause the editor to upload your logo along with your web page to your website.

How to Add Images to Your Web Page in Dreamweaver CS 4 (Optional)

Inserting photos, drawings, product pictures, etc, into the main body of your web page uses the same technique described above. That is, just click the spot on your page where you want to insert the picture, click "Insert | Image", and so on. As before, you can adjust the space between your picture and the surrounding text using the "H Space" and "V Space" fields. Dreamweaver also allows you to align your pictures to the left or right of your text. Take the picture below as an example. When you first insert a picture before the text into the main body of your web page, the result probably looks something like this.

16

This is usually not what a web designer wants, since the placement of objects is awkward at best. To align the picture to the left of the words so that the words flow all around the words, locate the "Align" drop down box in the Properties pane. It is currently set to "Default". Click it and select "Left". Your web page should now look like this:

The image is now flushed to the left with the words flowing all around it. If you prefer that the picture appear on the right, select "Right" from the drop down menu instead of "Left". You should of course also adjust the "H Space" and "V Space" around the picture so that the words do not come right up to the edge of the picture. The above is merely an example to show you the effect of using the "align" facility in the Properties pane. When you're through with your changes, save your page and publish it again. And of course, test it by pointing a web browser at your site. Even though you're using a What You See Is What You Get (WYSIWYG) web editor, you should always check the changes you make in a real web browser instead of relying on Dreamweaver's representation of the page. (In fact, you should check it in multiple browsers.) Congratulations. Your site now looks more professional with the addition of a logo and pictures of your products.

17

How to Change Font Typefaces, Weight, Style, Colour and Sizes in Dreamweaver CS4 (Chapter 3)
by Christopher Heng, thesitewizard.com In the previous chapter of the Dreamweaver CS4 tutorial, we worked on beautifying your web page with pictures. In this part of the tutorial, we will focus on how you can modify the appearance of the text on your web page. If you have only just arrived in this tutorial series at this chapter, and are new to Dreamweaver CS4, it may be best to start with the first chapter of the tutorial: How to Create a Website with Dreamweaver CS4. This tutorial assumes that you have already completed the earlier two chapters, and thus have created a two column home page, uploaded (published) it to your site, and added a site logo and (optionally) other pictures to your page. It also assumes that you are already familiar with the techniques taught in those chapters.

Goals of this Chapter

By the end of this chapter, you will be able to change the font face, size and colour and use bold and italics in your web page. This chapter will also introduce you to Cascading Style Sheets (CSS) and show you how you can take advantage of its facilities for the purpose of styling your text.

Before You Begin: Things You Should Know About Fonts in Web Pages
Web pages are not like wordprocessor documents. In the latter, you can freely change the fonts of your text to whatever font you want, so long as you have that font installed on your computer. When you print the result, the font choices you made in creating the document will be reflected in the result, since most people print the document from the same computer that they created it on. On the Internet, your web page will mostly be viewed by others using their own computers, not yours. As a result, you cannot simply use some fancy font on your web page, and expect your web page to appear as you designed it when it is viewed by others on the web. They may not have the same set of fonts installed on their computers that you have. For this reason, most webmasters stick to using a standard basic subset of fonts that are found in most computers currently in use in the world. By default, since you're using Dreamweaver's 2 column "liquid" template, your page is currently displayed using one of the following typefaces: Verdana, Arial, Helvetica, sans-serif

18

This list is to be interpreted this way: if your visitor's computer has the Verdana font, the browser will use that font to display the page. Otherwise, the Arial font will be used, and failing that, the Helvetica font will be chosen. Finally, if none of the fonts listed can be found, the browser will use any sans serif font it can find on the computer. (If you don't know what "sans serif" means, please see the article Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website. It contains a more detailed discussion about the use of fonts in web pages.) The fonts in this sequence were chosen because they look fairly similar to each other (although they are not exactly the same). The Verdana and Arial fonts can be found on Windows and Mac OS X computers, so if you leave the fonts at their default setting, it's probably safe to assume that your page will look mostly the same in the majority of your visitors' computers. Dreamweaver allows you to select other series of fonts as well. You can see the list in the "Format | Font" menu. (That is, click the "Format" menu followed by the "Font" item in the menu that appears.) For example, the line "Courier New, Courier, monospace" means that the Courier New font is used if available. Failing that, the Courier font is used. Otherwise, the browser is to use any monospace font it can find. While Dreamweaver allows you to add other fonts to its list of fonts, using "Format | Font | Edit Font List...", it's generally not a good idea to do so. If a font is not in the list displayed in the "Format | Font" menu, it is probably not found on many computers (even if it is installed on yours). Webmasters who want their site to appear the same on (nearly) all computers often use one of the following series:

Arial, Helvetica, sans-serif Verdana, Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace

For those who are curious, at the time I write this, thesitewizard.com uses "Arial, Helvetica, sans-serif" for all its articles. If you want to know more about the use of fonts in web pages, please read the article Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website found at http://www.thesitewizard.com/webdesign/which-fonts-to-use.shtml

The Theory Behind Changing Fonts in Dreamweaver CS4: Introduction to Cascading Style Sheets (CSS)
Before you actually change fonts for your web page using Dreamweaver, it's helpful to understand a bit of how Dreamweaver works for such operations. Dreamweaver uses a technology known as Cascading Style Sheets, or "CSS" for short, to accomplish things that affect the appearance of your web page. For the most part, it does this
19

behind the scenes for you, so you don't actually have to know anything about CSS, HTML, or what-have-you. However, since CSS affects a lot of what you do when you want to change the appearance of your page, you can work more confidently and efficiently if you have at least a small bit of knowledge of how it works. Let's say you want to change every instance of the words "Example Company" on your web page so that it appears in the Times New Roman font. In prehistoric days, before CSS was invented, you would have to go through your web page and add a Times New Roman font instruction into the web page just before each instance of "Example Company". If you were to change your mind later, and decide that you preferred, say, Comic Sans, you would have to go through the whole web page again, and everywhere where "Times New Roman" appeared, you would have to replace with "Comic Sans". And since it's unlikely that you only have a single web page on your site, you would have to repeat the procedure with all the other pages as well. With CSS, it's possible to avoid this tedious procedure. CSS allows you to label all instances of "Example Company" with a descriptive name. For example, I may want to attach a label of "mycompanyname" to every instance of "Example Company" on my website. Then I associate a "Times New Roman" font instruction with the label "mycompanyname" in a single place on my site, in what is known as the style sheet. With that single instruction, every part of my website that has the label "mycompanyname" will instantly be displayed in the Times New Roman font. If I change my mind later, all I need to do is to replace the "Times New Roman" instruction in my style sheet with the new font that I want. And all my web pages will automatically reflect that change. As such, in order to change fonts for your web page later, we will be attaching labels to the pieces of text that you want to modify the font for. These labels are called "classes" in webmaster jargon.

How to Change Fonts (Typefaces) in Dreamweaver CS4

1. Load your web page in Dreamweaver CS4
Start up Dreamweaver and doubleclick the "index.html" filename in the FILES pane on the right. This will load the web page that you've worked on previously in the web editor.

2. Select the relevant text

Drag your mouse over the relevant text to select it.

3. Choose the font

Click "Format | Font" from the menu. A submenu with a list of fonts will appear. Click the font you wish to use. A dialog box entitled "New CSS Rule" will appear.

4. Assign the Class

20

The defaults set in the "New CSS Rule" dialog box will be different depending on what you've selected. If you have selected only a few words within a paragraph, the "Selector Type" drop down box will probably show "Class (can apply to any HTML element)" and the "Selector Name" field will be blank. If you have selected one or more paragraphs, the "Selector Type" drop down box will display "Compound (based on your selection)" and have a "Selector Name" pre-filled with some value such as ".twoColLiqLtHdr #container #mainContent p" or the like. No matter what was preselected for you, click the "Selector Type" drop down box and choose the "Class (can apply to any HTML element)" item. When you do this, the "Selector Name" field should immediately be emptied (if it had content previously). Now click the empty box under "Selector Name". You will need to enter a class name in this box to describe the block of text. This is the "class" or label that I mentioned above in my theory behind font changing in Dreamweaver section. (If you dozed off when you read that section, you may want to revisit it so that you know why we're doing this.) The class should begin with a letter of the alphabet. It can contain letters and numbers but must NOT include any spaces or punctuation marks. For example, "mainbody" and "productfeatures" are acceptable names for classes, but "main body" and "product features" are not. Don't spend too long trying to figure out a class name: it's just a descriptive label for you to use for font changes and the like. It will not be displayed in the visible portion of your web page so you don't have to worry about coming up with a fancy name. (If you're really stuck and can't think of a name, use "mainbody" [without the quotes] if you're selecting practically every paragraph in your main content section. Like I said, it's just a label. It'll be nice if your label is descriptive of what you're selecting, but don't kill yourself over it.) As you type your class name, the description box underneath will probably tell you something like "This selector name will apply your rule to all HTML elements with the class '...'" (where the ellipsis "..." will be replaced with whatever name you have actually used). When you've finished with the name, look for the "Rule Definition" box at the bottom of the dialog box. Click the drop down box and select "twoColLiqLtHdr.css". Click the "OK" button. Your new font selection will be added to the default style sheet created by Dreamweaver when you first made your site.

5. Changing the Font for Other Pieces of Text

The procedure for changing the font for other pieces of text in the rest of your document depends on what you're changing.

21

Let's say that you want to change all the product description paragraphs in your web page to have a certain font. The first time you do this, follow the procedure given above and label your class "productdescription" or whatever. Later, when you add a new product to your page, and want its text to have the same font, simply select the text in question. Then look at the PROPERTIES pane at the bottom of the Dreamweaver window. (See picture below.)

You should be able to see a "Class" field in that panel. (If you don't see a "Class" field, click the "HTML" button in that same panel.) Click the down arrow beside the "Class" field. Scroll up or down that field to find the "productdescription" name or whatever class name that you assigned earlier. Click it. The new product description paragraph will immediately be displayed in the font you selected earlier. If however, you are adding an unrelated paragraph to your web page, say an "Awards Won" section, and want a different font, you will have to use the "Format | Font" menu all over again, and give that paragraph a different class name.

6. Changing Your Mind about the Font Change

What if, after viewing your web page in your browser, you decide that you prefer yet another font instead of the one you set earlier? Here's where the beauty of CSS shines. You do not have to go back to all the different pieces of text scattered across your document to set a new font. You only have to change it in one location, and all the pieces that share that same class will have the new appearance. To change the font on all pieces of text that share the same class you gave earlier, click somewhere in the middle of a block of text that has that class. Do not select it -- just click anywhere inside that block (preferably not at the first character in case you accidentally land outside the block). In the rightmost panel in Dreamweaver, look for a tab that says "CSS STYLES". It will probably be in the middle of the panel somewhere. When you doubleclick it, it should expand to look something like the picture on the right. (If it already appears expanded, you don't have to do anything. The exact appearance of that panel will vary from machine to machine.) In the CSS Styles tab, locate the "font-family" line that shows the name of the font you set previosuly. Double-click it. It doesn't matter if you doubleclick the word
22

"font-family" or the actual font name itself. A dialog box, "CSS Rule Definition for ... in twoColLiqHdr.css", will appear, where the ellipsis, "...", is replaced with the name of the class you set earlier. If the name of the class is not the right one, it means that you have either doubleclicked the wrong item, or your cursor is located in the wrong part of your web page. Dismiss the dialog box by clicking the Cancel button and try again. In the dialog box, click the down arrow for the combo-box for "font-family" and select the new font that you want. When you're satisfied, click the OK button. You should be able to see the changed font on your web page immediately. If you have many separate pieces of text on your web page using the same class, all of them should reflect the changed font. Incidentally, if you want to collapse the CSS STYLES panel and expand the FILES panel, just doubleclick on the FILES panel tab. The latter will expand and the CSS STYLES panel will again be reduced to just the tab. (Once again, the exact sizes of the panel may differ depending on your screen resolution. I'm currently using Dreamweaver on a low resolution monitor, so expanding one panel collapses the other.)

How to Change the Font Size

For the One-Off Change

If this is a one-off change for a small block of text, select that block with your mouse. In the PROPERTIES pane at the bottom of the Dreamweaver window, click the "CSS" button. It's the button on the bottom left in the Properties panel, underneath the "HTML" button. (See picture below.)

You should be able to see a "Size" field in the panel. By default, it should be set to 100%. Enter your preferred size into that field. If you prefer to work in some other unit other than percentage, click the down arrow for the "%" (percent) box and select the unit you want. In general, for web pages, it's best to work in either percent ("%") or ems ("em"). Units like points ("pt") work better for the print medium than for the computer monitor. When you hit the ENTER key (or the RETURN key if you're using a Mac), the "New CSS Rule" dialog box appears. Do the same as you did earlier when changing the font and assign your size change a class name. Although it may seem tedious now, this

23

method has long term benefits if you're going to be using the same size for different pieces of text and modifying it at some future date. The same things that apply to the typefaces mentioned above apply also to font sizes. That is, you can select other pieces of text for which you want the same font size, go to the PROPERTIES panel, click the "HTML" button.

Click the class drop down box to select the same class you just created.

For Font Size Changes in Combination with Typeface Changes

If the block of text for which you're changing the font size is the same block that you've also set the font for earlier, click somewhere in the middle of the block of text. Then go to the CSS STYLES panel in the same way you did for the Changing Your Mind about the Font Change section earlier and open up the CSS Rules Definition dialog box again by clicking the font-family line. (If you've skipped that section because you didn't need to modify the font earlier, go back again and read it.) Look for the "Font-size" item in that dialog box, and enter your desired size into that field. In the drop down box beside it, change the default of "px" to whatever unit you want, such as percent ("%"). Before you click the "OK" button, notice that it is possible to also change things like the font weight (eg, whether to make the font "bold" or not), font style (eg, whether you want the italic version of the font or the normal version), the text decoration (eg, whether you want the text underlined) and even the text colour (click the square box beside the word "Color"). In the category box on the left of the dialog box, you will also notice that there are other things you can change for your text as well. For now, unless you actually want to change those things, just click the "OK" button.

How to Change the Text Colour

24

If you are changing the colour of a piece of text for which you have already applied some sort of style (like changed the font above), use the CSS STYLES panel to invoke the CSS Rule Definition dialog box as before, and change the colour from there. (See above section.) However, if the piece of text does not have any custom font face or size changes, select the text, click the "CSS" button in the PROPERTIES panel at the bottom of Dreamweaver, and click the black square box near the "Size" field (to its right).

A colour picker window will appear, allowing you to select a colour simply by clicking on it. Clicking it, however, will open the "New CSS Rule" dialog box that you've met earlier when you changed the font and its size. By now you should be quite familiar with this dialog box and should know what to do. That is, set a name for your class after making sure that the selector type is set to "Class (can apply to any HTML element)", and ensuring that the Rule Definition is saved in the twoColLiqLtHdr.css file.

How to Change Font Weight to Bold or the Style to Italics

If you want to use italics or bold for your web page, select the relevant text, look in the PROPERTIES panel at the bottom of Dreamweaver, click the "HTML" button in that panel, and click either the "B" button (for bold) or the "I" button (for italics).

If you are using Windows, and are familiar with using the usual wordprocessor shortcuts of Ctrl+B for bold and Ctrl+I for italics, the same keyboard shortcuts will also work here. If you don't know what I'm talking about here, just stick to the method given in the paragraph above.

Saving, Publishing and Testing Your Web Page

Once you've finished making all the above changes, save your page by clicking "File | Save All". Notice I said "File | Save All" and not "File | Save". This is because you have modified two files in this chapter: the index.html page which is your home page, and also, indirectly (because of the font changes you made), the "twoColLiqLtHdr.css" stylesheets file.

25

Publish the web page the same way you did in the previous two chapters. And remember, as before, to allow Dreamweaver to upload "dependent files". Then check out your new home page in your web browser. Congratulations! Your home page now has text that is approriately customized for your purpose. In the next chapter, you will learn how to change the background of your web page. This includes setting the background colour of each column of your page (if you wish) and also, optionally, adding a background image to your content

How to Change the Background of Your Website in Dreamweaver CS4 (Chapter 4)

by Christopher Heng, thesitewizard.com As part of a website's design, many webmasters want to change the default white background of their website. They may want to change its colour (or "color" if you use US English) or place a background image as a backdrop. This chapter of the Dreamweaver CS4 tutorial shows you how you can do this. Those who have not read the previous chapters of this Dreamweaver CS4 tutorial series may want to start with the first chapter, How to Create a Website with Dreamweaver CS4. The article you're reading assumes that you have completed all the steps taught in the previous chapters and have the necessary theoretical and practical knowledge covered in those chapters. For this reason, if you're only just plunging into this chapter alone, some of the terms used and procedures described may be mystifying to you.

Goals of this Chapter

By the end of this chapter, you will be able to:
1. Change the background colour of your whole web page using Dreamweaver CS4.

2. Change the background colour of selected portions of your web page, like the side bar, the main content section, the header and the footer. 3. Add a background image as the backdrop to your web page, or selected section of your web page. This chapter also introduces the Dreamweaver status bar, a useful tool that allows you to select different elements on your web page for customization.

Basic Things to Note About Changing Colours or Adding Background Images

Before we change the background colours or add background images to your web page, it is important to note the following.
26

Colour Contrast is Important

When you change the background colour of your web page, make sure that you choose highly contrasting colours for the foreground text and its background. For example, don't put red words on a blue background (or vice versa), grey words on a black background or yellow words on a white background, to name a few combinations I've seen on websites created by beginning webmasters. Such combinations make your website very hard to read, even for people with normal eyesight. They create even worse accessibility problems for those who are colourblind or have poor eyesight (including older people).

Make Sure That Your Background Image Does Not Interfere with Your Foreground Text
If you're adding a background image, make sure that the image is such that it does not make it difficult for visitors to read your page. This may seem obvious to you, but since I've encountered a few beginning websites with this problem, I thought I should at least mention it.

The basic principle is that background colours and images are merely the backdrop to your main content. Change them all you want to make your site pleasing to the eye, but don't let them detract from the content itself. Your site's visitors are not there to gawk at your background colours or image. They are there to buy your products or read your content.

How to Change the Background Colour or Add a Background Image in Dreamweaver CS4
If you've not already done so, start up Dreamweaver CS4 and doubleclick the "index.html" file in the FILES pane. Your web page at this point should have the two column layout that we created in chapter 1, a site logo and possibly other graphics that we added in chapter 2 and any customized font settings that you made in chapter 3. If you were to look at the background colours of your web page as it currently stands, you will see that it basically has a few sets of colours.

The header, footer and side bar has different shades of light grey. The main content section has a white background. The background behind the two columns, header and footer has a dark shade of grey. I shall refer to this as the "page background", since this is actually just the default background colour of your entire page as set by Dreamweaver's two column template.

Changing the Page Background

To either set the colour for the page background or to use a picture as its background image, click anywhere on your page. It doesn't matter if you click somewhere in the header, the side bar or the main content.

27

In the PROPERTIES panel at the bottom of the Dreamweaver window, you should be able to see a button that says "Page Properties". Click it. A dialog box entitled "Page Properties" will appear. Do either one of the following (depending on whether you want to change the background colour or set a background image).

To Change the Background Colour

To change the background colour, click the square box beside the word "Background color". A colour picker window will appear, allowing to change the colour. Just click the colour you want and the colour picker window will disappear, leaving your colour change reflected in the square box. If, after you click the colour picker, and you decide that you really don't want to change the colour after all, hit the ESC key on your kebyoard to get out of the colour picker without making any changes. When you're satisfied with your change, click the "OK" button to dismiss the Page Properties window. Your web page should immediately reflect the colour change.

To Use a Background Image

If you want to use a background image, make sure that you have copied your image into your "images" folder as you did in chapter 2. Then, in the Page Properties dialog box, click the "Browse" button beside the "Background image" field. A dialog box with the title bar reading "Select Image Source" will appear. Doubleclick the "images" folder in the dialog box. When the images in the folder appear, select the picture that you want to use as your background. Again, as before when you were adding pictures to your site, you can click each file to see the picture in the "Image preview" window if you cannot remember which filename goes with which picture. When you've selected your image, click the "OK" button. The background image file and folder name should now appear in the "Background image" field. Now click the down arrow for the "Repeat" field (just underneath the "Background image" field). If your image is small, and you want it repeated so that duplicate copies of the image fills the entire window (like tiles on a floor), click "repeat" in the drop down box. If the image is big, or if you simply don't want it repeated, click "norepeat". It's also possible to make the image only tile horizontally ("repeat-x") or vertically ("repeat-y"). Choose whichever is appropriate for your particular image or your personal taste. Note that it's possible to see your web page with the changes you select without leaving that dialog box. For example, if you clicked "repeat" but are not sure whether it looks good for your site, just click the "Apply" button at the bottom of the "Page Properties" dialog box. In the background, behind your dialog box, you should be able to see your page with the changes. If you're not satisfied with it, just change the repeat
28

pattern and click "Apply" again. When you're satisfied with your choice, click the "OK" button. (Note: if you change your mind about using a background image, and have clicked the "Apply" button earlier, clicking the "Cancel" button will not undo your change. To undo it, click the "Background image" field and use the DEL or backspace key to remove the filename and folder. That is, empty that field. You can leave the "Repeat" field as it is.)

Introducing the Dreamweaver CS4 Status Bar and a Smattering of HTML

Before we can configure the background of the rest of the page, namely the header, footer, side bar (left column) and the main content (right column), you will need to familiarize yourself with the Dreamweaver status bar. To help you understand the status bar, first put the text cursor somewhere in one of your paragraphs in your side bar. That is, click somewhere in the left column, such as in the paragraph "The background color on this div will only show..." (etc). Now look for the status bar, which is located near the bottom of the Dreamweaver window, just between your web page and the PROPERTIES panel. It looks something like the following picture, although the exact words displayed may differ depending on which portion of your page you clicked and how big your Dreamweaver window or monitor is.

In spite of its innocuous appearance, the status bar is important in Dreamweaver if you want to customize your website's appearance. It allows you to select entire blocks in your web page so that you can change things like colours, fonts, etc, of whole sections of your page in one go. Notice that the left side of the status bar contains apparently gibberish text, enclosed in angle brackets, such as "<div#container> <div#sidebar1> <p>". Again, the exact words appearing here may be different depending on where you clicked on your page and how big your Dreamweaver window is. For ease of reference, I shall refer to these words enclosed in angle brackets as "tags" from this point forward. For example, "<p>" is one tag, "<div#sidebar1>" is another tag and "<div#container>" is yet another tag. Contrary to what you may think, each of these tags in the status bar is actually a clickable button. Clicking each tag will select a different block enclosing the spot where your text cursor is in. Try it. For example, if the left side of your status bar looks exactly like mine, click the "<p>" tag. Notice how the entire paragraph is selected when you do this. This is because "<p>" refers to a "paragraph" in the underlying code of your web page. (This underlying code, by the way, is called "HTML" in webmaster jargon.) Observe also that the "<p>" tag on the status bar is now enclosed in a white box to show that it's currently selected (because you clicked it).
29

Now click the "<div#sidebar1>" tag. This time, notice how the entire left column is selected. Finally, click the "<div#container>" tag. Both the columns, the header and the footer should now be selected. Each of these tags indicates a block of items on the screen. The "<p>" block is designed to hold a single paragraph of text, hence its name. This paragraph block lives in a bigger block, the side bar block. The side bar block, however, does not use a "<p>" tag, since a "<p>" tag is only used for a paragraph of text. Your side bar can contain words, pictures, lists of items, and so on. As such, a different tag is needed, namely a "<div>" tag. The block managed by a "<div>" tag is often called a DIV block (naturally). And as you found out, this side bar DIV block is itself enclosed in an even bigger DIV block that Dreamweaver uses to contain all the columns, header and footer on your page. To reinforce what I've just said, put your text cursor in a different section of your page, such as the header (the top horizontal bar where you placed the name of your website in chapter one). Once again click the different tags. Notice that your company name itself is enclosed in a different type of tag, the "<h1>" tag. This is in turn enclosed inside a DIV block ("<div#header>" this time). And as all things on your Dreamweaver web page is, this is enclosed in an even larger DIV block. Feel free to put your cursor into different parts of your page, click the different tags on the status bar, and see which sections are selected. Don't worry. You don't have to memorize anything you see. The main point of this exercise is to provide you with some background so that you'll have a greater understanding of what you will be doing later in the practical "howto" section. (Okay, it's true. I'm also underhandedly sneaking in a bit of HTML knowledge, namely the tags and DIV blocks. Although Dreamweaver lets you design a website completely without knowing anything about things like HTML or CSS, a little knowledge tends to go a long way to help you understand why things work in a certain manner. Otherwise web design will end up being like voodoo.)

Changing the Background of the Header, Footer, Side Bar and the Right Column (Main Content)
Now that you have figured out the status bar, and how to select an entire column or section, we will be able to configure the background of that section.

Preliminary: Select the Block in Question

To start, put your cursor somewhere in the column or section that you want to customize. Look at your status bar, and click one of the following items on the bar (depending on which column or section you're in).
o o

To change the background of the header, click the <div#header> word in the status bar. To customize the background of the left column, or side bar, click the <div#sidebar1> word in the status bar.
30

To configure the background of the right column, or main content section, click the <div#mainContent> word in the status bar.

Or, to put it another way, since you now know the technical lingo, select the DIV block that you want to customize.

Procedure for the Header, Footer and Side Bar (Left Column)
The procedure for changing the background for the header, footer and side bar, but NOT the right column/main content section, is identical. Open the CSS STYLES pane on the right side of Dreamweaver. (See the previous chapter if you've forgotten how to do so.) Double-click the "background" item in the CSS STYLES panel. (You may have to scroll down the box to find it.) The "CSS Rule Definition" dialog box that you met in the last chapter will appear. You should now see the "Background-color", "Background-image" and "Backgroundrepeat" lines that you met in the Page Properties dialog box in the section above. (The dialog box is not exactly the same, but those fields work the same way.) Configure them as you wish. If you have skipped that section previously because you didn't want to change the page background, go back and read just the parts "To Change the Background Colour" and "To Use a Background Image".

Procedure for the Main Content (Right Column)

You cannot customize the right column the same way you did the other DIV blocks. The reason is that the header, footer and side bars all have an existing background already set for their blocks, and you were merely changing those. The main content DIV block however does not have any customized colour settings. The colours you see (the black words on white background) were inherited from its outer "<div#container>" block. As such, we will have to add the necessary background properties (whether a colour or a background image) from scratch. With the "<div#mainContent>" button on the status bar selected, expand the CSS STYLES panel on the right side of Dreamweaver if you have not already expanded it. Look for the line that says 'Properties for ".twoColLiqLtHdr #mainContent"'. Move your mouse to the separator line immediately above those words and drag it upwards until you can see the "Add property" blue link below. Click the link. In its place, a drop down box should appear. (If it doesn't, just click it again.) Click the drop down arrow key beside it to open the entire drop down list box. If you want to set a background colour, select the item "background-color". If you want to set a image for the backdrop, select the "background-image" item. If you selected the background colour item, a square box will appear beside the new property that you created. Click it and set the colour from the colour picker as usual. If you selected the background image item, a blank box will appear. Beside the box, you will see two buttons. Click the button that looks like a folder. If you're not sure
31

which button it is, move your mouse over each button (without clicking) and wait until a tooltip for that button appears. Click the button that has a tooltip of "Browse". The "Select Image Source" dialog box will appear, allowing you to choose the image for the background. To control whether that background image is repeated (as you did earlier), click the "Add property" link again and select the "background-repeat" item from the drop down box. Then click the down arrow to open the list of your options and select the appropriate one. (Note: if you don't know what this "repeat" thing means, it means you skipped the section above. Please revisit that section for more information.)

Saving and Publishing Your Web Page

Once you've finished customizing the background of your web page, save everything by using "File | Save All" (that is, click the "File" menu followed by the "Save All" item in the menu that appears). Then publish the page as in the previous chapters, and check it in your browser. Congratulations. You have now mastered most of the techniques commonly needed by web designers to customize the appearance of a web page -- namely, customizing the text, adding pictures, and designing the background. In the next chapter, we will deal with one of the most important aspects of web page design: adding and customizing links. You will learn not only how to make text links, but also make your images into links that either point to other web pages or to larger version of those images (such as commonly found in photo gallery websites).

How to Make Pictures and Text into Clickable Links using Dreamweaver CS4 (Chapter 5)
by Christopher Heng, thesitewizard.com Links, also known as "hyperlinks" in some quarters, are arguably one of the fundamental essentials in a web page. They allow you to point your visitors to another page on your site, as well as to other websites on the Internet. Without links, the World Wide Web would not be that inter-connected web of documents that it is today. This chapter of the Dreamweaver CS4 Tutorial series takes you through the process of creating links on your website as well as making existing pictures and words into clickable links. Note: if you are new to Dreamweaver CS4 as well as this tutorial series, I recommend that you start at the first chapter How to Create a Website with Dreamweaver CS4. This article assumes that you have completed the previous 4 chapters, and have published a website that has much of the main page already completed.

32

Goals of This Chapter

By the end of this chapter, you will have:

made your logo into a clickable link that leads to your main page; learnt how to make any image into a clickable link; learnt the basic principles behind a photo gallery or image gallery website; and created one or more text links to other pages on your website.

Introduction to URLs: Relative and Absolute Links

Technically speaking, the web address of any page on your website is a type of "URL", or "Uniform Resource Locator". Web addresses are not the only types of URLs around. For example, while "http://www.example.com/" is the URL of a website, indicating that a web page can be accessed by a browser using a communications procedure (or "protocol") known as "HTTP", an address like "ftp://example.com/example.zip" is also a URL. The latter gives the address of a file, "example.zip", that can be accessed by a browser or some other program using another protocol known as "FTP". On a web page, URLs can be absolute or relative. An absolute link specifies the full address of a particular page or file, to the very last detail. For example, the URL http://www.example.com/features.html is an absolute URL pointing to the page "features.html" on the www.example.com website. It's the equivalent of giving your friend your full home address in the real world, that is, not just the name of the street and house number, but also the city, state and country. On web pages, it's also possible to use something known as a relative URL. For example, instead of linking to that "features.html" page mentioned above using an absolute URL, it is also possible to link to it using just the short form features.html. This will only work if the page doing the linking is also on the same website and in the same folder (directory) as "features.html". In the real world, this is like telling someone your home address by merely saying the street name and house number, but omitting other details like the country, state and city. Your friend will automatically assume that your home is in the same country, state and city that you are both in. To make sure that this is clear, let's use an example. Let's say that you have a web page at http://www.example.com/products/index.html. On that page, you link to another page with a relative URL of "prices.html". Where does the browser look for that "prices.html" file? The browser first looks at the URL of the current page. In this case, it's "http://www.example.com/products/index.html". It then snips off the filename of the current page ("index.html") to leave behind "http://www.example.com/products/". Then it appends the relative URL, resulting in a new URL "http://www.example.com/products/prices.html".

How to Make Your Logo into a Clickable Link to Your Home Page
33

If you look at thesitewizard.com's logo on the top left corner of this page, and hover your mouse cursor over it, you will notice that it is actually a clickable link pointing to my home page. Although nobody has dictated that all site logos be clickable links to the home page, so many websites have done this that it is practically a convention today. As such, it is good that your site also support this feature, since users have come to expect that they can quickly get to a website's home page by clicking the logo. Following the established convention of the majority of websites allow you to create a more usable website without much effort, since your visitors will automatically know how to move around and use your site efficiently. 1. Start up Dreamweaver and load your "index.html" page. 2. Click your site's logo on the page. This will select it and load the PROPERTIES panel at the bottom of the Dreamweaver window with the image properties.

3. Look at the "Link" field in that panel. This is where you will enter the URL to your home page. If your website has an address like "http://www.example.com/", enter "http://www.example.com/" (without the quotation marks) into that field. Alternatively, it's also possible to enter a relative URL like "index.html" (without the quotes) there as well. If you can't decide whether to use the absolute URL for your website ("http://www.example.com/") or just a relative URL ("index.html"), I suggest that you put the full URL to your domain here (for reasons mentioned in another article "Should Your URLs Point to the Directory or the Index Page?"). 4. Enter "0" (zero, without the quotes) into the "Border" field in the PROPERTIES panel. If you don't do this, certain browsers may show the image with a blue border to indicate that the image is a clickable link. The border attribute of "0" makes the border have a size of zero, effectively removing it. 5. Save your page and publish it. Check out your web page with a browser, and you will find that your mouse cursor changes to a pointing finger when you hover it over your logo, indicating that it's a link. Clicking it, however, won't do you much good since you're already at your home page. (Or rather, clicking it will cause your home page to load. Since you're already at your home page, you won't notice anything different.)

Making Other Images into Clickable Links

The same method given above can be used to make other images on your page into clickable links. For example, if your web page has a photo of a product you're selling, and you want your visitors to be able to click that photo and be brought to your order form, use the above procedure to add a link to that image. In this case, however, instead of putting a link to your home page, put "order.html" in the "Link" field. (At this point, the page "order.html" does not exist. However, it's okay to put the link there now. You can always create the order page later. Of course if you click the link at this time,
34

you'll just get a "404 File Not Found" error in your browser. That's normal. When you create the "order.html" later and upload the page, the error will disappear.)

How to Make Clickable Images that When Clicked Opens Up a Larger Image
I'm sure you've seen those photo galleries on the Internet that present you a thumbnail picture (small version of an image), that when clicked, loads a larger image in your web browser. You now have sufficient technical knowledge, where Dreamweaver is concerned, to accomplish that. The trick here is to have two versions of the picture: a small (thumbnail) and large version. The large version is your original photo in its full glory. To get the thumbnail version, simply use a photo or image editor to resize the original image to smaller dimensions, and save it under a separate filename, so that you now have two files: the original, unchanged large photo and the small resized image. Using a photo editor to accomplish this is outside the scope of this Dreamweaver CS4 tutorial (although I wrote about the procedure in another guide). Once you have both versions, do the following:
1. Copy both files into your images folder as you did in chapter 2. Don't miss this step or

Dreamweaver will not upload the pictures to your site. 2. Insert your small thumbnail version of the image into your existing web page (see chapter 2 if you've forgotten how to). 3. Click the picture, and locate the "Link" field in the PROPERTIES panel below. Click the "Browse for File" button (which looks like a folder icon) beside the field. A dialog box appears. Double-click the images folder and locate the bigger image. Select it and click the "OK" button. Dreamweaver CS4 will insert a relative URL to the image into your "Link" field. Notice that this relative URL is of the form "images/your-big-file-name.jpg" where "your-big-file-name.jpg" is the name of your large file. In particular, note that the slash separating the "images" folder and the filename is a forward slash "/". Domains, folders and filenames are always separated by forward slashes ("/") on web pages, even if you are using Windows (where the convention is the backslash character "\").

How to Make a Text Link on Your Web Page

In the main content section (right column) of your web page, look for a piece of text that you want to make into a link. For example, if you have a portion of your web page that talks about one of your products, say, "Widget XYZ", you may want to make the words "Widget XYZ" into a clickable link that points to another page "details.html" on your site. This "details.html" page will presumably give more details about your product, so that prospective customers can see if it suits their needs.

35

Alternatively, if yours is a personal website you may want a link on your main page to a "hobbies.html" page. At worst, if at this point in time, you have absolutely no idea what other pages of your site you want to link to, look at the footer of your page. If you have put a copyright notice in the footer as was suggested in chapter 1, you probably have some text saying "Copyright 2008 by Christopher Heng" or the like. Of course the year may be different for your page (depending on when you're creating this site), and instead of "Christopher Heng" you will have either your company name or your own name. Whatever the case may be, you can make the name portion into a clickable link pointing to "feedback.html" (a practice used by a number of sites). We will be creating this "feedback.html" file in the final chapter of this tutorial, so this is generally a safe link to create if you don't really know what else to do. Once you've decided what you want to make into a clickable link, do the following: 1. Select the word or words that you want to make into a link. 2. In the PROPERTIES panel at the bottom of the Dreamweaver window, click the "HTML" button if it has not already been clicked. The panel should now show a "Link" field. Enter the address that you want to link to. For example, if you want to link to your feedback form, enter "feedback.html" (without the quotation marks). If you want to link to some other website like thesitewizard.com, enter an absolute URL for that site, like "http://www.thesitewizard.com/" (again without the quotation marks). The former is a relative link, pointing to a file on your page, while the latter is an absolute link, pointing to a page on another website. Notice that the relative link does not have the "http://" prefix while the latter does. Incidentally, if you're linking to "feedback.html", make sure that you type the name exactly as I gave it, without changing anything to capital letters or adding spaces. As mentioned earlier, we will be creating "feedback.html" in the last chapter, and if you modify the name, your link will not point to the correct page. If you are linking to other pages on your website, you may also want to take a look at the article How to Create Good Filenames for Your Web Pages. 3. Hit the ENTER key when you've finished entering the link. The word or words you highlighted will now appear as an underlined clickable link. Save, publish and test your web page as before.

Next Chapter
So far, you have been modifying the main content, header and footer blocks on your web page. In the next chapter, we will customize your side bar (left column) to include a navigation menu. The navigation menu will contain clickable buttons that are actually just text links in disguise, somewhat similar to what you see on left column of thesitewizard.com.

36

How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS4

by Christopher Heng, thesitewizard.com At this point in the Dreamweaver CS4 tutorial series, you will already have completed most of your home page leaving only the side bar (or left column) not yet customized. In this chapter, you will be adding a navigation menu to that side bar, thereby completing the design of your home page. If you are new to Dreamweaver CS4 and have not previously been following this tutorial series, you may want to start at the first chapter, How to Create a Website with Dreamweaver CS4. This chapter assumes the knowledge and skills taught in the earlier chapters.

Goals of This Chapter

By the end of this chapter, you will have accomplished the following things.

You will have added a navigation menu bar with buttons that, when clicked, will take your visitors to other pages on your website. Like thesitewizard.com's navigation menu in the left column, the buttons on your site's navigation menu will also change colour when the mouse hovers over them. You will have finished designing the home page of your website. As a result, if you are still currently using placeholder text on your web page, you should take this opportunity to replace it with the real content of your site.

Website Structure
Before we go on to actually adding a navigation menu to your site, it is necessary to discuss the other pages that you want to create for your site (else you'll have nothing to link to in the navigation menu). While there are no fixed rules to the sort of pages you must have for your website, in general, many websites have the following pages (in addition to the home page):

Contact or Feedback Form

This is a page that allows your visitors to send you a message. You'll be creating this in the last chapter of this tutorial series.

Site Map
For websites with multiple pages, it's usually a good idea to create what is known as a "Site Map". A site map is meant to be an exhaustive (or perhaps near-exhaustive) list of all the web pages on your site. Visitors who are looking for a specific page and cannot find it using the normal links on your other pages can use the Site Map to locate the page they want. If you have a large number of pages on your website, you
37

may even want to separate the different pages on your site into categories in your site map, like what you see in thesitewizard.com's site map. You will be creating a site map later in the next chapter.

About Us
Some websites, particularly company websites, have an "About Us" that give 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.

Price Lists
If a site is selling a product or a service, a page listing the prices of various products is very important. See the article Is Your Website Design Driving Away Your Customers? Some Basic Usability Tips for Commercial Websites for more details if you're selling things on your site.

Order Form or "Buy Now" Page

If you accept online orders from your website, you'll eventually need an order form of some sort. For simple sites that use third party payment gateways (companies that will accept orders and process payments on your behalf), you can get away without creating an order form, since those companies usually provide you with a premade, customizable order form when you use their services. All you need to do in such a case is to put a link to their form.

Links
Some sites have a "Links" page, where they place links to other sites that they have found useful or relevant.

Privacy Policy
If you are collecting information from your visitors, such as you will if you put up an order form, you'll probably want to have a page telling your users what you will or will not do with their data. Personally, I doubt anyone actually reads such a page, but it may be a good idea to reassure your customers that you will not leak their credit card numbers and whatnot to the unwashed masses.

Although you will undoubtedly have many other pages on your website, it is probably not possible to link to all of them in your navigation menu. Doing so may result in a very cluttered and hard-to-read side bar that is longer than the main content column. To avoid such an unsightly navigation bar (or "navbar" as it is sometimes called), many webmasters only place links to pages such as listed above in the menu. For the purpose of this tutorial series, you will be creating (in addition to the home page, which you will complete in this chapter) the feedback form page, the "Site Map" page, and optionally, the "About Us" page. The pages will have the following names:
38

Feedback Form
Name of page: "Feedback Form" Filename: "feedback.html"

Site Map
Name of page: "Site Map" Filename: "sitemap.html"

About Us (Optional)
Name of page: "About Us" Filename: "aboutus.html"

If you have other pages that you want to link to in your navigation menu (such as those I mentioned above), feel free to add to this list. In forming the filenames for those other pages, please note the rules I wrote in How to Create Good Filenames for Your Web Pages, that is, do not uses spaces in your filenames and stick to small letters (lowercase). And end all your filenames in ".html".

Introduction to The Dreamweaver CS4 Spry Framework

Dreamweaver CS4 provides a built-in facility called the Adobe Spry Framework that lets you add a variety of interactive features to your website. One of these features is a navigation menu bar, which you will be using in this tutorial. The beauty of using the Spry menu bar in your website is that Dreamweaver CS4 has special facilities designed to make it easy for you to insert and configure your menu.

How to Add the Menu to Your Side Bar

1. Start up Dreamweaver and load your home page as before. 2. The first thing we'll need to do is to delete the existing placeholder content in your left column. At the top of your sidebar, if you have not yet modified it, you should see the words "sidebar1 Content" in bold print. Place your text cursor amidst those words by clicking somewhere within them. Look at the status bar and click the "<h3>" tag. (If you're not sure what I'm talking about here, please revisit chapter 4 where I introduced the use of the status bar and various tags listed there.) Clicking "<h3>" selects not only the words "sidebar1 Content", but also its enclosing tag ("<h3>") in the underlying code. For those who are curious, the <h3> tag is what makes everything enclosed within it into a large, bold subtitle. Hit the DEL key. The words "sidebar1 Content" should disappear. Then delete the rest of the dummy content in the side bar. To do this, select the various paragraphs by dragging your mouse over them and hitting the DEL key. Warning (for those who like to live dangerously): do NOT delete your content by clicking the <div#sidebar1> tag in your status bar, thinking that it's a shortcut
39

method to getting rid of both the "sidebar1 Content" subtitle and the placeholder text in the side bar. While you're right in that it will get rid of both items, it will also delete your entire side bar. If this warning came too late for you, you can undo your accidental delete with "Edit | Undo Delete" (that is, click the "Undo Delete" item from the "Edit" menu). 3. Click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, followed by the "Spry" item in the menu that appears, and then the "Spry Menu Bar" item in the submenu that appears. 4. A dialog box, entitled "Spry Menu Bar", will appear. Since you're creating a menu bar for your side column, and want the menu items to appear one after the other vertically, select the "Vertical" item and click "OK". 5. Dreamweaver CS4 inserts a default menu bar into your site column with some dummy content. The menu has four items. Items 2 and 4 are normal menu items, while items 1 and 3 have sub-menus: notice that there is a small right arrow on the buttons for items 1 and 3. In an actual browser, hovering your mouse over item 1 and 3 will expand the submenus. (It won't expand in Dreamweaver, since the latter is an editor, not a real browser.) Look at the PROPERTIES panel at the bottom of your Dreamweaver window (pictured below).

Notice that there are 3 list boxes in the middle of the panel. The first list box contains "Item 1", "Item 2", "Item 3" and "Item 4". Theses are the 4 buttons that you see in your web page. At present, "Item 1" is selected. Since "Item 1" is a button with submenus, the second listbox is populated with the items in the submenu, namely, "Item 1.1", "Item 1.2" and "Item 1.3". If you were to click on "Item 2" in the first list box, you'll notice that the second listbox becomes empty. This is because the menu button "Item 2" does not have a submenu. Now click "Item 3". The 2nd listbox is filled with that button's submenus. Click "Item 3.1" in the 2nd listbox. Notice that the 3rd listbox is now filled with two items "Item 3.1.1" and "Item 3.1.2". In your main Dreamweaver window, you should be able to see that Dreamweaver has expanded the button menu to show the first level submenu so that you have an idea of how your menus appear visually on your web page. Essentially, Dreamweaver lets you configure a menu system up to 3 levels deep, should you need them. In this tutorial, you'll only be using a one-level menu system. That is, the menu will behave like the one you see on the left column of thesitewizard.com, where clicking any button will lead you to another web page on the site, with no submenus appearing. If your site is complicated, you can of course use a multi-tiered menu system if you wish.

40

Usability note: in general, if you don't really need a multi-tiered menu system, don't use it. Multi-tiered menu systems tend to have a greater number of browser usability issues (and probably also acessibility issues) than a simple button menu. For example, if you're an avid web surfer, I'm sure you've encountered sites where you tried to invoke a submenu item on such a menu only to find that the menu closes on you before you can click the item. Multi-level menu implementations on the web still have a long way to go before they can catch up with the multi-tiered menu system you're used to in an operating system like Windows, Mac OS X, or Linux. The second and third level submenus also don't work if your visitors disable JavaScript in their browser. 6. Click "Item 1" in the first list box in the PROPERTIES panel. The first item in a navigation bar is typically the link to the website's home page. Since we will not be needing submenus for this button, we will delete them. To do this, click "Item 1.1" in the second list box. Notice that directly above "Item 1.1", the "-" (minus) sign, beside the existing "+" (plus) sign, is now shown in bold. As you may have guessed, clicking the minus ("-") sign will delete the item you've highlighted, while clicking the plus ("+") sign will add a new one. Click the minus sign now. "Item 1.1" should immediately disappear, leaving you with "Item 1.2" and "Item 1.3". Do the same and remove items 1.2 and 1.3. You should now have two empty listboxes next to the still-populated first one. 7. To the right of the 3 list boxes, you should be able to see a few fields. The "Text" field contains the words that you want displayed on the button. It should currently say "Item 1". Change it to "Home" (without the quotation marks). Click the "Link" field, which currently contains a hash ("#") mark. Notice in the window above, that your menu bar now shows "Home" for its topmost button. Put the address of your website's main page in this "Link" field. It's best to use the same URL as the one you used to make your site logo into a clickable link in chapter 5. That is, if you used an absolute URL like "http://www.example.com/" for your site logo link, use the same thing here. If you used a relative URL like "index.html" for that link, put "index.html" (without the quotes) here. While both links point to the same page, the consistency will help you minimize (or even avoid) the content duplication problems mentioned in the article How to Create a Search Engine Friendly Website. 8. Click "Item 2" in the leftmost list box. Change the "Text" field, currently showing "Item 2", to "Feedback Form" (without the quotation marks). Or you can call it "Feedback", "Contact Us", "Contact Form", "Support" or some other words if you like. Don't waste too much time figuring out which set of words is better. No one except you will even bother about which words you use, as long as the meaning is clear. I'm not even consistent about this across different websites myself: for example, thesitewizard.com uses "Contact Us" for that button while thefreecountry.com uses "Feedback".
41

In the "Link" field, replace the hash ("#") mark with "feedback.html" (without the quotes). Do not use any other filename. We will be creating this page in the last chapter, and if you change the filename, your links won't work correctly. 9. Click "Item 3". Click "Item 3.1" and then the minus ("-") sign above. A dialog box saying "This menu and all its children will be deleted. Would you like to proceed?" will appear. This is because you are not just deleting a single menu item ("Item 3.1"), but also removing all its submenus ("Item 3.1.1" and "Item 3.1.2"). Dreamweaver wants to make sure you know what you're doing. Click "OK". Remove "Item 3.2" and "Item 3.3" in the same way (by clicking the minus sign). There should be no warnings for these since they don't have lower-level submenus. Replace the "Item 3" words in the "Text" field with "About Us", and the "#" in the "Link" field with "aboutus.html". Note: as I mentioned above, this "About Us" page is optional. If you don't want such a page, and don't wish to replace that link with another (eg to your "Buy Now" or "Price List" or whatever), delete the item by clicking the minus ("-") sign over the leftmost listbox. Make sure that "Item 3" is highlighted in that list box before clicking the minus sign or you may end up deleting the wrong menu item. 10. Replace "Item 4" with "Site Map" and make it point to "sitemap.html". 11. Depending on how you set the background colours of your side bar in chapter 4, you may find that the background colour of your left column ends midway in the window, compared to the right column. That is, it doesn't go down all the way to the footer. One way of dealing with this is to add blank lines after your menu bar (just click the blank space below the menu and keep hitting the ENTER key). Another way is to do what I did on thesitewizard.com: make the left column have the same background colour as the main content area. 12. Click "File | Save". A dialog box called "Copy Dependent Files" will appear, asking you for permission to copy the files needed by the Spry navigation menu to your website folder. Click "OK". Dreamweaver will then create a new folder ("SpryAssets") in your website's directory that contains the support code for the menu. Although your menu is fully functional and complete at this point, do not publish your page yet. There are still a few customizations that you may want to do.

How to Add New Items to Your Existing Spry Menu Bar Widget
If you have a change of heart (whether now, or some time in the future) and decide to add new items to your menu, click any of the existing items in your first listbox. Then click the plus ("+") button. A new menu item will appear immediately below the one you highlighted. You can change the text and link as before. If the menu item is in the wrong spot in your menu, and you want to change the order, click the up or down arrow above that list box.

42

The up and down arrows are just next to the plus and minus buttons, above the listbox. Clicking the up arrow moves the currently highlighted menu item up, unless the item is already at the top. Similarly, clicking the down arrow moves the item down.

How to Centre the Spry Framework Menu Bar Widget

The menu, as inserted by Dreamweaver CS4, is probably flushed to the left of your web page. Like most people, you will probably prefer to have it centred (or "centered" in US English) on the page. Move your mouse over the menu bar in Dreamweaver CS4. The words "Spry Menu Bar: MenuBar1" will appear above the menu. Click those words. Alternatively, if you can't figure out what I'm talking about, just click anywhere in the navigation menu. Then click the <ul.MenuBarVertical#MenuBar1> tag in the status bar to select it. This has the same effect. Look at the CSS STYLES panel on the right. If it is currently collapsed, expand it by doubleclicking the "CSS STYLES" tab. Scroll up or down in the "Summary for selection" box and double-click the "width 8em" item. A dialog box entitled "CSS Rule Definition for ul.MenuBarVertical in SpryMenuBarVertical.css" should appear. At the top of the dialog box, you should see the "Width: 8 em" item that you just clicked. Somewhere below that, on the right column, you should be able to see an entire section called "Margin" (circled in the picture below). Click the down arrow for the "Top" field (currently set at "0") and select "auto". Click the OK button.

Your menu bar should now be centred.

43

How to Change the Colours of the Spry Menu Bar Widget

In its default configuration, when your mouse hovers over one of your buttons in a web browser, the button turns blue, and the words on the button becomes white. To change this, click somewhere in one of the menu buttons in Dreamweaver, then select the "<a>" item on the status bar. Double-click either the "background-color" line in the CSS STYLES panel or the "color" line. If you double-click "background-color", the CSS Rule Definition dialog box will open to the background section, allowing you to change the "Background-color" item (currently set to a particular shade of blue, or "#33C" if you're nerdy enough to know how to read numeric colour values). Clicking the square colour box will let you change it from the colour picker. (You are probably already very familiar with this process from chapter 4.) If you have double-clicked the "color" line instead, you'll be brought to the same CSS Rule Definition dialog box. However, it will open to the "Type" section. This will allow you to change the colour of the text when the mouse is hovering over the button. By default, the colour is set to white (or "#FFF" if you wish to know the numeric colour value for white). You can change this by looking for the "Color:" item in that dialog box. Just click the square box as usual. What if you want to change the colour of the menu bar when the mouse is not hovering over it? This is slightly more tricky. (Actually, the colour-changing bit is easy, as always. It's trying to get the CSS STYLES panel to let you configure it that's tricky.) 1. Expand the FILES panel on the right side of Dreamweaver (if it's currently collapsed). Doubleclick the "SpryAssets" folder in the list below. Doubleclick the "SpryMenuBarVertical.css" file to open it. If your monitor (or Dreamweaver window) is too small, and you can't see the full filenames, just move your mouse over each line and wait a while for Dreamweaver to display a tooltip giving the complete filename. 2. You will be confronted by a lot of gibberish-looking text. This is the CSS code that controls the appearance of your vertical menu bar. Don't be intimidated by it. You don't have to work in it. We're just using it as a shortcut to force Dreamweaver to load the correct items into the CSS STYLES panel for us to configure in our usual way. Don't type anything at all into this window. Instead, click "Edit | Find and Replace..." from the menu (that is, click "Edit" from the menu, followed by the "Find and Replace..." item). A dialog box, called "Find and Replace", will appear. Type "ul.MenuBarVertical a" (without the quotation marks) into the "Find" field, and click the "Find Next" button. In the background of the window, Dreamweaver will highlight "ul.MenuBarVertical a" in the document. Click the "Close" button on the "Find and Replace" dialog box to dismiss it. 3. In the right side of the CSS STYLES panel, which is what we're after all this time, look for the line 'Properties for "ul.MenuBarVertical a"'. You may remember this line from chapter 4, when we changed the colours for the Main Content section (right

44

column). It's not actually the same line, but it's in the same section of the CSS STYLES window. Directly underneath should be two additional lines, labelled "background-color" and "color". If you can't see these lines, drag the separator line above the 'Properties for "ul.MenuBarVertical a"' words upwards to make space for them. As you may have guessed, "background-color" sets the colour of the menu bar button background, while "color" sets the text colour. To change them, click the square colour box beside the item. Even though the square colour box does not look exactly like our other square colour boxes, clicking it will still display the colour picker tool that lets you change the colour of your menu items. 4. Switch back to your web page. To do this, click "Window | index.html". Do NOT click the "X" button on the "SpryMenuBarVertical.css" tab at the top of the window to switch. You still haven't saved your work, so clicking the "X" button, the close button, will cause you to lose all the customizations that you've made so far. 5. Your menu should now take on whatever new colours you have selected previously. If you don't like them and want to choose another colour, click "Window | SpryMenuBarVertical.css" again to switch back to the CSS file. If you have not moved your cursor or anything like that you should be able to change the colour as before from the CSS STYLES pane. Note: when you change the colour this time, you may find that Dreamweaver CS4 does not visually reflect this second colour change when you switch back to "index.html". This is just a display bug in Dreamweaver (which may have been fixed by the time you read this, since Dreamweaver has a built-in updater facility). If you experience this, and want to force Dreamweaver to display the latest colour change you made, click "File | Save All" to save all your changes, then "File | Close All" to close all open documents, and doubleclick your "index.html" file in the FILES pane to open it again. Dreamweaver CS4 will now display your document with the correct colours. Note that contrary to expectation, clicking "View | Refresh Design View" does not fix the problem, at least not in the version of CS4 that I have. You'll have to save, close and reopen your document.

Saving, Publishing and Testing Your Work

When you are satisfied with your changes, use "File | Save All" to save your work. As in the previous chapters, when you do things like changing the colours or appearance of your web page, Dreamweaver makes modifications to your style sheets behind the scenes. As a result, you cannot just click "File | Save" to save your index.html file and expect that your other customizations will stick. "Save All" saves not only the index.html file, but the other files touched by Dreamweaver to effect your changes. Finally, publish your work with "Site | Put" as before. When done, open a web browser and try out your menu. Remember that if you actually click any of the menu items, you'll just get
45

"404 File Not Found" errors (or a message to that effect). That's okay and perfectly normal for now, since we haven't got around to creating the other pages on your site yet. Even if you don't want to click anything, you should still try moving your mouse over each menu item to test the colour changes and the like. If everything works, congratulations. You have successfully added a professional-looking menu bar to your website. Actually, your accomplishment at the end of this chapter is more significant than that:

You have also completed the home page of your website. You have mastered nearly all the skills and tricks of using Dreamweaver commonly needed by webmasters for designing ordinary web pages, so that you can actually design new pages as and when you want. There are still a couple of things left to learn (like managing multiple pages and adding a feedback form), but where making a typical, normal web page is concerned, you already have the necessary tools under your belt.

In other words, go and celebrate.

How to Use Dreamweaver CS4's Templates to Manage and Auto-Update Multiple Pages on Your Website
by Christopher Heng, thesitewizard.com Dreamweaver CS4's template system not only allows the web designer to create multiple pages on your website using the same basic design, but it is also provides the webmaster an easy way to manage and update a multi-page site. Whenever you modify the design of your template, whether to add new things, remove elements or modify the page in other ways, the web editor will automatically, with your permission, update all the pages on your site to that new design. This makes the arduous task of changing the design of a site extremely simple, since Dreamweaver does all the tedious work. This chapter deals with how you can use that template system to manage your site.

Goals of This Chapter

By the end of this chapter, you will have accomplished the following:

You will have created a template for your site based on the design that you've been working on so far in this Dreamweaver CS4 Tutorial series. You will have created a website with multiple pages, including the Home page (which you created in the previous chapters), the Site Map and the About Us page. All your pages will be linked to each other through the navigation menu bar that you inserted in chapter 6.

46

Note that if you have not been following this tutorial series, you may find this chapter a bit bewildering, since the information and skills presented here are built upon things taught in the earlier parts. If you're new to Dreamweaver CS4, you may find it easier to start with the first chapter.

Introduction to Dreamweaver's Template Facility

If you look at all the article pages on thesitewizard.com, you will probably have noticed that every page bears basically the same design. There is a logo on the top left corner, a navigation menu spanning the left column, and the article itself occupying the right column. The only thing different about each page is the content of the article itself. In fact, this similarity between pages is not unique to thesitewizard.com: just about every website on the Internet has a basic design that most (or all) pages of that site share. The fact that most (or all) of the pages of a typical website share the same design is not accidental. Nor is it due to laziness. It has to do with usability. Once your visitors have figured out how to find things on a single page on your site, such as where to find the navigation menu bar, where to find the product description and "Order" button, and so on, they will also know how to use the other pages on your site. Such a familiarity with your site means that they will be able to easily locate the things they need from your site, making the site appear more user-friendly to them. Since we want all the pages of our site to share the same basic design, it stands to reason that we will save time when designing new pages if we simply create a template for the site. Every time we need a new page for the site, we can just base our new page on that template, and only modify the parts that are different for that new page. This is where Dreamweaver's template tools come into play. In fact, Dreamweaver goes beyond simply allowing us to create a template from which we can base other pages. Since most webmasters also change their website design from time to time, Dreamweaver also has the ability to automatically update all the pages based on a particular template every time you change that template. To facilitate this auto-updating feature, Dreamweaver requires that you designate which portion of your template is part of the fixed design that you want on all pages, and which portion has content that will be different on every page. That way, when you modify the fixed design portion in your template, Dreamweaver will be able to update all the pages on your website to the new design.

How to Create a Template for Your Website in Dreamweaver CS4

To make it easier for me to refer to different parts of your web page in this tutorial, I shall use the page pictured below as reference. Your web page will of course not look like that: you will have probably placed a logo, written text appropriate to your site, included pictures, photos, background images and also made some colour changes.

47

When I refer to, say, the "Header" item later, simply look at the picture above and find the equivalent item on your web page. The same goes to the other items on the page, like the "Main Content" item, the paragraph under the "Main Content", the subtitle "Subheading", etc. 1. Start up Dreamweaver CS4. Doubleclick the "index.html" file in the FILES panel to open it. 2. Click "File | Save As Template..." from the menu. This opens up the "Save As Template" dialog box. Click the "Save" button. When a message box appears, with the message "Update Links?", click "Yes". Dreamweaver then proceeds to create a "Templates" folder in your website's directory. If you look at the tab at the top of the Dreamweaver window, you will see that it has changed from "index.html" to "index.dwt". As of this moment, we will be modifying the template file, index.dwt, instead of your home page, index.html. 3. The template file that you're looking at has, by default, no editable regions. That is to say, if you create a new web page using this template as it stands, Dreamweaver won't let you change any part of the new web page, since it regards the entire page as part of the fixed design for your website. What we need to do now is to tell Dreamweaver which portion of the page is editable. 4. Select the equivalent of the bold "Main Content" words (see picture above) on your web page. We want to make this title portion modifiable so that in the subpages on your website, you can replace it with the title of that page. Click "Insert | Template Objects | Editable Region" from the menu. A dialog box, called "New Editable Region", will appear. The "Name" field will be pre-filled with some default name like "EditRegion3" or the like. Delete the default name and type "Page Title" instead. Click OK. Notice that the "Main Content" words now have a caption "Page Title" above it. 5. Select all the paragraphs under the "Main Content" title If you have one or more "Subheading" subtitles and paragraphs below that, include them in your selection as well. We will mark this entire region as editable, so that you can change the content for your other pages (unless you want all the pages on your site to say exactly the same thing).

48

With that entire region selected, click "Insert | Template Objects | Editable Region" from the menu again. When prompted for the name of this region, type "Page Content", and click "OK". The section should now have a caption "Page Content". 6. There are only 3 sections left on your web page that are currently not marked as editable. The "Header", which should contain your website's name and logo, the side navigation menu bar and your "Footer", which probably currently contain your copyright notice. You will probably not want to mark the "Header" portion as editable, since your site name will be the same no matter which page on your site your visitor happens to be on. Likewise, the navigation menu bar in your side panel should probably also be the same throughout your website. If your footer contains a copyright notice like "Copyright 2009 Christopher Heng", you may want to select the year portion of the copyright notice and make it editable, since there is a chance that you may still want to add new pages next year or on some future date. To do this, just select the year portion (for example, select "2009" if that is the year you typed before), click "Insert | Template Objects | Editable Region" from the menu, and enter something like "Copyright Year" into the "Name" field. 7. Save the template by clicking "File | Save" from the menu. You will probably get a verbose dialog box popping up, informing you that putting an editable region (like the "Page Title"), inside a block tag will prevent users from creating new blocks in the region. Click "OK". If you have heavily customized your web page, so that you have even more sections that I did not mention above, you can make those sections editable using the same method described above. Give each section a different name, but make it descriptive of what it contains. The name is not displayed in your "live" website, but is shown in Dreamweaver CS4 when you edit your site, so the more descriptive the name is, the more help it will be to you when you maintain your site.

Associating Your Home Page with Your New Template

Before you go on to create a new page using the template, you will need to re-create your home page. (Don't groan -- it's very easy this time.) We need to do this because your current home page is not regarded by Dreamweaver as being created from the template you just made. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template. The least troublesome way to do this is to overwrite your old index.html file with a new file created from the template. 1. Close all files by clicking "File | Close All".

49

2. Click "File | New". The dialog box that you saw when you first created your website in Chapter 1 appears. This time, however, look for the item "Page from Template" in the leftmost column, and click it. You should now see the name of your site in the second column, the "Site" column, and the template you made previously in the third column ("index"). A preview picture of your template appears in the window on the right. 3. Make sure that there is a tick in the checkbox "Update page when template changes" in the rightmost column. Then click the "Create" button. 4. A new unnamed web page, based on your template this time, will appear. This page should be identical to your index.html file, since you did not make any changes to your index.html when you created the template. (All you did was to mark certain parts of the page as "editable".) Click "File | Save As..." from the menu. In the "Save As" dialog box that appears, click the "index.html" file, followed by the "Save" button. Dreamweaver will issue a warning that the file already exists, and asks you whether you want to overwrite the file. Click "Yes". With this step, you have replaced your old "index.html" with a new "index.html" created from your template. As far as your visitors are concerned, your home page will not look any different in a web browser. However, internally, Dreamweaver will have inserted certain invisible markers so that it will be able to update the page whenever you make a design change in your template.

How to Make a New Page from Your Own Template in Dreamweaver CS4
We will now proceed to create another 2 pages for your website: the "Site Map" and the "About Us" page. If you're not sure what these pages are for, please return to chapter 6, How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS4, to learn more about these pages. Unlike the creation of your Home Page in chapters 1 to 6, however, making these 2 pages will be much easier, since we've already done most of the hard work.

Creating The Site Map

1. Click "File | New..." again and select "Page from Template" if it has not already been preselected for you. Then click "Create". 2. Look at the "Title:" field of the Dreamweaver window, just above your web page (see the picture below, copied from chapter 1, if you've forgotten where to find it).

50

Replace whatever text you have in that field with "Site Map". Alternatively, if you want the name of your website in the title as well, call it "Site Map - Example Company" (where "Example Company" should be replaced by the real name of your site). Actually, you can call it what you want, but it's best to have "Site Map" somewhere in that title, since it's the name used by practically everyone for such a page. 3. Change the text in the "Page Title" editable region to "Site Map". 4. Replace the text and pictures in your "Page Content" section with a list of links to the rest of your site. The easiest way is to select the existing content, hit the DEL or backspace key to remove it, then type every page name on a separate line. Hit the ENTER key (or RETURN key on the Mac) after each name to make a new paragraph. Then select each line separately, and make them into links pointing to their respective pages. If you've forgotten how to make a line of text into a link, please see chapter 5, How to Make Pictures and Text into Clickable Links using Dreamweaver CS4. For your convenience, here are the links that you'll want to make:
o o o o

Page name: Home. URL: index.html Page name: Feedback. URL: feedback.html Page name: About Us. URL: aboutus.html Page name: Site Map. URL: sitemap.html

I realise that at this point in time, since you have so few pages, a site map probably seems very silly to you, especially since every page listed in the map is already linked to from your menu bar in the left column. However, the site map will become more useful (to your visitors) as you add more pages to your site. It also adds professionalism to the site, and makes it easier for search engines to locate all the pages of your website. If you find that hitting the ENTER (or RETURN) key creates too much blank space in between each filename, and you prefer that the filenames be more closely spaced, do this instead of hitting the ENTER key. After you type a line, say the word "Home", click "Insert | HTML | Special Characters | Line Break" from the menu. (If you are using Windows, you can hold down the Shift key and hit the ENTER key to accomplish the same thing.) Nothing will appear to happen visually, but if you immediately type "Feedback" after that, you'll see that "Feedback" is placed in a new line below "Home" without an intervening blank line. For the curious, the reason for this is that the ENTER key creates a new paragraph, hence the extra blank line, while "line break" merely moves what follows to the line below. 5. Click "File | Save As..." and type "sitemap.html" (without the quotes) into the "File name" box. Do not change the name, add spaces or change the capitalization: type the name as-is. This is because you have already used "sitemap.html" to link to this page in your navigation menu, so if you give this file some other name, your links to this page will be broken. Click the "Save" button.
51

How to Create the About Us Page (Optional)

Note that this section is only optional if you have decided in the previous chapter not to insert an "About Us" item into your navigation menu bar. If you already have an "About Us" menu item, you should go ahead and make your "About Us" page now. 1. By this time, you should have no trouble creating new pages for your website from your site template. Create another one now. 2. In the "Title:" field (above your web page), enter "About Us: Example Company", replacing "Example Company" with the name of your website. Alternatively, you can use "About Example Company", "About Me", "Resume", "C.V" or anything that you feel best describes the page you're making. 3. In the "Page Title" editable region, enter "About Us" or "About Me" or "Curriculum Vitae" or whatever you wish. Replace the "Page Content" editable region with whatever information you wish to publish about your company or yourself. If this is a personal website, be circumspect about what you put here. You don't know who's going to be reading your website. It may be your future employer or some nutcase living in your neighbourhood. 4. Save the page as "aboutus.html" (without the quotes). Again, this is the filename you used in your navigation menu and site map, so you should not get creative and use another name or your links will point nowhere.

How to Publish Multiple Pages the Easy Way with Dreamweaver CS4
Now that your website is nearly complete, with multiple pages, it is no longer efficient to use the old "Site | Put" method to publish your website. That method was useful when you only had one page to upload. When you have multiple pages, you will prefer Dreamweaver to automatically figure out which pages have been modified, and publish them for you without your having to manually open and publish every single one. 1. To do this, click "Site | Synchronize Sitewide..." from the menu. 2. A dialog box, "Synchronize Files", appears. The "Synchronize" field should read something like "Entire 'Example Company' Site" (where 'Example Company' is replaced by the name of the site that you gave Dreamweaver in chapter one). The "Direction" field should read "Put newer files to remote". If any of these is not the case, click the down arrow key in the appropriate drop down box to select the correct option. Click the "Preview" button. 3. Dreamweaver will immediately attempt to connect to your website to check the files that have previously been published. When it is complete, it will show a dialog box with a list of files that need to be uploaded. Unfortunately, this list of files includes your website template, which does not actually need to be published, so we will have to remove it from the list before we allow Dreamweaver to proceed.

52

Right-click the "Templates\index.dwt" line in the dialog box. That is, click the right mouse button when your mouse cursor is directly over the "Templates\index.dwt" line. A menu will appear. Click the "Ignore Selection" item in the menu. The "Action" column for the "Templates\index.dwt" line will now show "Ignore" instead of "Put". 4. Click the "OK" button. When Dreamweaver has finished uploading your pages, test your website using your web browser. This time, be sure to click the "Home", "Site Map" and "About Us" buttons in your menu bar to make sure that they lead to the correct pages. Congratulations! Your website is nearly complete. All it lacks is the feedback form, which we will create in the next chapter.

How to Modify Your Template in Dreamweaver CS4

If at some future point in time, you feel the urge to redesign your website, you will need to do it by loading your template file and modifying it from there. Let's briefly go through the steps for this, so that when you need to do it, you will know how to. 1. Close all the files that are currently open in Dreamweaver. To do this, click "File | Close All" from the menu. 2. In your FILES panel on the right side of Dreamweaver, click the "+" (plus) box beside the "Templates" folder to expand it. You should see the "index.dwt" file that you created earlier. 3. Doubleclick "index.dwt". Dreamweaver will now open your template. 4. Modify the template the normal way that you would any web page. For example, if you want to add a line "Thanks for thesitewizard.com's help in creating this site" to your footer, just click somewhere in the footer and type those (or other) words. Select "thesitewizard.com" and enter "http://www.thesitewizard.com/" into the "Link" field in the PROPERTIES panel to make it into a link. (Don't get upset. This is just an example. Make whatever modifications to your template you wish.) 5. When you click "File | Save", Dreamweaver will pop up the same message box you encountered earlier, about placing the editable region "Page Title" inside a block tag. Just click "OK". 6. Since you have made a change to your template that affects multiple pages on your site, Dreamweaver will now show a new dialog box entitled "Update Template Files". Here's where the beauty of the template tools come into play. When you save a modified template, Dreamweaver searches through all the files created from that template and offers to update all of them. The dialog box should list the three files (or two files if you did not create the "About Us" page) affected by the change in design, namely "index.html", "sitemap.html" and "aboutus.html". Click the "Update" button.
53

7. Another dialog box, "Update Pages", will appear. Click the "Close" button. 8. If you want to be sure that Dreamweaver has done its job properly, doubleclick any of your web pages in the FILES panel to open them in Dreamweaver. They should all reflect the change you made. 9. Upload your modified files using the "Site | Synchronize Sitewide" procedure described above.

How to Add a Feedback Form to Your Website with Dreamweaver CS4

by Christopher Heng, thesitewizard.com Most websites provide a means for visitors to contact the webmaster or owner of the website. While a few webmasters do this by publishing their email address, more commonly, others provide a feedback form, or contact form, so that visitors can write to the webmaster without leaving the site. In this final chapter of the Dreamweaver CS4 tutorial series, you will be adding such a form to your website. For those arriving at this chapter without reading any of the previous chapters, you can find the the first chapter in How to Create a Website with Dreamweaver CS4. This chapter assumes that you have completed all the previous chapters, and makes references to things (like templates) that have been covered in those chapters. On the other hand, if you arrived here looking for a feedback form script and not a Dreamweaver tutorial at all, please go to the Free Feedback Form Wizard to create your feedback form script instead.

Goals of This Chapter

By the end of this chapter, you will have accomplished the following:

You will have a working feedback form on your site. You will have completed your website and have a fully functional multi-page website. You will have learnt ("have learned" in American English) most of the commonlyneeded skills needed to create a website using Dreamweaver CS4 and have the knowledge and ability to create other websites if you wish.

Introduction to Forms and Scripts

In the previous chapters, you created web pages that essentially displayed some combination of text and pictures, albeit designed in a nice way with fancy navigation menu bar buttons that reacted to you when you moved your mouse over them. Such pages were complete in themselves in that once you finished creating them in Dreamweaver and published them, they immediately worked. Web pages that have forms are a different story. While you may be able to design a form in Dreamweaver, the form in itself will do nothing. Your visitor, encountering such a form, can
54

click the "Submit" button till they are blue, and nothing will happen. This is because web pages are essentially just documents that live on the web. They can't send email, save data, or do anything except display information. The job of doing things like sending email is left to a computer program which must run on the same computer that your website is on. That is, the program must run on your web host's computer, which is known as a web server, since it serves web pages to your visitors. Such programs running on web servers are commonly called "scripts" in webmaster jargon. The process of sending email via a web form works this way: 1. Your visitors complete a form on your website. This form is known as your feedback form (or contact form). They then click the "Send" button on the form, in their browser. 2. The web browser sends the information to a script (program) residing on your website's server. 3. The script takes the information, formats it in a way that is appropriate for an email message, and sends it by email to your mail box. 4. The script then displays an acknowledgement page, or "thank you" page, so that your visitors know that their message has been successfully sent. 5. If there are errors in the message (for example, your visitors forgot to enter their email address), instead of displaying the "thank you" page, the script may display an "error" page so that the visitors will know that the message has not been sent. They can then fix the error and try again, if they wish. In other words, adding a feedback form to your website is not simply a matter of designing a web page with a form. You will need the following things before the form will work: 1. You need a web page containing the feedback form itself. You will design most of this page using Dreamweaver. 2. Another thing you will need is a "thank you" web page. This is also a simple web page which can be designed using Dreamweaver. 3. And then you will need an "error" web page. Again, this can be easily created with Dreamweaver. 4. The engine behind your feedback form is the feedback form script, the computer program that knows what to do when a web browser sends it the information submitted by your visitor. You will be using thesitewizard.com's Feedback Form Wizard to create a customized program for your site. Don't worry, it's free. 5. Finally, you will need a web host that will allow you to run PHP scripts (which are a type of computer program) that send email. Not all web hosts allow this, especially free web hosts. When I say free web hosts, I include the free hosting that comes with your broadband or dial-up account as well as that which you may get when you register a domain name with some registrars (sometimes called a "starter web page" or the like). Even if the free web host says you can run PHP scripts, they often don't allow the scripts to send email. In view of this, you will probably find that you need a commercial web host before you can successfully use a feedback form script. If you're looking for one, see the Budget Web Hosts page for a list of such hosts or visit my web hosting FAQ for the host that I'm currently using for thesitewizard.com.
55

How to Add a Contact Form to Your Website with Dreamweaver CS4

If you have skipped the above section, because you thought it was unnecessary, please go back and read it, especially the part about getting a web host that allows you to run scripts. Without such a web host, your feedback form will not work.

1. Generate the Feedback Form Script

o

o o

Go to the Free Feedback Form Wizard to generate a customized feedback form script. The wizard can be found at http://www.thesitewizard.com/wizards/feedbackform.shtml Read through the Wizard's introductory page, choose the option to create a PHP feedback form script and click "Go to Step 2". In Step 2, enter the information required by the form: Email: (Enter your email address) 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 You should, of course, replace the "www.example.com" with your actual domain name. However, do not change the file name portions, especially "feedback.html" since you have used this filename in your navigation menu bar and site map in the previous chapters. If you change the filename now, all your old links will break.

o o

Read the licence agreement. If you agree to the terms, indicate it in the form and click the "Generate script" button to continue. A new page will load. Do NOT close this page. Leave it open while you work through the next few steps. We'll be extracting the code generated on this page section by section in the paragraphs that follow. Start up Dreamweaver. Select "File | New..." from the menu. Click "Blank Page" (yes, "Blank Page" and not your template) in the leftmost column. In the "Page Type" column, click "PHP". Click the "Create" button. A blank page should appear. Unfortunately, this page is not really blank, and we have to delete the rubbish that Dreamweaver inserted when it created the page. VERY IMPORTANT: click "View | Code" from the menu. You should now see the miscellaneous HTML code that Dreamweaver inserted into your php page. Select everything on the page. You can do this by using your mouse to drag over everything, or, more simply, hitting Ctrl+A, that is, holding down the Ctrl key and type "a". Then hit the DEL key. (Note: Mac users may need to use Command+A rather than Ctrl+A.) Your window should now be blank.

2. Saving the Script

o o o o

56

Switch back to your web browser (without quitting Dreamweaver) and look for the section entitled "Feedback Form Script". It should be the first section in the results page. Notice that there is a box under that section. That box contains the feedback form script (program). Select everything in that box. For Windows users, one way to do this is to click your mouse somewhere in that box to put your cursor inside it. Then hit Ctrl+A (hold down the Ctrl key and type "a"). Copy the selected text to the clipboard. The easy way is to type Ctrl+C (hold down the Ctrl key and type "c") in Windows. Alternatively, you can click the right mouse button and select "Copy" from the menu that appears.

o o

Switch back to Dreamweaver. Again, do NOT close your web browser. We're not done with it. Select "Edit | Paste" from the menu. The entire script generated by the Feedback Form Wizard should appear in your Dreamweaver window. The last line should show "?>" in red. There should be lines above in blue, red and black. If your screen is very large, you may also see lines in orange (or maybe it's yellow). If you do not see this multicoloured text, close the Dreamweaver window without saving anything, and restart this entire step (the "Saving the Script" step). Do NOT add, subtract or change anything in the window. Leave everything exactly as it is. There is nothing you should be customizing in this screen. This is a computer program that you're looking at, not a web page. It is not displayed to your visitors. If you modify anything at all, the program will fail to work correctly.

Click "File | Save As..." from the menu. Type "feedback.php" (without the quotes) into the "File name" box. 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. Select "View | Design" from the menu. You should see a blank page. Do NOT type anything here. You're still in the program. Click "File | Close" from the menu to close the window.

3. Create the Feedback Form Web Page

The feedback form page is just an ordinary web page with a form for your visitors to complete. As such, you should create it the normal way you create new pages on your website.
o

Select "File | New..." from the menu. Since you have already created a template for your site in the previous chapter, select "Page from Template" in the first column. Make sure that the preview window shows the template that you've been using and that the "Update page when template changes" checkbox has a tick in it. Click the "Create" button.
57

o o

o o

o o o

You should be back in familiar territory. Change the "Title" field above your web page to "Feedback Form" (or "Contact Form" or "Contact Us" or whatever you prefer). Use the same text for the "Page Title" editable region. Select everything in the "Page Content" section and delete it. You will be replacing it with the form code. Switch back to your web browser, and locate the section entitled "HTML Code". Notice that there is a box in that section as well. Select everything in that box and copy it to the clipboard as before. (See above section if you've forgotten how to do this.) Switch to Dreamweaver. Make sure that your text cursor is in your "Page Content" editable region. Specifically, it should be at the position where you want to insert the form code. Click "View | Code" from the menu. Dreamweaver will now display the underlying HTML code of your web page. Look for your blinking text cursor on the page. It should be sandwiched between characters in a line that says "<p>&nbsp;</p>". In particular, it should be just after the "<p>" tag and before "&nbsp;</p>". Use the arrow keys on your keyboard and move the 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 code you copied from the browser earlier. Click "View | Design" from the menu to switch back to the "Design" mode that you normally use. You should now be able to see the form.

4. Customizing the Feedback Form Page

The visual appearance of the feedback form can be customized. You already know how to do things like change the colour of the text from previous chapters, so I shall merely describe how you can change the size of the various fields in the form.
o

How to Widen the Name and Email fields

Before you start changing the sizes of the various fields, you should probably know that the visible sizes of the fields do not control how much information your visitor can enter into them. That is, even if you give a very narrow box for your (say) "Name" field, your visitors can still enter extremely long names into them. The web browser will simply scroll to allow the visitor to continue entering information. Having said that, it's still useful to be able to change the sizes of the fields so that the form fits better into your website's decor. To increase the width of the "Name" field, click somewhere in the box next to "Name". Dreamweaver will display the box with a dotted outline to show that it has been selected. In the PROPERTIES panel at the bottom of the Dreamweaver window, change the "Char width" field to some other number than the default "25". For example, if you want the field to be wider, try entering "30" (without the quotation marks) followed by the ENTER key, and see if the result is acceptable to you in the window above. If not, just change the number until the field has a width that is suitable.
58

The same method applies to the "Email" field. You can also change the text appearing in the web page next to the fields. That is, if you prefer something other than "Name:", "Email address:" and "Comments" being displayed on your web page, feel free to change them. (For example, you may want to translate it to the same language as the rest of your site, if your site is not in English.)

Caution
You should not modify anything in the PROPERTIES panel other than the "Char width" field and the "Class" field, which is basically the same as the "Class" field you met in chapter 3's How to Change Font Typefaces, Weight, Style, Colour and Sizes in Dreamweaver CS4. While you may freely modify things that affect the appearance of your web page (such as the "Char width" and "Class" fields), the other values appearing in the PROPERTIES panel may be used by the feedback form script to obtain the information it needs to send you the email. Modifying them may break the functionality of your form. In particular, do not change the words "fullname", "email" and "comments" appearing in the PROPERTIES panel, not even to translate them. Those are internal information used by the script and will not be displayed to your visitors, so there's no need to touch them. The form is actually designed to work out-of-the-box, so if you can't think of anything to change, don't feel obliged to do so. These sections are meant for the compulsive customizers.
o

How to Change the Width and Height of the Comments field

The width and height of the "Comments" box can also be changed. To do this, click the box. In the PROPERTIES panel, the "Char width" field affects the width of the comments field while the "Num lines" field controls the height. Feel free to change these two numbers so that the box has the dimensions you want. Again, as mentioned earlier, the size of the field does not affect the length of the message that your visitor can send you. It's just a visual effect. The web browser will scroll the box if your visitor has a long story to tell and your box is too small, so you don't have to worry about creating a huge enough box for those people. Caution: do not change anything else in the PROPERTIES panel, other than the "Char width", "Num lines" and "Class" fields.

How to Change the "Send Feedback" button

59

The text appearing on the "Send Feedback" button can also be changed. This is especially important if your page is not in English and you want the button to display information in the correct language. To modify the text, click the button. Change the text in the "Value" field in the PROPERTIES panel. Once again, you should not change anything else in that panel, other than the "Value" and "Class" fields.

5. Save the Feedback Form Web Page

When you're through with your customizations, click "File | Save As" from the menu, type "feedback.html" (without the quotes) into the "File name" field and click the "Save" button. Close the file with "File | Close".

6. Create the "Thank You" and "Error" Web Pages

As mentioned earlier, you will need to create 2 additional pages. These are straightforward web pages that you should have no trouble creating, since you've already created so many in these last couple of chapters. The first page that you need to design is the "Thank You" page. This page is displayed when the feedback form script successfully sends the message typed by your visitor. The main purpose of the page is to confirm that the message has been transmitted. Most websites take this opportunity to thank the visitor for sending his/her comments as well. There are no rules about what you should say here. Say whatever you like. If you're at a loss for words, here's one possibility that you can use for your web page:

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:

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 create your "Thank You" page, save it with the filename "thankyou.html". This is the name you gave the Feedback Form Wizard earlier, so you should not change the name now or your visitor will get a "404 File Not Found" error instead of the "Thank You" page when they submit your form.

60

The second page that you need to design is the "Error" page. This page is displayed when your visitors fail to provide their name or email address when submitting the form. Since this information is needed by the script to create a properly-formed email message, the script (by default) displays the Error page if the information is missing. Again, there are no rules about what to say on this page. For those who are really stuck, here's one possibility:

Error
Please enter your name and email address before submitting the form. Click the "Back" button in your browser to return to the form to fix the error. When you've completed your Error page, save it with the filename "error.html". Again, do not use some other name, since this is the name that you gave the Feedback Form Wizard earlier. The exact name was embedded in the script created, so you should not change it if you want the script to work correctly.

7. Publish Your Pages

Publish your pages with "Site | Synchronize Sitewide..." as you did in the previous chapter. This time, Dreamweaver should show you 4 pages to be uploaded (or five, if you count your template file, which you should of course set to "Ignore" as before), namely, "error.html", "feedback.html", "feedback.php" and "thankyou.html".

Testing Your Feedback Form

You should now test to see if your feedback form works. Connect to your site with a browser, click the link to your feedback form and check the following situations: 1. To test the Error page, don't enter the email address on your form. The error page should show. If the "Thank You" page appears instead, it's probably because you used one of the "Advanced Options" in the Wizard to disable the email address checking. If you did that (not a good idea, in my opinion), then of course the Error page will not show. 2. To test the proper sending of email, just use the form to send yourself a message. Make sure you fill in all the fields. After you click the "Send Feedback" button, you should see your "Thank You" page. Check your email to make sure that you've received the message you sent. If you run into problems when you test the script or if you do not receive the message you sent, please see the Frequently Asked Questions (FAQ) about the Feedback Form Wizard page for the solution. The FAQ contains a huge list of answers from my many years of helping newcomers set up their own feedback form. You should also reread this chapter to make sure you didn't miss anything crucial.

Conclusion
61

Congratulations! You now have a fully functional website, complete with a home page, a site map, an "About Us" page and even a working contact form. More importantly, you now have the knowledge and ability to use Dreamweaver CS4 to design and publish new websites as and when you wish. If you're wondering where to go from here, check out the article The Beginner's A-Z Guide to Starting/Creating Your Own Website for an overview of the rest of the website creation process. Even though you have already finished your site, you should still read the section on "Designing Your Web Pages" for the links to other web design articles. Those articles deal with other principles of good web design not covered in this tutorial series.

62