How to do forms in dreamweaver. A step-by-step approach to creating a contact form page, the third in the overall website.

1. setting up a contact page
M E T A L
S C H O O L

2. css styling:
new page
your completed about.html page should look like this
M E T A L
S C H O O L

3. css styling:
new page
M E T A L your completed gallery.html page should look like this
S C H O O L

4. css styling:
new page
M E T A L your completed contact.html page will look like this. notice the form as also the
S C H O O L sidebar styling that is entirely different from the previous two pages

5. css styling:
new page
in code view of the gallery.html page, select the above lines (that relate to thickbox
and which are unnecessary for this page) and delete. save file as contact.html
M E T A L
S C H O O L

6. css styling:
new page
select the above lines too and delete
M E T A L
S C H O O L

7. css styling:
new page
select the above lines that refer to the gallery images and delete
M E T A L
S C H O O L

8. css styling:
new page
in design view confirm that the gallery images are all gone
M E T A L
S C H O O L

9. css styling:
new page
now to make the current page the ‘active’ page. in code view select
the words in the ul menu as shown above. cmd-x to cut and close the
gap in the <li> tag
M E T A L
S C H O O L

10. css styling:
new page
in the contact.html line, paste the words as shown above. there should
be a space between ‘<li’ and ‘class’
M E T A L
S C H O O L

11. css styling:
new page
confirm in design view that the contact button is dark green
M E T A L
S C H O O L

12. css styling:
new page
more deletions - start with selecting the youtube video graphic in design
view and delete
M E T A L
S C H O O L

13. css styling:
new page
select the two cd images in the sidebar and delete them
M E T A L
S C H O O L

14. css styling:
new page
select the headlines ‘hover’ and ‘eleven complaints’ one by one and
delete both
M E T A L
S C H O O L

15. css styling:
new page
select the copy as shown above and delete
M E T A L
S C H O O L

16. css styling:
new page
select the copy as shown above and type ‘tejas narayan’
M E T A L
S C H O O L

17. css styling:
new page
select ‘album reviews’ inside of the h1 tags and type in ‘sheldon fonseca’ instead
M E T A L
S C H O O L

18. css styling:
new page
get the cursor on to a fresh line below the h1 tags that contain ‘tejas narayan’
M E T A L
S C H O O L

19. css styling:
new page
insert image - tj-bass.jpg from your images folder
M E T A L
S C H O O L

20. css styling:
new page
similarly, place the cursor on a fresh line below the h1 tags of ‘sheldon fonseca’
as shown above and insert image of sheldon.jpg from your images folder
M E T A L
S C H O O L

21. css styling:
new page
the two images in place in design view
M E T A L
S C H O O L

22. css styling:
new page
copy the first para of the sidebar3.txt and paste in place of the text selected
above (without deleting the p tags)
M E T A L
S C H O O L

23. css styling:
new page
copy the second para of sidebar-contact.txt and paste within the p tags as shown
M E T A L
S C H O O L

24. css styling:
new sidebar
now to style the sidebar in a distinct manner unlike the sidebars of the other
2 pages. click inside a para of the sidebar and in the status bar below, click
M E T A L
S C H O O L on the <div#sidebar> tag (circled in red).

25. css styling:
new sidebar
now make new css rule. in the dialog box fill in the selector as
shown above. there is no class yet named .contactPagesidebar.
clicking on ok will create just such a class
M E T A L
S C H O O L

26. css styling:
new sidebar
fill in the values as above. link the background image to vectorbg3a.gif in your
images folder. click ok. there will be no visible difference as there is nothing
assigned to this new class yet. let’s do that
M E T A L
S C H O O L

27. css styling:
new sidebar
in design view click inside a para in the sidebar and in the status bar (as before)
click on <div#sidebar>. this selects the entire contents of the sidebar. in the
properties box select the class as ‘contactPage’
M E T A L
S C H O O L

28. css styling:
new sidebar
the distinctly styled sidebar background!
M E T A L
S C H O O L

29. css styling:
new sidebar
to style h1, place cursor inside a headline and make new css rule. type in the exact
words in the selector box as shown above-left. change color to #030. click ok
M E T A L
S C H O O L

30. css styling:
new sidebar
to style the p tag inside the sidebar, place cursor in a para and make
new css rule. make sure you type in ‘#wrapper .contactPage#sidebar p’
in the selector box and put in the values shown above. font-size: .9em;
line-height: 160%; color: #300
M E T A L
S C H O O L

31. css styling:
new sidebar
to give a border to the images inside the sidebar, select one of the images
and make new css rule. type in ‘#wrapper .contactPage#sidebar img’ in
the selector box and put in the values shown above: solid 3px #030.
M E T A L
S C H O O L

32. css styling:
new sidebar
the fully styled sidebar for the contact page with the
correct font-size, line-height and image borders
M E T A L
S C H O O L

33. css styling:
headlines
to replace the headline graphic in the main content area, double-
click the graphic
M E T A L
S C H O O L

34. css styling:
headlines
link to contactkastadyne.png in your images folder
M E T A L
S C H O O L

35. css styling:
headlines
now select the h2 headline of ‘click on photo to enlarge’
M E T A L
S C H O O L

36. css styling:
headlines
type in the new line: ‘get in touch with the band here’
M E T A L
S C H O O L

37. creating a contact form
M E T A L
S C H O O L

38. css styling:
contact form
make sure cursor is on a fresh line after the </h2> tag in the main
content area
M E T A L
S C H O O L

