Tutorials

This page will guide you through creating web pages using Adobe Dreamweaver. Each tutorial will be in PDF format. toc = = = =

= = = = =Lesson Three Tutorials=

1- Adding a feeback page
If you want to create a way for the **end user** to let the website **owner** how they felt about their visit to the site, you can create a **Feedback Page**. Complete the following steps: Open the index.html page Save the page to a folder called Work in your student folder on the (H:) drive Replace the heading text with the word “Feedback” Replace the paragraph text with the following: // “Thank you for your interest in our school. Please send us comments using the form below.” // Hit the Enter key to add a new line of text Save your work

From the Insert drop down menu, choose Form > Form // You should get a red dotted line on the page // From the Insert drop down menu, choose Table Give the table two (2) **rows** Give the table two (2) **columns** Make the **table width** 100% Make the **border thickness** 0 <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Make the **cell padding** 5 <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Make the **cell spacing** 0 <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Click OK <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Save your work

<span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">In column 1 of row 1 type “First Name” <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Hit the tab key twice to go to column 1 row 2 <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">In column 1 row 2 type “Last Name” <span style="font-family: Tahoma,Geneva,sans-serif;">// You will have to tab twice after each entry to add a new row and column in the table // <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">In column 1 row 3 type “Phone Number” <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">In column 1 row 4 type “e-mail address” <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">In column 1 row 5 type “comments” <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Hit the tab key twice to add a new row <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Drag the center divider to the left to reduce the width of row 1 and increase the width of row 2 <span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">Save your work

<span style="font-family: Tahoma,Geneva,sans-serif;">// Now you will add the forms for data to be entered into //

<span style="font-family: Tahoma,Geneva,sans-serif;">From the Insert drop down menu, choose Form > Text Field <span style="font-family: Tahoma,Geneva,sans-serif;">In the Input Tag Accessibility Attributes dialog box, enter the following: <span style="font-family: Tahoma,Geneva,sans-serif;">In the ID field, enter firstname (all one string) <span style="font-family: Tahoma,Geneva,sans-serif;">Leave the label field empty <span style="font-family: Tahoma,Geneva,sans-serif;">Select “No label tag” from the Style options <span style="font-family: Tahoma,Geneva,sans-serif;">Click OK <span style="font-family: Tahoma,Geneva,sans-serif;">Tab down to row 2 column 2 and repeat the process for each <span style="font-family: Tahoma,Geneva,sans-serif;">Last Name <span style="font-family: Tahoma,Geneva,sans-serif;">Phone Number <span style="font-family: Tahoma,Geneva,sans-serif;">e-mail Address <span style="font-family: Tahoma,Geneva,sans-serif;">When you get to the comments row do the following: <span style="font-family: Tahoma,Geneva,sans-serif;">From the Insert drop down menu, choose Form > Text Area <span style="font-family: Tahoma,Geneva,sans-serif;">In the Input Tag Accessibility Attributes dialog box, enter the following: <span style="font-family: Tahoma,Geneva,sans-serif;">In the ID field, enter comments <span style="font-family: Tahoma,Geneva,sans-serif;">Leave the label field empty <span style="font-family: Tahoma,Geneva,sans-serif;">Select “No label tag” from the Style options <span style="font-family: Tahoma,Geneva,sans-serif;">Click OK <span style="font-family: Tahoma,Geneva,sans-serif;">Tab down to create one more blank row <span style="font-family: Tahoma,Geneva,sans-serif;">Click in column two of the new row <span style="font-family: Tahoma,Geneva,sans-serif;">From the Insert drop down menu, choose Form > Button <span style="font-family: Tahoma,Geneva,sans-serif;">In the Input Tag Accessibility Attributes dialog box, enter the following: <span style="font-family: Tahoma,Geneva,sans-serif;">In the ID field, enter submit <span style="font-family: Tahoma,Geneva,sans-serif;">Leave the label field empty <span style="font-family: Tahoma,Geneva,sans-serif;">Select “No label tag” from the Style options <span style="font-family: Tahoma,Geneva,sans-serif;">Click OK <span style="font-family: Tahoma,Geneva,sans-serif;">Save your work

<span style="font-family: Tahoma,Geneva,sans-serif;">Insert a new row before the button you just created <span style="font-family: Tahoma,Geneva,sans-serif;">Click in column 2 of the new row <span style="font-family: Tahoma,Geneva,sans-serif;">From the Insert drop down menu, choose Form > Checkbox <span style="font-family: Tahoma,Geneva,sans-serif;">In the Input Tag Accessibility Attributes dialog box, enter the following: <span style="font-family: Tahoma,Geneva,sans-serif;">In the ID field, enter catalog <span style="font-family: Tahoma,Geneva,sans-serif;">In the label field, type “Send me your current course catalog” <span style="font-family: Tahoma,Geneva,sans-serif;">Select “Attach label using “for” attribute” from the Style options <span style="font-family: Tahoma,Geneva,sans-serif;">Click OK <span style="font-family: Tahoma,Geneva,sans-serif;">Save your work

<span style="font-family: Tahoma,Geneva,sans-serif; font-size: 16px;">When you are finished you should have something that looks like this:



2 - Adding a Mail Script to your Feedback Page
In order to get your feedback form to work properly, you need to tell it what to do with the information input into it. This is called adding a "script" or instructions that tell the website how to handle the data.

Follow the instructions below: Open the file feedback.html in Adobe Dreamweaver (if it’s not already open) In a web browser, go to the site “[]” Find the “Free Version” link on the page Click on the link Right click on the Download (4.1KB) link Save the file to your computers desktop Open the zipped file Select the file FormToEmail.php Copy the file and paste it into your Work folder in your student folder on the (H:) drive When you are working with an actual website, you’ll need to paste any scripts like this one into the ROOT FOLDER of your site.

In Dreamweaver, click on the Submit button and change the view to Code In the code, find the tag. Below this tag, you will find the code for the form you created in the previous lesson. Go to the part of that line of code that says action="" In between the two quotes ("") type the following: FormToEmail.php (make sure you type it exactly as listed here. The script is case sensitive and will not work if entered incorrectly) Save your work, and close the file

Now you are going to assign an e-mail address to the form so that when the end user clicks the submit button, the information in the form will be e-mailed to the site owner.

Open the file called FormToEmail.php (make sure you open the file from your work folder and not the one on the desktop) Make sure you are in Code view mode Go to the line of code that says $my_email = ""; (line 101 or 102) In between the two quotation marks, enter the e-mail address that the site owner has given for you for people to contact them at. In this case, use CSitroon@monroecti.org Save your work

NOTE - There is no way for us to know whether or not this form actually works until a remote web server is set up for the completed site. As a web designer, you will not need to worry about this, unless you are also hired on to act as the company webmaster. In most cases, this will NOT happen. With the case of your current client (MCTI: Adult Continuing Education ), the IT department of the school will set this up. You only need to make certain you have attached the right script to the button.

Each of these tutorials is available in PDF form