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

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

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

By the end of this chapter, you will have added a feedback form to your website. In fact, you will also have completed your website, and have a fully functional multi-page website. In addition, you will have learnt most of the commonly-used skills needed to create and maintain a website using Dreamweaver CS5, and be able to create other websites any time you want.

You will find it much easier to understand this chapter if you have some experience using a feedback form as an ordinary user. As such, please go to Feedback Form Demo Site and use the form. Don't worry: the form on that site is just a demo, so you can test it to your heart's content without spamming anyone. The messages sent go into a black hole.

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

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

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

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

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

The feedback form script (computer program) requires a technology called PHP to be installed on your website's web server. See the article What is PHP? for a plain English explanation of what "PHP" means. You don't really need to read it if you're feeling lazy, but it'll help you understand things a bit better if you do.

For those using a paid web host that lets you run scripts, it's likely that you will already have PHP available for your site's use. The PHP needs to be at least version 4.2. (Before you ask, PHP 5 or any bigger number is fine too.)

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

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

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

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

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

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

The "Error" page will be shown to your visitors if they fail to enter some crucial information into your feedback form. Like the "Thank You" page, it is just an ordinary web page that you will design using Dreamweaver.

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

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

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

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

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

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

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

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

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

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

Click the "Create" button.

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

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

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

Your window should now be blank.

Switch back to your web browser without quitting Dreamweaver.

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

Select everything in that box. The best way to do this is to click your mouse somewhere in the box to put your text cursor there. Then hit Ctrl+A (probably Command+A on the Mac) as you did earlier. This should highlight everything in the box, but not on the rest of the web page. (Note: for most people, simply clicking somewhere in the box should automatically cause all its contents to be selected. If this is the case for you, there's no need to use Ctrl+A to select everything, although doing so will do no harm.)

Copy the selected text to the clipboard. The easiest way to do this in Windows is to type Ctrl+C (hold down the Ctrl key, and type 'c'). Alternatively, you can click your right mouse button (while the mouse pointer is in the box) and select "Copy" from the menu that appears.

Switch back to Dreamweaver. Do NOT close your web browser. We're still not done with it yet.

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

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

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

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

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

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

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

Click "Page from Template" in the left column and select the template that you designed in chapter 7. Since your feedback form is part of your website, it should probably have the same layout and design that you've given the rest of your site. Click the "Create" button.

You should now be back in familiar territory. As usual, remember to change the "Title" field above your web page to an appropriate title, for example, "Feedback Form", "Contact Us", "Contact Form" or "Support" (or whatever else you like). Add a visible heading of "Feedback Form" (or whatever) into the editable portion of your web page, and delete the placeholder content from your template's editable regions (if any).

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

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

Click "View | Code" from the menu.

Dreamweaver will display the underlying code for your web page. Your text cursor should be positioned somewhere in a line that says "

 

". In fact, to be specific, the cursor should be after the first "

" and before " 

".

Use the arrow keys on your keyboard to move the text cursor to the end of the line, that is, to immediately after "

 

" on the same line.

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

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

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

The form obeys the same CSS rules as the rest of your web page. As such, you can use the techniques taught in chapter 3 to change the fonts, text size and colours if you wish. I will not go through those steps again below. Instead, I will deal with the things you have not yet learnt in previous chapters, namely, with how to change the widths of the various fields in your form.

Before you begin, though, I should probably mention that the width and height of the various fields do not affect how much information your visitors can enter into your form. It's just a visual gimmick. Even if you create a very narrow field, your visitors can still enter very long names, email addresses or comments. The web browser will simply scroll to allow them to continue typing whatever they want to type.

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

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

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

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

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

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

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

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

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

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

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

Close the feedback form with "File | Close".

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

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

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

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

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

If you are running a business, you may want to give a more customer-friendly message, like:

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

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

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

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

Please complete all the fields in the form before clicking the "Send Feedback" button. Click the "Back" button in your browser to return to the form to fix the error.

As before, remember to enter something meaningful in the "Title" field of the page. For example, you can use "Error" or "Missing Information" (without the quotes) as the title.

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

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

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

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

To check if you've named your "Thank You" page correctly and saved it in the right place, write a message to yourself using that form. Make sure you complete all the fields properly. If you get a 404 or File Not Found error when you submit the form, it again means there is a name or web address mismatch somewhere. Either you've saved your "Thank You" page with a different name from what you furnished the Feedback Form Wizard, or you saved your page to the wrong folder, or you failed to upload the page.

After you get your "Thank You" page, you should log into your email account and see if you have received your email. If not, go through the checklist of things to do when you don't receive your email.

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

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

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

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

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

All the best for your site!

Copyright © 2010 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

It will appear on your page as:

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

Copyright © 2010 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
Last updated: 10 November 2010.

View the original article here

How to Manage and Auto-Update Multiple Pages on Your Website with Dreamweaver CS5's Template System

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

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

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

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

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

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

Start up Dreamweaver CS5 and open the "index.html" file that you've been working on in the previous chapters. For those who have forgotten how to do this, doubleclick the "index.html" line in the FILES panel (found on the right hand side of the Dreamweaver window).

Click "File | Save as Template...". As you will recall, this is my shorthand notation for clicking the "File" item on the menu bar, and when the drop-down menu appears, click the "Save as Template..." item in that menu.

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

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

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

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

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

To make sure that you are clear about what I'm talking about here, let me draw out the implications of the fixed and editable regions in your template. When you decide that a section of your web page is to remain part of the fixed design, Dreamweaver will not let you change that portion in the individual web pages that are derived from this template (since it's supposed to be fixed). But you're still in control here. Any time you want, you can still modify the design of the fixed portion in the template itself. If you do that, Dreamweaver will assume that you want to change the appearance of your whole website, and proceed to go through every web page based on this template and update it to your new design.

