presented by linda hemenway
Forms / Tables Assignment Explained
Listed below are the steps you need to follow to complete the tables and forms assignments.
- Read Chapter 6 "Creating Interface Components" (pgs 175-205). The author presents properties which can be used to style tables and forms. Since forms are often presented within tables these 2 elements are a natural combination.
- Open the DVD > css-part2 > start-here.html > tables & forms lesson. Here is a list of what you need to watch for the table assignments.
# table HTML
# box table
# horizontal zebra
# vertical zebra
# one column emphasis
# background image
# table sampler
# hover hack for IE
Create a table sampler page which has the tables shown on the DVD.
- Next view the DVD lessons
# style form pt 1
# style form pt 2
Then create a form which has these styles:
Colorize the input areas where visitors enter information, style the submit button, and the text that display on the form.
- If you have extra time review the additional tables found on this Web page:
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ - If you have extra time try and duplicate the form demonstrated in the textbook.
- Now open the "homework.html" page and activate the links for the tables & forms lesson. This will require you to create a link to these files:
Table Sampler
Styled Forms
- These files will be placed in the folders indicated below
sample folder
"tables-sampler.html"
"form.html"
If you have background images in the table or form, load them into the samples folder also.
- Please upload the files (including your modified homework page) onto "student". Use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
- I will use the "student work" page to grade your work.
