Open your contacts.html in Dreamweaver CS4, while you see the contact form as below:

Click on the Name box as seen above, now look out for Windows in the main menu of your dreamweaver and under that you will find Behaviors, click on that as shown below:

Once you click on the Behaviors sub menu, you will be able to see the Behaviors table on the right side of your screen as shown below:

Now click on the “+” sign as circled in red in the above image.

Once you click on the “+”  sign you will see a drop down menu, now click on Validate form  as shown below:

Once you click on Validate Form, you will find a Validate Form screen flashing in the center of your screen as shown below:

Here you can define each field, by either checking the required value, for Name you can check the Anything checkbox, for email, you can click the Email address checkbox and for Phone you can click the Number checkbox and if you want all the information compulsorily, you can check the required value check box for all etc., Click the OK button, you’r done!

That’s it, you now know how to validate your contact PHP form in Dreamweaver CS4.

You will need to purchase a domain name and web hosting. We use Hostgator to host this site.

To upload your files:

• Click on the ‘Connect to remote host’ icon at the top of the files panel
  
• Click the + button to add a new server
  
• Enter any server name, your FTP address/ hostname, username and password (you will receive these when you purchase hosting).
  
• Click the ‘Test’ button
  
• Click the ‘Save’ button
• In the Files panel click the ‘Expand to show local and remote sites’ icon
  
• You will see an expanded File Window:
  
• Click to connect
  
• Dreamweaver will connect to your remote hosting server. You will see your remote hosting server on the left side and your local files on the right side.
• You may need to navigate to a ‘www’ or ‘public_html’ folder on your remote server.
• Select all the local files
• Right click and select ‘Put’
  

• You can also use the ‘Put’ icon at the top
• 
• A copy of all your website files will be stored on your remote hosting server.
• Using a browser, browse to your domain name. Your website should appear.
• Test to see if everything is working file.
• Configure your form to work using a script that will work on your server technology or a form service provider like those mentioned earlier.

Congratulations! You have built your website using Dremaweaver!

The best way to test the website is to actually see how it looks in the browser. It is a good practice to check the site in multiple browsers as some things which might work well in some browsers might not work so well in other browsers.

To test in a browser:

• File > Preview in browser > Firefox/ IExplorer

Some things to test for:

• Click on the main menu items and see if it links correctly to the appropriate pages
• Click on the footer menu items to check if each link links to the appropriate pages.
• Check if the headings are formatted correctly on each page
• Check if the text fonts are looking right on all the pages
• Check if the form fields are aligned correctly
• If you want you can do a spell check [Commands > Check spelling]
• Web page titles – these will appear in the top bar of the browser and by default will be ‘Untitled Document’. These can be changed by entering the page titles for each page in Dreamweaver in the ‘Title’ field.
  
• Another thing you will notice is that the text is sticking to the left side of the browser. This does not look professional. To add some space on the left and right side of the content area you can edit the content style with the following details:
  • Reduce the width to 90%
  • Uncheck ‘Same for all’ below Padding
  • Enter 5% for left and right padding

Save all the files including the style.css file [File > Save All]

Test the site again by previewing all the pages in the browser. If everything is OK, it is time to upload the files and make your site live.

We can give a style to the <label> tag. To do this:

• Create a style for the label tag
• Click ‘Box’ and enter:

• Width : 150 px
• Float: Left

• Click OK

• 
• The form looks better now:
  

Let’s push the submit button to align with the form fields. To do this:

• Create a new CSS style
• Select Class and name it ‘.btn’
  
• Box > Left: 150 px
  
• Select the button on the web page and select ‘btn’ from the drop down next to Class in the Properties panel.
  
• The button moves to the right and aligns nicely with the other fields:
  

To program the form to be sent to specific email addresses when filled, you will need to install a php or asp form script and point the form to it in the action field of the Properties panel.

The php/ asp script is out of the scope of this tutorial. However there are free service providers that take care of the programming for you as well.

Some of these free form service providers are:

• Bravenet Email Forms
• Response-o-Matic Forms
• EmailMeForm

• Open the contact-us.html page.
• Click in the area that you want the form to appear
• Insert > Form > Form
  