As such, if you want to put unique content in certain sections of your web page, you will need to mark those sections as "editable". Let me suggest that this probably include huge swathes of your right column, and the date portion (or more accurately, the year) of the copyright notice in your footer.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Click the "Create" button.

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

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

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

Your original home page has now been overwritten by a new version. While this new version appears identical to your old one in a web browser, it actually contains some invisible markers that will allow Dreamweaver to automatically update it if you ever make a design change in your template.

At this point you are ready to create other pages for your website. You should at least create the "Site Map" page which you have previously linked to in your navigation menu. If you have also created a button pointing to your "About Us" page, you will need to create that page too.

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

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

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

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

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

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

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

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

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

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

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

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

Click the "Save" button.

Remember to return to your Site Map to add a link to any new page you create for your website. This includes the pages you create later in this chapter.

If you have not created a button to an "About Us" page in chapter 6, feel free to skip this section. It is meant only for those who want an About Us page.

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

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

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

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

Create the other pages of your site the same way. When giving filenames to your new pages, it's best to use small letters (lowercase) for all your filenames, with no spaces in between, to avoid problems. Please see the article How to Create Good Filenames for Your Web Pages for more information.

Do not create your Feedback Form (or Contact Form) page yet. You will do this in the next chapter. There's more involved in creating a form than just designing an ordinary web page.

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

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

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

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

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

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

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

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

The same dialog box telling you that you have placed some editable regions inside a block tag may appear again. Just click the "OK" button to dismiss it.

A new dialog box, entitled "Update Template Files", will appear. The dialog box will list all the web pages derived from this template and ask you whether Dreamweaver should update all those files.

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

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

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

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

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

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

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

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

Click "Site | Synchronize Sitewide...".

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

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

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

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

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

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

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

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

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

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

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

In the next chapter, we will add the final set of pages to your website, namely the feedback form and its associated pages. This form will provide an online interface for your visitors to contact you without leaving your site.

Copyright © 2010 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

It will appear on your page as:

How to Manage and Auto-Update Multiple Pages on Your Website with Dreamweaver CS5's Template System

Copyright © 2010 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
Last updated: 21 July 2010.

View the original article here

Whole New Look! Get Paid To Shop!! 75% Commission. Better than paid surveys, data entry, detective sites and grants! Oto converting 20% Too! --- The Best mystery shopping, secret shopping, work at home site!

Check it out!

How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver

A few visitors who use thesitewizard.com's Dreamweaver tutorials recently asked me how they can switch their website from a liquid layout template to a fixed layout one, without having to redo their website from scratch. This article attempts to show you how you can switch between any of the blank page layout templates in Dreamweaver, be it from a liquid layout to a fixed layout or vice versa, without losing any of your existing work.

For those who are confused by the thick technical lingo used in the above paragraph, please note the following:

If you don't already have a website, and are just browsing this article to see how difficult it is to get started, you should really start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide instead. The beginner's guide is a more appropriate place to start, since it doesn't assume prior knowledge on your part. It is written in plain English and is meant for the completely new webmaster-to-be.

The article that you're currently looking at (this page) is like the middle chapter of a book. If you start here, you'll get discouraged quickly, thinking that website-making is rocket science, since you won't have any of the basic information taught in the earlier chapters. But it really isn't difficult. (Not to mention the fact that the content of this chapter doesn't even affect most webmasters).

I'll assume that you have used one of my Dreamweaver tutorial series to create your website. That is, you've completed either the Dreamweaver CS5 Tutorial, the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial.

In practice, this means that you're not only using Dreamweaver's blank page layout templates, but that you're also using its website management features and template system to manage your site. (Dreamweaver's website management and template system allows a webmaster to create and manage multiple pages on a website the easy way, without having to manually update every page on a website every time you make a change to the design.) If you're not doing using both the above features, then this article is probably not relevant to you.

