Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
setting up a contact page




M E T A L
S C H   O   O   L
css styling:
   new page




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




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




M E T A L             your completed contact.html page will look like this. notice the form a...
css styling:
   new page




                      in code view of the gallery.html page, select the above lines (that rel...
css styling:
   new page




                      select the above lines too and delete


M E T A L
S C H   O   O     L
css styling:
   new page




                      select the above lines that refer to the gallery images and delete
M E ...
css styling:
   new page




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




                      now to make the current page the ‘active’ page. in code view select
   ...
css styling:
   new page




                      in the contact.html line, paste the words as shown above. there should
...
css styling:
   new page




                      confirm in design view that the contact button is dark green


M E T A L...
css styling:
   new page




                      more deletions - start with selecting the youtube video graphic in desi...
css styling:
   new page




                      select the two cd images in the sidebar and delete them


M E T A L
S C...
css styling:
   new page




                      select the headlines ‘hover’ and ‘eleven complaints’ one by one and
   ...
css styling:
   new page




                      select the copy as shown above and delete

M E T A L
S C H   O   O     L
css styling:
   new page




                      select the copy as shown above and type ‘tejas narayan’


M E T A L
S C...
css styling:
   new page




                      select ‘album reviews’ inside of the h1 tags and type in ‘sheldon fonse...
css styling:
   new page



                      get the cursor on to a fresh line below the h1 tags that contain ‘tejas ...
css styling:
   new page




                      insert image - tj-bass.jpg from your images folder


M E T A L
S C H   ...
css styling:
   new page



                      similarly, place the cursor on a fresh line below the h1 tags of ‘sheldo...
css styling:
   new page




                      the two images in place in design view



M E T A L
S C H   O   O     L
css styling:
   new page




                      copy the first para of the sidebar3.txt and paste in place of the text s...
css styling:
   new page




                      copy the second para of sidebar-contact.txt and paste within the p tags...
css styling:
   new sidebar




                    now to style the sidebar in a distinct manner unlike the sidebars of t...
css styling:
   new sidebar




                    now make new css rule. in the dialog box fill in the selector as
      ...
css styling:
   new sidebar




                    fill in the values as above. link the background image to vectorbg3a.gi...
css styling:
   new sidebar




                    in design view click inside a para in the sidebar and in the status ba...
css styling:
   new sidebar




                    the distinctly styled sidebar background!

M E T A L
S C H   O   O   L
css styling:
   new sidebar




                    to style h1, place cursor inside a headline and make new css rule. typ...
css styling:
   new sidebar




                    to style the p tag inside the sidebar, place cursor in a para and make...
css styling:
   new sidebar




                    to give a border to the images inside the sidebar, select one of the i...
css styling:
   new sidebar




                    the fully styled sidebar for the contact page with the
               ...
css styling:
   headlines

                      to replace the headline graphic in the main content area, double-
       ...
css styling:
   headlines


                      link to contactkastadyne.png in your images folder




M E T A L
S C H  ...
css styling:
   headlines



                      now select the h2 headline of ‘click on photo to enlarge’




M E T A L...
css styling:
   headlines




                      type in the new line: ‘get in touch with the band here’




M E T A L
...
creating a contact form




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



                    make sure cursor is on a fresh line after the </h2> tag in the main
  ...
css styling:
   contact form




                    from the window menu click on ‘insert’ to see the full insert menu


...
css styling:
   contact form




                    in the insert menu, click on ‘form’ to create a new form

M E T A L
S...
css styling:
   contact form




                    the form region (in design view) is represented by a red bordered rec...
css styling:
   contact form




                    make sure the cursor is inside the red rectangle


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




                    click on ‘text field’ option in the insert menu



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




                    in the attributes box, fill in id, label and tab index
               ...
css styling:
   contact form




                    the new text field is entered in the main content area


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




                    press the return key at the end of the field in design view to put the...
css styling:
   contact form




                    insert another text field in a similar way. fill in the attributes
    ...
css styling:
   contact form




                    the e-mail field is inserted. go to end of the line in design view and...
css styling:
   contact form




                    for the third field, insert a text area instead of a text field.
      ...
css styling:
   contact form




                    fill in the attributes as shown above

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




                    insert a checkbox field on a fresh line


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




                    enter the label as ‘subscribe me to your free newsletter
            ...
css styling:
   contact form




                    the checkbox line is inserted. as can be seen, each field is in its ow...
css styling:
   contact form




                    insert the final item - the submit button



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




                    fill in the attributes as shown above. there is no need for
          ...
css styling:
   contact form




                    the form in design view. it’s complete in substance and will be styli...
css styling:
   contact form




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




                    again, note in code view that each field is inside a separate para. ch...
css styling:
   contact form




                    upclose magnification of code view of the form


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




                    to work on the css, click on the main.css button on
                 ...
css styling:
   contact form




                    minimise the properties and css panels. maximise the document
       ...
css styling:
   contact form




                    enter padding-top: 20px. check in design view




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




                    enter font and color values as shown




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




                    and finally, a border to encircle the form




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




                    the css so far. there’s more to come...


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




                    css for the p tag within the form




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




                    css for the labels within the form



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




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




                    the css so far. the ‘subscribe me...’ line is getting constricted
   ...
css styling:
   contact form




                    css for the text area - its width and height


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




                    the css for the text area. almost home...


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




                    the ‘subscribe me...’ line is too long as a label. we need a special ...
css styling:
   contact form




                    to assign the new class, click somewhere in the ‘subscribe me...’ lin...
css styling:
   contact form




                    in the properties box from the class drop-down menu select ‘spllabel’...
css styling:
   contact form




                    the css for the contact form is done. check in live view and browser
...
css styling:
   contact form




                    background-color: #D3FFBF


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




                    to assign the .text class: select the text boxes of name and e-mail o...
css styling:
   contact form




                    the ‘focus’ in action in live view. the css for the form is complete
...
some final tweaks




M E T A L
S C H   O   O   L
css styling:
   final tweaks




                      to insert a grungy ‘cobweb’ graphic in the top right corner of the m...
css styling:
   final tweaks




                      the graphic is in place. but being in the #mainContent region, this ...
css styling:
   final tweaks




                      tweak #2: reduce the width of the text column in the sidebar. go to
...
css styling:
   final tweaks




                      the final view

M E T A L
S C H   O   O     L
M E T A L
S C H   O   O   L
Upcoming SlideShare
Loading in …5
×

Let's build a website with Dreamweaver - VI

1,393 views

Published on

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

  • Be the first to comment

  • Be the first to like this

Let's build a website with Dreamweaver - VI

  1. 1. setting up a contact page M E T A L S C H O O L
  2. 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. 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. 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. 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. 6. css styling: new page select the above lines too and delete M E T A L S C H O O L
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 28. css styling: new sidebar the distinctly styled sidebar background! M E T A L S C H O O L
  29. 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. 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. 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. 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. 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. 34. css styling: headlines link to contactkastadyne.png in your images folder M E T A L S C H O O L
  35. 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. 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. 37. creating a contact form M E T A L S C H O O L
  38. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 50. css styling: contact form fill in the attributes as shown above M E T A L S C H O O L
  51. 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. 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. 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. 54. css styling: contact form insert the final item - the submit button M E T A L S C H O O L
  55. 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. 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. 57. css styling: contact form the form in live view M E T A L S C H O O L
  58. 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. 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. 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. 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. 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. 63. css styling: contact form enter font and color values as shown M E T A L S C H O O L
  64. 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. 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. 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. 67. css styling: contact form css for the labels within the form M E T A L S C H O O L
  68. 68. css styling: contact form M E T A L S C H O O L
  69. 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. 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. 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. 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. 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. 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. 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. 76. css styling: contact form background-color: #D3FFBF M E T A L S C H O O L
  77. 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. 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. 79. some final tweaks M E T A L S C H O O L
  80. 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. 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. 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. 83. css styling: final tweaks the final view M E T A L S C H O O L
  84. 84. M E T A L S C H O O L

×