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

Add keywords, a
meta description,
and a contact
form to a Web site
for a skateboard
company.

Case Problem 1

Data File needed for this Case Problem: form_test.html

Moebius Skateboards Corey wants you to add keywords and a meta description to
every page of the Moebius Skateboards site. You'll create a form in the contact.html page
to enable users to communicate with Corey. You'll use the form_test.html fi le as the form
action so that you can test the form.

1. Open the Moebius Skateboards site you modifi ed in Tutorial 5, and then open the
index.html page in Design view.
2. Open the Keywords dialog box, and then type moebius skateboards, fort worth
skateboarding team, moebiusskateboards.com, independent boards, indie
skateboard manufacturer, decks, moebius riders, mobius in the Keywords box.
( Hint : Use all lowercase letters and separate each word or phrase with a comma.)
3. Copy the words in the Keywords box, click the OK button to add the keywords to
the page, and then save and close the page.
4. Open each of the following pages: about.html , contact.html , boards.html ,
events.html , team.html , open the Keywords dialog box, paste the list of keywords in
the Keywords box, click the OK button to add the list to the page, and then save and
close the page.
5. Open the index.html page in Design view, open the Description dialog box, and
then type Moebius is an independent skateboard company based in Fort Worth,
Texas. in the Description box.
6. Copy the text in the Description box, click the OK button, and then save and close
the page.
7. Open each of the following pages: about.html , contact.html , boards.html ,
events.html , team.html , open the Description dialog box, paste the description in
the Description box, click the OK button, and then save and close the page.
8. Copy the form_test.html page located in the Tutorial.06\Case1 folder included with
your Data Files into the local root folder for the site.
9. Open the contact.html page, and then delete the “check back soon, more is on the
way. . .” text.
10. Add a form to the page, and then set the following form attributes: contact_form
as the form name, the form_test.html page as the action, GET as the method,
application/x-www-form-urlencoded as the enctype, and _blank as the target.
( Hint : Click the Browse for File button next to the Action box, navigate to the local
root folder, and then double-click form_test.html.)
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 Moebius Skateboards
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, insert
a text fi eld, select the text fi eld, and then type fi rstname in the TextField box in the
Property inspector. Use the default character width and maximum characters values.
14. In the left cell of the second row, type last name: , press the Tab key, insert a text
fi eld, select the text fi eld, and then type lastname in the TextField box in the Property
inspector. Use the default character width and maximum characters values.
15. Click 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.