• A red dashed box will be visible in your page
  
• All the form elements need to be placed within this red box
• Insert > Form > Text field
• Label: Name
• Style: Attach label tag using ‘for’ attribute
• Position: Before form item
  
• Click OK
• The Name text field will appear in the web page
  
• Select the field by clicking on it
  
• Type ‘name’ in the Properties panel under ‘TextField’
  
• In the web page press the Enter button to go to the next line and insert another text filed labeled Email
• Insert a Text area [Insert> Form > Textarea] labeled Comments
• Insert a button with no label [Insert > From > Button]
• The form will now look like this:
  

HTML has various heading tags. Let us define the style of some of these specifically:

• H1 (Heading 1)
• H2 (Heading 2)

To define the style for the Heading 1 tag:

• Click the ‘New Style Rule’ icon at the bottom of the CSS styles panel.
• Selector Type: Tag
• Selector Name: H1
  
• Click OK
• In the ‘CSS Rule Definition’ window, specify the font size 18 px
• Set the color#FFBB2D
  
• Click OK
• Now select the heading text in your web page and apply the H1 tag by selecting Heading 1 from the Format drop down in the Properties panel.
  
• You will see that the style is applied to the heading text
  
• If you plan to have sub-headings in your webpages you can define the styles for the H2 tag and apply the Heading 2 format to them. Usually the font size would be smaller than the H1 tag font size.

All the visible content in the web pages will be between the <body> tag in HTML. We can specify the properties of this body tag in our style sheet so that all the text in our web pages display in the Verdana/ Helvetica font and are a size 12px.

To do this:

• Click on the ‘New CSS Rule’ icon at the bottom of the CSS Styles Panel
• In the ‘New CSS Rule’ window, under ‘Selector Type’, select ‘Tag’
• Under ‘Selector Name’, select or type ‘body’
• Click OK
• In the ‘CSS Rule Definition’ window for ‘Font Family’ select ‘Verdana, Geneva, sans-serif’
• For Font-size, type ’12′ and select ‘px’
  
• Click OK
• The style of the text in the web page will change. It looks better now!
  

• In the Files panel, double click index.html to open it.

• Select and delete the word ‘content’

• Type in your website’s home page text.

• See how your web page will look by previewing it in a browser [File > Preview in Browser > select the browser of your choice

Now lets us insert an image and align it right. To do this:

1. Click before the start of the text
2. Insert > Image > browse to the ‘image’ folder > select photo.jpg. The image will be inserted into the web page.
   
3. Now we need to align it right. Click on the image.
4. In the Properties panel, select ‘right’ from the drop down menu next to ‘Align’.
5. The image will be aligned right.

To link the footer menu items:

• First select ‘Home’ in the footer area
• Click the folder icon next to the link field in the Properties panel, and select index.html.
• You will notice that the Home link and turns blue

We need to create a style for the linked text in the footer div. To do this:

• Click on the ‘New Style Rule’ icon at the bottom of the CSS Styles panel.
  
• In the New CSS Rule Window select ‘Compound’ under ‘Selector Type’
• Enter “#footer a” under Selector Name
  
• Click the OK button
• Enter the following style details:
  
• You will notice that the Home link looks as it did before it was linked. Link the remaining 3 menu items to the respective html pages.
  
• The footer menu is ready. Save the template and update all pages.

Since our menus are in the template, let’s open the template file and create the links to the webpages in Dreamweaver.

If your template file is not already open, double click on template.dwt in the Files panel.

• Click on the  ‘Home’ image in the menu area to select it:
  
• In the Properties panel link to index.html, by clicking on the folder icon next to the Link field and then selecting index.html.
• Type 0 (zero) in the Border field otherwise there will be a blue border around the menu image.
  
• Similarly select the other 3 menu images and link them to the respective files.
• The main menu navigation is now ready.
• Save the template and all the website files created from the template [File > Save All]
• In the Update Template Files window click the Update button. This will update all the site pages that were created from this template so you don’t need to go into each page and make the changes again and again. This is the main advantage of using a Dreamweaver template as a base for all your website files.