Let's build a website with Dreamweaver - VI

1,027 views
966 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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,027
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide








































































































































































  • 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

    ×