Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 500

21. Preview the site in a browser, print preview each page, and then close the browser.
22. Upload the fi les to your remote server, and then preview the site over the Internet,
print previewing each of the pages.
23. Submit the fi nished fi les to your instructor.

Case Problem 2

Add a Spry
contact form to
a site promoting
the artwork and
poetry of Charles
Russell.

Data File needed for this Case Problem: form_test.html

Cowboy Art Society The Cowboy Art Society wants to be able to gather comments and
input from users of the Cowboy Charlie site. Moni asks you to create a contact.html page
for the site, add the page to the site's navigation, and then create a contact form in the
page using Spry form validations widgets. You will use the form_test.html page to test the
form before the page is added to the live site.

1. Open the Cowboy Charlie site you modifi ed in Tutorial 7, duplicate the poetry.html
page, and then rename the duplicate page contact.html .
2. Open the contact.html page in Design view, updating links, if necessary, and then
replace the word Poetry in the page title with Contact .
3. To the right of Poetry in the navigation text, add two nonbreaking spaces, type
Contact , and then add two additional nonbreaking spaces.
4. Create a link from the Contact text to the new contact.html page, removing under-
lines from the blank spaces, if necessary.
5. Copy the <span#nav> tag that surrounds all of the navigation text and blank spaces,
and then save the page.
6. Open each of the other pages in the site, select the existing navigation text, paste the
new navigation text to replace the selected navigation text, and then save and close
each page.
7. Return to the contact.html page, change the heading to Contact Us , and then delete
the content below the heading.
8. Below the heading, insert a form area into the page. ( Hint : Click the Form button in
the Forms category of the Insert panel.)
9. Select the form, enter contact as the form ID, set the method to GET, set the enctype
to application/x-www-form-urlencoded, and then set the action to the form_test.html
fi le located in the Tutorial.08\Case2 folder included with your Data Files, copying
the fi le into the site's local root directory.
10. In the form area, insert a Spry Validation Text Field, enter name as the ID, enter
Name: as the label, select Wrap with label tag as the style, and then select Before
form item as the position.
11. In the Document window, select sprytextfi eld1, and then, in the Property inspector,
change sprytextfi eld1 to namefi eld , set Min chars to 2, set Max chars to 100, and
check the Required check box, if necessary.
12. In the form area, add a new line below the namefi eld, insert a second Spry Validation
Text Field, and then enter email as the ID, enter Email Address: as the label, select
Wrap with label tag as the style, and then select Before form item as the position.
13. In the Document window, select sprytextfi eld2, and then, in the Property inspector,
change sprytextfi eld2 to emailfi eld , select Email Address as the type, and then check
the Required check box, if necessary.
14. In the form area, add a new line below the emailfi eld, insert a Spry Validation
Textarea, and then enter comments as the ID, enter Comments as the label, select
Wrap with label tag as the style, select Before form item as the position, and check
the Required check box, if necessary.