Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1)
Tutorial on How to Design Your Website Using Adobe Dreamweaver CS3
Adobe Dreamweaver Creative Suite 3 (CS3), formerly known as Macromedia Dreamweaver, is a fully-featured commercial web editor that allows you to create, build and manage complex websites. The editor is a What-You-See-Is-What-You-Get (WYSIWYG) web editor, which means that you can design your web page visually and whatever you see on the screen is what your visitors will see when they visit your website. Dreamweaver generates standards-compliant code for your website which means your website will not become "broken" every time a new version of a web browser is released. For the technically inclined, the HTML and CSS code that it creates for your website will validate correctly.
This tutorial guides you through the steps of creating your first website using Dreamweaver.
What You Will Need
1. Dreamweaver
You will need Dreamweaver (obviously). The tutorial assumes that you are using Dreamweaver CS3. There are versions of Dreamweaver for both Windows and Mac OS X - either version will do fine. For the most part, both versions work in the same way.
2. A Web Hosting Account
You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to your web host's computer (called a web server), so that the rest of the world can see it. There are numerous web hosts around - you can find a list of cheap web hosts on http://www.thefreecountry.com/webhosting/budget1.shtml
Overall Goals of the Dreamweaver Tutorial
By the end of this tutorial, you will have set up a working website with multiple pages, including a main page, a feedback form, an About Us page, and a Site Map. Your pages will contain a sophisticated navigation menu bar, images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website.
More importantly, you will know how to use Dreamweaver to create, design and publish your site so that you can design new sites any time you want.
Goal of this Chapter
In this chapter, you will learn to create a rudimentary two-column web page (like this web page that you are currently reading) and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing your web page on the Internet with your favourite web browser.
Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.
Setting Up Your Website in Dreamweaver
You will be greeted with a window with a top-half looks something like the picture above (without the words "Dreamweaver Tutorial thesitewizard.com" of course). Your picture may be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.
If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert Modify Text Commands Site Window Help". We will be accessing a lot of Dreamweaver's features via this menu bar.
The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar. A drop-down menu will appear. Click the "New Site..." item in the menu bar.
Important note: in the interest of brevity, in the future, I shall refer to the sequence of clicking the "Site" menu, followed by clicking on the "New Site..." item simply as "Site | New Site..."
A dialog box box will appear with words to the effect "Site Definition for Unnamed Site 1". The number that follows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Don't worry about that. We are about to change it anyway.
At the top of the dialog box is the "Basic" tab. If it is not currently selected, click on it to select it. If you're not sure, just click on it.
In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. If you are not sure what name you want for your site, use your domain name. For example, if you have purchased a domain called "example.com", put "example.com" (without the quotes) into the box. For the purpose of this tutorial, I will assume that you have typed "Example Company" in the box.
Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", your website address will be "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.
Click the "Next" button at the bottom of the window to proceed to the next screen.
Accept the default "No, I do not want to use a server technology" for now. Click the "Next" button again.
The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on your own computer. If you don't know what to do here, just accept the default.
When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "Done".
Creating a Simple Two-Column Web Page with Header and Footer
You will now create the main page of your website. For the purpose of this tutorial, we will be creating a two-column web page for the main page. A two-column web page basically means that the page will have two vertical columns. Websites typically use one of the columns to hold the website's logo and navigation buttons and the other column to hold the main content. For example, on thesitewizard.com's article pages, such as the one you are reading now, the left column holds the navigation menu while the right column holds the article text.
Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears. A new window entitled "New Document" will appear.
Look in the "Layout" column in the window that appears and locate the item "2 column liquid, left sidebar, header and footer". Select the item by clicking on it once.
Look at the rightmost side of the same window and locate the item "Layout CSS". Click the drop-down box and select "Create New File". This will cause Dreamweaver to save certain types of information about the appearance of the web page (called CSS) in a separate file. One of the ways in which this is useful is that when we design other pages of the site, we can reuse the same information by simply loading it from the same file.
Click the "Create" button.
A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clicking the "Save" button.
Dreamweaver now presents you with a page with two columns with some dummy content typed in. We will be replacing some of the dummy content with our own content.
Designing the Home Page: Preamble
The page you are about to design will serve as the website's "Home Page", which means that it is the main page of your website. It is the page that visitors will see if they type your website's address without specifying any page name. For example, if your domain is called "example.com", and your visitor types "http://www.example.com", they will see this page.
A home page typically contains brief information about what the site is about as well as links to the other pages of your website. If this is the home page of your personal site, you will probably want to welcome your visitors and mention briefly what they can hope to see on your site. If this is the home page of a company site, it will typically mention briefly what the company sells, it's main products and point the visitors to individual product pages or other pages on your site.
For the purpose of this tutorial, I will supply example text for a fictitious company called "Example Company", selling some fictitious products. You should of course use your own text rather than my supplied text. For example, if your company is called XYZ Inc, go ahead and use "XYZ Inc" in places where I use "Example Company". Likewise if you are creating a personal website, and you are out of ideas as to what to call your site, call it by your name. For example, if your name is Shakespeare, call it Shakespeare's Website.
Steps to Designing Your Dreamweaver Site
1. Take a look at the page that is displayed. You will see that there is a band spanning the entire top row of the page. The words in that band currently read "Header". Below that there are two columns: a narrow left column, called the sidebar, and a wider right column with the heading "Main Content". All the text that is given in the window can be replaced by your own content.
To replace the content, simply click on the word you wish to replace, delete it and type your own. The first thing you should do is to replace the word "Header" with the name of your website. To do this, click somewhere in the word "Header". A blinking text cursor will appear. Using the delete or backspace key as needed, delete "Header". Type the name of your website. If you don't know what to type, type in your name or your company's name. For the example site that I create here, I will replace "Header" with the word "Example Company".
2. Directly above where you typed to replace the "Header" text is a small edit box with the words "Untitled Document". Click the word "Untitled". Use the delete or backspace key to remove the existing text and replace it with the name of the site you typed earlier. This will be the text that the search engines show for this web page when it displays the results of a search. Again, for this tutorial's example site, I will simply replace it with the word "Example Company".
3. You should now replace all the text in the right column with your own text. Simply click on the "Main Content" title and replace it with some appropriate content. You can take a look at the text that I will be using below as an example. When you've finished with that, click on the "Lorem ipsum dolor sit amet" (etc) words, delete them and replace them with your message. Typing and editing of text within the page works more or less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter key (Windows) or the Return key (Mac OS X).
Repeat the process with the "H2 level heading" subtitle and the words that follow. Just replace it with whatever you want your website to display. If you want, you can replace the words with the example text below. However, it's best to write something that is relevant to your site so that you don't need to go back and re-edit it later.
Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.
4. Leave the left column (sidebar) alone for now. We will add a navigation menu to this section in later chapters of this tutorial.
5. Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at the bottom of the page. For example, you can place your copyright notice in place of this word. If you need to insert the copyright symbol, "©", click "Insert | HTML | Special Characters | Copyright" from the menu.
6. Once you are satisfied with your page, click "File | Save As...". A dialog box will appear asking you where to save the page. Type "index.html" (without the quotes) into the "File name" edit box, and click the "Save" button.
Be sure to type the name "index.html" exactly as I gave it - that is, entirely in small letters (lowercase), with no spaces in the word. "index.html" is a special name in that it is regarded as the default file name for most web servers. When you publish that page to your website at (say) http://www.example.com/, the index.html page is the one that will be displayed when a visitor types "http://www.example.com/" without any filename. It is thus very important that you do not change the name of the file to something else.
Uploading or Publishing Your First Web Page with Dreamweaver: Preamble
Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that Dreamweaver needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. Even though you entered it earlier when you set up your site, it only integrates such information into its system when you publish your page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.
Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.
Another reason that you're publishing your page at this time is so that you can get familiar with both the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though - it's actually quite easy!
Steps to Publishing / Uploading Your Dreamweaver Site
1. To publish your website, start up the Site Manager again. To do this, click "Site | Manage Sites...", that is, click on the "Site" menu followed by the "Manage Sites..." item on the menu that appears. In the dialog box that appears, click on your website's name, then the "Edit..." button.
2. The dialog box you encountered when you first set up your website appears. Click "Next..." until you come to the screen with the message "How do you want to connect to your remote server?" In the first part of the tutorial, we selected "None". We will now change it to the actual values we need for uploading (publishing) your web page. In the drop down box, select "FTP".
3. Basically you will need to enter the information that your web host provided you when you first signed up for a web hosting account. Web hosts typically provide you with a whole bunch of details about your account when you first sign up. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages.
In the empty box for "What is the hostname or FTP address of your Web server?" enter the FTP address that your web host gave you. If you have your own domain and are hosted on a commercial web host, this address is typically your domain name prefixed by "ftp". For example, if your domain is "example.com", many web hosts set up your FTP address as "ftp.example.com". Check the email you received from your web host for more details, or ask them if you cannot find the details. If the address is indeed "ftp.example.com", enter that in the box here.
4. To answer "What folder on the server do you want to store your files in?", check the message from your web host again. Some web hosts tell you that you need to place your web pages in a folder called "www". Others require you to place them in a "public_html" directory. Still others say that you are to place your files in the default directory that you see when you connect by FTP.
If your web host tells you to simply upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you need to publish your files in a "www" directory or some other folder name, enter that folder name in the box given. If the host does not mention this at all, chances are that you can simply leave the box blank.
5. Enter your FTP user name or login name into the box for "What is your FTP login?". Again, this information has to be supplied by your web host.
6. Enter your password in the box for "What is your FTP password?". Get your password from your web host if you don't already know it. If you don't want to have to keep entering your password every time you publish your page, you can leave the "Save" checkbox activated. Otherwise, if you are sharing your computer with others and don't want Dreamweaver to save your password, you can uncheck the box.
7. If you like, you can click the "Test Connection" button to check that you have entered all the information correctly. When you are finished, click "Next..." and "Done" to complete the configuration.
8. Finally, to publish your website, click "Site | Put". When Dreamweaver pops out a message asking you whether it should "Put dependent files?" answer "Yes". This merely means that it is to upload things like your images and CSS files that are required by your web pages. If you don't want to answer this question every time you publish an updated version of your website, check the box "Don't show me this message again".
Testing the Web Page
Before you proceed further, you need to test the version of the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.
Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier. For example, type "http://www.example.com" if that is your URL.
If you have entered the FTP details correctly, you should see the page you created earlier in your web browser.
If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized around the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait.
If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check that you have entered the correct folder in answer to the question "What folder on the server do you want to store your files in?". It is possible that you did not specify the correct directory on your website to publish your web page.
To fix the error, simply click "Site | Manage Sites..." and "Edit" and click the "Next..." button till you get to the appropriate screen to modify.
If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.
Dreamweaver Tutorial: How to Spice Up Your Website with Images in Dreamweaver CS3
Part 2: Adding Graphics to your Dreamweaver Site
In this chapter, you will learn how to insert images into your web page.
If you have missed the first instalment of this tutorial, you should read and attempt the steps given in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1) before trying out the things on this page. Uploading the web page, which we did in Part 1, is a necessary step if Dreamweaver is going to handle the web addresses (URLs) of your images correctly. This chapter assumes that you have completed the steps in Part 1.
Requirements
You will need the following to complete this tutorial:
1. A small image to act as the logo of your website
You will need a small image to place on the top left hand corner of your web page. This image will serve as your site's logo. It will appear on every page of your website.
If you are designing a company website, chances are that your company already has a logo. If you don't have an image file for the logo, either scan it or take a digital photograph of the logo for your use in this chapter.
If you don't have a logo yet, create one using your favourite graphics drawing software or draw one on paper and scan it or take a digital photo of it. You will need a program that can produce either PNG, GIF or JPG files. If you don't already have a drawing or painting program, you can find a list of free ones on thefreecountry.com's Free Drawing and Painting Software page.
When creating your logo, note the following:
o Try to keep the width and height of the image small. There are no fixed size stipulations for a logo, but if your logo is too wide or tall, you will have a hard time fitting it into your web page. If the picture you have is too big, try resizing it in your graphics software.
o If you really have no idea what to put in your logo, just create an image with the name of your site on it.
2. Product images or other pictures (optional)
If you want to place other pictures on your web page, for example, photos of the product you're selling, or your own photo, you will also need to have them in either the PNG, GIF or JPG format. Don't worry if you don't have any picture or photo of this sort. This part is entirely optional.
Adding Images to Your Dreamweaver Page
3. In the right column, you should be able to see "index.html" in the list of files that belong to your project. Doubleclick it to open the file.
4. At the top of the page is the name of your website, which you entered in the first chapter. Place the text cursor to the left of the name. That is, click on the name, and move your cursor to the leftmost position using the left arrow key on your keyboard. You will be inserting your logo at this position.
5. Choose "Insert | Image" from the menu. If you recall from the previous chapter, "Insert | Image" means that you click the "Insert" menu, then click the "Image" item on the menu that appears. A dialog box will appear. You should see the image or images that you previously saved in the folder. If you have more than one images in the folder and are not sure which is the one you are going to use for your logo, you can click the name of the image once. A preview of the image will appear in the dialog box, making it easier for you to select the correct image.
6. Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OK" button.
7. A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a brief description of your image. The description will be displayed for visitors browsing with graphics disabled. It will also be the text that is read aloud by screen readers. The latter are used by visually impaired people visiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise to always give your graphics a brief description.
8. Since this image is merely your site's logo, you can either type into the "Alternate text" field your company's name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as you type.
9. Once you've typed your "Alternate text", click the OK button. Ignore the "Long description" field.
10. Your logo should now appear before your company name or your site name. If you find the logo is too big, and you want to redo it, simply click it once and hit the DEL key. Recreate your logo as needed, save it into the website folder and repeat the above procedure.
11. At this point, you will probably find that the logo is uncomfortably close to the name of your website. To introduce some space between the logo and your site name, click the logo once to select it. At the bottom of your Dreamweaver window, you should a panel labelled "Properties" containing information about your image (see picture below).
Locate the "H Space" edit box and enter "5" (without the quotes). Press enter. Notice that some space has been inserted between your image and your website title. If you think 5 is too much or too little, you can experiment with other values in this box. Basically, a larger value means that more space is inserted, while a smaller value shrinks the amount of space between your picture and the surrounding material.
12. That's it. You've now added a logo for your web page, making it look slightly more professional.
13. (Optional Step) The same technique that you used here to add a logo and be used to add other images to your web page. For example, you can use this method to add pictures of your products in the main body of the web page.
Let's say for example, that you are using the following text in the main part of your web page.
Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.
(If the text seems familiar, it's because I used it as the sample text in the previous chapter.)
If you wanted to insert a picture of a product so that it appears as a small thumbnail just beside the block of words "Dreamweaver Site: This..." (etc), place the cursor just before "Dreamweaver Site" (use to mouse to click that spot). Click "Insert | Image". Type the alternate text for your product when the Alternate Text dialog box appears. Click OK.
Notice that the words do not exactly flow over to the right of the image. To make all the words appear to the right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set to "Default". Set it to "Left".
The image should now be placed completely to the left of the text, with the words filling in the space on the right.
If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as before. You can also adjust the "V Space" to change the vertical space between the image and the words. If you don't know what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" box to see what happens. You can always delete the value again if you don't like the result.
14. Before you continue to the next section, save your page with "File | Save".
15. You should now upload (ie, publish) the updated web page to your web host. Since you have already set up everything in the previous chapter, all you have to do at this point is to click "Site | Put" from the menu. If Dreamweaver prompts you to save the site before "putting", do so. If you are asked whether you should put "dependant files", click "Yes" to allow Dreamweaver to publish your images and CSS files as well.
16. Finally, check your website using your browser. Congratulations. Your website now looks more professional with the addition of a logo and some images for your products or yourself.
Dreamweaver Tutorial 3: Adding Links, Change Fonts and Colour
Hyperlinks, Fonts, Styles, Sizes and Background Colour
In this chapter, you will continue to use Dreamweaver to augment your site and add functionality to it. In particular, you will learn how to
- add links or hyperlinks to your web page, allowing you to link to other pages on your website as well as on the Internet;
- change font faces, styles, sizes and colour;
- change the colour of the background.
Adding a Basic Navigation Menu to Your Sidebar
So far, all our modifications to the initial page have been to the header, where we added your site logo and site name, as well as to the main body, where we added information about your website and products. Up to this point, the leftmost column of your web page still contains the default placeholder text that Dreamweaver CS3 inserted when it created the page.
Dreamweaver refers to the leftmost column as the "sidebar". Most websites, like thesitewizard.com, insert a navigation menu into this space. A navigation menu typically links to the certain important pages on the website, such as the home page (the page you're currently designing), the site map, the "About Us" page, and the "Contact Us" page. If the site has a large number of pages, it will also link to the main sections.
In other words, a navigation menu, in its most basic form, is merely a series of links to certain other pages of your website. For this chapter, we will create a simple but fully-functional navigation menu. In the next chapter, you will modify that menu to use buttons somewhat like those you see on thesitewizard.com and other websites. However, for now, it is important for you to work through the process of adding links to pave the way for that advanced menu of chapter 4.
1. Start up Dreamweaver, if you have not already done so.
2. As before, open your index.html page. You can do this by doubleclicking the filename in the right column of your Dreamweaver window.
3. In the left column, you will see a bold subtitle with the words "sidebar1 Content". We do not need this header, so we will delete it. To remove it, use your mouse and drag it across the words "sidebar1 Content" selecting it. Notice that near the bottom of the Dreamweaver window, just above the "Properties" panel, the word "<h3>" is highlighted.
For convenience, I shall refer to this bar, where you can see the highlighted "<h3>", as the status bar. The status bar contains useful information about where your cursor is currently located in the raw HTML code that Dreamweaver generates behind the scenes for you.
Click the highlighted "<h3>" word - that is, move your mouse over the "<h3>" tag, and click the mouse button. A single click will do the trick. Then hit the DEL key. This will not only delete the words "sidebar1 Content", but it will also remove the code marking off that section as a subtitle.
4. Now delete the rest of the text in the side bar. Simply select all of it with your mouse, and hit the DEL key.
5. With your text cursor still in the side bar, click "Insert | Hyperlink". That is, click the "Insert" menu, and then click the "Hyperlink" item on the menu that appears. A dialog box appears, asking you for the details of the link.
6. Enter "Home" (without the quotes) into the box entitled "Text:". Then enter "index.html" (without the quotes) for the box entitled "Link:". Make sure you enter the "index.html" exactly as I specified, with no capital letters (no uppercase letters), no spaces and no quotes. Click OK.
7. You should see a link appear in your side bar. When your page is published onto your web server, and users click the link, they will be brought to the "index.html" page of your site. We have added the "Home" link even though you are already at index.html because it is good policy to have a standardized navigation menu on your site - that is, we want all the pages on the site to have exactly the same navigation menu. It reduces confusion in your visitors when they want to hunt for certain menu items.
8. At present, the link is highlighted. Move the mouse cursor to the end of the word "Home" and click in the empty space slightly to the right of the word. The word "Home" should no longer be selected. Look at the status bar. If the last item in the status bar is "<p>", you can proceed to the next step. If the last item is "<a>", you need to click a little futher into the empty space to the right of "Home", but still within the side bar column.
9. Hit the ENTER (or RETURN) key to create a new line.
10. Using the above procedure, create links to the following pages as well.
- Text: About Us, Link: aboutus.html
- Text: Contact Us, Link: feedback.html
- Text: Site Map, Link: sitemap.html
If your website is not a company website but a personal one, you can use "About Me" instead of "About Us" if you wish. However, in order to avoid confusion later, I recommend that you keep the filenames that I supplied. That is, don't change "aboutus.html", "feedback.html" or "sitemap.html". More importantly, your filenames should not include spaces or capital (uppercase) letters. Using spaces or capital letters in your filenames introduces a variety of needless complications down the road.
11. Notice that the side bar only extends as far as your last link. If you want the side bar to extend even further, keep adding blank lines till you're satisfied with the length of that column.
At this point, your main page is fully functional. That is, it contains a navigation menu with working links and a right column that has the information you want your visitors to read. At present, of course, those links lead to nowhere, since you have not created the pages for those links yet. (The pages will be created in a later chapter.)
It is also possible to add a link to a web page that is not on your own website. For example, to link to thesitewizard.com, simply follow the procedure above, but instead of typing a relative link like index.html or the like, you have to give a full URL. Enter into the "Link" box "http://www.thesitewizard.com/" (without the quotes), and type "thesitewizard.com" into the "Text" box.
How to Make an Image into a Clickable Link
On many websites, the logo of the site is actually a clickable link. For example, if you were to check my logo at the top of this page, you will see that it is actually a link to thesitewizard.com.
It's very easy to make your logo into a link. Simply select the logo by clicking it. In the Properties pane at the bottom of the window, look for the "Link" box. Enter the address of your website, for example, "http://www.example.com/" (without the quotes) into that box. Alternatively, you can enter a relative link, like "index.html". Next, look for the "Border" box. Enter "0" (zero, without the quotes) into that box. This prevents certain browsers from putting a blue border around your image.
How to Change Font Typefaces, Sizes, Style and Colours
Dreamweaver allows you to change a various aspects of the text that is displayed on your page, including the font typeface, size and colour.
· Changing the Font Typeface
To change the font of a particular piece of text, first select the relevant text. With the text selected, look at the Properties panel at the bottom of the window. In the box labelled "Font", you should be able to see the default font selection, "Verdana, Arial, Helvetica, sans-serif". This means that when your visitor arrives at your site, your text will be displayed using the Verdana font if he has it available on his system. If his system does not have the Verdana font, the web browser will attempt to use the Arial font. In non-Windows systems, these fonts are unlikely to be available. In such a case, the browser will use the third font face specified on the list, Helvetica. If none of the named fonts are on the system, your page will be displayed in any sans-serif font the browser can find.
To change the font, simply click the down arrow in the drop down box and select any of the suggestions given. Dreamweaver lists the sets of fonts commonly used by webmasters. Each set contains a list of fonts that are somewhat similar to one another, so that if one is not available, the alternative will (hopefully) not make your website look too drastically different.
Important note: although Dreamweaver allows you to add to the list by clicking the "Edit Font List" item in the drop down menu, think carefully before you add some esoteric font and use it for your website. If you use a font that only you and a few people have on their system, and don't specify commonly available alternatives, the web browser will simply use its default font (which varies from browser to browser and system to system) to render your web page. This will result in your page looking less-than-ideal for the majority of your visitors.
· Changing the Font Size
Beside the "Font" drop down box is the "Size" box. This allows you to change the font size of the currently selected text. By default, the font size is set to 100%, which means that the font will display in its normal system-dependant default size. If this size is not satisfactory to you, you can change the value, either by typing in the number you wish, or selecting one of the predefined sizes from the drop down box.
There are a variety of ways to specify the font size. You can specify in terms of percentage of the original size, pixels, points, etc. I recommend that you stick to using either "ems" or "%" unless you have specific requirements and know what you're doing.
Be careful about making your font sizes too small. You may have superb eyesight, but remember that your web page is viewed by people of varying ages and visual capability. Elderly visitors as well as users with poorer eyesight may not be able to read your page if the text is too small.
· Changing the Style of the Text: Bold and Italics
To make a particular piece of text bold, select the text and click the "B" button in the Properties panel. Likewise, if you want to italicize your text, select it and click the "I" button instead.
· Changing the Colour of the Text
Changing the colour of your text is equally easy. After you select the text, look at the Properties panel. You should be able to see a black square beside another box that reads "#000000". To change the colour of the text, click the black square and select the colour. Be careful to choose a colour that contrasts with your background colour.
How to Change the Background Colour
· Changing the Background Colour of the Whole Page
If you want to change the background colour of the whole page, click the "Page Properties" button at the bottom of the Dreamweaver window. Click the "Background color" square, currently set to grey, and change it to whatever colour you wish. Note though that this only changes the parts of the window that are not covered by the header, the side bar, the main content section and the footer. If you don't know what I mean, just try it. You can undo the changes you make by clicking "Edit | Undo" (or more specifically, "Edit | Undo Set Page Properties") if you don't like the colour change.
· Changing the Background Colour of the Side Bar, Main Content Section, Header and Footer
As far as I can tell, there is no easy way from the menus or buttons to change the background colour of the side bar, main content section, header and footer. For those who feel that the existing colour is not satisfactory, follow the guide below. Otherwise, feel free to skip this section.
o Changing the Background Colour of the Side Bar
Click somewhere in the side bar. Look at the status bar and click "<div#container>". Click the "Edit CSS" button in the Properties panel. The CSS panel on the right side of Dreamweaver should expand when you do so. Look for the item called "background" in that panel and doubleclick it. A dialog box should appear. Click the box beside the "Background color" to change the colour.
Warning: unlike many other operations in Dreamweaver, there doesn't seem to be any way to undo the change with "Edit | Undo" except to set it back to its original colour manually.
o Changing the Background Colour of the Header and Footer
To change the colour of the header, click somewhere in the header. Locate "<div#header>" in the status bar and click it. Again, click the "Edit CSS" button, then doubleclick "background" in the CSS panel on the right side of the screen. You should be able to change the background colour from the dialog box that appears.
Repeat the same procedure for the footer if you wish to change its background colour too. In the case of the footer, though, you will have to locate "<div#footer>" instead of "<div#header>".
Warning: again, there's no way to undo the change with "Edit | Undo".
o Changing the Background Colour of the Main Content Section
The background colour of the main section of your web page, which contains the bulk of your text, cannot be modified in the same way as the other sections.
First, click somewhere in the main section of your web page and click "<div#mainContent>" in the status bar.
On the CSS panel on the right side of Dreamweaver, look for the line saying 'Properties for ".twoColLiqLtHdr .mainContent"'. Move your mouse to the line immediately above the words and drag it upwards until you can see the "Add property" link below. Click "Add property". In the drop down box, select "background-color". Click the colour box beside it to set the colour.
Once again, changes you make here cannot be undone using the usual "Edit | Undo" method.
Publishing Your Web Page
Now that you have completed adding a basic navigation menu, changing the fonts, styles, sizes and colours of your text, your page is ready for publication. As before, upload (publish) it to your web server by using "Site | Put".
Test your pages in your web browser. At present, although you have a functional navigation menu, there is no point clicking any of the internal links on it since you have not yet created any of the pages they link to. On the other hand, if you have linked to an external site like thesitewizard.com, clicking on the link should work correctly.
Dreamweaver Tutorial: How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS3
Part 4: Using Spry to Add a Navigation Menu Bar
In this chapter, you will use Dreamweaver's built-in facilities to to add a fancy navigation menu bar to your website. This navigation bar will have rollover effects somewhat like what you see in thesitewizard.com's navigation menu when you hover your mouse over a menu item.
At the end of this chapter, your main page will be complete, and will form the basis for the other pages on your website. If you have previously used the example text supplied in this tutorial to create your main page, you should take the opportunity in this chapter to replace the text with the real content of your website. By this time, you would have learned enough to do most of the things a web designer typically needs to do on a web page.
Dreamweaver's Menu Bar Widget and the Spry Framework
Dreamweaver has a built-in facility for you to add a variety of interactive features to your website. This built-in facility uses a programming feature known as the Spry framework. The WYSIWYG web editor makes it easy for you to use the Spry framework without needing to know any programming. You simply use it as you have done in previous chapters.
How to Add a Navigation Menu Bar to Your Website
2. Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.
3. Locate your existing navigation menu, which at this time merely consists of a series of links to your home page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completely replacing them in this chapter.
In case you're wondering why we bothered to create those links if we were going to destroy them again anyway, hyperlinks are one of the most important features of a web page. As a webmaster, you will be continually creating hyperlinks to other pages on your site as well as links to other sites on the Internet. Not all these links will be placed in your navigation menu. It was thus important to cover that aspect of web design in the tutorial.
4. Make sure that the blinking text cursor is currently in the side bar. If it is not, click somewhere in the side bar. Now click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spry" item on the menu that appears, and finally on "Spry Menu Bar" on the submenu that appears.
5. A dialog box will appear asking you whether you want a horizontal menu bar or a vertical one. Since we are placing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and click OK.
6. A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of your Dreamweaver window, you will see that the text and links for menu items are displayed there.
7. Select "Item 1" by clicking on it, if it is not already selected. In the "Text" box, replace the words "Item 1" with "Home" (without the quotes). Replace the default "Link" text of "#" with "index.html" (without the quotes).
8. By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete it. Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.1. Do the same for "Item 1.2" and "Item 1.3".
9. Now do the same with the other items, replacing the text with the appropriate words for your site, and the links with the actual page names. If there are submenus, delete them as you did for Item 1. For your convenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has a three-level menu system. Delete all submenus (item 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - we won't need them.
- Text: About Us, Link: aboutus.html
- Text: Contact Us, Link: feedback.html
- Text: Site Map, Link: sitemap.html
10. Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, and that these files will need to be uploaded. Click "OK".
11. Now upload the page to your website using "Site | Put" and check the results in your browser. Hover your mouse over your menu buttons, and you will see that they change colour.
Customizing the Spry Framework's Menu Bar Widget
While adding the Spry Framework's navigation menu bar to your web page is a simple procedure under Dreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so under Dreamweaver's user interface. You will have to do it manually.
The fastest way to do this is to do it via Dreamweaver's "Code" view.
Dreamweaver has two basic ways you can work on your website. So far, you have been creating your site using the "Design" view. The "Design" view allows you to work on your web page using the What-You-See-Is-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page as a visitor would when they visit your website.
The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for your website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to your website. When your visitor loads your web page, the browser takes the "raw" code and displays it according to the instructions given in the "raw" code.
To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewing this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you should still take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using the Code view in a future chapter to insert your feedback form code.
To switch to the "Code" view, click "View | Code" from the menu. Instead of the web page that you are accustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down the page, you should be able to see your content amidst other characters. These other characters, things like "<p>" and the like, are the formatting code that tells the browser how it should render your page.
· Centering the Menu Bar
Scroll to the top of the index.html file in "Code" view. Locate the text "</head>" (without the quotes) somewhere near the top of the file. Place your cursor just before "</head>" on the same line. Hit ENTER (or RETURN) to insert a blank line. When you do this, the entire line with "</head>" should move downwards, creating a new blank line. Move the cursor to the blank line.
Now copy the text from the box below and paste it into the blank line you just created in Dreamweaver. To copy the text, select all the text in the box with your mouse, click the right mouse button (or if you use Mac OS X, hold down the Control key on the keyboard and click the mouse), and select Copy from the menu that appears. To paste it into Dreamweaver, switch to the Dreamweaver window. Make sure that your text cursor is in the correct location (in the blank line above the word "</head>"). Select "Edit | Paste" from the menu.
To check that your insertion works, click "View | Design" from the menu. You should see that the menu is now centred in the Design view. You can again click "View | Code" again from the menu if you want to return to the "Code" view.
· Changing the Colours of the Menu Bar
On the right side of the Dreamweaver window, in the Files pane, doubleclick the folder "SpryAssets". It should expand, showing you other files. Doubleclick the file "SpryMenuBarVertical.css". If the Files pane is too narrow for you to see what file you're clicking, hover your mouse over each file in turn until Dreamweaver displays a tooltip telling you the full name of the file.
Another file, full of unfamiliar code, will appear in the Dreamweaver's centre pane. This is the CSS code for your menu. The CSS code contains the formatting code for your menu.
Click "Edit | Find and Replace" from the menu. Type "ul.MenuBarVertical a" (without the quotes) into the big "Find" box. Click the "Find Next" button. Dismiss the dialog box by clicking the "Close" button. In the main window, you should see the highlighted words "ul.MenuBarVertical a". Under these words is a block of text enclosed between "{" and "}" (without the quotes). You should be able to find "background-color" followed by a value "#EEE" in this block. This line determines the colour of the menu when the mouse is not hovering over it. "#EEE" is the code for the greyish colour you see in the menu.
In the right hand column of the Dreamweaver window, in the CSS pane, you should be able to see "Properties for ul.MenuBarVertical a". If not, move your mouse over the line separating the blue "Applications" and the section above and drag it downwards to make more space. Under "Properties for ul.MenuBarVertical a", look for the line that says "background-color" (or parts of "background-color" if your window is too narrow to display the full text). To the right, you should see a square box followed by "#EEE". Click the square box to display the colour picker window and choose a colour of your choice.
To modify the colour of the menu button when a mouse moves over it, click "Edit | Find and Replace" again and search for "ul.MenuBarVertical a:hover". Dismiss the dialog box when you've located the text. Once again, you should be able to change the "background-color" property from the CSS pane in the right hand column.
When you're through making your changes, check the output by switching back to the index.html window. To do this, select "Window | index.html" from the menu. If you are still in "Code" view when you switch to the index.html window, switch to the "Design" view by selecting "View | Design".
When you are satisfied with the changes you have made, save your work with "File | Save All" from the menu. Note that you need to use "Save All" instead of "Save" because you have modified two files, index.html and SpryMenuBarVertical.css. Clicking "Save" alone will only save whatever file you happened to be working on last.
Again, use "Site | Put" to publish your work and check it out with your browser.
At this point, the home page for your website is complete. If you have been working on the page using some dummy text and pictures, such as the one I supplied in chapter 1, now is time to change them to your real content. You have learned everything you need to create a working main page that looks decent and works correctly. We will not be returning to this page in the next few chapters. Instead, we will be designing your other pages using this main page as the template.
Dreamweaver Tutorial: How to Use Templates to Manage Your Website in Dreamweaver CS3 (Part 5)
Part 5: Using Templates to Simplify the Management of a Multi-Page Website
In this chapter, you will use learn how you can use Dreamweaver's template management tool to create multiple pages on your site. The template tool goes beyond allowing you to use a standard design for all the pages on your site: its beauty lies in the fact that when you decide to change the design of your site, you merely have to change the template and Dreamweaver will automatically update all the pages that depend on that template. This simplifies the management of a website with many pages, allowing you to change common elements in a single place.
By the end of this chapter, you will have completed nearly all of your website, and uploaded the "About Us" page and the "Site Map" in addition to the "Home" page which you uploaded in the previous chapter.
How to Create a Template for Your Website in Dreamweaver
To make it easier for me to refer to different elements on your web page for this tutorial, I shall use the sample page shown in the picture below as a point of reference. Your page will of course look different. However, since both the sample and your page was created using the same procedure given in my Dreamweaver tutorial, the basic layout of the page should be fairly similar.
1. Start up Dreamweaver, if you have not already done so. Open your index.html file by doubleclicking it.
2. Click "File | Save as Template" from the menu. That is, click the "File" menu, and when the menu appears, select the "Save as Template" item. In the dialog box that appears, click the "Save" button.
3. Another dialog box will appear asking you whether you want to update links. Click "Yes". Dreamweaver will create a new folder in your computer's website folder called "Templates". If you look at the filename displayed at the top of the window, you will notice that Dreamweaver has replaced the current file with the template file. This is what we want, since we need to configure the template.
4. By default, Dreamweaver creates a template that has no editable regions. That is, when you create a page based on the template you just saved, you will not be able to change anything on that page. To fix that, we will need to specify areas of the template that can be modified.
5. Select the large bold text "Welcome" in the main content section of your document by dragging your mouse over it. Your page may not have the word "Welcome" of course, but if you look at the picture above, you should be able to locate its equivalent on your site. We will mark this text, "Welcome", as editable so that it can replaced with the title of whatever page you are creating.
6. Click "Insert | Template Objects | Editable Region" on the menu. A dialog box will appear. Type "Page title" into the box and click OK. Dreamweaver marks that section with a visual cue to show you that it is editable.
7. Select the paragraph under that page title and mark it editable as well. When prompted for a name to give that editable section, supply it "Page description".
8. Since the "Products" subtitle and the section that follows may not be present in the other pages of the website, we will mark the entire of this section as an "Optional Region". To do this, select the entire block comprising the "Products" subtitle, the picture underneath and the block of text beside the picture with your mouse. Click "Insert | Template Objects | Optional Region". A dialog box will appear. You can give this section whatever name you wish, since the content of your block will differ from my sample page. If in doubt, just accept the default name given.
9. Save the template by clicking "File | Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. Click OK.
The Home Page
At present, your home page, the index.html, is not regarded by Dreamweaver as being based on the template you created. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template.
The least troublesome way to do this is to overwrite your old index.html file with a new file created based on the template. You can do this with no loss of data since your template was created from the index.html file with no changes other than to define editable regions and the like.
1. Close all open files. To do this, click "File | Close All".
2. Click "File | New". A dialog box appears. You saw this dialog box in chapter 1. This time, look at the left column and click "Page from Template". The middle columns will show information about the template you created earlier, and the rightmost column will show a thumbnail picture of your template. Make sure that the checkbox for "Update page when template changes" is checked. Click "Create".
3. Click "File | Save As". A dialog box opens allowing you to specify the filename. Enter "index.html" (without the quotes) or just select the "index.html" file that appears in the window. Click "Save". A message box appears asking if you want to overwrite the existing file. Click "Yes".
That's it. You have replaced your old index.html with an identical copy, except that this time, Dreamweaver has recorded the index.html as being dependant on the template, so that the next time you modify the design of your template, this page will be automatically updated.
The "About Us" Page
Many sites, especially companies selling some goods and services on the Internet, have a page known as an "About Us" page. This page basically tells the customers more about the company and its business. On some personal sites, the "About Us" page contains information about the author of the site. It may even contain a brief resume or curriculum vitae (CV).
1. Click "File | New" again and select "Page from Template" if it is not already selected. Once again, click "Create".
2. Above your document, in the line with "Code", "Split", "Design" and "Title", replace the existing text in the "Title" field with "About Example.com" where "Example.com" is the name of your company. If yours is a personal site, you can simply call it "About Me" or "About Your-Name" (replace Your-Name with your name of course).
3. In the editable region which currently holds "Welcome" (or the equivalent on your page), replace it with "About Us".
4. In the editable region labelled "Page Description", enter whatever information you wish displayed about your company or yourself. Note that you are not restricted to a single paragraph. Just hit the ENTER key (or the RETURN key in Mac OS X) to create a new paragraph whenever you need.
For the purpose of this tutorial, I have used the following text. However, I strongly suggest you create your own content. There's no point waiting till the end of the tutorial before starting. With this chapter, you will have completed most of your website except for the "Contact Us" (feedback form) page.
Example Company was created in some century in some country for the purpose of something. At the moment, what that purpose is eludes us. We do know however that we exist. Or do we?
In any case, if you are reading this and are wondering what manner of company or website this is, know this: you are not alone.
(Seriously, this is just an example site created with the help of the Dreamweaver CS3 tutorial on thesitewizard.com.)
5. If you have defined an optional region like I have with the "Products" listing (see picture near the start of this article), and you wish to turn it off, select "Modify | Template Properties". A dialog box appears showing you the optional region you have defined. Select it (if it is not already selected) by clicking on its name. Then uncheck the box next to the words "Show OptionalRegion1" (or whatever name that you have given that region). Click OK. Your optional region should disappear.
6. Select "File | Save As" and type in "aboutus.html" (without the quotes) into the dialog box that appears. This is the same filename that we entered into the navigation menu bar, so now is not the time to be creative and start changing names or your menu will not work correctly.
Site Map
A Site Map is a comprehensive list of all the documents on your website. It is a useful tool for visitors who are looking for a particular page on your website but cannot find a direct link to it from whatever page they happen to be at. It is also good to have because it allows search engines a way to find all the pages of your website. I realise that at this point in time, you don't really have any pages to list in your site map other than those already in your menu bar. However, as a matter of good practice, you should still create a Site Map. In time, as you add more pages, the Site Map will become invaluable.
By now you should have no trouble creating a new page from your template. Do so. Replace the "Title" field with "Site Map of Example.com" (use your site name of course) and "Welcome" with "Site Map". In the "Page Description" field, create a list of links to all the other pages of your website, one link per line. If you have forgotten how to do so, you can find the instructions in chapter 3. If you have an optional region you don't want, remember to remove it. Finally, save the page as "sitemap.html" (without the quotes).
Publishing the Nearly Complete Website
Now that you have multiple pages to upload, it probably isn't efficient to use "Site | Put" to upload files, since that is more useful for uploading individual pages. Instead, click "Site | Synchronize Sitewide". A dialog box appears. Make sure that in the "Synchronize" box, the "Entire 'Example Company' Site" (where "Example Company" will be replaced by the site name you gave in chapter 1) option is selected. In the "Direction", check that "Put newer files to remote" is selected.
Click "Preview". When a dialog box appears with the list of files that will be uploaded, click the right mouse button (Control-Click in Mac OS X) on the template file (the file in the "Template" folder). Select "Ignore Selection" so that Dreamweaver does not upload your template file. Click OK. Dreamweaver will then upload the files you specified.
How to Modify/Revise the Template in Dreamweaver
With Dreamweaver's template system, modifying the design of your site is trivial. For example, let's say that you have decided you want to show your appreciation to thesitewizard.com for the help you received, by adding a button link to thesitewizard.com, like the following, to your side bar.
Copy the above button to your website folder. Simply click the right mouse button on the image, select "Save" (or equivalent) from the menu, and save it into your website folder.
Open your template for the site. Click in the space just after your navigation menu in the side bar. Click "Insert | Image" from the menu and select the image that you have just saved. In the "Alternate text" field, type "thesitewizard.com - Tutorials for Webmasters". Click the "OK" button. In the "Properties" pane at the bottom of the page, enter "http://www.thesitewizard.com/" into the "Link" field. In the "Border" field, enter "0" (zero, without the quotes). Just next to the box where you entered "0" for the border are three small buttons. Click the middle button (the "Align Center" button). Your button should now be centered in the side bar.
Select "File | Save". Click "OK" to the message box that appears. Another dialog box appears, asking you whether you want to update all the files based on the template. Click "Update". Another dialog box appears. Click the "Start" button. Finally, click the "Close" button.
When everything is complete, you can open all the pages on your site to see that Dreamweaver has updated every page on your website with your changes.
Once you are done, upload all the pages of your site using the "Site | Synchronize Sitewide" procedure described earlier.
Dreamweaver Tutorial: How to Add a Feedback Form to Your Website in Dreamweaver CS3
Part 6: Adding a Contact Form to Your Website
In this final chapter of thesitewizard.com's Dreamweaver Tutorial, you will be adding a feedback form, or contact form, to the website that you have created. By the end of this chapter, you will have not only completed the entire tutorial, but you will also have a fully functional website with a working feedback form.
Overview: How a Feedback Form Works
Having a working feedback form on your website involves more than simply designing a web page that has a form. By way of overview, here are some of the major elements that you will need. You do not need to understand every single detail at this point since I will take you item by item through the whole process later. However, it is useful to have the big picture in mind so that you don't get lost in the forest of details later.
1. The first thing you will need is a web page containing the feedback form. You will be designing most of this page using Dreamweaver. By itself, the form doesn't do anything at all: your visitors can click the "submit" button till they are blue and you will still not receive their message. The task of sending the form contents as an email message lies with what is known as the feedback form script.
2. The feedback form script is essentially a computer program that processes the contents of the form sent by your visitor's web browser. It takes the raw message and formats it as a regular email message and then sends it via email to the webmaster. This script has to run on the web host's server (ie, computer) itself. You will be using a script custom designed for you by thesitewizard.com's Feedback Form Wizard. However, you will have to find a web host that supports the running of such scripts yourself. Not all web hosts allow scripts to be run on their server (computer).
3. Next, we have the "thank you" page. After the browser sends the message to the script, you will want to thank your visitors for their email. Even if you don't feel particularly grateful, you will still need some sort of page that will inform your visitors that their message has been successfully sent. This page can be easily designed using Dreamweaver.
4. Finally, you will need an "error" page. If a visitor mistakenly clicks the "submit" (or "send") button before he/she has finished typing essential elements such as their email address, the feedback form script will direct them to a page telling them that they have missed out components required in a message. Like the "thank you" page, this is a straightforward web page that can be designed with Dreamweaver.
How to Add a Contact Form to Your Website in Dreamweaver CS3
1. Get a web host with PHP 4.1 or above
Your feedback form will not work at all if you use a web host that does not allow you to run your own programs (scripts) on their computers. Basically, if you use the free web space provided by your Internet Service Provider (such as AOL), or if you use a free web host, you will not be able to get your feedback form working. Note that there are even some commercial (paid) web hosting that do not allow you to run your own scripts.
If you are looking for a suitable web host, you need to find one that supports the running of PHP scripts with an installed PHP that is version 4.1 or above. Do not use free web hosts, even if they have PHP support, since many of them do not allow PHP scripts to send email.
2. Generate a custom feedback form script
Read through the Wizard's introductory page. Choose the option to create a PHP feedback form script. Although you can generate any of the other types of feedback form scripts, for the sake of simplicity, this tutorial will only focus on the installation and creation of a feedback form that uses the PHP feedback form script.
In the next page, enter the information requested by the form. Modify the URLs supplied below to contain your real domain. For example, if your domain is "suchandsuchaname.com", use that instead of the "example.com" given below.
o Email: (enter your email address)
o URL of Feedback Form: http://www.example.com/feedback.html
o URL of "Thank You" Page: http://www.example.com/thankyou.html
o URL of "Error" Page: http://www.example.com/error.html
Finally, read the licence agreement. If you agree to the terms, indicate it in the form, and click "Generate script" to continue.
Do not close the web page that appears. Leave it open while you work on the next few steps.
3. Saving the script
Start up Dreamweaver. Select "File | New" from the menu. That is, click the File menu, followed by the "New..." item on the menu that appears. Click "Blank Page" from the leftmost column. In the "Page Type" column, select the "PHP" item. Click "Create".
Select "View | Code" from the menu to switch to Code view. Note: this step is very important. If you omit it, your feedback form will not work.
Switch to your web browser, and locate the section that has the header "Feedback Form Script". Select everything in the box below. If you are using Windows, one easy way to select everything is to simply click your mouse somewhere in the box and type Ctrl+A (hold down the Ctrl key and type 'a'). Then copy the text you have selected to the clipboard. To do this, use Ctrl+C in Windows, or use "Edit | Copy" from the browser's menu. If your browser does not have an "Edit" menu, try clicking the right mouse button in the box and selecting "Copy" from the menu.
Switch back to Dreamweaver, and select "Edit | Paste". The entire content of the script generated by the Feedback Form Wizard appears (in various colours). Do not attempt to beautify it, add or change anything. Do not even add a blank line. This is not the user-visible portion of your web page. We will come to that later.
Note: if you do not see the output displayed in a variety of colours, you have omitted the very important step mentioned above. Close the document without saving it and restart this section again.
Select "File | Save As" and type "feedback.php" into the "File name" box. Do not use any other name. Do not use capital letters. Select "View | Design". You should see a blank page. Do NOT type anything here. Click "File | Close" to close the file.
4. Creating the feedback form web page
Select "File | New", choose "Page from Template" and click "Create". Modify the title field to "Contact Us". Modify the "Page Title" editable region to read "Contact Us" as well. Delete all the text in the "Page Description" editable region.
Now switch to the browser window that contains the generated code from thesitewizard.com's wizard. This time locate the section in the output generated by the wizard that reads "HTML Code". Click in the box below those words, select everything in the box and copy it to the clipboard.
Switch back to Dreamweaver. Make sure your cursor is in the "Page Description" editable region. Select "View | Code" from the menu. Dreamweaver will switch to the HTML code view. Your text cursor should be just after "<p>" and before " <p>". Using the arrow keys in your keyboard, move the cursor to the end of that line (that is, after the "<p> <p>". Then select "Edit | Paste". The text from thesitewizard's feedback form wizard should be inserted at that point.
Now use "View | Design" to switch back to the Design mode. You should now be able to see the feedback form in your web page.
To widen the input field field of "Name", click somewhere in the box next to "Name". In the "Properties" pane at the bottom of the screen, change the default "Char width" of "25" to a value that better suits your page. For example, increase the number if you want the box to be wider and decrease it if you want it to be narrower. Repeat the process with the "Email address" field so that both the "Name" field and the "Email address" fields have the same width on the screen.
Similarly, you can change the width and height of the "Comments" box. Click the box under the word "Comments". In the "Properties" pane, change the "Char width" to a more appropriate number than "25" if you wish. To change the default height of the "Comments" box, look for the "Num lines" box in the "Properties" pane and change it to the height you want to have. You can experiment with the values until you are satisfied with the appearance of the boxes on your page.
Note that modifying the size of the various boxes in the form merely changes the appearance of the box on the screen. These sizes do not affect how much text your visitor can type into the field. Most browsers will simply scroll the text if the box is not wide or tall enough for what the visitor wants to type.
If you like, you can also change the text appearing on the button. By default, this text is "Send Feedback". To change it click on the button. In the "Properties" pane at the bottom of the Dreamweaver window, change the text in the "Value" box to some other text if you wish.
5. Creating the "Thank You" and "Error" pages
By now, you should have no trouble creating new pages from your template, having done so a few times already when creating the other pages of your site. Use the same method that you have been using in the past and create two new pages: the "Thank You" page and the "Error" page.
The "Thank You" page is displayed by the feedback form script after your visitor clicks the "Send Feedback" button. It typically thanks your visitor for sending his comments. The main purpose of such a page is to provide feedback to the visitor that his comments had been successfully submitted. You may write anything you wish for this page. If you don't know what to say, you may use the following text:
Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message.
The "Error" page is shown whenever the visitor submits the form without filling one of the fields. For example, if he fails to enter an email address when the form is submitted, the "Error" page will be displayed instead of the "Thank You" page. Your error page should inform the visitor that he needs to complete all the fields in the form, and that he is to click the browser's "Back" button to go back to the form to repair the error. If you don't know what to say, you may use the following text:
There were errors in the form that you submitted. Please complete all the requested information before submitting the form. Click the 'Back' button on your browser to return to the form to fix the error.
Save your "Thank You" page with a filename of "thankyou.html" (without the quotes) and your "Error" page with a name of "error.html" (without the quotes). These are the names you supplied earlier to the Feedback Form Wizard. The customized script that the wizard created has the names hardcoded into it. You should therefore not change the names at this point, or the script will not work properly.
6. Publishing the Feedback Form Script, the Feedback Form, and the Thank You and Error pages
Once you are satisfied with the changes you have made, upload all the new pages by using "Site | Synchronize Sitewide" from the menu. As before, click "Preview" and remember to choose "Ignore selection" for the template file.
7. Testing the Feedback Form
When all your files have been published, you should test your feedback form to make sure that it works. If something goes wrong, check the Feedback Form Wizard FAQ (Frequently Asked Questions) for the answer. You should also reread this chapter of the tutorial to see if you missed anything.
Conclusion
Congratulations! With this chapter, you have completed the basics of using Dreamweaver to design a website. You have also created a fully functional site, complete with main page, an "About Us" page, a "Site Map" and a working "Contact Us" form. More importantly, you now have the knowledge to use Dreamweaver to create, design and publish new websites as and when you wish.
Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1)
Tutorial on How to Design Your Website Using Adobe Dreamweaver CS3
Adobe Dreamweaver Creative Suite 3 (CS3), formerly known as Macromedia Dreamweaver, is a fully-featured commercial web editor that allows you to create, build and manage complex websites. The editor is a What-You-See-Is-What-You-Get (WYSIWYG) web editor, which means that you can design your web page visually and whatever you see on the screen is what your visitors will see when they visit your website. Dreamweaver generates standards-compliant code for your website which means your website will not become "broken" every time a new version of a web browser is released. For the technically inclined, the HTML and CSS code that it creates for your website will validate correctly.
This tutorial guides you through the steps of creating your first website using Dreamweaver.
What You Will Need
1. Dreamweaver
You will need Dreamweaver (obviously). The tutorial assumes that you are using Dreamweaver CS3. There are versions of Dreamweaver for both Windows and Mac OS X - either version will do fine. For the most part, both versions work in the same way.
2. A Web Hosting Account
You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to your web host's computer (called a web server), so that the rest of the world can see it. There are numerous web hosts around - you can find a list of cheap web hosts on http://www.thefreecountry.com/webhosting/budget1.shtml
Overall Goals of the Dreamweaver Tutorial
By the end of this tutorial, you will have set up a working website with multiple pages, including a main page, a feedback form, an About Us page, and a Site Map. Your pages will contain a sophisticated navigation menu bar, images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website.
More importantly, you will know how to use Dreamweaver to create, design and publish your site so that you can design new sites any time you want.
Goal of this Chapter
In this chapter, you will learn to create a rudimentary two-column web page (like this web page that you are currently reading) and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing your web page on the Internet with your favourite web browser.
Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.
Setting Up Your Website in Dreamweaver
You will be greeted with a window with a top-half looks something like the picture above (without the words "Dreamweaver Tutorial thesitewizard.com" of course). Your picture may be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.
If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert Modify Text Commands Site Window Help". We will be accessing a lot of Dreamweaver's features via this menu bar.
The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar. A drop-down menu will appear. Click the "New Site..." item in the menu bar.
Important note: in the interest of brevity, in the future, I shall refer to the sequence of clicking the "Site" menu, followed by clicking on the "New Site..." item simply as "Site | New Site..."
A dialog box box will appear with words to the effect "Site Definition for Unnamed Site 1". The number that follows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Don't worry about that. We are about to change it anyway.
At the top of the dialog box is the "Basic" tab. If it is not currently selected, click on it to select it. If you're not sure, just click on it.
In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. If you are not sure what name you want for your site, use your domain name. For example, if you have purchased a domain called "example.com", put "example.com" (without the quotes) into the box. For the purpose of this tutorial, I will assume that you have typed "Example Company" in the box.
Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", your website address will be "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.
Click the "Next" button at the bottom of the window to proceed to the next screen.
Accept the default "No, I do not want to use a server technology" for now. Click the "Next" button again.
The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on your own computer. If you don't know what to do here, just accept the default.
When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "Done".
Creating a Simple Two-Column Web Page with Header and Footer
You will now create the main page of your website. For the purpose of this tutorial, we will be creating a two-column web page for the main page. A two-column web page basically means that the page will have two vertical columns. Websites typically use one of the columns to hold the website's logo and navigation buttons and the other column to hold the main content. For example, on thesitewizard.com's article pages, such as the one you are reading now, the left column holds the navigation menu while the right column holds the article text.
Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears. A new window entitled "New Document" will appear.
Look in the "Layout" column in the window that appears and locate the item "2 column liquid, left sidebar, header and footer". Select the item by clicking on it once.
Look at the rightmost side of the same window and locate the item "Layout CSS". Click the drop-down box and select "Create New File". This will cause Dreamweaver to save certain types of information about the appearance of the web page (called CSS) in a separate file. One of the ways in which this is useful is that when we design other pages of the site, we can reuse the same information by simply loading it from the same file.
Click the "Create" button.
A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clicking the "Save" button.
Dreamweaver now presents you with a page with two columns with some dummy content typed in. We will be replacing some of the dummy content with our own content.
Designing the Home Page: Preamble
The page you are about to design will serve as the website's "Home Page", which means that it is the main page of your website. It is the page that visitors will see if they type your website's address without specifying any page name. For example, if your domain is called "example.com", and your visitor types "http://www.example.com", they will see this page.
A home page typically contains brief information about what the site is about as well as links to the other pages of your website. If this is the home page of your personal site, you will probably want to welcome your visitors and mention briefly what they can hope to see on your site. If this is the home page of a company site, it will typically mention briefly what the company sells, it's main products and point the visitors to individual product pages or other pages on your site.
For the purpose of this tutorial, I will supply example text for a fictitious company called "Example Company", selling some fictitious products. You should of course use your own text rather than my supplied text. For example, if your company is called XYZ Inc, go ahead and use "XYZ Inc" in places where I use "Example Company". Likewise if you are creating a personal website, and you are out of ideas as to what to call your site, call it by your name. For example, if your name is Shakespeare, call it Shakespeare's Website.
Steps to Designing Your Dreamweaver Site
1. Take a look at the page that is displayed. You will see that there is a band spanning the entire top row of the page. The words in that band currently read "Header". Below that there are two columns: a narrow left column, called the sidebar, and a wider right column with the heading "Main Content". All the text that is given in the window can be replaced by your own content.
To replace the content, simply click on the word you wish to replace, delete it and type your own. The first thing you should do is to replace the word "Header" with the name of your website. To do this, click somewhere in the word "Header". A blinking text cursor will appear. Using the delete or backspace key as needed, delete "Header". Type the name of your website. If you don't know what to type, type in your name or your company's name. For the example site that I create here, I will replace "Header" with the word "Example Company".
2. Directly above where you typed to replace the "Header" text is a small edit box with the words "Untitled Document". Click the word "Untitled". Use the delete or backspace key to remove the existing text and replace it with the name of the site you typed earlier. This will be the text that the search engines show for this web page when it displays the results of a search. Again, for this tutorial's example site, I will simply replace it with the word "Example Company".
3. You should now replace all the text in the right column with your own text. Simply click on the "Main Content" title and replace it with some appropriate content. You can take a look at the text that I will be using below as an example. When you've finished with that, click on the "Lorem ipsum dolor sit amet" (etc) words, delete them and replace them with your message. Typing and editing of text within the page works more or less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter key (Windows) or the Return key (Mac OS X).
Repeat the process with the "H2 level heading" subtitle and the words that follow. Just replace it with whatever you want your website to display. If you want, you can replace the words with the example text below. However, it's best to write something that is relevant to your site so that you don't need to go back and re-edit it later.
Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.
4. Leave the left column (sidebar) alone for now. We will add a navigation menu to this section in later chapters of this tutorial.
5. Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at the bottom of the page. For example, you can place your copyright notice in place of this word. If you need to insert the copyright symbol, "©", click "Insert | HTML | Special Characters | Copyright" from the menu.
6. Once you are satisfied with your page, click "File | Save As...". A dialog box will appear asking you where to save the page. Type "index.html" (without the quotes) into the "File name" edit box, and click the "Save" button.
Be sure to type the name "index.html" exactly as I gave it - that is, entirely in small letters (lowercase), with no spaces in the word. "index.html" is a special name in that it is regarded as the default file name for most web servers. When you publish that page to your website at (say) http://www.example.com/, the index.html page is the one that will be displayed when a visitor types "http://www.example.com/" without any filename. It is thus very important that you do not change the name of the file to something else.
Uploading or Publishing Your First Web Page with Dreamweaver: Preamble
Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that Dreamweaver needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. Even though you entered it earlier when you set up your site, it only integrates such information into its system when you publish your page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.
Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.
Another reason that you're publishing your page at this time is so that you can get familiar with both the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though - it's actually quite easy!
Steps to Publishing / Uploading Your Dreamweaver Site
1. To publish your website, start up the Site Manager again. To do this, click "Site | Manage Sites...", that is, click on the "Site" menu followed by the "Manage Sites..." item on the menu that appears. In the dialog box that appears, click on your website's name, then the "Edit..." button.
2. The dialog box you encountered when you first set up your website appears. Click "Next..." until you come to the screen with the message "How do you want to connect to your remote server?" In the first part of the tutorial, we selected "None". We will now change it to the actual values we need for uploading (publishing) your web page. In the drop down box, select "FTP".
3. Basically you will need to enter the information that your web host provided you when you first signed up for a web hosting account. Web hosts typically provide you with a whole bunch of details about your account when you first sign up. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages.
In the empty box for "What is the hostname or FTP address of your Web server?" enter the FTP address that your web host gave you. If you have your own domain and are hosted on a commercial web host, this address is typically your domain name prefixed by "ftp". For example, if your domain is "example.com", many web hosts set up your FTP address as "ftp.example.com". Check the email you received from your web host for more details, or ask them if you cannot find the details. If the address is indeed "ftp.example.com", enter that in the box here.
4. To answer "What folder on the server do you want to store your files in?", check the message from your web host again. Some web hosts tell you that you need to place your web pages in a folder called "www". Others require you to place them in a "public_html" directory. Still others say that you are to place your files in the default directory that you see when you connect by FTP.
If your web host tells you to simply upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you need to publish your files in a "www" directory or some other folder name, enter that folder name in the box given. If the host does not mention this at all, chances are that you can simply leave the box blank.
5. Enter your FTP user name or login name into the box for "What is your FTP login?". Again, this information has to be supplied by your web host.
6. Enter your password in the box for "What is your FTP password?". Get your password from your web host if you don't already know it. If you don't want to have to keep entering your password every time you publish your page, you can leave the "Save" checkbox activated. Otherwise, if you are sharing your computer with others and don't want Dreamweaver to save your password, you can uncheck the box.
7. If you like, you can click the "Test Connection" button to check that you have entered all the information correctly. When you are finished, click "Next..." and "Done" to complete the configuration.
8. Finally, to publish your website, click "Site | Put". When Dreamweaver pops out a message asking you whether it should "Put dependent files?" answer "Yes". This merely means that it is to upload things like your images and CSS files that are required by your web pages. If you don't want to answer this question every time you publish an updated version of your website, check the box "Don't show me this message again".
Testing the Web Page
Before you proceed further, you need to test the version of the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.
Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier. For example, type "http://www.example.com" if that is your URL.
If you have entered the FTP details correctly, you should see the page you created earlier in your web browser.
If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized around the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait.
If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check that you have entered the correct folder in answer to the question "What folder on the server do you want to store your files in?". It is possible that you did not specify the correct directory on your website to publish your web page.
To fix the error, simply click "Site | Manage Sites..." and "Edit" and click the "Next..." button till you get to the appropriate screen to modify.
If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.
Dreamweaver Tutorial: How to Spice Up Your Website with Images in Dreamweaver CS3
Part 2: Adding Graphics to your Dreamweaver Site
In this chapter, you will learn how to insert images into your web page.
If you have missed the first instalment of this tutorial, you should read and attempt the steps given in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1) before trying out the things on this page. Uploading the web page, which we did in Part 1, is a necessary step if Dreamweaver is going to handle the web addresses (URLs) of your images correctly. This chapter assumes that you have completed the steps in Part 1.
Requirements
You will need the following to complete this tutorial:
1. A small image to act as the logo of your website
You will need a small image to place on the top left hand corner of your web page. This image will serve as your site's logo. It will appear on every page of your website.
If you are designing a company website, chances are that your company already has a logo. If you don't have an image file for the logo, either scan it or take a digital photograph of the logo for your use in this chapter.
If you don't have a logo yet, create one using your favourite graphics drawing software or draw one on paper and scan it or take a digital photo of it. You will need a program that can produce either PNG, GIF or JPG files. If you don't already have a drawing or painting program, you can find a list of free ones on thefreecountry.com's Free Drawing and Painting Software page.
When creating your logo, note the following:
o Try to keep the width and height of the image small. There are no fixed size stipulations for a logo, but if your logo is too wide or tall, you will have a hard time fitting it into your web page. If the picture you have is too big, try resizing it in your graphics software.
o If you really have no idea what to put in your logo, just create an image with the name of your site on it.
2. Product images or other pictures (optional)
If you want to place other pictures on your web page, for example, photos of the product you're selling, or your own photo, you will also need to have them in either the PNG, GIF or JPG format. Don't worry if you don't have any picture or photo of this sort. This part is entirely optional.
Adding Images to Your Dreamweaver Page
3. In the right column, you should be able to see "index.html" in the list of files that belong to your project. Doubleclick it to open the file.
4. At the top of the page is the name of your website, which you entered in the first chapter. Place the text cursor to the left of the name. That is, click on the name, and move your cursor to the leftmost position using the left arrow key on your keyboard. You will be inserting your logo at this position.
5. Choose "Insert | Image" from the menu. If you recall from the previous chapter, "Insert | Image" means that you click the "Insert" menu, then click the "Image" item on the menu that appears. A dialog box will appear. You should see the image or images that you previously saved in the folder. If you have more than one images in the folder and are not sure which is the one you are going to use for your logo, you can click the name of the image once. A preview of the image will appear in the dialog box, making it easier for you to select the correct image.
6. Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OK" button.
7. A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a brief description of your image. The description will be displayed for visitors browsing with graphics disabled. It will also be the text that is read aloud by screen readers. The latter are used by visually impaired people visiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise to always give your graphics a brief description.
8. Since this image is merely your site's logo, you can either type into the "Alternate text" field your company's name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as you type.
9. Once you've typed your "Alternate text", click the OK button. Ignore the "Long description" field.
10. Your logo should now appear before your company name or your site name. If you find the logo is too big, and you want to redo it, simply click it once and hit the DEL key. Recreate your logo as needed, save it into the website folder and repeat the above procedure.
11. At this point, you will probably find that the logo is uncomfortably close to the name of your website. To introduce some space between the logo and your site name, click the logo once to select it. At the bottom of your Dreamweaver window, you should a panel labelled "Properties" containing information about your image (see picture below).
Locate the "H Space" edit box and enter "5" (without the quotes). Press enter. Notice that some space has been inserted between your image and your website title. If you think 5 is too much or too little, you can experiment with other values in this box. Basically, a larger value means that more space is inserted, while a smaller value shrinks the amount of space between your picture and the surrounding material.
12. That's it. You've now added a logo for your web page, making it look slightly more professional.
13. (Optional Step) The same technique that you used here to add a logo and be used to add other images to your web page. For example, you can use this method to add pictures of your products in the main body of the web page.
Let's say for example, that you are using the following text in the main part of your web page.
Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.
(If the text seems familiar, it's because I used it as the sample text in the previous chapter.)
If you wanted to insert a picture of a product so that it appears as a small thumbnail just beside the block of words "Dreamweaver Site: This..." (etc), place the cursor just before "Dreamweaver Site" (use to mouse to click that spot). Click "Insert | Image". Type the alternate text for your product when the Alternate Text dialog box appears. Click OK.
Notice that the words do not exactly flow over to the right of the image. To make all the words appear to the right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set to "Default". Set it to "Left".
The image should now be placed completely to the left of the text, with the words filling in the space on the right.
If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as before. You can also adjust the "V Space" to change the vertical space between the image and the words. If you don't know what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" box to see what happens. You can always delete the value again if you don't like the result.
14. Before you continue to the next section, save your page with "File | Save".
15. You should now upload (ie, publish) the updated web page to your web host. Since you have already set up everything in the previous chapter, all you have to do at this point is to click "Site | Put" from the menu. If Dreamweaver prompts you to save the site before "putting", do so. If you are asked whether you should put "dependant files", click "Yes" to allow Dreamweaver to publish your images and CSS files as well.
16. Finally, check your website using your browser. Congratulations. Your website now looks more professional with the addition of a logo and some images for your products or yourself.
Dreamweaver Tutorial 3: Adding Links, Change Fonts and Colour
Hyperlinks, Fonts, Styles, Sizes and Background Colour
In this chapter, you will continue to use Dreamweaver to augment your site and add functionality to it. In particular, you will learn how to
- add links or hyperlinks to your web page, allowing you to link to other pages on your website as well as on the Internet;
- change font faces, styles, sizes and colour;
- change the colour of the background.
Adding a Basic Navigation Menu to Your Sidebar
So far, all our modifications to the initial page have been to the header, where we added your site logo and site name, as well as to the main body, where we added information about your website and products. Up to this point, the leftmost column of your web page still contains the default placeholder text that Dreamweaver CS3 inserted when it created the page.
Dreamweaver refers to the leftmost column as the "sidebar". Most websites, like thesitewizard.com, insert a navigation menu into this space. A navigation menu typically links to the certain important pages on the website, such as the home page (the page you're currently designing), the site map, the "About Us" page, and the "Contact Us" page. If the site has a large number of pages, it will also link to the main sections.
In other words, a navigation menu, in its most basic form, is merely a series of links to certain other pages of your website. For this chapter, we will create a simple but fully-functional navigation menu. In the next chapter, you will modify that menu to use buttons somewhat like those you see on thesitewizard.com and other websites. However, for now, it is important for you to work through the process of adding links to pave the way for that advanced menu of chapter 4.
1. Start up Dreamweaver, if you have not already done so.
2. As before, open your index.html page. You can do this by doubleclicking the filename in the right column of your Dreamweaver window.
3. In the left column, you will see a bold subtitle with the words "sidebar1 Content". We do not need this header, so we will delete it. To remove it, use your mouse and drag it across the words "sidebar1 Content" selecting it. Notice that near the bottom of the Dreamweaver window, just above the "Properties" panel, the word "<h3>" is highlighted.
For convenience, I shall refer to this bar, where you can see the highlighted "<h3>", as the status bar. The status bar contains useful information about where your cursor is currently located in the raw HTML code that Dreamweaver generates behind the scenes for you.
Click the highlighted "<h3>" word - that is, move your mouse over the "<h3>" tag, and click the mouse button. A single click will do the trick. Then hit the DEL key. This will not only delete the words "sidebar1 Content", but it will also remove the code marking off that section as a subtitle.
4. Now delete the rest of the text in the side bar. Simply select all of it with your mouse, and hit the DEL key.
5. With your text cursor still in the side bar, click "Insert | Hyperlink". That is, click the "Insert" menu, and then click the "Hyperlink" item on the menu that appears. A dialog box appears, asking you for the details of the link.
6. Enter "Home" (without the quotes) into the box entitled "Text:". Then enter "index.html" (without the quotes) for the box entitled "Link:". Make sure you enter the "index.html" exactly as I specified, with no capital letters (no uppercase letters), no spaces and no quotes. Click OK.
7. You should see a link appear in your side bar. When your page is published onto your web server, and users click the link, they will be brought to the "index.html" page of your site. We have added the "Home" link even though you are already at index.html because it is good policy to have a standardized navigation menu on your site - that is, we want all the pages on the site to have exactly the same navigation menu. It reduces confusion in your visitors when they want to hunt for certain menu items.
8. At present, the link is highlighted. Move the mouse cursor to the end of the word "Home" and click in the empty space slightly to the right of the word. The word "Home" should no longer be selected. Look at the status bar. If the last item in the status bar is "<p>", you can proceed to the next step. If the last item is "<a>", you need to click a little futher into the empty space to the right of "Home", but still within the side bar column.
9. Hit the ENTER (or RETURN) key to create a new line.
10. Using the above procedure, create links to the following pages as well.
- Text: About Us, Link: aboutus.html
- Text: Contact Us, Link: feedback.html
- Text: Site Map, Link: sitemap.html
If your website is not a company website but a personal one, you can use "About Me" instead of "About Us" if you wish. However, in order to avoid confusion later, I recommend that you keep the filenames that I supplied. That is, don't change "aboutus.html", "feedback.html" or "sitemap.html". More importantly, your filenames should not include spaces or capital (uppercase) letters. Using spaces or capital letters in your filenames introduces a variety of needless complications down the road.
11. Notice that the side bar only extends as far as your last link. If you want the side bar to extend even further, keep adding blank lines till you're satisfied with the length of that column.
At this point, your main page is fully functional. That is, it contains a navigation menu with working links and a right column that has the information you want your visitors to read. At present, of course, those links lead to nowhere, since you have not created the pages for those links yet. (The pages will be created in a later chapter.)
It is also possible to add a link to a web page that is not on your own website. For example, to link to thesitewizard.com, simply follow the procedure above, but instead of typing a relative link like index.html or the like, you have to give a full URL. Enter into the "Link" box "http://www.thesitewizard.com/" (without the quotes), and type "thesitewizard.com" into the "Text" box.
How to Make an Image into a Clickable Link
On many websites, the logo of the site is actually a clickable link. For example, if you were to check my logo at the top of this page, you will see that it is actually a link to thesitewizard.com.
It's very easy to make your logo into a link. Simply select the logo by clicking it. In the Properties pane at the bottom of the window, look for the "Link" box. Enter the address of your website, for example, "http://www.example.com/" (without the quotes) into that box. Alternatively, you can enter a relative link, like "index.html". Next, look for the "Border" box. Enter "0" (zero, without the quotes) into that box. This prevents certain browsers from putting a blue border around your image.
How to Change Font Typefaces, Sizes, Style and Colours
Dreamweaver allows you to change a various aspects of the text that is displayed on your page, including the font typeface, size and colour.
· Changing the Font Typeface
To change the font of a particular piece of text, first select the relevant text. With the text selected, look at the Properties panel at the bottom of the window. In the box labelled "Font", you should be able to see the default font selection, "Verdana, Arial, Helvetica, sans-serif". This means that when your visitor arrives at your site, your text will be displayed using the Verdana font if he has it available on his system. If his system does not have the Verdana font, the web browser will attempt to use the Arial font. In non-Windows systems, these fonts are unlikely to be available. In such a case, the browser will use the third font face specified on the list, Helvetica. If none of the named fonts are on the system, your page will be displayed in any sans-serif font the browser can find.
To change the font, simply click the down arrow in the drop down box and select any of the suggestions given. Dreamweaver lists the sets of fonts commonly used by webmasters. Each set contains a list of fonts that are somewhat similar to one another, so that if one is not available, the alternative will (hopefully) not make your website look too drastically different.
Important note: although Dreamweaver allows you to add to the list by clicking the "Edit Font List" item in the drop down menu, think carefully before you add some esoteric font and use it for your website. If you use a font that only you and a few people have on their system, and don't specify commonly available alternatives, the web browser will simply use its default font (which varies from browser to browser and system to system) to render your web page. This will result in your page looking less-than-ideal for the majority of your visitors.
· Changing the Font Size
Beside the "Font" drop down box is the "Size" box. This allows you to change the font size of the currently selected text. By default, the font size is set to 100%, which means that the font will display in its normal system-dependant default size. If this size is not satisfactory to you, you can change the value, either by typing in the number you wish, or selecting one of the predefined sizes from the drop down box.
There are a variety of ways to specify the font size. You can specify in terms of percentage of the original size, pixels, points, etc. I recommend that you stick to using either "ems" or "%" unless you have specific requirements and know what you're doing.
Be careful about making your font sizes too small. You may have superb eyesight, but remember that your web page is viewed by people of varying ages and visual capability. Elderly visitors as well as users with poorer eyesight may not be able to read your page if the text is too small.
· Changing the Style of the Text: Bold and Italics
To make a particular piece of text bold, select the text and click the "B" button in the Properties panel. Likewise, if you want to italicize your text, select it and click the "I" button instead.
· Changing the Colour of the Text
Changing the colour of your text is equally easy. After you select the text, look at the Properties panel. You should be able to see a black square beside another box that reads "#000000". To change the colour of the text, click the black square and select the colour. Be careful to choose a colour that contrasts with your background colour.
How to Change the Background Colour
· Changing the Background Colour of the Whole Page
If you want to change the background colour of the whole page, click the "Page Properties" button at the bottom of the Dreamweaver window. Click the "Background color" square, currently set to grey, and change it to whatever colour you wish. Note though that this only changes the parts of the window that are not covered by the header, the side bar, the main content section and the footer. If you don't know what I mean, just try it. You can undo the changes you make by clicking "Edit | Undo" (or more specifically, "Edit | Undo Set Page Properties") if you don't like the colour change.
· Changing the Background Colour of the Side Bar, Main Content Section, Header and Footer
As far as I can tell, there is no easy way from the menus or buttons to change the background colour of the side bar, main content section, header and footer. For those who feel that the existing colour is not satisfactory, follow the guide below. Otherwise, feel free to skip this section.
o Changing the Background Colour of the Side Bar
Click somewhere in the side bar. Look at the status bar and click "<div#container>". Click the "Edit CSS" button in the Properties panel. The CSS panel on the right side of Dreamweaver should expand when you do so. Look for the item called "background" in that panel and doubleclick it. A dialog box should appear. Click the box beside the "Background color" to change the colour.
Warning: unlike many other operations in Dreamweaver, there doesn't seem to be any way to undo the change with "Edit | Undo" except to set it back to its original colour manually.
o Changing the Background Colour of the Header and Footer
To change the colour of the header, click somewhere in the header. Locate "<div#header>" in the status bar and click it. Again, click the "Edit CSS" button, then doubleclick "background" in the CSS panel on the right side of the screen. You should be able to change the background colour from the dialog box that appears.
Repeat the same procedure for the footer if you wish to change its background colour too. In the case of the footer, though, you will have to locate "<div#footer>" instead of "<div#header>".
Warning: again, there's no way to undo the change with "Edit | Undo".
o Changing the Background Colour of the Main Content Section
The background colour of the main section of your web page, which contains the bulk of your text, cannot be modified in the same way as the other sections.
First, click somewhere in the main section of your web page and click "<div#mainContent>" in the status bar.
On the CSS panel on the right side of Dreamweaver, look for the line saying 'Properties for ".twoColLiqLtHdr .mainContent"'. Move your mouse to the line immediately above the words and drag it upwards until you can see the "Add property" link below. Click "Add property". In the drop down box, select "background-color". Click the colour box beside it to set the colour.
Once again, changes you make here cannot be undone using the usual "Edit | Undo" method.
Publishing Your Web Page
Now that you have completed adding a basic navigation menu, changing the fonts, styles, sizes and colours of your text, your page is ready for publication. As before, upload (publish) it to your web server by using "Site | Put".
Test your pages in your web browser. At present, although you have a functional navigation menu, there is no point clicking any of the internal links on it since you have not yet created any of the pages they link to. On the other hand, if you have linked to an external site like thesitewizard.com, clicking on the link should work correctly.
Dreamweaver Tutorial: How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS3
Part 4: Using Spry to Add a Navigation Menu Bar
In this chapter, you will use Dreamweaver's built-in facilities to to add a fancy navigation menu bar to your website. This navigation bar will have rollover effects somewhat like what you see in thesitewizard.com's navigation menu when you hover your mouse over a menu item.
At the end of this chapter, your main page will be complete, and will form the basis for the other pages on your website. If you have previously used the example text supplied in this tutorial to create your main page, you should take the opportunity in this chapter to replace the text with the real content of your website. By this time, you would have learned enough to do most of the things a web designer typically needs to do on a web page.
Dreamweaver's Menu Bar Widget and the Spry Framework
Dreamweaver has a built-in facility for you to add a variety of interactive features to your website. This built-in facility uses a programming feature known as the Spry framework. The WYSIWYG web editor makes it easy for you to use the Spry framework without needing to know any programming. You simply use it as you have done in previous chapters.
How to Add a Navigation Menu Bar to Your Website
2. Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.
3. Locate your existing navigation menu, which at this time merely consists of a series of links to your home page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completely replacing them in this chapter.
In case you're wondering why we bothered to create those links if we were going to destroy them again anyway, hyperlinks are one of the most important features of a web page. As a webmaster, you will be continually creating hyperlinks to other pages on your site as well as links to other sites on the Internet. Not all these links will be placed in your navigation menu. It was thus important to cover that aspect of web design in the tutorial.
4. Make sure that the blinking text cursor is currently in the side bar. If it is not, click somewhere in the side bar. Now click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spry" item on the menu that appears, and finally on "Spry Menu Bar" on the submenu that appears.
5. A dialog box will appear asking you whether you want a horizontal menu bar or a vertical one. Since we are placing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and click OK.
6. A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of your Dreamweaver window, you will see that the text and links for menu items are displayed there.
7. Select "Item 1" by clicking on it, if it is not already selected. In the "Text" box, replace the words "Item 1" with "Home" (without the quotes). Replace the default "Link" text of "#" with "index.html" (without the quotes).
8. By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete it. Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.1. Do the same for "Item 1.2" and "Item 1.3".
9. Now do the same with the other items, replacing the text with the appropriate words for your site, and the links with the actual page names. If there are submenus, delete them as you did for Item 1. For your convenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has a three-level menu system. Delete all submenus (item 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - we won't need them.
- Text: About Us, Link: aboutus.html
- Text: Contact Us, Link: feedback.html
- Text: Site Map, Link: sitemap.html
10. Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, and that these files will need to be uploaded. Click "OK".
11. Now upload the page to your website using "Site | Put" and check the results in your browser. Hover your mouse over your menu buttons, and you will see that they change colour.
Customizing the Spry Framework's Menu Bar Widget
While adding the Spry Framework's navigation menu bar to your web page is a simple procedure under Dreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so under Dreamweaver's user interface. You will have to do it manually.
The fastest way to do this is to do it via Dreamweaver's "Code" view.
Dreamweaver has two basic ways you can work on your website. So far, you have been creating your site using the "Design" view. The "Design" view allows you to work on your web page using the What-You-See-Is-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page as a visitor would when they visit your website.
The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for your website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to your website. When your visitor loads your web page, the browser takes the "raw" code and displays it according to the instructions given in the "raw" code.
To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewing this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you should still take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using the Code view in a future chapter to insert your feedback form code.
To switch to the "Code" view, click "View | Code" from the menu. Instead of the web page that you are accustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down the page, you should be able to see your content amidst other characters. These other characters, things like "<p>" and the like, are the formatting code that tells the browser how it should render your page.
· Centering the Menu Bar
Scroll to the top of the index.html file in "Code" view. Locate the text "</head>" (without the quotes) somewhere near the top of the file. Place your cursor just before "</head>" on the same line. Hit ENTER (or RETURN) to insert a blank line. When you do this, the entire line with "</head>" should move downwards, creating a new blank line. Move the cursor to the blank line.
Now copy the text from the box below and paste it into the blank line you just created in Dreamweaver. To copy the text, select all the text in the box with your mouse, click the right mouse button (or if you use Mac OS X, hold down the Control key on the keyboard and click the mouse), and select Copy from the menu that appears. To paste it into Dreamweaver, switch to the Dreamweaver window. Make sure that your text cursor is in the correct location (in the blank line above the word "</head>"). Select "Edit | Paste" from the menu.
To check that your insertion works, click "View | Design" from the menu. You should see that the menu is now centred in the Design view. You can again click "View | Code" again from the menu if you want to return to the "Code" view.
· Changing the Colours of the Menu Bar
On the right side of the Dreamweaver window, in the Files pane, doubleclick the folder "SpryAssets". It should expand, showing you other files. Doubleclick the file "SpryMenuBarVertical.css". If the Files pane is too narrow for you to see what file you're clicking, hover your mouse over each file in turn until Dreamweaver displays a tooltip telling you the full name of the file.
Another file, full of unfamiliar code, will appear in the Dreamweaver's centre pane. This is the CSS code for your menu. The CSS code contains the formatting code for your menu.
Click "Edit | Find and Replace" from the menu. Type "ul.MenuBarVertical a" (without the quotes) into the big "Find" box. Click the "Find Next" button. Dismiss the dialog box by clicking the "Close" button. In the main window, you should see the highlighted words "ul.MenuBarVertical a". Under these words is a block of text enclosed between "{" and "}" (without the quotes). You should be able to find "background-color" followed by a value "#EEE" in this block. This line determines the colour of the menu when the mouse is not hovering over it. "#EEE" is the code for the greyish colour you see in the menu.
In the right hand column of the Dreamweaver window, in the CSS pane, you should be able to see "Properties for ul.MenuBarVertical a". If not, move your mouse over the line separating the blue "Applications" and the section above and drag it downwards to make more space. Under "Properties for ul.MenuBarVertical a", look for the line that says "background-color" (or parts of "background-color" if your window is too narrow to display the full text). To the right, you should see a square box followed by "#EEE". Click the square box to display the colour picker window and choose a colour of your choice.
To modify the colour of the menu button when a mouse moves over it, click "Edit | Find and Replace" again and search for "ul.MenuBarVertical a:hover". Dismiss the dialog box when you've located the text. Once again, you should be able to change the "background-color" property from the CSS pane in the right hand column.
When you're through making your changes, check the output by switching back to the index.html window. To do this, select "Window | index.html" from the menu. If you are still in "Code" view when you switch to the index.html window, switch to the "Design" view by selecting "View | Design".
When you are satisfied with the changes you have made, save your work with "File | Save All" from the menu. Note that you need to use "Save All" instead of "Save" because you have modified two files, index.html and SpryMenuBarVertical.css. Clicking "Save" alone will only save whatever file you happened to be working on last.
Again, use "Site | Put" to publish your work and check it out with your browser.
At this point, the home page for your website is complete. If you have been working on the page using some dummy text and pictures, such as the one I supplied in chapter 1, now is time to change them to your real content. You have learned everything you need to create a working main page that looks decent and works correctly. We will not be returning to this page in the next few chapters. Instead, we will be designing your other pages using this main page as the template.
Dreamweaver Tutorial: How to Use Templates to Manage Your Website in Dreamweaver CS3 (Part 5)
Part 5: Using Templates to Simplify the Management of a Multi-Page Website
In this chapter, you will use learn how you can use Dreamweaver's template management tool to create multiple pages on your site. The template tool goes beyond allowing you to use a standard design for all the pages on your site: its beauty lies in the fact that when you decide to change the design of your site, you merely have to change the template and Dreamweaver will automatically update all the pages that depend on that template. This simplifies the management of a website with many pages, allowing you to change common elements in a single place.
By the end of this chapter, you will have completed nearly all of your website, and uploaded the "About Us" page and the "Site Map" in addition to the "Home" page which you uploaded in the previous chapter.
How to Create a Template for Your Website in Dreamweaver
To make it easier for me to refer to different elements on your web page for this tutorial, I shall use the sample page shown in the picture below as a point of reference. Your page will of course look different. However, since both the sample and your page was created using the same procedure given in my Dreamweaver tutorial, the basic layout of the page should be fairly similar.
1. Start up Dreamweaver, if you have not already done so. Open your index.html file by doubleclicking it.
2. Click "File | Save as Template" from the menu. That is, click the "File" menu, and when the menu appears, select the "Save as Template" item. In the dialog box that appears, click the "Save" button.
3. Another dialog box will appear asking you whether you want to update links. Click "Yes". Dreamweaver will create a new folder in your computer's website folder called "Templates". If you look at the filename displayed at the top of the window, you will notice that Dreamweaver has replaced the current file with the template file. This is what we want, since we need to configure the template.
4. By default, Dreamweaver creates a template that has no editable regions. That is, when you create a page based on the template you just saved, you will not be able to change anything on that page. To fix that, we will need to specify areas of the template that can be modified.
5. Select the large bold text "Welcome" in the main content section of your document by dragging your mouse over it. Your page may not have the word "Welcome" of course, but if you look at the picture above, you should be able to locate its equivalent on your site. We will mark this text, "Welcome", as editable so that it can replaced with the title of whatever page you are creating.
6. Click "Insert | Template Objects | Editable Region" on the menu. A dialog box will appear. Type "Page title" into the box and click OK. Dreamweaver marks that section with a visual cue to show you that it is editable.
7. Select the paragraph under that page title and mark it editable as well. When prompted for a name to give that editable section, supply it "Page description".
8. Since the "Products" subtitle and the section that follows may not be present in the other pages of the website, we will mark the entire of this section as an "Optional Region". To do this, select the entire block comprising the "Products" subtitle, the picture underneath and the block of text beside the picture with your mouse. Click "Insert | Template Objects | Optional Region". A dialog box will appear. You can give this section whatever name you wish, since the content of your block will differ from my sample page. If in doubt, just accept the default name given.
9. Save the template by clicking "File | Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. Click OK.
The Home Page
At present, your home page, the index.html, is not regarded by Dreamweaver as being based on the template you created. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template.
The least troublesome way to do this is to overwrite your old index.html file with a new file created based on the template. You can do this with no loss of data since your template was created from the index.html file with no changes other than to define editable regions and the like.
1. Close all open files. To do this, click "File | Close All".
2. Click "File | New". A dialog box appears. You saw this dialog box in chapter 1. This time, look at the left column and click "Page from Template". The middle columns will show information about the template you created earlier, and the rightmost column will show a thumbnail picture of your template. Make sure that the checkbox for "Update page when template changes" is checked. Click "Create".
3. Click "File | Save As". A dialog box opens allowing you to specify the filename. Enter "index.html" (without the quotes) or just select the "index.html" file that appears in the window. Click "Save". A message box appears asking if you want to overwrite the existing file. Click "Yes".
That's it. You have replaced your old index.html with an identical copy, except that this time, Dreamweaver has recorded the index.html as being dependant on the template, so that the next time you modify the design of your template, this page will be automatically updated.
The "About Us" Page
Many sites, especially companies selling some goods and services on the Internet, have a page known as an "About Us" page. This page basically tells the customers more about the company and its business. On some personal sites, the "About Us" page contains information about the author of the site. It may even contain a brief resume or curriculum vitae (CV).
1. Click "File | New" again and select "Page from Template" if it is not already selected. Once again, click "Create".
2. Above your document, in the line with "Code", "Split", "Design" and "Title", replace the existing text in the "Title" field with "About Example.com" where "Example.com" is the name of your company. If yours is a personal site, you can simply call it "About Me" or "About Your-Name" (replace Your-Name with your name of course).
3. In the editable region which currently holds "Welcome" (or the equivalent on your page), replace it with "About Us".
4. In the editable region labelled "Page Description", enter whatever information you wish displayed about your company or yourself. Note that you are not restricted to a single paragraph. Just hit the ENTER key (or the RETURN key in Mac OS X) to create a new paragraph whenever you need.
For the purpose of this tutorial, I have used the following text. However, I strongly suggest you create your own content. There's no point waiting till the end of the tutorial before starting. With this chapter, you will have completed most of your website except for the "Contact Us" (feedback form) page.
Example Company was created in some century in some country for the purpose of something. At the moment, what that purpose is eludes us. We do know however that we exist. Or do we?
In any case, if you are reading this and are wondering what manner of company or website this is, know this: you are not alone.
(Seriously, this is just an example site created with the help of the Dreamweaver CS3 tutorial on thesitewizard.com.)
5. If you have defined an optional region like I have with the "Products" listing (see picture near the start of this article), and you wish to turn it off, select "Modify | Template Properties". A dialog box appears showing you the optional region you have defined. Select it (if it is not already selected) by clicking on its name. Then uncheck the box next to the words "Show OptionalRegion1" (or whatever name that you have given that region). Click OK. Your optional region should disappear.
6. Select "File | Save As" and type in "aboutus.html" (without the quotes) into the dialog box that appears. This is the same filename that we entered into the navigation menu bar, so now is not the time to be creative and start changing names or your menu will not work correctly.
Site Map
A Site Map is a comprehensive list of all the documents on your website. It is a useful tool for visitors who are looking for a particular page on your website but cannot find a direct link to it from whatever page they happen to be at. It is also good to have because it allows search engines a way to find all the pages of your website. I realise that at this point in time, you don't really have any pages to list in your site map other than those already in your menu bar. However, as a matter of good practice, you should still create a Site Map. In time, as you add more pages, the Site Map will become invaluable.
By now you should have no trouble creating a new page from your template. Do so. Replace the "Title" field with "Site Map of Example.com" (use your site name of course) and "Welcome" with "Site Map". In the "Page Description" field, create a list of links to all the other pages of your website, one link per line. If you have forgotten how to do so, you can find the instructions in chapter 3. If you have an optional region you don't want, remember to remove it. Finally, save the page as "sitemap.html" (without the quotes).
Publishing the Nearly Complete Website
Now that you have multiple pages to upload, it probably isn't efficient to use "Site | Put" to upload files, since that is more useful for uploading individual pages. Instead, click "Site | Synchronize Sitewide". A dialog box appears. Make sure that in the "Synchronize" box, the "Entire 'Example Company' Site" (where "Example Company" will be replaced by the site name you gave in chapter 1) option is selected. In the "Direction", check that "Put newer files to remote" is selected.
Click "Preview". When a dialog box appears with the list of files that will be uploaded, click the right mouse button (Control-Click in Mac OS X) on the template file (the file in the "Template" folder). Select "Ignore Selection" so that Dreamweaver does not upload your template file. Click OK. Dreamweaver will then upload the files you specified.
How to Modify/Revise the Template in Dreamweaver
With Dreamweaver's template system, modifying the design of your site is trivial. For example, let's say that you have decided you want to show your appreciation to thesitewizard.com for the help you received, by adding a button link to thesitewizard.com, like the following, to your side bar.
Copy the above button to your website folder. Simply click the right mouse button on the image, select "Save" (or equivalent) from the menu, and save it into your website folder.
Open your template for the site. Click in the space just after your navigation menu in the side bar. Click "Insert | Image" from the menu and select the image that you have just saved. In the "Alternate text" field, type "thesitewizard.com - Tutorials for Webmasters". Click the "OK" button. In the "Properties" pane at the bottom of the page, enter "http://www.thesitewizard.com/" into the "Link" field. In the "Border" field, enter "0" (zero, without the quotes). Just next to the box where you entered "0" for the border are three small buttons. Click the middle button (the "Align Center" button). Your button should now be centered in the side bar.
Select "File | Save". Click "OK" to the message box that appears. Another dialog box appears, asking you whether you want to update all the files based on the template. Click "Update". Another dialog box appears. Click the "Start" button. Finally, click the "Close" button.
When everything is complete, you can open all the pages on your site to see that Dreamweaver has updated every page on your website with your changes.
Once you are done, upload all the pages of your site using the "Site | Synchronize Sitewide" procedure described earlier.
Dreamweaver Tutorial: How to Add a Feedback Form to Your Website in Dreamweaver CS3
Part 6: Adding a Contact Form to Your Website
In this final chapter of thesitewizard.com's Dreamweaver Tutorial, you will be adding a feedback form, or contact form, to the website that you have created. By the end of this chapter, you will have not only completed the entire tutorial, but you will also have a fully functional website with a working feedback form.
Overview: How a Feedback Form Works
Having a working feedback form on your website involves more than simply designing a web page that has a form. By way of overview, here are some of the major elements that you will need. You do not need to understand every single detail at this point since I will take you item by item through the whole process later. However, it is useful to have the big picture in mind so that you don't get lost in the forest of details later.
1. The first thing you will need is a web page containing the feedback form. You will be designing most of this page using Dreamweaver. By itself, the form doesn't do anything at all: your visitors can click the "submit" button till they are blue and you will still not receive their message. The task of sending the form contents as an email message lies with what is known as the feedback form script.
2. The feedback form script is essentially a computer program that processes the contents of the form sent by your visitor's web browser. It takes the raw message and formats it as a regular email message and then sends it via email to the webmaster. This script has to run on the web host's server (ie, computer) itself. You will be using a script custom designed for you by thesitewizard.com's Feedback Form Wizard. However, you will have to find a web host that supports the running of such scripts yourself. Not all web hosts allow scripts to be run on their server (computer).
3. Next, we have the "thank you" page. After the browser sends the message to the script, you will want to thank your visitors for their email. Even if you don't feel particularly grateful, you will still need some sort of page that will inform your visitors that their message has been successfully sent. This page can be easily designed using Dreamweaver.
4. Finally, you will need an "error" page. If a visitor mistakenly clicks the "submit" (or "send") button before he/she has finished typing essential elements such as their email address, the feedback form script will direct them to a page telling them that they have missed out components required in a message. Like the "thank you" page, this is a straightforward web page that can be designed with Dreamweaver.
How to Add a Contact Form to Your Website in Dreamweaver CS3
1. Get a web host with PHP 4.1 or above
Your feedback form will not work at all if you use a web host that does not allow you to run your own programs (scripts) on their computers. Basically, if you use the free web space provided by your Internet Service Provider (such as AOL), or if you use a free web host, you will not be able to get your feedback form working. Note that there are even some commercial (paid) web hosting that do not allow you to run your own scripts.
If you are looking for a suitable web host, you need to find one that supports the running of PHP scripts with an installed PHP that is version 4.1 or above. Do not use free web hosts, even if they have PHP support, since many of them do not allow PHP scripts to send email.
2. Generate a custom feedback form script
Read through the Wizard's introductory page. Choose the option to create a PHP feedback form script. Although you can generate any of the other types of feedback form scripts, for the sake of simplicity, this tutorial will only focus on the installation and creation of a feedback form that uses the PHP feedback form script.
In the next page, enter the information requested by the form. Modify the URLs supplied below to contain your real domain. For example, if your domain is "suchandsuchaname.com", use that instead of the "example.com" given below.
o Email: (enter your email address)
o URL of Feedback Form: http://www.example.com/feedback.html
o URL of "Thank You" Page: http://www.example.com/thankyou.html
o URL of "Error" Page: http://www.example.com/error.html
Finally, read the licence agreement. If you agree to the terms, indicate it in the form, and click "Generate script" to continue.
Do not close the web page that appears. Leave it open while you work on the next few steps.
3. Saving the script
Start up Dreamweaver. Select "File | New" from the menu. That is, click the File menu, followed by the "New..." item on the menu that appears. Click "Blank Page" from the leftmost column. In the "Page Type" column, select the "PHP" item. Click "Create".
Select "View | Code" from the menu to switch to Code view. Note: this step is very important. If you omit it, your feedback form will not work.
Switch to your web browser, and locate the section that has the header "Feedback Form Script". Select everything in the box below. If you are using Windows, one easy way to select everything is to simply click your mouse somewhere in the box and type Ctrl+A (hold down the Ctrl key and type 'a'). Then copy the text you have selected to the clipboard. To do this, use Ctrl+C in Windows, or use "Edit | Copy" from the browser's menu. If your browser does not have an "Edit" menu, try clicking the right mouse button in the box and selecting "Copy" from the menu.
Switch back to Dreamweaver, and select "Edit | Paste". The entire content of the script generated by the Feedback Form Wizard appears (in various colours). Do not attempt to beautify it, add or change anything. Do not even add a blank line. This is not the user-visible portion of your web page. We will come to that later.
Note: if you do not see the output displayed in a variety of colours, you have omitted the very important step mentioned above. Close the document without saving it and restart this section again.
Select "File | Save As" and type "feedback.php" into the "File name" box. Do not use any other name. Do not use capital letters. Select "View | Design". You should see a blank page. Do NOT type anything here. Click "File | Close" to close the file.
4. Creating the feedback form web page
Select "File | New", choose "Page from Template" and click "Create". Modify the title field to "Contact Us". Modify the "Page Title" editable region to read "Contact Us" as well. Delete all the text in the "Page Description" editable region.
Now switch to the browser window that contains the generated code from thesitewizard.com's wizard. This time locate the section in the output generated by the wizard that reads "HTML Code". Click in the box below those words, select everything in the box and copy it to the clipboard.
Switch back to Dreamweaver. Make sure your cursor is in the "Page Description" editable region. Select "View | Code" from the menu. Dreamweaver will switch to the HTML code view. Your text cursor should be just after "<p>" and before " <p>". Using the arrow keys in your keyboard, move the cursor to the end of that line (that is, after the "<p> <p>". Then select "Edit | Paste". The text from thesitewizard's feedback form wizard should be inserted at that point.
Now use "View | Design" to switch back to the Design mode. You should now be able to see the feedback form in your web page.
To widen the input field field of "Name", click somewhere in the box next to "Name". In the "Properties" pane at the bottom of the screen, change the default "Char width" of "25" to a value that better suits your page. For example, increase the number if you want the box to be wider and decrease it if you want it to be narrower. Repeat the process with the "Email address" field so that both the "Name" field and the "Email address" fields have the same width on the screen.
Similarly, you can change the width and height of the "Comments" box. Click the box under the word "Comments". In the "Properties" pane, change the "Char width" to a more appropriate number than "25" if you wish. To change the default height of the "Comments" box, look for the "Num lines" box in the "Properties" pane and change it to the height you want to have. You can experiment with the values until you are satisfied with the appearance of the boxes on your page.
Note that modifying the size of the various boxes in the form merely changes the appearance of the box on the screen. These sizes do not affect how much text your visitor can type into the field. Most browsers will simply scroll the text if the box is not wide or tall enough for what the visitor wants to type.
If you like, you can also change the text appearing on the button. By default, this text is "Send Feedback". To change it click on the button. In the "Properties" pane at the bottom of the Dreamweaver window, change the text in the "Value" box to some other text if you wish.
5. Creating the "Thank You" and "Error" pages
By now, you should have no trouble creating new pages from your template, having done so a few times already when creating the other pages of your site. Use the same method that you have been using in the past and create two new pages: the "Thank You" page and the "Error" page.
The "Thank You" page is displayed by the feedback form script after your visitor clicks the "Send Feedback" button. It typically thanks your visitor for sending his comments. The main purpose of such a page is to provide feedback to the visitor that his comments had been successfully submitted. You may write anything you wish for this page. If you don't know what to say, you may use the following text:
Thank you for your comments. If your message requires a reply, I typically reply within 24 hours of the receipt of the message.
The "Error" page is shown whenever the visitor submits the form without filling one of the fields. For example, if he fails to enter an email address when the form is submitted, the "Error" page will be displayed instead of the "Thank You" page. Your error page should inform the visitor that he needs to complete all the fields in the form, and that he is to click the browser's "Back" button to go back to the form to repair the error. If you don't know what to say, you may use the following text:
There were errors in the form that you submitted. Please complete all the requested information before submitting the form. Click the 'Back' button on your browser to return to the form to fix the error.
Save your "Thank You" page with a filename of "thankyou.html" (without the quotes) and your "Error" page with a name of "error.html" (without the quotes). These are the names you supplied earlier to the Feedback Form Wizard. The customized script that the wizard created has the names hardcoded into it. You should therefore not change the names at this point, or the script will not work properly.
6. Publishing the Feedback Form Script, the Feedback Form, and the Thank You and Error pages
Once you are satisfied with the changes you have made, upload all the new pages by using "Site | Synchronize Sitewide" from the menu. As before, click "Preview" and remember to choose "Ignore selection" for the template file.
7. Testing the Feedback Form
When all your files have been published, you should test your feedback form to make sure that it works. If something goes wrong, check the Feedback Form Wizard FAQ (Frequently Asked Questions) for the answer. You should also reread this chapter of the tutorial to see if you missed anything.
Conclusion
Congratulations! With this chapter, you have completed the basics of using Dreamweaver to design a website. You have also created a fully functional site, complete with main page, an "About Us" page, a "Site Map" and a working "Contact Us" form. More importantly, you now have the knowledge to use Dreamweaver to create, design and publish new websites as and when you wish.
