Monday, 13 February 2012

How to Add a Contact Form to Your Website

How to Add a Contact Form (Web Form) to Your Website Using Dreamweaver CS5.5

By Hanumantha Rao.N Assoc Prof  HanuTechVision

Goal of This Chapter

By the end of this chapter, you will have added a working contact form to your website which your visitors can use to send you feedback. If you've been following this Dreamweaver tutorial from chapter 1, you'll also have completed your website, with a fully-functional multiple-page website "live" on the Internet. In addition, you'll have learnt most of the commonly-used skills needed to design and maintain a website using Dreamweaver, and will be able to create other websites as and when you wish.

Why You Can't Simply Design a Web Form and Expect It to Work

Web forms are tricky beasts for the newcomer. Many new webmasters think that they can simply design a web form using a web editor like Dreamweaver, and have it work automatically. Then, when they publish the form to the Internet, and test it out in a web browser, they find that clicking the "Send" button (or whatever their button is called) on the form has no effect. Nothing appears to happen. In fact, not only has nothing appeared to happen when they click the button, nothing has indeed happened.
Web forms work as one component of a system of seemingly disparate parts. They are like the electrical switches in your house that turn on the lights in a room. Merely installing a switch and flipping it on isn't going to turn on the lights. You'll need to install the lights as well. And you'll have to connect the switch to the lights and the electrical power. In the same way, the web form itself is not enough. You'll need to install another component on your website, and your web host needs to have some other software on their system and have properly configured it to interact with their email system.
It's much easier to work with a concrete example than to talk hypothetically. As such, please go to the Feedback Form Demo and try out the contact form found there. Return to this page when you have done that. Please do it even if you've had lots of experience sending feedback and know exactly how forms work. The feedback form system used on that demo site uses the exact same technology that you'll be using on your website, so you'll have an easier time understanding what I say in this article when I refer to different parts of the form if you've at least tried it out once. Don't worry, the form on that site is just a demo of what you'll be using, so you can test it to your heart's content without spamming anyone. The messages sent using the demo are automatically deleted.
From your little experiment, you should be able to see that, superficially, the feedback form comprises at least 3 parts: the form itself, a "Thank You" page which is displayed when a message is successfully sent, and an "Error" page which is displayed when something goes wrong. Under the hood however are several equally important elements. When you click the "Send Feedback" button on the form, your message is actually sent to a computer program, the feedback form script, running on the Feedback Form Demo site. The feedback form script takes the message and formats it into an email message and (loosely speaking) delivers it to yet another program on your site, called the PHP interpreter. The PHP interpreter, on its part, passes the email to a mail processing program on your web host. From there, the mail processing program sends the message on its merry way around the Internet till it finally reaches your email provider.
For this reason, in order for your web form to work, you'll need the following:
  • A Web Host that lets your run PHP scripts that send email

    The feedback form script (one of the parts of the web form system described earlier) that you'll be using is written in a computer language called "PHP" (see What is PHP? if you want a more detailed explanation of what PHP is). As such, for it to work, your website must be placed on a web server that has PHP installed.
    That's not all. Your web host must have configured their system so that your website is allowed to run PHP scripts that send email. Just because your web host says that you can use PHP doesn't necessarily mean that your PHP scripts can send email. Most free web hosts prevent PHP scripts installed on their system from sending mail, probably to protect themselves from people using their facilities to spam others. As such, if your website is situated on a free web host, chances are that you will not be able to successfully use a web form on your site. Note that when I say "free web hosting", I include any situation where you're not actually paying money to have your website hosted. That includes the free hosting that comes with your Internet broadband connection or the "starter websites" that you get for free when you register a domain name with some registrars. If you're using any such solution for your website, your web form will probably NOT work.
    In general, if you want your feedback form to work, you will need to be hosted on a commercial web host. The form has been used successfully by thousands of sites on such hosts, including the web host used by thesitewizard.com itself.
    Note also that the PHP installed by your web host must be version 4.2 or later. This should generally not be a problem, since earlier versions have been obsolete for many years now. And before you ask, PHP 5 is fine. That is, any number that is greater than 4.2 is okay.
  • The Feedback Form Script

    In many ways, the feedback form script is the heart of your feedback form system. It is the computer program that changes what is typed by your visitor into an email message. You'll be generating a customised ("customized" in US English) version of this for your site using the Feedback Form Wizard. Don't worry. It's free.
  • The Feedback Form (Contact Form)

    The feedback form is the part of the system that your visitors will see. It will be generated for you by the Feedback Form Wizard, and you can customise its appearance in Dreamweaver.
  • The "Thank You" and "Error" Pages

    The "Thank You" and "Error" pages are the supporting web pages that you will design in Dreamweaver.

How to Create the Feedback Form Script and Web Form

  1. The very first thing you need to do is to go to Feedback Form Script Wizard at http://www.thesitewizard.com/wizards/feedbackform.shtml to generate the feedback form script and related files. One way is to open that page in another window (or tab) in your browser, so that you can read the instructions on this page while using the wizard.
  2. Read the information given by the wizard, and click the option "Create a PHP Feedback Form (Requires PHP 4.2 or above)". Actually, that option should already be selected by default, but click it anyway if you're not sure.
  3. Step 2 of the Feedback Form Wizard should appear. Enter the following information into the wizard:
    • Email address

      Enter the email address at which you want your visitors' comments to arrive. For example, enter "webmaster@example.com" (without the quotes) if that is your email address.
    • URL of Feedback Form

      This is the web address of the user-visible portion of your contact form. Enter "http://www.example.com/feedback.html" (without the quotes), replacing "www.example.com" with your actual website address. Important: do not change the filename portion from "feedback.html", since you have already used that name to link to the form in your navigation menu in chapter 6. If you change the name now, all the links on your site pointing to the form will be broken.
      Even if you have not been following my tutorial from chapter 1, it's best to simply use "feedback.html" for the filename portion, since I assume everywhere in this chapter that you're using that name. If you use a different name, you'll have to make sure all the various addresses mentioned in this chapter match up, else your form will not work.
      Warning: do not use capital (uppercase) letters or add spaces to the name "feedback.html". Use that name exactly as it is shown for the filename portion of your URL.
    • URL of "Thank You" Page

      This is the web address of the page that will be displayed after your visitor's email has been sent. Enter "http://www.example.com/thankyou.html", once again replacing the domain name with your site's actual address. It's best not to change the filename portion from "thankyou.html", since I will assume later in this chapter that you've used that exact name. In addition, do NOT put spaces or use capital (uppercase) letters in that name. Use "thankyou.html" exactly as-is in the filename portion.
    • URL of Error Page

      Enter "http://www.example.com/error.html" into this field, as usual replacing the domain name with the right one for your site. Once again, I recommend that you do NOT change the filename from "error.html", since I will assume later that you've used this name here. Again, make sure that the entire name is in small (lowercase) letters and that there are no spaces in the name.
  4. Scroll down the page and read the section entitled "Conditions for Use: Licence Agreement (Required)". If you agree to the terms, indicate it in the form and click the "Generate script" button.
  5. The wizard will then proceed to create a customised script and feedback form, using the values you have just supplied, and display them in your browser. Do NOT close this page. Leave it open while you work on the next few steps in Dreamweaver. We will be using the code generated below.

How to Save the Feedback Form Script Without Introducing Problems

