Lesson 1: Spanning Exercise Using a Wizard

Overview Tables are a very effective and widely supported tool for controlling the layout of a page. In this exercise you will learn one technique that gives designers a great level of control over the arrangement of content within a table: spanning. Challenge Use Column and Row spanning in a table to piece together separate shapes so that they are arranged exactly like the finished Spanning Puzzle.

Spanning Puzzle

Follow these step by step directions:

1. Set up a folder called images on your H drive. Save all the shapes below into the folder.
2. Open HomeSite and start a new file.
3. In the Resource Window locate your folder of images. If the Resource Window is not visible, go to View and click on Resource Tab.
4. On the Quick Bar (Go to View if Quick Bar is not visible), open the Table Wizard.
5. Click on the addition button to add a row, and click on the addition button to add a column. You should have three rows and three columns. Click Next.
6. Click on the top left cell of the table. Notice that it becomes highlighted when you click on it. Click the Row Span addition button once. Now the cell spans two rows. Span as needed using figure 2 as a model.
7. Cell Spacing and Cell Padding should be set to zero. The border should also be at zero. Check the Specify Width box and set to 350 pixels. Click on Next.
8. At this point you can specify cell properties. Click on a cell to highlight it. Check the width box and specify the width necessary to accommodate the image which should fit in the cell. In the Content box write, "shape #1," or some other label. What you write in this content box will help you more easily locate this table cell amidst all the other code. Do the same for all the cells.
9. Click Finished.
10. Click on images in the resource Window and drag them into the correct cell. Remember to delete your content label.
11. Save and view in the Browse mode.
12. Once you are satisfied with your results, closely examine the code produced by the wizard. Be able to answer the following questions when your instructor checks for understanding:
    1. How many cell or column tags are in rows one two and three?
    2. Which tag is modified by the attributes cellpadding, cellspacing, and border? Why is the value set at zero for each of these?
    3. When you look at the code for the second row of the table, it contains two column tags that have a combined width of 250 pixels. Yet, the width of the entire table is 350 pixels. How do you account for this difference?

Next lesson-Do a similar puzzle without using a wizard--from scratch.