Create a Comment Form
7
pages
English
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
7
pages
English
Ebook
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
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 ...
Voir
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