39. css styling:
contact form
from the window menu click on ‘insert’ to see the full insert menu
M E T A L
S C H O O L

40. css styling:
contact form
in the insert menu, click on ‘form’ to create a new form
M E T A L
S C H O O L

41. css styling:
contact form
the form region (in design view) is represented by a red bordered rectangle
M E T A L
S C H O O L

42. css styling:
contact form
make sure the cursor is inside the red rectangle
M E T A L
S C H O O L

43. css styling:
contact form
click on ‘text field’ option in the insert menu
M E T A L
S C H O O L

44. css styling:
contact form
in the attributes box, fill in id, label and tab index
fields as shown
M E T A L
S C H O O L

45. css styling:
contact form
the new text field is entered in the main content area
M E T A L
S C H O O L

46. css styling:
contact form
press the return key at the end of the field in design view to put the cursor on a
fresh line. this is to ensure that each new field is held within p tags
M E T A L
S C H O O L

47. css styling:
contact form
insert another text field in a similar way. fill in the attributes
as shown above. this is for the e-mail field
M E T A L
S C H O O L

48. css styling:
contact form
the e-mail field is inserted. go to end of the line in design view and press
return to create new para. note (in code view) that the two fields entered so
far are within <p></p> tags
M E T A L
S C H O O L

49. css styling:
contact form
for the third field, insert a text area instead of a text field.
this is to allow a multi-line message or comments
M E T A L
S C H O O L

50. css styling:
contact form
fill in the attributes as shown above
M E T A L
S C H O O L

51. css styling:
contact form
insert a checkbox field on a fresh line
M E T A L
S C H O O L

52. css styling:
contact form
enter the label as ‘subscribe me to your free newsletter
kastanews’. enter other values as shown
M E T A L
S C H O O L

53. css styling:
contact form
the checkbox line is inserted. as can be seen, each field is in its own line one
below the other. press return for one more final line
M E T A L
S C H O O L

54. css styling:
contact form
insert the final item - the submit button
M E T A L
S C H O O L

55. css styling:
contact form
fill in the attributes as shown above. there is no need for
the label tag for this field
M E T A L
S C H O O L

56. css styling:
contact form
the form in design view. it’s complete in substance and will be stylised
through css now
M E T A L
S C H O O L

57. css styling:
contact form
the form in live view
M E T A L
S C H O O L

58. css styling:
contact form
again, note in code view that each field is inside a separate para. check for this.
it’s important for css styling
M E T A L
S C H O O L

59. css styling:
contact form
upclose magnification of code view of the form
M E T A L
S C H O O L

60. css styling:
contact form
to work on the css, click on the main.css button on
the top row
M E T A L
S C H O O L

61. css styling:
contact form
minimise the properties and css panels. maximise the document
window in split view
M E T A L
S C H O O L

62. css styling:
contact form
enter padding-top: 20px. check in design view
M E T A L
S C H O O L

63. css styling:
contact form
enter font and color values as shown
M E T A L
S C H O O L

64. css styling:
contact form
and finally, a border to encircle the form
M E T A L
S C H O O L

65. css styling:
contact form
the css so far. there’s more to come...
M E T A L
S C H O O L

66. css styling:
contact form
css for the p tag within the form
M E T A L
S C H O O L

67. css styling:
contact form
css for the labels within the form
M E T A L
S C H O O L

68. css styling:
contact form
M E T A L
S C H O O L

69. css styling:
contact form
the css so far. the ‘subscribe me...’ line is getting constricted
by the overall label width of 100px
M E T A L
S C H O O L

70. css styling:
contact form
css for the text area - its width and height
M E T A L
S C H O O L

71. css styling:
contact form
the css for the text area. almost home...
M E T A L
S C H O O L

72. css styling:
contact form
the ‘subscribe me...’ line is too long as a label. we need a special class to
handle this special label
M E T A L
S C H O O L

73. css styling:
contact form
to assign the new class, click somewhere in the ‘subscribe me...’ line in design view.
in the status bar, click on <label> tag. this will select the entire label (but not the
checkbox element)
M E T A L
S C H O O L

74. css styling:
contact form
in the properties box from the class drop-down menu select ‘spllabel’.
the class is now assigned to the label
M E T A L
S C H O O L

75. css styling:
contact form
the css for the contact form is done. check in live view and browser
view to make sure all is well
M E T A L
S C H O O L

76. css styling:
contact form
background-color: #D3FFBF
M E T A L
S C H O O L

77. css styling:
contact form
to assign the .text class: select the text boxes of name and e-mail one after the
other and in the properties panel, select ‘text’ from the class drop-down menu
M E T A L
S C H O O L

78. css styling:
contact form
the ‘focus’ in action in live view. the css for the form is complete
M E T A L
S C H O O L

79. some final tweaks
M E T A L
S C H O O L

80. css styling:
final tweaks
to insert a grungy ‘cobweb’ graphic in the top right corner of the main
content area, double-click #mainContent in css panel and link the
background-image to vectorbg2.gif in your images folder
M E T A L
S C H O O L

81. css styling:
final tweaks
the graphic is in place. but being in the #mainContent region, this graphic
will now be visible in all pages, not just the contact page
M E T A L
S C H O O L

82. css styling:
final tweaks
tweak #2: reduce the width of the text column in the sidebar. go to
#wrapper .contactPage#sidebar p and insert width: 220px
M E T A L
S C H O O L

83. css styling:
final tweaks
the final view
M E T A L
S C H O O L

84. M E T A L
S C H O O L