Create a Comment Form

Gizmo

Description

Create a Comment Form 11/08/2007 01:28 PM Create a Comment Form Tutorial Home IT Center OIT WMU Create a Comment Form (see an example) Dreamweaver FormsBasics The objective of this exercise it to create a comment formfor students to use to send you comments about yourSite Setup course or web page.Personal HomeYou will create a web document that will contain thePagecomment form using tables and a web document that willCourse Homecontain a short reply to the student once he/she has filledPageand submitted the form.SyllabusComment Form 1. Download the gform.txt file for use in this exercise.Save it to your desktop as gform.txt2. Start Dreamweaver (double click on the icon) and review the DW windows. Itis important that you become familiar with thesewindows and what they do (page 2 of the referencehandout).a. Insert panel, forms tabb. Properties panelc. Document windowd. Files panel3. From the files panel create empty files for the commentform and reply. The comment form will be part of yourpersonal web site, not a course web site (since you willprobably want to use this form for more than oneclass).a. In the files panel, highlight your home folderb. From the menu, select File>New File (PC) orFile>Site Files View>New File (Mac)c. Name this file comments.htmld. Repeat this process and name the file reply.html(don't forget the "l")http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html Page 1 of 7Create a ...

Informations

• Publié par: Onje
• Nombre de lectures: 206
• Langue: English

Extrait

11/08/2007 01:28 PM

Create a Comment Form

Page 1 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

Create a Comment Form

Tutorial Home

IT Center OIT WMU

Create a Comment Form

(

see an example)

Dreamweaver

Basics

Site Setup

Personal Home

Page

Course Home

Page

Syllabus

Comment Form

Forms

The objective of this exercise it to create a comment form

for students to use to send you comments about your

course or web page.

You will create a web document that will contain the

comment form using tables and a web document that will

contain a short reply to the student once he/she has filled

and submitted the form.

.

1

Download the

gform.txt

file for use in this exercise.

Save it to your desktop as gform.txt

.

2

Start Dreamweaver

(double click on the

Dreamweaver icon) and

review the DW windows

. It

is important that you become familiar with these

windows and what they do (page 2 of the reference

handout).

.

a

Insert panel, forms tab

.

b

Properties panel

.

c

Document window

.

d

Files panel

.

3

From the files panel create empty files for the comment

form and reply. The comment form will be part of your

personal web site, not a course web site (since you will

probably want to use this form for more than one

class).

.

a

In the files panel, highlight your home folder

.

b

From the menu, select File>New File (PC) or

File>Site Files View>New File (Mac)

.

c

Name this file

comments.html

.

d

Repeat this process and name the file

reply.html

(don't forget the "l")

11/08/2007 01:28 PM

Create a Comment Form

Page 2 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

.

4

Double-click on the

comments.html

file.

.

5

Add key words if you wish.

(Do you remember how

to do this?)

.

6

Modify page properties to add a title

. (Do you

remember how to do this?)

.

7

Add a text link to your home page at the top

.

.

8

Insert header

.

a

At the top of the page type "Comments and

Suggestions"

.

b

Highlight this text and from the Properties

Inspector, format it using H2.

.

9

Change the Objects Palette from Common to

Forms

.

a

In the objects palette, click on the arrow next

to the word Common, then select Forms.

.

10

Insert a form

.

a

Click on the insert form icon (1

st

column, 1

st

icon). You will see a small rectangle outlined in

red dashes in your document window.

.

b

Look in you Properties Inspector. You see the

attributes of a form.

.

a

The method is POST

.

b

In the "Action" field, type

/cgi-bin/gform

.

c

In the "Name" field, type

Comments

.

11

In the document window, click your cursor inside the

red rectangle.

.

12

Insert a table with 8 rows and 3 columns that is

450 pixels wide into the form.

.

a

From the menu select Insert>Table

.

b

Resize the column widths to look similar to the

green handout.

.

c

Select all the cells in the first row and merge them

together (in the Properties Inspector or from the

menu by selecting Modify>Table>Merge Cells)

.

d

Repeat this process in the second row.

11/08/2007 01:28 PM

Create a Comment Form

Page 3 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

.

e

Highlight all the cells in the first column (except

the first two rows). In the Properties Inspector,

.

i

Change the default vertical alignment to top

.

ii

Change the default horizontal alignment to

right.

.

13

Add the form elements

.

a

Each form element has a name and a value. Pay

close attention to your Properties Inspector in this

part of the exercise.

Do not use spaces in form

element names

. You can use spaces for the values

of a form element.

.

b

Click cursor in the 3

rd

row, 3

rd

column

.

i

From the Objects Palette, click on the insert

text field icon (2

nd

column, 1

st

icon)

.

ii

Under "Text Field" enter

name

.

iii

Char width is

40

.

iv

Max characters is

60

.

v

It is a single line text element.

.

c

Click cursor in the 4

th

row, 3

rd

column

.

i

From the Objects Palette, click on the insert

text field icon (2

nd

column, 1

st

icon)

.

ii

Under "Text Field" enter

email

.

iii

Char width is

40

.

iv

Max characters is

60

.

v

It is a single line text element.

.

d

Click cursor in the 5

th

row, 3

rd

column

.

i

From the Objects Palette, click on the radio

button icon (1

st

column, 3

rd

icon)

.

ii

In the field under "RadioButton", type

status

.

.

iii

For the "Checked Value" field, enter

freshman

11/08/2007 01:28 PM

Create a Comment Form

Page 4 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

.

iv

Click next to the radio button and type

Freshman

.

.

e

Click on the radio button again.

.

i

Press Ctrl/C (or Command/C on Mac) to

copy the button

.

ii

Click the cursor after the text Freshman.

.

iii

Press Ctrl/V (or Command V on Mac) three

times to paste three more radio

.

iv

Click on the second radio button.

.

a

Change the Checked Value to

sophomore.

.

b

Click next to the radio button

.

c

Type the text

Sophomore

.

v

Repeat this process for the remaining

buttons.

.

f

Add a drop down menu

.

i

Click the cursor in the 6

th

row, 3

rd

column

.

ii

From the Objects Palette, click on the insert

menu icon (2

nd

column, 3

rd

icon)

.

iii

In the Properties Inspector, in the field under

"ListMenu" type course

.

iv

In the Properties Inspector, click the "List

Values" button.

.

a

Note, use the TAB key to move from

field to field

.

b

The "Item Label" is the text that will be

displayed in the drop down menu.

.

c

The "Value" is what will be submitted

to the gform program if that item is

selected.

.

d

Click the "OK" button when finished.

.

g

Add a comment field

11/08/2007 01:28 PM

Create a Comment Form

Page 5 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

.

i

Click the cursor in the 7

th

row, 3

rd

column.

.

ii

Type Comments:, followed by a SHIFT-

RETURN

.

iii

From the Objects Palette, click on the insert

text field icon

.

a

In the Properties Inspector, in the field

under "TextField", type

comments

.

b

Click on the Multiple line radio button

.

c

Character Width is

40

.

d

Number of lines is

10

.

h

Add the submit and clear form buttons

.

i

Click the cursor in the 8

th

row, 3

rd

column.

.

ii

From the Objects Palette, click on the insert

button icon (1

st

column, 2

nd

icon)

.

iii

In the Properties Inspector, in the field

named "Label" type

Send Message

.

iv

Click next to the button

.

v

From the Objects Palette, click on the insert

button icon (1

st

column, 2

nd

icon)

.

vi

In the Properties Inspector in the field

named "Label" type

Clear Form

.

vii

In the Properties Inspector, under in the field

named "Button Name" type

reset

.

viii

In the Properties Inspector the Action should

be set to "reset form".

.

i

Save your work.

.

j

Add the gform commands to your HTML code.

.

i

Note: you customize a text file with gform

commands with your own information, save

it, then copy the contents of the file to the

clipboard then paste the clipboard contents

directly into the HTML code of your

Dreamweaver form.

11/08/2007 01:28 PM

Create a Comment Form

Page 6 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

.

ii

Minimize or Hide Dreamweaver

.

iii

From the Desktop, on the file named

gform.txt

.

iv

Customize the appropriate parts (~username

and e-mail address).

.

v

Save the file (just in case).

.

vi

Select all the text (Press Ctrl/A or

Command/A)

.

vii

Copy the text to the clipboard, press Ctrl/C

or Command/C

.

viii

Close the file.

.

ix

Maximize or un-hide Dreamweaver

.

x

You need to access the HTML code in DW. In

the tool bar at the top of your window, click

on the icon with the two angle brackets

(<>)

.

xi

Scroll through the code until you see the

</BODY> tag

.

xii

Open up a line just above this tag.

.

xiii

Paste the contents of the clip board (press

Ctrl/V or Command/V).

.

xiv

Close the HTML source window.

.

k

Save your work.

.

14

Create a short reply form

.

a

From the site window, double-click on

reply.html

.

b

Type in a short message to the student thanking

them for submitting input

.

c

Add a link back to your home page. For the links

on your the reply page, specify the full URL.

.

d

Save your work.

.

15

Preview your pages and test your links

. You won't

11/08/2007 01:28 PM

Create a Comment Form

Page 7 of 7

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

be able to test the form until it is published on the

server.

.

16

Publish your pages and test them on the server

. If

you submit a form and see your own reply back, you

know that the form worked.

<

prev

top

next

>

Contact:

Julie Scott

Last revised: October 18, 2004

http://www.wmich.edu/itc/tutorials/dreamweaver/beginning/comment-form.html

Instructional Technology Center

269-387-6958

part of

Office of Information Technology

Western Michigan University