Creating Reusable Assets and Forms - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 381

Add a meta
description,
keywords, and a
contact form to
a Web site for a
life coach.

Case Problem 3

Data File needed for this Case Problem: form_test.html

Success With Tess Tess wants you to add keywords and meta descriptions to the pages
of her site so her site gets better placement in search engines. She also wants you to add
a form to the contact.html page so that potential and current clients can send her an
e-mail from the Web site. You'll use the form_test.html fi le as the form action so that you
can test the form.

1. Open the Success With Tess site you modifi ed in Tutorial 5, and then open the
index.html page in Design view.
2. Add the following keywords to the home page: success with tess, transition life
coaching, executive coach, personal empowerment training, life coach, personal
development, team building, family coaching . ( Hint : Use all lowercase letters and
separate each word or phrase with a comma.)
3. Copy the entire list of keywords you added to the home page, and then save and
close the page.
4. Open each of the following pages: about_tess.html , coaching.html , contact.html ,
specials.html , paste the list of keywords, and then save and close the page.
5. Open the index.html page, and then add the following meta description: As your life
coach, I can help you take control of your personal and professional life and teach
you the techniques you need to create the life you've dreamed of living.
6. Copy the meta description, and then save and close the page.
7. Open each of the following pages: about_tess.html , coaching.html , contact.html ,
specials.html , paste the description, and then save and close the page.
8. Open the contact.html page, place the insertion point after the last line of text, and
then press the Enter key to create a new line in the content div.
9. Copy the form_test.html page located in the Tutorial.06\Case3 folder included with
your Data Files into the local root folder.
10. Add a form area in the content div, and then set the form attributes, using
contact_form as the form name box, the form_test.html page in the local root folder
as the action, GET as the method, application/x-www-form-urlencoded as the
enctype, and _blank as the target.
11. In the form area, create a table with 5 rows, 2 columns, 100% table width, 0 border
thickness, 0 cell spacing, 10 cell padding, no header, and Success With Tess contact
form. To contact by phone call [phone]. as the summary.
12. Align the left column of the table to the Right and Top, and then align the right col-
umn of the table to the Left and Top.
13. In the upper-left cell, type fi rst name: , move the insertion point to the next cell, and
then add a text fi eld into the form. Select the text fi eld, and then type fi rstname in
the TextField box in the Property inspector. Use the default character width and max-
imum characters values.
14. In the left cell of the second row, type last name: , press the Tab key, and then add a
text fi eld into the form. Select the text fi eld, and then type lastname in the TextField
box in the Property inspector. Use the default character width and maximum charac-
ters values.
15. In the left cell of the third row, type email address: , press the Tab key, insert a text
fi eld into the cell, select the text fi eld, and then type email in the TextField box in the
Property inspector.
16. In the left cell of the fourth row, type comments: , press the Tab key, insert a text area
into the cell, select the text area, type comments in the TextField box in the Property
inspector and leave the other settings at the defaults.