For those who are not sure what the difference between a fixed and liquid layout is, please read What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts? for a detailed explanation.

I have only tested the procedure below using Dreamweaver CS5. It should, theoretically, work with CS4 and CS3 too, since the method I use is a general one. However, since I no longer have those 2 earlier versions installed, I can't be sure of this. Sorry.

The same procedure below applies whether you're changing from a liquid to a fixed layout, or the reverse, from a fixed to a liquid layout, or, for that matter, if you're using an older version of Dreamweaver, to any of the other blank page HTML layouts available in Dreamweaver.

The trick to a smooth transition from your old template to a new one is to give your new template the exact same Editable Regions, Optional Regions, Repeating Regions, etc, that you used in the old. That is, your new template, containing the new layout, should have the same number of template objects with identical names as your old template. (Note: don't worry if you don't know what an Optional Region or a Repeating Region is. Most people only use Editable Regions in their templates.)

For example, if your old template only had 2 editable regions, named "Page Content" and "Copyright Year", then your new template should also have 2 editable regions with the same names, "Page Content" and "Copyright Year".

Make a copy of your local website files in a separate location (eg, on a USB external drive or some other folder). This is important. If something goes wrong here (and a lot of things can go wrong), you can at least delete all your current files, and restore the files that you backed up. When backing up, copy everything: folders, template files, images, CSS and HTML files, etc. Preserve the existing structure of the folders and files. That is, don't unceremoniously dump all your files into a single folder in your backup drive. If your images used to be in an "images" folder, make sure they are also in an "images" folder in your backup location. And so on.

In addition, be careful how you back up your files. Make sure you are really backing up the files, and not just creating a shortcut to your existing files or moving your files from one location to another.

Windows users can do the following. Go to your website folder in Windows Explorer. That is, click the Start menu, followed by the "Computer" item in the menu that appears. (If you use Windows XP, click "My Computer" instead of "Computer".) A window will open. This is called a Windows Explorer window. Navigate to the directory directly above your local website folder.

For those who don't know where your local website folder is, start up Dreamweaver. Click the "Site" menu in Dreamweaver, followed by the "Manage Sites..." menu item, click the name of your site in the list box once, then click the "Edit" button. The location of your website is given in the "Local Site Folder" field. You can hit the ESC key on your keyboard to get out of the 2 dialog boxes after that. Then quit Dreamweaver.

Do not open your local website folder. That is, if your local website folder is "c:\Users\christopherheng\Documents\thesitewizard\", go to "c:\Users\christopherheng\Documents\" (one directory up). You should be able to see the folder icon for your local website folder ("thesitewizard" in my case) in your window.

Right click that folder. That is, move your mouse cursor directly over the folder and click your right mouse button. A menu will appear. Click the "Copy" item in that menu.

Now, using the same Explorer window (or a new one if you wish), navigate to the drive where you're going to keep your backup. Right click a blank spot in that window. In the menu that appears, click the "Paste" item. If you have a lot of files, Windows Explorer may take some time to copy over all the files.

