Web Page Design

Create Form
Part 5 – Create a Form with Fields
1. In your Bike and Hike Web Site, open your Bike_Main.dwt
(template) file.
2. File>Save As (go to your pages folder) and save the file as
contact.html (be sure you are saving it as an html file NOT a
dwt file).
3. When asked to update the links, click yes.
4. Highlight the word content (in the white box, not the blue box).
5. Type the following text in the content
section. Be sure that you format it so
that it matches the attributes (color,
font, etc. of the rest of the Web site).
Contact Us

Please fill out the form to learn

more about the Centuryville
Community Center.
6. Your page will look like this:

7. Save your page and update links as

necessary.
8. Click after the word Center and press
enter.
a. On the insert toolbar, select Insert>Table.
b. In the Table dialog box, create a table with 8 rows and 2
columns.
c. Table width 760 pixels.
d. Header row set to none.
e. Click ok.
9. Your screen should look like this:

10.Save your file.

 Web Page Design
Create Form
11. In the properties inspector, set the height (H) to 250px.
a. In the table, click the column divider (the line between the
columns) and drag the divider until the first column is 150px
wide.
b. If necessary, set the alignment in the first column to left.
12.Click in the table’s first cell.
a. Type the label: First Name:
b. Press tab.
c. On the forms toolbar, click the
text field button. (If asked do
you want to add form tag?
Click yes)
d. If necessary, switch the insert
toolbar to the forms view.
13.Make sure that the white text box that
appears in the right cell is selected.
a. In the properties inspector, in the
text box below text field, type the
title: first_name.
b. In the char width text box, enter
a value of 40.
 Web Page Design
Create Form

14. Click the cell under the label you just typed.
a. Repeat steps 13 a and b to create five more fields.
Field Labels, Titles, and Character Widths
Label Title Character Width
Last Name: last_name 40
Address: address 40
City: city 40
State: state 2
ZIP Code: zip_code 10
E-mail address: e_mail 40
b. Make sure that you use the information shown in red in the above
table.
15.Your screen should look like this:

16. Click in the cell below the E-Mail address.

a. Type Age:
b. Press tab
17. On the forms toolbar, click the list/menu button.
a. In the properties inspector, under list/menu, delete select and
type age.
b. Click the ListValues button located in the right-hand side of the
properties inspector.
18. On the right side of your properties inspector, click on the list values
button to open the ListValues, in the filed under Item Label, type:
Under 12.
a. Leave the value empty
b. Check the plus sign (+) to add another value.
19.Repeat step 18 for the following choices:
a. 12 to 17
 Web Page Design
Create Form
b. Over 17
c. Your dialog box should look like this:

d.
20. Click outside the table under the Age label.
a. On the forms toolbar, click the checkbox button.
b. If necessary, click yes in the warning box.
c. Place your cursor after the check box.
d. Press the spacebar and type: Send me more information about
the Bike and Hike fundraiser.
e. Select the check box. In the properties inspector, under
checkbox name: type: more_info.
21.Place your cursor at the end of the checkbox line.
a. Press enter.
b. On the forms toolbar, click button to insert a submit button.
22. Click the button again, in
the properties inspector,
next to Action, select
reset form to create a
reset button.
23. Click off the buttons and
click next to the reset
button. In the
properties inspector,
click align center to
center the buttons.
 Web Page Design
Create Form

24.Save your file and preview in a browser.

25.Practice entering data into the form.
26.You have now created a simple form. Save your file.

Part 6 – Add a Jump Menu to a Web Page

1. In your Bike and Hike Web site, open the Sponsors (sponsors.html)
Web page.
a. Place your cursor to the right of the text that says: Use the menu
below to visit our sponsors.
b. Press shift+enter.
2. If necessary, change the insert toolbar to the forms view.
3. On the toolbar, click the jump menu button.
a. In the insert jump menu dialog box, in the text box, type:
Centuryville Bike Shop.
b. In the When selected go to URL box, type:
http://www.centuryvillebike.com.
c. Your dialog box should look like this:

d. Repeat steps 3 a and b using the text and link information shown
in red in the table below.
Text URL
New Wave Music http://www.newwavemusicsite.com
st
1 Video Store http://1stvideostore.com
Standard Auto Repair http://www.standardautorepair.com
4. When finished entering the text and links, click ok.
5. Save the file and preview in a browser.
6. Click the jump menu’s down-arrow and try out the links.
7. Close your file, exit Dreamweaver, drag and drop to
J:/Scook/AppropriateClassPeriod.
Web Page Design
Create Form