Dreamweaver Chapters & Exercises

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10

Chapter 6: Tables and Forms

Goals for this Lesson

  • Insert a table into an HTML page
  • Edit and and modify a table
  • Insert a form into an HTML page
  • Edit and and modify a form

Exercise

Objective

  • Insert, edit, and style tables.
  • Insert, edit, and style forms.

Instructions

  1. Download the file needed here.  Create a new site for the project in Dreamweaver: Call the site: Ch 6 Exercise. Be sure to link the root folder and the images folder.
  2. Open the about.html file.
  3. You will be creating a table within the main of the document following these guidelines:
    1. a table that has 8 rows, 4 columns
    2. a table width of 90%
    3. borders of 1px
    4. a Header at the top of the table
    5. a Caption that reads: Students Data
  4. In Live View enter the data shown in the table below: (Do not copy and paste the formatting will be off!)
  5. Name Age Grade School
    Tom 14 10 WT
    Jenn 14 10 CBS
    Lisa 16 11 CRS
    Bob 17 12 CRN
    Lauren 18 12 CBW
    Tim 17 11 CBW
    Joe 16 11 CBE
  6. Create a class called .row for the first table row to have a background color of #5F5F5F and have the text color of: #FFFFFF and apply it to that row.
  7. Create a style for the table that collapses the border and gives it margin of 20px at the top and bottom and auto on the left and right.
  8. Create a class called .center that text aligns center.  In design mode apply that center class to the second and third columns.
  9. In the table give the cell padding 10px.
  10. Save your work and Preview it! File > Save All.
  11. Open the contact.html file.
  12. You will be creating a form within the main of the document following these guidelines:
    1. Insert a form tag within the main.
  13. Within the form tag you will create the fields below in the table with the specifications:
  14. Label Form Input Name of Input Size Notes:
    Name: Text name 30 PlaceHolder: First and Last
    Age: Text age 10 *required field
    Email: Email email 30 Maxlength of 30
    Phone: Tel phone 15 PlaceHolder: with area code
  15. Create a label called: Interests then insert a checkbox group input. Name the checkbox group: Interests and use the information below for the checkbox group:
  16. Label Value
    Web Web
    Animation Animation
    Graphics Graphics
  17. INSERT A FORM ELEMENT OF YOUR CHOOSING THAT HAS NOT BEEN USED YET! There are lots of option in the insert panel! (Make up your own label!)
  18. Insert a submit button with the value of: Send
  19. Insert a reset button with the value of: Reset
  20. Create a style that for the labels of display of block and margin-top of 10px.
  21. Delete the breaks between the checkboxes.
  22. Create a class called: .buttons and give it a margin of 10px all around as well as a background color of ##A8B7FF. Apply that class to the submit and reset buttons.
  23. Style the form to be a width of 80%, to have a background-color of #E0E0E0, a margin of 20px at the top and bottom and auto on the left and right, and padding of 10px.
  24. Save your work and Preview it! File > Save All.
  25. Submit the Ch6Exercise folder in the Shared Drive. It should include the CSS, and Images in order to work properly.
Chapter 6 Example

Chapter 6 Example

Resource Video