Lab
Exercise 7: Editing Table Design in a Web Page
Prerequisites:
1. Save the
attach AssignmentExercise7and8.zip
file on your desktop. Unzip the files into the root site
folder.
2. Define the
"LMC Brentwood
Burger" site in Dreamweaver. See
step-by-step demo instructions in the Topic 2 lecture presentation (slides 5-8)
in defining a Web site
Requirements for the menu.html page:
1. Attached and linked the menu.html to the external cascading style sheet (mystyle.css). See the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.
2. Insert a Table into a
Web Page: Follow the step-by-step demo instructions in the Topic 7
lectures presentation (slides 9- 11) in creating and in inserting a table for
the Specialty Steak Burger Menu.
3. Turn Off Table
Borders. Follow the step-by-step demo instructions in the Topic 7
lectures presentation (slides 12- 13) in turning off the table borders.
4. Insert Text
Content into a Table: Follow the step-by-step demo instructions in the Topic 7
lectures presentation (slide 17) in inserting text content into a table.
5. Insert Image Content into a Table: Follow the step-by-step demo instructions in the Topic 7 lectures presentation (slides 18- 20) in inserting image content into a table.
6. Change the
Background of a Table: Follow the step-by-step demo instructions in the
Topic 7 lectures presentation (slides 24-26) in changing the background of a
table.
7. Apply a Class Style: Apply the class style rule called
“menu-items” for the table you created in step 2. Follow the step-by-step demo instructions
in the Topic 4 lecture presentation (slides 68 – 75) to apply an ID Rule in applying
the class style.
8. Apply a Class Style: Apply the class style rule called “emphasis”
for the text for all the table’s header.
See the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 68 – 75)
to apply an ID Rule
9. Change the
Cell Padding in a Table: Follow the step-by-step demo instructions in the
Topic 7 lectures presentation (slides 30-31) in changing the cell padding in a
table.
10. Change the Cell
Spacing in a Table: Follow the step-by-step demo instructions in
the Topic 7 lectures presentation (slides 33-34) in changing the cell spacing
in a table.
11. Insert a
Row: Follow the step-by-step demo instructions in the Topic 7 lectures
presentation (slides 40- 43) in inserting a row
12. Merge Table
Cells: Follow the step-by-step demo instructions in the Topic 7
lectures presentation (slides 50- 54) in merging table cells.
13 Change the
Dimensions of Table: Follow the step-by-step demo instructions in the Topic 7
lectures presentation (slides 60-63) in changing dimensions of a table.
14. Format a Table with CSS: Follow the step-by-step demo instructions in
the Topic 7 lectures presentation (slides 71- 79) in creating and applying a
style rule class called “menu-items-border” for the tables.
15. Preview your Web
pages in the Browser. Verify all specification requirements have
been applied. See attached sample output
of the menu.html Web page.
16. Save your menu.html and mystyle.css documents.
Submit:
1. Submit a screenshot images of the Web pages displaying in your Browser on the Canvas Exercise 7 drop box.
2. Zip up your folder and submit in the Canvas Exercise 7 drop
box.