The first thing we'll need to do is to save the feedback form script. As mentioned above, a "script" (in this context) means a computer program. The feedback form script is the real engine of your contact form. Without it, your form will be like a light switch that is not connected to the lights.
  1. Start up Dreamweaver, if you have not already started it up.
  2. Click "File | New..." from the menu. For those who have forgotten, this means to click "File" from the menu bar, followed by "New..." from the drop down menu that appears.
  3. The "New Document" dialog box should appear. Click the "Blank Page" line in the first column. Notice that I said to click "Blank Page" and not "Page from Template" the way you did in chapter 7.
  4. In the "Page Type" column, click the line that says "PHP".
  5. Click the "Create" button found near the bottom of the dialog box.
  6. A page that seems blank will appear. I say "seems blank" because the page is not actually empty, since it contains invisible HTML code which Dreamweaver inserts by default into practically everything it creates. We need to delete that code or it will interfere with the feedback form script.
    If, instead of a blank white page, you see your 2 column website design based on your template, it means that you did not follow my instructions above to click "Blank Page" and "PHP". Close the existing page without saving it and return to the beginning of this section and try again.
    Click "View | Code" from the menu to switch Dreamweaver from its Design view to its Code view.
  7. You should now be able to see the invisible HTML code that I referred to earlier. Select everything on the page. The easiest and surest way to do this is to use "Ctrl+A" from your keyboard. That is, hold down the "Ctrl" key on your keyboard and (while continuing to hold down that key) hit the "a" key. Everything on the page should be highlighted, indicating that it was selected. (If I'm not wrong, Mac OS X users have to use "Command+A" instead of "Ctrl+A" to get this to work.)
    (If, in spite of my suggestion above, you have used your mouse to select everything, make sure that you've really selected everything on the page and left nothing out. Not even a blank line.)
  8. Hit the DEL key to get rid of everything. Your document window, still in Code view, should now be completely blank.
  9. Switch back to your web browser without closing Dreamweaver.
  10. Look at the results page from the Feedback Form Wizard in your web browser. You should be able to find a box near the top of the page in the section labelled "Feedback Form Script". This box contains the feedback form script that we're going to copy to Dreamweaver.
    Click somewhere in that box in the "Feedback Form Script" section. The contents of the box should automatically be selected (that is, everything in the box should be highlighted when you click it). If not, use Ctrl+A (or Command+A on the Mac) to select it.
  11. You'll now copy what you selected to the clipboard. To do this, use Ctrl+C (or Command+C on the Mac) from your keyboard. That is, while holding down the Ctrl key, hit "c" on the keyboard. Alternatively, click the right mouse button while its pointer is somewhere in the box and click the "Copy" line in the menu that pops up.
  12. Return to Dreamweaver without closing your web browser. There are still things on that page that we need, so leave it open for the time being.
  13. Click "Edit | Paste" from the menu. The contents of the box should now appear in that empty window in Dreamweaver.
  14. Do a cursory check to make sure that everything is in order (so far): first, make sure that the last line on the page is a red "?>". Second, glance at the lines above that line: the other lines should be displayed in various colours, including red, blue, green, purple and possibly some orange.
    If you do not see the colours I describe above, but instead find that all the lines are in black, it means that you missed some crucial step in this section. Close the window using "File | Close" without saving anything, and return to the top of thissection and try again. Since it's very easy to get things wrong here, leading to a form that doesn't do its job correctly, I recommend that you don't work from memory in this chapter, but follow the steps I listed meticulously.
  15. WARNING: Do NOT change anything in this window. I know that some of the things in the window look suspiciously like English words, thus tempting you to modify them. However, this is NOT a web page you're looking at. It is a computer program. Nothing in this window will be displayed on your website even when the script is placed on your site. If you modify anything in this window, your form will not work correctly. Even if all you want is to change your email address or web addresses, go back to the Wizard and generate a new form. Do not manually alter them. To reiterate: do NOT add, subtract or modify anything. Do not even add blank lines or extra spaces to beautify the page.
    For those who are concerned that their email address is on this script page, and that your visitors can see it, don't worry. As long as your site is running on a system with PHP, nothing on this page will be visible at all. In fact, at no time will the script be even sent to your visitors' browsers. This is the case even if your visitors try to directly access the script in their browsers. They'll just end up being supplied your feedback form instead of the script. If you don't believe me, you can test it yourself later when you've successfully installed everything. Instructions for this is provided in the section on testing below.
  16. Click "File | Save As..." from the menu. The "Save As" dialog box will appear. Enter "feedback.php" (without the quotes) into the "File name" field. Do NOT use any other name. Do not use capital (uppercase) letters for any part of the name or add spaces. This exact name is expected by the feedback form, so this is not the time to get creative.
  17. Click the "Save" button.
  18. Click "View | Design" from the menu to revert to the Design view. You should now see a blank page again. Do NOT type anything here. Although it looks blank, it's still the feedback form script you've just saved. Anything you type here will break the script.
  19. Immediately click "File | Close" from the menu to close the file before you accidentally change something.

How to Insert the Feedback Form into Your Web Page with Dreamweaver CS5.5

The feedback form proper is simply the user interface that your visitors will interact with. The form should be placed in a normal web page, much like the pages that you have created in the earlier chapters of this tutorial.
  1. Click "File | New..." from the menu.
  2. In the leftmost column of the "New Document" dialog box that appears, click the line "Page from Template". Then select the template that you designed in chapter 7 in the usual way and making sure that "Update page when template changes" is checked before clicking "Create". This is the same procedure you carried out in chapter 7 to create new pages using your bespoke site design.
    For those who have arrived at this chapter without reading the previous chapters, and have not created a Dreamweaver template for your site, just create a new web page the way you normally do. If you are not even sure how to do that, chances are that you don't know enough to continue. In such a case, please start from chapter 1 of this tutorial. (It's not as bad as it sounds; if you work diligently through the chapters, you'll arrive back here in no time.)
  3. As usual with a new page, replace the "Title" field with something suitable such as "Feedback Form", "Contact Form", "Contact Us", "Support" or some such thing. At the top of the visible portion of your web page, put a (visible) heading of "Feedback Form" (or whatever you used for the Title field).
  4. Delete whatever placeholder text you have in the editable region of your page. Leave a blank line or two where you can insert the feedback form later.
  5. Without closing Dreamweaver, switch back to your web browser.
  6. Scroll down to the section headed "HTML Code".
  7. Click your mouse somewhere in the box in the "HTML Code" section. As before, the contents of the box should be automatically selected when you do that. If it isn't, use Ctrl+A (or Command+A on the Mac) to select it.
  8. Use Ctrl+C (or Command+A on the Mac) to copy everything in that box to the clipboard. Or, if you prefer to use the mouse, click the right mouse button while the cursor is hovering over the contents of the box, and select the "Copy" line in the menu that pops up.
  9. Switch back to Dreamweaver. You should again be looking at the new page that you have just created.
  10. Click the spot on the page where you want the form to go. This will cause a blinking text cursor to appear in that place. If the text cursor is not on a blank line of its own, hit the ENTER key to make a blank line, and then use the arrow key (on your keyboard) to reposition the text cursor back to the blank line.
  11. Without moving your text cursor, immediately click "View | Code" from the menu.
  12. You should now see the underlying HTML code of your web page. Locate your (blinking) text cursor. It should be on a line that says "<p>&nbsp;</p>". To be precise, the cursor should be immediately after "<p>" and before "&nbsp;</p>" on that line.
    Use the arrow keys on your keyboard to move the text cursor to the end of that same line. That is, position the cursor so that it is just after "<p>&nbsp;</p>" on the same line.
  13. Click "Edit | Paste" from the Dreamweaver menu.
  14. The HTML code created by the wizard will be inserted at that spot.
    Click "View | Design" from the menu.
At this point, you should be able to see the feedback form fields on your web page.

How to Customize the Appearance of the Feedback Form

You will now customise the appearance of the form so that it suits the design of your web page. Note that you do NOT need to do this if the form already looks fine on the page. The code created by the Feedback Form Wizard is designed to work out-of-the-box without needing any further tinkering. If you don't want to change anything, just move on to the next section.
The form obeys the same CSS rules as the rest of your web page. As such, you can use the techniques taught in the earlier chapters of this tutorial to changethe font, text size, and colours. I will not repeat those steps here, since you can easily return to the relevant chapters if you've forgotten how to do them. Instead I will focus on things you haven't learnt yet, like how to adjust the widths of the various fields in your form and how to change the words appearing on the button at the bottom of the form.
Please note that the widths and heights of the form fields are merely visual gimmicks. They do not affect how much information your visitors can enter into your form. Even if you create very narrow fields, your visitors can still enter long names, email addresses and comments. The web browser will automatically scroll to allow them to type whatever they want to type. Nevertheless, it's still useful to know how to adjust the field widths so that you can make the form blend aesthetically with the rest of your page.
  • How to Widen the Name and Email Address Fields

    Click the field that you want to make wider (or narrower). For example, if you want to widen the Name field, click the box for "Name" once to select it. (Notice that I said to click the box, not the word "Name" on the page.)
    The PROPERTIES panel at the bottom of the Dreamweaver window will now be filled with things specific to that field. Locate the value for "Char width" in that panel. It should currently say "25", which means that the "Name" or "Email address" field that you selected has a current width of 25 characters. If you want the field to be broader, so that it is (say) 50 characters wide, click the 25 to put your text cursor in that box, then replace that number with 50 (or whatever number you actually want to use). Hit the ENTER key after typing your new number. The change should be reflected on your page as soon as you do that.
    If the field is still not wide enough, or if it is now too wide, do the same thing and change the number till you're satisfied with the results. Remember that this change is purely aesthetic, so don't stress yourself out trying to find the perfect width (not that there's such a thing). Your visitors will be able to enter whatever they want into your form even if what they have to say is much longer than the width you allocate. Just make a decision on how wide you want the field to be, and stick to it.
    You'll probably want to repeat the above procedure with the other field as well, so that both the Name and Email Address fields have the same width. (There's no requirement for this, but most people like their fields to have the same width so that the form doesn't look unbalanced on the page.)
  • How to Make the Comments Box Wider and Taller

    Once you adjust the Name and Email Address fields, you'll probably also want to change the width and height of the Comments box. To do this, click the box once to select it. Again, notice that I said to click the box, not the word "Comments".
    The default values for the Comments box should fill the PROPERTIES panel at the bottom of the Dreamweaver window. This time, however, there are 2 values that you can change in that panel: the value for "Char width", with its default of 45, and the value for "Num lines", with its default of 15. Adjust either or both of those values, hitting the ENTER key after each change, till you are satisfied with the results.
    Note that the version of Dreamweaver I used has a bug that surfaces when you change the "Num lines" field to a number bigger than the original. After hitting the ENTER key, the Comments box will indeed become bigger, but the layout will not adjust to accommodate it. As such portions of the Comments box, along with the "Send Feedback" button, may flow off the page, overlapping your footer (and beyond). This visual glitch will disappear when you save your page later. But don't save the page just yet. Either ignore the glitch for the time being or don't change the height of the box. (It's not like the height of the box matters; your visitors can probably still enter an entire novel into a small box.) Once again (for the panicky), the visual glitch is just a temporary Dreamweaver bug that will go away later. The underlying page code (the stuff that really matters) is fine.
    (For those of you inclined to ignore my suggestions, and are about to save the page just to get rid of the visual glitch, make sure you read my instructions below on the correct filename to use for this page. Otherwise you'll run into more serious problems than this temporary visual glitch.)
    If you don't experience the aforesaid bug, it probably means that the Dreamweaver programmers have already fixed the bug in the version you're using.
  • How to Change the Words Displayed on the Send Feedback Button

    The words "Send Feedback" on the button at the bottom of your feedback form can be changed if you prefer it to say something else. To use a different set of words, click the button once to select it. (Note: even if you experience the visual glitch I mentioned above as a result of your resizing the height of the Comments box, you should still be able to find the "Send Feedback" button somewhere on the screen and click it. It will probably not appear in the correct position as a result of the Dreamweaver bug, but it should still be selectable.)
    When you do that, the PROPERTIES panel should display a "Value" field with the default words "Send Feedback". Click your mouse cursor in that field and change the words to whatever else you want.
  • Things You Should NOT Change

    For those of you who are compulsive customisers, who feel an irresistable urge to change everything, please note that there are certain things in the form that you should NOT change. Changing those things will cause the form to fail to work correctly.
    The general principle is that you should only change things that are visible on your web page. That is, you can change things like colour, size, widths, height, and even the words that appear on the page itself. Yes, you can even change the words "Name:", "Email address:" and "Comments" that appear before the form fields on your page to something else if you like.
    However, as you may have already noticed when you clicked the various fields, there are other internal values for those form fields apart from those displayed on your site. For example, when you clicked the Name, Email address and Comments fields on your page to select them, you may have noticed that other values like "fullname", "email" and "comments" were also shown in the PROPERTIES panel. These words must NOT be changed, not even to translate them to some other language. They are internal values that are used by the web browser to interface with the feedback form script. To use the analogy of the light switch I mentioned earlier, these are like the electrical wiring that connects the switch (your web form) to the actual lights (the feedback form script). If you change them, things will go awry. Having said that, you shouldn't need to change those values anyway, since they are not actually visible on your web page.

How to Save the Feedback Form Correctly

Once you've finished customising the form, click "File | Save As...".
Type "feedback.html" (without the quotes) into the "File name" field and click the "Save" button. Do NOT use any other name. Do NOT use capital (or uppercase) letters, or introduce spaces into the name. Just use the name as-is. This was the name that you supplied to the Feedback Form Wizard earlier, and the name was embedded into the script (computer program) it generated. This is also the same name you used in the navigation menu you created in chapter 7. Changing the name at this point will break a lot of things.
Click the "Save" button.
Now click "File | Close" from the menu to close the feedback form page.
(Optional) If you wish, you can switch back to your web browser and close the tab containing the results from the Feedback Form Wizard. At this point, you've completed integrating the Feedback Form Wizard's output into the pages of your site, so you don't need it any more. Your job is still not done, though. You still need to create the "Thank You" and "Error" pages needed by your feedback form system. This will be done next.

How to Create the Auxiliary Pages for the Feedback Form

As you have probably already realised, from experimenting with the feedback form demo earlier, the "Thank You" and "Error" pages are just straightforward web pages, much like your home page, site map and "About" page that you created in the earlier chapters.
The "Thank You" page is the web page that is displayed after your visitors click the "Send Feedback" button. Its main purpose is to reassure your visitors that their message has indeed been sent. Otherwise they'll think that nothing has happened and click the button again, with the end result that you'll get multiple copies of the same message. Most websites also take this opportunity to thank their visitors for their comments.
Create the page the usual way you create a new page based on your site's template. Replace the Title field with something like "Feedback Sent" or "Thank You" or the like. Then in the main visible portion of your web page, put a message like the following:

Message Sent

Your message has been sent to the webmaster. Thank you for your comments.
Actually, you can say whatever you want. The above is just to give you an idea of what to put on the page. There are no rules as to what you must say. Save the page with a filename of "thankyou.html" (without the quotes). Once again, don't change the name in any way: use the exact wording without any capital (uppercase) letters or spaces. Changing the name now will result in your visitors receiving an unfriendly "404 File Not Found" error when they click the "Send Feedback" button.
Once you've finished with the "Thank You" page, create the "Error" page from your site's template. This page is displayed when your visitors click the "Send Feedback" button without entering anything into one or more of the form fields. For example, if they leave the "Email address" field of the form blank, they will get this page instead of the "Thank You" page.
As such, your Error page should have a message telling your visitors to return to the form to complete all the fields before clicking the "Send Feedback" button. For example, you can say something like the following:

Error Sending Message

Please complete all the fields in the form before clicking the "Send Feedback" button. Click the "Back" button in your browser to return to the form to fix the error.
As before, remember to change the Title field of the page to something like "Error" or "Error Sending Message". Save the file as "error.html", without the quotes and without modifying the name in any way. That is, use the name as-is, without using capital (uppercase) letters or introducing spaces. Remember that this is the name you supplied the Feedback Form Wizard earlier, and if you change it now, your visitors will get an unhelpful File Not Found error instead of the Error page.

Publishing and Testing Your Feedback Form

  1. Upload the Files

    Publish all the files to your website using "Site | Synchronize Sitewide..." just as you did in chapter 7. Dreamweaver should display the script, the form, the Thank You page and the Error page in its list of files that need to be uploaded when you do so. Allow the editor to transfer those files to your website.
    Note: if the "Synchronize Sitewide..." menu item is disabled or greyed out, it probably means that you arrived at this chapter of the tutorial from outside thesitewizard.com and have missed some steps which I have already taught in the earlier chapters. In particular, you'll need to set up Dreamweaver's Site Manager properly before that menu item will work properly. Please read the relevant section in chapter 1 to find out how to do this. And if you cannot even invoke the Site Manager, it probably means that you designed your website without creating a site definition in Dreamweaver before you started. In such a case, you may want to start from scratch, from the very top of chapter 1. Although this sounds tedious, it may save you a lot more work in the long run, since there is no telling how many other intermediate steps you missed out.
  2. Test the navigation menu button that points to the feedback form

    Once Dreamweaver has completed copying the files to your site, fire up your web browser and go your site's home page. From there, click the navigation menu button that says "Feedback Form" (or whatever label you put on that button). The page containing the feedback form should appear.
    If you get an error saying something like "404 File Not Found" (or some other words to that effect), it means the web address (ie, URL) you assigned to that navigation menu button in chapter 7 does not match the address of the form you just uploaded. This means either the URL you set for the navigation menu button is incorrect, or that you saved the feedback form under a wrong name (or to the wrong folder).
    (Note: although you can go directly to your feedback form in your browser instead of starting from your home page, I'm suggesting this roundabout method so that you can test that your link to your feedback form works correctly. Remember that you couldn't test this when you checked the other menu buttons in chapter 7 because your form was not ready at that point.)
  3. Test if you have named your Error page correctly

    To test if you have named your Error file correctly, and that the name matches what you supplied the Feedback Form Wizard, do not enter anything into your feedback form. Just click the "Send Feedback" button. Yes, I know all the fields are empty. That's the whole point.
    Your Error page should appear in your web browser. If so, move on to the next test.
    If the Error page doesn't appear, but you get a "404 File Not Found" message instead, it means that there is a mismatch between the address you gave the Feedback Form Wizard and the actual address of your error page. This may be the result of your saving the Error file under a different name, or saving it to the wrong location. Alternatively, you could have made a typing error when entering the address of the Error page in the Wizard. Yet another possibility is that you failed to upload the Error file.
  4. Test if you have named your Thank You page correctly

    Hit the BACK button in your browser to return to the feedback form from your Error page. Now complete all the fields in the form before hitting the "Send Feedback" button. This time, you should get your "Thank You" page.
    If you get a File Not Found error when you submit the form, it means that there is a name or web address (URL) mismatch somewhere. As before, there are four possible causes for the error: you made a mistake naming your "Thank You" file, you saved the file to the wrong folder, you supplied the wrong web address to the Feedback Form wizard, or you failed to upload the "Thank You" page.
  5. Test if your web host's email system delivers messages sent by PHP scripts

    The fact that your browser displays your Thank You page doesn't necessarily mean that the message sent by the script will arrive at your email address. All it means is that the script has successfully passed the email on to the other programs running on your web host's system. The Thank You page merely signals the end of the script's job. Now it's up to the rest of the programs running on your web host's computer to transmit the message to your email provider. It also depends on the internet connection between your web host and your email provider, as well as the speed at which your email provider makes new mail available for your reading. Since there are so many places where things can still go wrong, don't assume success until you've logged into your email account to check if your test message has arrived.
    If you do not get your email within a reasonable time, see the checklist of things to do when your email fails to arrive. How long does it typically take for email to be delivered? Good question. It varies from web host to web host, and email provider to email provider. On my current web host, it usually takes a second or so (probably less, but I'm not so fast that I can check my email in less than 1 second after sending my test message), but I've tested the script on other web hosts where it takes many hours before the email even deigns to appear. I guess you'll just have to test to see how long email delivery takes on your web host, and get used to it.
  6. For the suspicious: how to check if your visitors can see your email address from the script code

    Remember that I said earlier that the email address that you saw in the feedback form script will not be displayed in your visitors' web browsers even if they specifically put the address of the script in their browser's location bar? Well, if you didn't believe me then, now's your chance to verify that claim. (Actually, even if you believe my statement, please try the following experiment anyway, for your own peace of mind. Don't worry, you won't break anything.)
    If your feedback form is at "http://www.example.com/feedback.html", the PHP script that you uploaded should be at "http://www.example.com/feedback.php". That is, take the URL of your feedback form, and change the part at the end that says ".html" to ".php". Type that new address into a new tab (or window) in your web browser's location bar and hit the ENTER key.
    You should be magically transported to your feedback form. That is, you will not see the multicoloured program code that you saw in Dreamweaver. In fact, the script code was never at any moment transmitted to your web browser.
    Explanation: a web server that has PHP installed distinguishes between normal web pages and PHP scripts. If it sees a normal web page, like your home page, it sends that document to your visitor's web browser unmodified. If it sees a PHP script, it doesn't send anything. Instead, it runs the script, since it knows that PHP scripts are computer programs, not documents. It's then up to the PHP script to send something to the browser if it wants to. When run in this way, the script created by the Feedback Form Wizard notices that it was accessed directly (instead of through the "Send Feedback" button). Since it has nothing to do (having no content to format into an email message), it simply tells your visitor's web browser to go to the form instead. That's why you were transported to your feedback form.
    (If you encountered a "404 File Not Found" error instead of your feedback form, you've either typed the wrong address into your browser, or you supplied the wrong address for the "URL of Feedback Form" field in the Feedback Form Wizard when you first created your script.)

 

Efficiently Manage a Multi-Page Website with Dreamweaver CS5.5

How to Efficiently Manage a Multi-Page Website with Dreamweaver CS5.5


Goal of This Chapter

By the end of this chapter, you will have created a custom Dreamweaver template for your website and have used it to create other pages for the site. You will also learn how to modify the design of your site by simply changing the template, and have Dreamweaver automatically update all the affected pages. Finally, you will use a new method of publishing your website, one where you let Dreamweaver figure out which pages of your site have been changed, and upload the relevant ones instead of the manual method you previously used.

Purpose of The Dreamweaver Template System

One of the things Dreamweaver is famous for is its template system. It allows you to tackle many of the problems a multi-page website brings to the table without substantially reducing your productivity.
Specifically, it allows you to do the following things.
  1. Standardize the Appearance of a Website

    The first thing the template system allows you to do is to create new pages for your website based on your existing site design. Instead of creating everything from scratch, as we did from chapters 1 to 6 of this tutorial, you can simply reuse the same design that you have already laboured ("labored" if you use a different variant of English) on at length for your new pages.
    Don't think of this use of a standard design as the result of laziness. If you pay attention to the websites you visit on the Internet, you will have noticed that most websites sport a standard appearance across all its pages. For example, all the pages on thesitewizard.com have the same left column with its site logo, search field and navigation menu. A common design across all the pages of a site improves the usability of your site. The standardised ("standardized") appearance lets users become familiar with how your site works and thus be more efficient at finding things on your site.
  2. Update Your Site's Design on Multiple Pages by Changing Only One Page

    In the last few chapters, whenever you tweaked the appearance of your page, you manually changed the page itself. This is fine when your site only has one page. But what happens if your site has, say, 100 pages? Does it mean that if you ever want to change the design, you have to go through every one of those pages manually and modify them all?
    Dreamweaver's templates have an additional feature that is not obvious from its use of the word "template". When you make changes to your design in the template, Dreamweaver will automatically go through your website and update the design on all the pages derived from that template.
Since Dreamweaver is only a simple web editor and not a complex creature like a human being, it cannot really tell which portion of your page is part of the site's design (which is supposed to be identical on all the pages of your site) and which portion contains content that is supposed to be different on every page. To enable it to do its automatic updating magic, we need to specifically indicate in our template which portion is to contain the stuff that is different on every page. We will do this in the next section.

How to Create a Custom Template Using Dreamweaver CS5.5

  1. Start up Dreamweaver and open the home page that you've been working on since chapter 1. For example, you can open your home page by doubleclicking the "index.html" line in the FILES panel on the right side of the Dreamweaver window.
  2. Click "File | Save as Template..." from the menu. That is, click "File" on the menu bar, followed by "Save as Template..." on the drop down menu that appears.
  3. Click the "Save" button in the Save As Template dialog box that pops up.
  4. Another dialog box, with the words, "Update Links?" should appear. Click the "Yes" button. This will allow Dreamweaver to modify all the relative URLs on your page so that they won't be broken when it changes your page into a template. It is needed because the template is saved in a different directory from your original file. Note that even if you don't use relative URLs in your links, you will still need to click "Yes", since your page links to images, such as your site logo, and the CSS file using relative URLs. In other words, for the ordinary webmaster, this dialog box asks a question to which you will always need to answer "Yes".
  5. Dreamweaver then creates a new directory in your local website folder called "Templates". You can see this in the FILES panel. In addition, if you were to look at the tab just below the menu bar at the top of the Dreamweaver window, you will also notice that the filename of the page you're working on has changed from "index.html" to "index.dwt". In other words, you're no longer looking at your home page but your custom template. The template looks exactly like your home page at the moment because you used your home page as the basis of the template.
    By default, if you don't do anything else, Dreamweaver will consider the entire content of the page as being part of the fixed design of your website. That is, Dreamweaver will update all the pages of your website with any modifications you make to this page. This is obviously not correct, since there are portions of the page that are only relevant to your home page.
    What is needed at this point is for you to tell Dreamweaver the regions of this page that are actually editable content: that is, content that is different on every page of your site. To do this, we will select that portion of the page, and indicate to Dreamweaver that it is an "editable region".
    You can have multiple editable regions on your web page. They can be separated from each other by portions that are part of the fixed design on your web page, or they can be contiguous with other editable regions.
    For most people, the majority of the content in the right column of your web page will probably need to be marked as editable (unless you want every page on your website to be identical to each other). The date portion of your copyright statement at the bottom of your web page should also probably be marked as editable (unless you want all your copyright dates to read the same, no matter which year you create a new page).
  6. To mark a section of your page as editable, drag your mouse over the area to select it. For example, if you want to mark all the words in your right column as something that will be different on every page, drag your mouse over those words so that they become highlighted. You are not restricted as to what you can select: feel free to select multiple paragraphs along with their section headings in one go, if that's what you want.
  7. Now click "Insert | Template Objects | Editable Region" from the menu.
  8. A dialog box with the title "New Editable Region" will pop up. The "Name" field in the dialog box will probably contain some default name like "EditableRegion3" (or some other number). This dialog box allows you to name your editable region with some meaningful name if you wish. For example, if you have selected practically everything in your right column, you may want to name this region "Page Content" (without the quotes). Or if you have only selected the top header for the page, you can name it "Page Title" (without the quotes). Actually, you can name your editable regions anything you like, or even leave it at the default name if you can't be bothered. The name is just an internal label, supposedly to help you figure out what each section of your page contains. I say "supposedly" because most webmasters don't really need the label to figure this out since it's usually obvious to them.
    In any case, replace the suggested name if you wish, or leave it alone if you can't be bothered. The name you choose (or don't choose) has no impact on the final visual appearance of your page. Then click the "OK" button.
  9. You will notice that Dreamweaver now puts a blue outline around the section you marked. At the top of that section, there is a tag with the name you typed earlier. (Of course if you didn't replace the default name, the tag will just say "EditableRegion3".)
    Don't worry. You will only see this blue outline and tag in Dreamweaver. They will not be displayed in a web browser when you view your site on the Internet. Dreamweaver displays them to help you find the editable regions on your page, otherwise you'll be operating blind when you design your site.
  10. Repeat the same procedure with the other portions of your page that you want to make editable. For example, select the year in your copyright notice in the footer, and make it editable too. Yes, you can select a single word or number and make only that word or number an editable region if you need to. Label that region "Copyright Year" (without the quotes) or leave it at the default label if you don't feel like labelling anything.
  11. When you've completed marking all the editable regions of your web page, click "File | Save".
    You may (or may not) be greeted with a dialog box that says something like 'You placed the editable region "EditableRegion4" inside a block tag. Users of this template will not be able to create new blocks in this region. Move the region outside the block tag if you want users to be able to do this.' where the word "EditableRegion4" will be substituted with whatever label you gave that particular editable region.
    Don't worry about this message. It only appears frightening because it's cryptic to the newcomer. For the curious, the message only pops out if you have marked a word (or number) or some small portion of a larger block as an editable region. For example, if you've made the year portion of your copyright notice into an editable region, and not the entire paragraph, the message tells you that when you want to update the year in your individual web pages, you'll only be able to replace the year with another year or some other sentence. Dreamweaver won't allow you to replace the year with multiple new paragraphs. To do that, you will need to return to the template to adjust your design. Don't worry if you don't understand either the message or my explanation of it. It's merely stating the obvious.
    Just click the "OK" button to dismiss the message (if it appears).

Associating the Home Page with Your Template

At this point, you have successfully created a template on which you can base the rest of your website. However, before we work on the other pages, we will need to do something about your home page. If you will recall, you created your home page before you made your template. Since it was not actually made from your template, Dreamweaver will not consider the page as being derived from the template, even though they share the same appearance. If you leave things in this state, and change the design in your template, Dreamweaver will not update your home page with the new design since it will not realise that the two are connected in any way.
We must thus associate your home page with the template before we go on to create the other pages of your site. The easiest way to do this is to replace your old "index.html" file with a new one that is created from the template. Since you have not actually modified your template in any way except to add editable regions, this new page will have an identical appearance to your original home page. This identical appearance is, however, only skin deep. Internally, it will have invisible markers that will let Dreamweaver know that it is derived from your template, allowing the web editor to automatically update it every time you change your site design.
  1. Close all files by clicking "File | Close All". While this step is optional, it helps to avoid the situation that some newcomers experience where they accidentally end up working on the wrong file.
  2. Click "File | New". The "New Document" dialog box, which you met in chapter 1, should appear.
  3. Here's where we depart from the procedure used in chapter 1. Instead of creating a new page from a blank layout, we will create it from the template you made earlier.
    Click the line that says "Page from Template" in the left column of the dialog box.
  4. You should now see a representation of your page in a thumbnail picture on the rightmost side of the dialog box. Don't worry if the picture does not accurately reflect your page design. Chances are that it will not; but it should have enough elements from your page to help you recognise it. The thumbnail is there in case you have created multiple templates and are not sure which is which.
    The name of your current site should be selected in the column labelled "Site:". In the future, when you have created other sites with their own templates, those sites will be listed here too. The name of your template should be selected and displayed in the third column. Again, in the future, should you create multiple templates for this site, they will all be listed here too, and you'll have to click the line containing the template you want to use.
    In any case, if you have multiple sites and/or multiple templates, make sure you select the right one. For now, however, you probably only have one template for one site, so the correct template should already be selected for you. (That is, you don't have to do anything for this step.)
  5. Make sure that the "Update page when template changes" box in the rightmost column of the dialog box is checked. If it is not, put a tick in the box by clicking it.
  6. Click the "Create" button at the bottom of the dialog box.
  7. A new page will appear, identical to both your home page and your template.
    Click "File | Save As...". The "Save As" dialog box will appear. Click "index.html" to select it. Yes, we will be replacing your existing home page with this visually identical copy.
  8. Click the "Save" button.
  9. A message saying "The file you selected already exists. Would you like to overwrite this file?" will appear. Click the "Yes" button.
  10. Dreamweaver will then overwrite your original home page with the current page. If you were to look at the tab at the top of the Dreamweaver window (just below the menu bar), you should see that the page you're working on is now called "index.html".
    This "index.html", in contrast with your old one, is considered by Dreamweaver to be associated with your template file. Dreamweaver is able to tell the difference because the new file contains some invisible information embedded in it that specify which template it is based on as well as which portions of the file are editable. The difference should also be visible to you in Dreamweaver since you will be able to see the editable region outlines in your document.

How to Create a New Web Page from Your Template with Dreamweaver CS5.5

With a template in hand, creating new pages for your website is now substantially easier than creating your first web page. The basic idea is the same as what you did when you recreated your home page earlier, except that this time, you'll need to change the page title and content.
Since this is your first time creating brand new pages from a template, we'll walk through the procedure of creating your Site Map and About Us pages.

Creating the Site Map

A Site Map is just a list of links pointing to every page on your website. It is the equivalent of an exhaustive table of contents in a physical book. It's meant to help visitors find a particular page on your site should they be unable to do so via the usual set of links on the normal pages. A site map increases a website's usability, and also has the additional benefit of helping search engines locate all the pages on your website. If you have never seen one before, take a look at thesitewizard.com's Site Map before continuing. (Before you ask, I use 3 columns for that page to avoid it appearing excessively long. There's no rule that site maps must have 3 columns or anything like that. For example, the site map for HowToHaven.com, a much smaller site at this time, is formatted in the usual 2 columns.)
Although your site only has a few pages at this time (or rather, it will only have a few pages by the end of this chapter), it's still a good idea to create a site map in preparation for the new pages that you will create in the future.
  1. Close all files with "File | Close All" from the menu. Again, this step is not strictly necessary, but is mentioned here so that you don't accidentally end up working on the wrong file.
  2. Click "File | New...".
  3. As before, make sure the correct template is chosen and that the "Update page when template changes" box is checked.
  4. Click the "Create" button near the bottom of the dialog box.
  5. The first thing you need to do (before you forget) is to modify the page title. If you will recall from chapter 1, the page title field can be found below the menu bar and row of tabs (see picture below).
    Location of title field in Dreamweaver CS5.5 window Type "Site Map" or "Site Map: Example Co" (where "Example Co" is the name of your site) into the title field, replacing the default title.
  6. Replace the section header (the large bold words that represent the visible title on your web page) in your right column with the words "Site Map". If the text you type does not appear in the large bold font that was there originally, review my instructions on howto make a sub-heading in Dreamweaver.
  7. Delete the rest of the default content in your right column (the stuff specific to the home page) so that you can fill it up with the links you need for your Site Map. You can do this by clicking your mouse somewhere in that section, and using the DEL or Backspace key to get rid of the original text.
  8. Now type the title of each of the pages on your site on a separate line, and make each title into a link. Since you haven't actually created any other pages yet, if you're at a loss for what to type, put things like "Home", "Site Map", "Feedback" and "About Us", since these are the pages you'll be creating in this chapter and the next. If you already know what other pages you want to place on your site, type those titles there as well. For those who have forgotten how to turn wordsinto links, please review chapter 5 again.
    Since typing the ENTER (or RETURN) key after each line creates a new paragraph, resulting in a lot of space between each line on your page, you may prefer to click "Insert | HTML | Special Characters | Line Break" from the menu after each line instead of hitting ENTER. For example, type "Home" (or "Home Page"), then click "Insert | HTML | Special Characters | Line Break". Nothing will appear to happen at this point, but if you type "Site Map" immediately after that, the words "Site Map" will appear on a new line. Those using Windows can alternatively use Shift+ENTER (that is, hold down the Shift key and type the ENTER key) instead of using "Insert | HTML | Special Characters | Line Break" to achieve the same effect. (I'm not sure if this Shift+ENTER shortcut works on the Mac as well.)
  9. Click "File | Save As..." and type "sitemap.html" (without the quotes) into the "File name" field of the dialog box that appears. Do not use another name. Do not use capital (uppercase) letters. Do not add spaces. If you deviate from this name in any way, the "Site Map" button in your site's navigation menu will lead to a "File Not Found" error page when you test your site later. That's because you used this exact name, "sitemap.html", when you created the menu buttons in chapter 6.
    Click the "Save" button in the dialog box.
Whenever you add a new page to your website, you should return to this Site Map to add a link to it.

Creating the (Optional) About Us Page

The "About Us" page is used by websites to provide visitors some information about the people behind the site or company. You should always have an "About Us" page if you are running a business site. It's optional if you have a personal or hobby site. Feel free to skip this section if you don't want such a page. (Note: if you have already created an "About Us" button in your navigation menu, and have now changed your mind about creating such a page, remember to delete that button otherwise it will lead to an error page when it is clicked. Return to the previous chapter for instructions on how to delete a button.)
  1. Create a new page from your template, using the procedure you've been using to create the previous 2 pages.
  2. Replace the title field with something appropriate, like "About Us: Example Co", "About Example Co", "About Me", or "About [Your Name]". There are no fixed rules about this, so call it what you like.
  3. Change the right column to contain information about your company or yourself. If you are writing about yourself, be circumspect about what you reveal here. Remember that this is a public website, which may be read by anyone, including future employers and psychos living in your neighbourhood.
  4. Save the page as "about.html" (without the quotation marks), the name you used in your navigation menu in chapter 6. If you use a different name now, your navigation menu button will lead to a File Not Found error.

Creating Other Pages

At this point, you've finished most of the standard website pages (with the exception of the feedback form). Before moving on to the final chapter of this tutorial, create the other pages on your site using the same method. Remember to change the title field to reflect the content of the page. When saving those pages, use the suggestions given in my article on creating good filenames for web pages to avoid problems in the future. In particular, don't put spaces in your filenames or use capital (uppercase) letters.
If the page you're creating is an important page on your site, you may want to consider putting a button linking to it in your navigation menu as well. Whether a page is important or not depends on the purpose and nature of your site. For example, on a site selling things, the Products page and Order form are very important pages, since they are the raison d'être of the site. Since the navigation menu is probably not in an editable region of your web page, you will need to modify the template itself to include it. This is the topic of the next section.
Note: Do not create the feedback form yourself. The next chapter will lead you through it. There's a lot more to a web form than a normal web page.

How to Modify Your Template in Dreamweaver CS5.5

You may on occasion need to modify your template, for example, to update the design of your site, to add new buttons to your navigation menu, to create new editable regions or some other task. Here's how you can do it.
  1. Click "File | Close All" to close all existing files. Again, this is just a precaution. If you are accustomed to working with multiple open files in Dreamweaver, feel free to skip this step.
  2. Expand the "Templates" line in the FILES panel in the rightmost column of the Dreamweaver window. To do this, click the "+" icon preceding the line that says "Templates". (If you don't see a "+" icon, but instead see a "-" icon, it means that the item has already been expanded. In such a case, you can skip this step.)
  3. The "+" should now change into "-", and a new line saying "index.dwt" should appear below. This is the template file you created earlier. Doubleclick "index.dwt" to open it.
  4. Look at the tab immediately below the Dreamweaver menu bar. It should say "index.dwt", indicating that the file you see in the window is your template file. If it says something else (like "index.html"), it means you've doubleclicked the wrong line. Use "File | Close All" and try again.
    Make whatever changes you want to the page. If you're adding a new menu button, and have forgotten how to do it, see the instructions in chapter 6.
  5. When you've finished making your changes, click "File | Save All".
  6. A dialog box entitled "Update Template Files" will appear. This dialog box will list all the files derived from this template. Click the "Update" button to allow Dreamweaver to replicate the changes you made in those files.
  7. After a while (it may be immediate if you don't have many pages on your site), a dialog box with the title "Update Pages" will appear. Don't be deceived by the title. When this dialog box appears, it means that Dreamweaver has finished updating all the affected pages and is reporting to you that the work is done. If you want to examine the list of files it modified, put a tick in the "Show log" checkbox. This will expand the dialog box to give you a detailed report of what it did. When you're satisfied, click the "Close" button to dismiss the report.
  8. Click "File | Close" to close the template, so that you don't accidentally modify it when you intend to work on something else.

How to Use "Site | Synchronize Sitewide..." to Publish Multiple Pages

While "Site | Put" is a useful tool when you only have a single page to upload to your site, it is a bit unwieldy to use when you have multiple pages. Now that we have so many pages to manage, what we want is something that can automatically detect which pages have been modified, and publish only those to the site without our having to manually check and publish each one individually. This facility is provided by the Dreamweaver "Site | Synchronize Sitewide..." menu item.
  1. Click "Site | Synchronize Sitewide...". If this menu item is disabled, or greyed out, it means that you didn't follow the instructions in chapter 1 to configure your site. (This may happen if, for example, you dived straight into this chapter from outside thesitewizard.com.) If so, go back to the section on configuring the FTP settings for your website in chapter 1 before returning here.
  2. A dialog box with a title "Synchronize Files..." will appear. Click the "Preview" button.
  3. Dreamweaver will connect to your website to compare the files on your computer with those already uploaded to your site. From this, it will compile a list of things that need to be published. When it is done, a new dialog box entitled "Synchronize" will appear. This dialog box will show you the files that Dreamweaver thinks need to be uploaded. For example, it should show (at the very least) lines that say "Put index.html", "Put sitemap.html" and "Put Templates\index.dwt". If you have other files (like an About page), they will be listed as well.
    Click the line "Put Templates\index.dwt" to select it. As you probably already know, this is your template file. Dreamweaver lists this because it lists every file that it cannot find on your current website. However, this file is, strictly speaking, not really part of your website. It's an internal file meant to make it easy for you (the webmaster) to create and maintain your website. As such it doesn't actually need to be published onto the Internet. Your online website does not link to it, nor does it require it to be present.
    If you don't want your template to be uploaded to your site, right click that line. Click the line "Ignore Selection" in the menu that pops up. Dreamweaver will then change the line to say "Ignore Templates\index.dwt".
    Personally, I never publish my template file for sites that I use Dreamweaver on. That is, I always select "Ignore Selection" for that file. Having said that, as far as I can tell, publishing the template doesn't help or harm your site in any way. That is, if you're too lazy to deselect the template file, your site won't implode or anything like that. However, your visitors will be able to access your template file using "http://www.example.com/Templates/index.dwt" if they wish (after, of course, substituting your domain name for the "www.example.com" portion).
  4. When you're through perusing the list of files that need to be synchronized, click the "OK" button.
  5. Dreamweaver will display a dialog box to tell you that it is publishing the files to your website. The dialog box will disappear on its own accord when the uploading is done.

Testing Your Website

Now that your site is mostly complete, you should do a thorough test of your site. Start up your web browser and click the buttons and links on your page to make sure that they lead to the pages they should. The only link that should give a "404 File Not Found" error at this time should be your feedback form page, which you will create in the next chapter. All the other links should work perfectly. If you find any of the buttons or links to result in errors, return to Dreamweaver to check that the links have the correct URLs. Use the tips I gave in chapter 5 on howto solve a 404 error if you can't figure out where the problem lies.
If all goes well, congratulations! You've completed most of your website. In fact, you now have a multi-page website, and have learnt how to use the common features in Dreamweaver to create and manage such a site.

Next Chapter

In the next chapter, you will complete your site by adding a feedback formand its associated pages. The form will allow your visitors to contact you online without leaving your site.

Customise the Navigation Menu with Dreamweaver CS5.5

How to Customise the Navigation Menu on Your Website with Dreamweaver CS5.5

By Hanumantha Rao.N Assoc Prof  @HanuTechVision

Goal of This Chapter

By the end of this chapter, you will have modified your navigation menu so that they have buttons linking to the other important pages of your site. You will also have, optionally, changed the colours of the buttons so that they fit into the colour scheme of your site.
This chapter also discusses some ways in which you can deal with the unbalanced columns on your web page.

What Do You Put on Your Navigation Menu?

Before we continue, please take a look at the navigation menu in the left column of any page on thesitewizard.com. Don't be distracted by the fact that the buttons change colour when your mouse hovers over them. (Your menu buttons will work that way too.) The thing I actually want to draw your attention to is the types of links I placed in that menu. Notice that the buttons only link to the main sections of thesitewizard.com, as well as to a very few pages that people may want to access from anywhere on the site, like the site map, the home page, and the feedback form. That is, they don't link to every single page on the site.
Since you will be working on your navigation menu (or "navbar" as some people like to call it) from the next section onwards, you will need to decide which pages on your site you want to link to. If your site is going to have hundreds of pages, like mine does, you won't be able to link to everything. (Actually, you can, but your menu will be very long, and your page will be very large and take forever to load.)
Whatever you decide, your navigation menu should at minimum include the following pages:
  • Home Page

    Although your site logo already links to your home page, it's still good to have the home page as the top item in your navigation menu. Bear in mind that your site will attract all kinds of visitors, including new Internet users who may not be familiar with the convention that you can click the site logo to go to the main page. Remember that one of your goals in web design is to make it easy for your visitors to get to where they want to go on your website.
  • Site Map

    You will be creating a site map in the next chapter. I'll also discuss the importance of that page and what it does at that time. For now (or rather, later on in this chapter), just create a button pointing to the site map.
    Your site map will be located at "http://www.example.com/sitemap.html", where "www.example.com" is (of course) replaced by your actual domain name.
  • Feedback (or Contact) Form

    You will be creating a feedback form in the final chapter of this tutorial. As such, you'll need a button that links to the feedback form.
    Your feedback form will be located at "http://www.example.com/feedback.html", with the "www.example.com" portion replaced by your site's real domain.
  • About Us (optional)

    If you are creating a business site, you should create an "About Us" page to tell your visitors about your company. For personal sites and hobby sites, this page is optional. (In other words, only add an "About Us" button if you want to have an "About Us" page.)
    Your About Us page will have an address of "http://www.example.com/about.html", again with the "www.example.com" replaced accordingly.
  • Other Pages for Commercial Sites

    If you're selling goods or services, you should create buttons for each of the following:
    • Products (or Services)
    • Prices
    • Order
    If you have a physical store, you may also want to create a button that links to a page where you can give your shop's address and provide a map showing visitors how they can get there. Call the button "Location" or "Store locations" or something like that.
    The filenames of these pages can be anything you like. However, for the reasons I describe in my article on How to Create Good Filenames for Your Web Pages, do not put spaces or capital (uppercase) letters in your filenames. For example, an address of "http://www.example.com/products.html" is good, but an address of "http://www.example.com/Products.html" may cause problems in the future.
As you've probably deduced from what I said above, plan both the names you want to put on the buttons, as well as the filenames of the pages linked to. For the Site Map, About Us and Feedback Form pages, please use the filenames I supplied above. You will be using those same filenames in chapters 7 and 8 when you create those pages, so if you change them in this chapter, your buttons will not connect to the pages you create in the next couple of chapters, and you will get 404 File Not Found errors when you click the buttons.

How to Change the Navigation Menu Items into Clickable Buttons

  1. Start up Dreamweaver and open your home page. You can open the page by doubleclicking "index.html" in the FILES panel on the right side of the Dreamweaver window.
  2. This step is almost identical with what you did in chapter 5, where you changed textinto clickable links.
    Select the words "Link one" by dragging your mouse over them. Then type "Home" (without the quotes). This should overwrite the existing words with what you type.
    Click the "Link" field in the PROPERTIES panel at the bottom of the Dreamweaver window. Delete the hash ("#") mark that is currently in that field. In its place, type the web address of your home page. For example, type "http://www.example.com/" (without the quotes) into that field, if that is the URL of your home page. Like the link to your home page that you made in chapter 5, you can, alternatively, use a relative URL if you prefer. (Please see chapter 5 to find out what relative and absolute URLs are, if you can't remember what they mean.)
    With this step, the top button in your navigation menu is now a clickable link to your home page.
  3. Select "Link two" (second button) and replace it with "Feedback Form" (without the quotes). Alternatively, you can also use "Contact Form", "Contact Us", "Feedback", "Support" or whatever you want as the label for your feedback form. (It doesn't really matter.) Replace the "#" in the "Link" field of the PROPERTIES panel with either the absolute URL of "http://www.example.com/feedback.html" (without the quotes) or the relative URL of "feedback.html" (without the quotes). If you use an absolute URL, remember to change the "www.example.com" part to your own domain.
  4. Select "Link three" and replace it with "Site Map" (without the quotes). Change the corresponding "#" in the "Link" field of the PROPERTIES panel to either the absolute URL of "http://www.example.com/sitemap.html" (without the quotes, and with the "www.example.com" portion replaced with your domain) or the relative URL or "sitemap.html" (without the quotes).
  5. If you've decided to have an "About Us" page, replace "Link four" with "About Us" (or "About me", or even just "About"). The "Link" field for this button should be set to either "http://www.example.com/about.html" or "about.html". Again, don't enter the quotes, and remember to replace the domain with your own.
    If you don't want an "About Us" page, just skip this step.
At this point, you've either run out of buttons, or have one left over, depending on whether you've created an "About Us" button. Read on to find out how you can add more buttons to your navigation menu, as well as how you can delete buttons that you don't want.
Note that you do not have to put your buttons in the order I suggested above. Apart from the "Home" button, which should always be the first button in your navigation menu, feel free to use any order for the other buttons. Just remember to match the correct page URLs to the labels you place on those buttons. That is, if you replace "Link three" with your About Us page, be sure to use the URL for the About Us page when you modify the Link field in the PROPERTIES panel, and not the Site Map URL.

How to Add a New Button to Your Navigation Menu

  1. Click your mouse somewhere in the last button of your menu. This places the blinking text cursor amidst the words there. Use the arrow keys on your keyboard to move the cursor to the end of the word (or words) on that button. For example, if the last button says "Site Map", make sure that your text cursor is after the "p" of "Map".
  2. Hit the ENTER key (or RETURN key on the Mac). This creates what looks like a tiny sliver of a button below the last button and puts your cursor there.
  3. Type the label you want to put on that button. For example, if you want the next button to say "Order Form", type "Order Form" (without the quotes). Don't worry if the things you type are not properly aligned, or that they don't have the same colour as the other buttons. This will be fixed in the next step.
  4. Select the words you just typed. You may find it easier to select them if you drag your mouse backwards from the last letter of the last word. Alternatively, hold down the Shift key on your keyboard while pressing the arrow keys to select the word.
  5. Type the URL of that page into the Link field of the PROPERTIES panel, followed by the ENTER key. Don't worry that there isn't any hash ("#") mark in that field. For example, type "order.html" into that field (or its absolute URL version, if that's what you used for the other items in your menu).
    The words on the button should now be centred. The button itself will also change colour to match the other buttons on the menu.
If you want even more buttons, just go through the above procedure again for each new button.

How to Delete a Button from Your Navigation Menu

  1. Select all the words on the button that you want to delete. For example, if you want to delete the "Order Form" button on your menu, drag your mouse over the words "Order Form" to select them.
  2. Hit the DEL button on your keyboard. This shrinks the button down to a thin horizontal gap on your menu.
  3. Position your mouse so that it is directly over that narrow sliver. Click the right mouse button to bring up a pop-up menu.
  4. Click the "Remove Tag <li>" item on that menu. The button should disappear altogether.
    Warning: if you do not see "Remove Tag <li>" in the menu, but see something else, like "Remove Tag <ul>", do not click it or you may end up removing all the formatting on your navigation menu, if not the whole menu itself. Instead, hit the ESC key to get rid of the pop-up menu. When you do this, your text cursor will disappear, so you'll have to put it back where it needs to be again, that is, click to place it in that narrow gap that used to be your menu button. Once you see a tiny version of your cursor blinking away in that remnant of a button, right click the gap once more. The right click menu should pop up, allowing you to try this step again.
If you make a mess of things, and find that you've accidentally removed all the formatting from your navigation menu or some other disaster that you don't know how to fix, see if you can undo the mistake by using the "Edit | Undo" menu item. That is, click "Edit" on the menu bar, followed by the "Undo [...etc...]" item in the menu that drops down. (The "Undo" menu item says different things depending on what you just did, but it will always begin with the word "Undo".)
If your mistake is so disastrous that even the Undo button cannot fix, you may also want to consider closing your file without saving anything. That is, click "File | Close" and when Dreamweaver asks you whether you want to save your changes, choose not to save. Then reopen the file again by doubleclicking the "index.html" item in the FILES panel. This will cause you to loose any work you've done since your last save, but at least you'll have got your navigation menu back. Of course if you have saved your file after you made your mistake, then don't do this, since you'll only load back the same error-filled page with the additional problem that you won't be able to use "Edit | Undo...".

How to Change the Colour of Your Navigation Menu Buttons

Now that you know how to modify the buttons on your navigation menu, all that remains is to make sure that the colour of the menu matches that of the rest of your site. You'll probably want to do this if you have modifiedyour site's background colours in chapter 4 to something substantially different from the original.
This entire section is optional. If you like your menu's current colour scheme, just skip to the next section.
There are two sets of colours that you can change on your navigation menu. The first is the normal colour of the button. The second is the colour of the button when your mouse cursor is hovering over it. (No, you cannot test this second colour in Dreamweaver itself, since the latter is not a web browser.)
  1. Click somewhere in any one of the buttons on the navigation menu.
  2. Two lines should appear in the Rules section of the CSS STYLES panel on the right side of Dreamweaver.
    • The line that reads "ul.nav a, ul.nav a:visited <a>" contains the rules for the normal button. Doubleclick this line if you want to change the default colour of the button.
    • The line that reads "ul.nav a:hover, ul.nav... <a>" contains the rules for the menu button when the mouse is hovering over it. Doubleclick this line if you want to change the colour of the button when a mouse cursor is directly over it.
    The two lines look very similar, so look carefully before you click. One line contains the word "a:hover" somewhere, and the other doesn't. The line with the "a:hover" is the one that lets you change the button colour when the mouse is hovering over it. The other one lets you change the default colour.
  3. This should bring up the CSS Rule Definition dialog box that you have encountered over and over again in the previous few chapters. To change the background colour of the button, click the "Background" line in the list box on the left column of the dialog box.
    The right side of the dialog box should change. You should be familiar with this section since you used it in chapter 4 to modify the background colour of the various sections of your web page. The procedure is the same for the navigation menu button, that is, click the box for "Background-colour" to get the colour picker pop-up and select your colour.
  4. Click the "OK" button for the CSS Rule Definition dialog box when you're through with your changes.

Deleting the Placeholder Text in the Left Column

Now that we've finished configuring the menu buttons, it's time to get rid of the placeholder text directly below the menu. I'm, of course, referring to the eyesore that begins with the words "The above links demonstrate a basic navigational..." (etc).
Getting rid of those words should be child's play to you by now. Just click your mouse somewhere in the text and use your Backspace and/or Del key to get rid of them. The bigger problem, as I'm sure you'll realise as soon as you've deleted the junk, is what to do with the unbalanced columns that results. This is the topic of the next section.

How to Fix the Lopsided Columns

Most of you will probably have noticed by now that the left and right columns of your page are somewhat unbalanced. Those of you who have a lot of content in your right column but only a few buttons in your left will see a left column that stops short halfway down the page. Others with a lot of buttons in your navigation menu, but little content in the right column will see a page that appears to be supported by the left column, with the right side of the page a vast expanse of empty space.
There are two ways to deal with this lopsidedness.
  1. Hiding the Unbalanced Columns with Visual Tricks

    One way is to hide the fact that your columns are not equal in length by adjusting the background colours. You can see this method in action by simply looking at thesitewizard.com's pages, including this very page you're reading. Notice that my left column is actually very short; far shorter than my right. I've tried to reduce the ugliness of this by setting the same background colour for my left and right columns. This gives the illusion that my page is a single column page with a wide left margin where I pasted my navigation menu and other stuff.
    You are of course not restricted to using a white background for this to work. Play around with colours or background images if you like. With a bit of creativity, you can make your page look attractive in spite of having this wide margin.
    For those who have forgotten how to change the background colours, please refer to chapter4.
  2. Balancing the Columns by Adding Blank Lines to the Shorter Side

    The second way to fix this problem is probably one that has already occurred to you: add blank lines to the column that is shorter. This can be done the usual way: click to place your cursor in the column you want to lengthen, then hit the ENTER (or RETURN) key repeatedly to create blank lines.
    Although this is the obvious solution, it is actually not a very effective solution. Even if you meticulously adjust your page so that both columns are equal in length in Dreamweaver, be aware that your site will appear different on other computers with different monitor sizes (or more accurately, screen resolutions). This is mainly because your web page uses what is known as a "liquid" layout which you selected in chapter 1 when you first created your home page. Such a layout adjusts its width according to how big the browser window is. Since your visitors are unlikely to have the exact same screen size as you do, your site may appear with unbalanced columns on their computers, even if it looks perfect on yours.
    On the other hand, if you disregarded my suggestion to use a liquid layout in chapter 1, and chose a fixed layout instead, it's possible that adding blank lines to the shorter column is a viable solution.
    (Before you rush out to change your site layout to a fixed layout just so you can solve your lopsided columns problem by hitting the ENTER key, be aware that each layout has its own pros and cons. See What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts? if you want to know more.)

Fine Tune Your Home Page

With this chapter, your home page is complete. As such, if you were holding off making any changes till later, because you thought you still had a long way to go, now is a good time to do those things. That way, you can have the satisfaction of seeing a finished home page when you test your site.

Testing Your Menu

Save your page with "File | Save All" and publish it to your site with "Site | Put".
Go to your site with your web browser and load your home page.
  1. Check Your Colour Scheme

    To check your colour scheme, it's not enough to give your site a cursory visual survey. You should also move your mouse over your navigation menu so that you can see if the hover colour looks good with your the rest of your page.
  2. Check Your Buttons by Clicking Them

    Click the buttons on your navigation menu. The Home button should take you right back to your current page. If it doesn't, go back into Dreamweaver and fix it by entering the correct URL.
    The other buttons should result in "404 File Not Found" errors. This is expected, since you have not actually created those pages yet. If nothing happens when you clicked a particular button, then something is wrong. Either you've left its link pointing to "#", or you've forgotten to make it into a link. Return to Dreamweaver, check the button again and fix it.
  3. Check Your Page Under a Lower Resolution

    It's possible to design your site thinking that everything is fine, only to find out later that it doesn't look good on computers other than your own. This is especially so if you are designing your site on a monitor with a high resolution. This is why you need to check how your page appears in a lower screen resolution as well.
    It's possible to do this without actually buying another computer. All you need is a web browser like Opera. Since Opera is free, and available for many systems including Windows, Mac OS X, and Linux, get it and install it on your computer. Then configure Opera to show you the size of its window by clicking "Tools | Preferences" from the menu, followed by clicking the "Advanced" tab, and the "Browsing" line in the left column. The contents of the right side will change. Click to put a tick in the "Show webpage dimensions in title bar" checkbox. Now whenever you resize the browser window, Opera will show you the size of the window in its title bar.
    Use this feature to check your site under low resolutions like 1024x600 (the screen resolution of many netbooks) and perhaps also 1366x768. That is, just resize the Opera window till you see those numbers (especially the widths, that is, 1024 and 1366) in the title bar (the topmost part of the browser window).
Congratulations. You have now completed your home page.

Next Chapter

In the next chapter, you will learn to use more of Dreamweaver's site management features, including its well-known template system, so that you can create and maintainmultiple pages on your website with minimal effort. You will also use that system to create most of the other pages of your website.

 

Dreamweaver CS5.5 mages into Clickable Links

How to Change Your Words and Images into Clickable Links in Dreamweaver CS5.5

by Hanumantha Rao.N HanuTechVision

Goal of This Chapter

By the end of this chapter, you will have created links using text and images on your page, and have made them point to other pages on your site and/or to other websites on the Internet.

The Structure and Types of URLs

If you were to take a look at the location (address) bar of your web browser (which is usually near the top of the browser window), you will see a string of characters that reads "http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-5.shtml". This address, which shows the location of the article you're reading, is known in technical lingo as the Uniform Resource Locator, or "URL" for short.
A URL comprises a few parts. The portion that says "http://" tells the web browser what sort of communications procedure it needs to use to be able to retrieve your web page. This communications procedure is known more formally as "protocol". There are a couple of protocols in common use, namely "HTTP" and "FTP", but the one that you'll be using for links pointing to other web pages is "HTTP". (And if the term "FTP" sounds familiar, it's because Dreamweaver uses the FTP protocol to publish your website.)
The second part of the URL is the domain name, which in this case is "www.thesitewizard.com".
The final portion of the URL gives the folder and the filename of the web page itself. In the case of this article, the web page has a filename of "dreamweaver-cs5-5-tutorial-5.shtml" and is stored in a folder named "dreamweaver".
A URL that has all the elements I mentioned here is known as an absolute URL. When you use an absolute URL in your links, web browsers will be able to locate that page from any other location on the Internet (provided, of course, that the page actually exists).
It's also possible to use something known as a relative URL in your links. A relative URL is a short address like "dreamweaver-cs5-5-tutorial-4.shtml". As you will probably notice, this short address is missing many components. For example, it doesn't state the protocol ("http://") or the domain name ("www.thesitewizard.com"). When a visitor clicks on a link that uses a relative URL on your web page, the web browser has to reconstruct the absolute URL of the page before it can take that visitor to the new address. It does this by using the protocol, domain name and folder of the existing page containing the link.
For example, if I were to put a link using a relative URL of "index.shtml" on this page, and you click on it, the web browser will try to form an absolute URL from this partial address. It will first take the address of this current page, "http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-5.shtml", and strip away the filename portion. This leaves it with an address of "http://www.thesitewizard.com/dreamweaver/", to which it attaches the relative URL given in the link, which is "index.shtml" in our example. The result is that you get an absolute URL of "http://www.thesitewizard.com/dreamweaver/index.shtml". This is the address to which you will be taken if you click on the link.
In view of this, you can only use relative URLs to link to pages within your own site. For example, you cannot put a relative link to "somepage.html" and hope that the web browser will be able to read your mind and take your visitors to "http://www.example.com/somepage.html" instead to your own site. If you want to link to a page outside your site, you must specify the complete address, using an absolute URL. Links pointing to your own website, however, can be specified as either relative or absolute URLs. It's up to you which to use.

How to Make Your Site Logo and Other Pictures into Clickable Links

Try this before you continue. Hover your mouse cursor over thesitewizard.com's site logo, at the top left hand corner of this page. Notice that the cursor changes shape to indicate that the logo is actually a clickable link. If you were to click the logo, you'll end up at my home page. (There's no need to actually click it unless you don't believe me.)
Although there is no rule that says you must make your site logo into a clickable link pointing to your home page, many (if not most) websites do this, especially those that are professionally designed. In fact, so many sites do this that experienced Internet users have come to expect that any time they need to go to the main page of a website, they can simply click on the site logo. Since we want to make our website as user-friendly as possible, so that visitors can easily go wherever they want on our site, it's a good idea to add this feature to your website as well.
The procedure below can be applied to making any image into a clickable link. That is, although I only talk about your site logo below, you can use the same method for any picture. After all, your site logo is only just a picture.
  1. Start up Dreamweaver and open your web page. For those who have forgotten how to open your web page, just doubleclick the "index.html" line in the FILES panel on the right side of Dreamweaver.
  2. Click your site logo (or any other image that you want to make into a link) once, to select it.
  3. As usual, the PROPERTIES panel (see picture below) at the bottom of the Dreamweaver window will change to show the properties relevant to the image that you clicked on.
    Properties panel in Dreamweaver CS5.5 with logo selected If you want to use an absolute URL for your link, type the URL for your home page into the "Link" field. For example, if your site is located at www.example.com, enter "http://www.example.com/" (without the quotes) followed by the ENTER key (or RETURN key on the Mac) into the field.
    On the other hand, if you want to use a relative URL, click the folder icon located just after the "Link" field. This will bring up a "Select File" dialog box. Select the file you want to link to by clicking it once, and then click the "OK" button. For example, if you're linking to your home page, click the "index.html" item once before clicking "OK". As I'm sure you've noticed, you can only use this method for web pages you've already created.
    For the site logo pointing at the home page, I personally prefer to use an absolute URL, but as I said above, when explaining the difference between absolute and relative URLs, it's really up to you. Of course if you're linking to some other site, you'll always have to use an absolute URL. For example, to link to thesitewizard.com, you'll have to manually enter "http://www.thesitewizard.com/" (without the quotes) into the "Link" field of whatever image or text that you've selected.
    Be careful when typing in your URL. It's very easy to make a spelling mistake and end up with a link that points somewhere other than where you intended. Such errors are very hard to detect, even if you proofread your page.
  4. Enter "0" (zero, without the quotes) into the "Border" field of the PROPERTIES panel. If you don't do this, some browsers will show a blue border around your picture to indicate that it's a clickable link. A value of 0 (zero) in the field forces the border to have a width of zero, effectively removing it.
Your picture is now a clickable link. However, you won't be able to test it until you publish your web page to the Internet later in this chapter.

How to Make Words, Phrases and Sentences into Clickable Links

The procedure for creating links from text is not much different from that of making pictures into links.
  1. As in the case of the picture, you'll first need to select the text. To do this, drag your mouse over the word (or words) to highlight it.
  2. Enter the URL in the "Link" field of the PROPERTIES panel, and hit the ENTER key (or the RETURN key on the Mac) on your keyboard. Alternatively, you can also use the folder icon to select a page from your site if you're just linking to an internal page that already exists.
    If you don't know what I'm talking about here, please go back to the section above on making a picture into a clickable link. It's actually the same procedure.
Although Dreamweaver will immediately underline the text you selected to show you that it's now a link, you won't be able to test it till you publish your page.

How to Solve a 404 File Not Found Error

Save your web page and publish it. Then go to your website in your browser and click the link (or links) you've created. If you've created multiple links, remember to also click your site logo to test it.
If you get a "404 File Not Found" error message in your web browser, it means that you've linked to a non-existent page. This may or may not be a problem. For example, if you've linked to a page that doesn't exist yet, but you plan to create it eventually, then it's obviously not a problem, since you've knowingly created a link to a future page. However, if a link to your home page gives you a 404 error, then there's definitely a mistake somewhere. The home page can't possibly be missing, since your link is on that page itself.
To solve a 404 error that should not happen, check your link to make sure that you've spelt ("spelled" if you use US English) it correctly. If you can't spot the mistake, and yet get the 404 error, I've found it helpful to actually read the words in the link aloud, or, even better, get someone else to take a look at the link. Errors in links are notoriously difficult to spot, since URLs are not sentences with spaces separating normal English words, but are often cryptic sequences of characters running into each other.
Another way to fix the 404 error is to type the URL into your web browser, and load the page manually. Once the page is successfully displayed in your browser, drag your mouse over the link in the browser's address bar to select the URL. Right-click the selection and click "Copy" from the menu that appears. Then return to Dreamweaver, select the picture (or words) again, and paste the URL into the "Link" field, replacing its previous content. This way, you'll be using a URL that you know for sure works (since you've just loaded it in your browser and are merely copying and pasting that address).

NextChapter

Now that you've learnt how to link to other pages and sites, it's time to configureyour left column to create a working navigation menu.