Important: do not drag and drop your folder. Use the method I suggested above. If you drag and drop, you may end up either moving all the files to its new location (and deleting the original) or you may accidentally create a shortcut instead of a real copy. (Drag and drop behaviour varies according to where your backup location is, as well as the version of Windows that you're using.) In addition, don't do anything silly like putting your backup in the very same folder as your original files.

Start Dreamweaver and open your existing template file. That is, doubleclick the "Templates" folder in the FILES panel in Dreamweaver. This should expand the folder, showing you the template files that you have created for your site. Doubleclick the template file you want to change. If you have previously created your site using one of my Dreamweaver tutorials, your template file is probably called "index.dwt".

Write down (for example, on a piece of paper) all the editable regions you have on your page. Make sure you keep the same spelling, capitalisation and spacing that you used. For example, if you have an editable region called "Page Content", make sure you jot down "Page Content" and not "pagecontent". If you have an editable region labelled "Copyright Year", but you previously put 2 spaces between "Copyright" and "Year", make sure you indicate that there are 2 spaces between those two words somewhere so that you can duplicate the exact same (problematic) name in your new template. If you have used other types of template objects, like Optional Regions and Repeating Regions, you should also note down the type of template objects you used for each of those names as well.

Now click the "File | New..." menu. For those not familiar with my convention, this means to click "File" on the menu bar, then when a drop down menu appears, click the "New..." item in that menu. The "New Document" dialog box should appear.

Click the "Blank Page" line in the leftmost column. Make sure that "HTML" is selected in the "Page Type" column. Select the layout you want to change to in the "Layout" column. Click the drop down menu for "Layout CSS" (on the lower right side of dialog box) and select "Create New File". (If you feel like you're experiencing deja vu, it's because we're mostly repeating the steps given in the first chapter of my Dreamweaver tutorials.) Click the "Create" button.

The "Save Style Sheet As" dialog box will appear. Either accept the default name or enter a different name. Do not use the name of an existing file (such as your old CSS file). Click the "Save" button.

You'll now be presented with a new page containing the new layout. Click "File | Save as Template...". A dialog box entitled "Save As Template" will appear. Replace the name in the "Save as" field with "temporary" or "temp", then click the "Save" button. Note that you can actually give the file any name you like, but don't give it the same name as your existing template file. Using a name like "temporary" or "temp" will allow you to quickly recognise this file in the future so that you can delete it when you're through with it.

Now redesign this template with whatever design you want your new layout to have. For example, you should insert your logo, update the side menu, remove the extraneous placeholder text that Dreamweaver inserted, etc. Finally, don't forget to recreate all the template objects (such as the editable regions) that your previous template had. As mentioned before, the names of all the editable regions (etc) have to match those in your old template exactly.

At this point, some of you are probably crying out in frustration that you have to redo the template. Think of it this way. Since you're using Dreamweaver's template system, you only have to redo the template itself. Dreamweaver will take care of updating all your individual web pages for you. Without the template system, you will have to manually redo every single page of your website.

[Note: I know that there are (arguably) faster ways of doing this. However, those ways require a certain amount of HTML and CSS expertise. The method I mention here is doable by everyone.]

When you've finished your customisations ("customizations" in American English), click "File | Save All". (Notice that I said "Save All" and not "Save".) You may get a message from Dreamweaver about placing one or more editable regions inside a block tag. Click the "OK" button.

Now click "View | Code". Dreamweaver will switch to the "Code" mode, showing the HTML code (and interspersed proprietary Dreamweaver template code) for your new template.

Click "Edit | Select All" to select everything on the page.

Click "Edit | Copy" from the menu.

Click "File | Close" to close the new template. (Yes, close it. You don't need it any more.)

Dreamweaver should return you to your old template since we didn't close that earlier. If you're faced with a blank Dreamweaver window, it probably means that you've already closed the old template. If so, just doubleclick it again from the FILES panel to reopen it.

Click "View | Code" to display the HTML code.

Click "Edit | Select All" to select everything on the page.

Click "Edit | Paste". Notice carefully that I said to click "Paste" this time, not "Copy".

Click "View | Design" to return Dreamweaver to the Design mode. You should see the new layout.

Click "File | Save". You may get the usual warning from Dreamweaver about placing an editable region inside a block tag. As usual, just click the "OK" button.

A dialog box entitled "Update Template Files" will appear. There will be a list of all the files on your website affected by this change. Click the "Update" button to allow Dreamweaver to automatically modify all your web pages to the new design.

If you have preserved the exact number and names of the editable regions (and any other template objects that you may have had on your page), the updating should go smoothly, as though you have merely made a minor change in your template. When Dreamweaver completes its updates, it will display a dialog box entitled "Update Pages". Click the "Show log" checkbox (if it's not already checked). The dialog box will be expanded to give you a list of files that it successfully updated, as well as any file it could not update. You should always scrutinise this log to see if the update proceeded successfully for all your files.

Click the "Close" button to dismiss the dialog box.

All your website files linked to that template should now contain their original content but in a new layout. I recommend that you open every page on your site in Dreamweaver (eg, doubleclick each one in turn from the FILES panel) to verify this before using "Site | Synchronize Sitewide..." to publish your site.

Optional step: once you're sure that everything is working properly, you can delete the "temporary.dwt" or "temp.dwt" (depending on what you named it earlier) file in the "Templates" folder of your local website files. Do not delete the new CSS file that you created: it's being used by your new template and web pages. Let me say that again: do NOT delete the new CSS file. (In fact, it's probably safer not to delete any CSS file at all, in case you delete something that is still in use.) To delete the temporary template, quit Dreamweaver and do it from Windows Explorer (or, if you use a Mac, from whatever interface Mac OS X provides for deleting files). If you don't know how to delete files, or you're afraid you'll remove the wrong thing, don't delete anything.

As you can see, the process of changing your website from a liquid layout to a fixed layout or vice versa is fairly painless, since the web editor takes care of updating all your pages for you.

Copyright © 2010 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

It will appear on your page as:

How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver

Copyright © 2010 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.

View the original article here

eBooks on the French Canals, Living Aboard Around the World, La Rochelle Guide Book

Check it out!