M8 Building a Simple Image Gallery with TablesStudent Outcomes
|
Recap:
HTML
<table> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> |
CSS
<style> table, tr, td { border: 1px solid gray; border-collapse:collapse; padding:10px; color:#333; } </style> |
Result
|
Note: Dreamweaver has an auto table generator that makes creating a table super easy!
- Start up Dreamweaver, and create a new HTML file
- Go to Insert > Table to get the Table menu.
Activities
- In this class, we will create a gallery page. We will use <table></table> to build this gallery page. If we have more time, we will build the same page with floating <div></div>
- Finish your gallery page. Insert a similar structure to our personal page.
- Work as a group build two sub pages.
Assignments:
- Assignment 8.1: Finish your gallery page.