Demo 5: Nested Tables for Page Layout

While ImageReady's automatic writing out of HTML code is convenient, it doesn't work so well when you have a great deal of text you need to put into a page. It stretches out the table cells. Therefore, it's often necessary to put nested tables inside of a larger, simple table. Fortunately, ImageReady does allow one to still create rollovers within a simple table, which can then be transferred to another outer table.

1. Go to your GDT 150 Class Folders. Find the demo5 folder in the Class Folders, and drag them onto your desktop.
   
2. If not already there, drag your student folder to the desktop. Put the demo5 folder inside of your in_class folder.
   
   
3. Open up demo5.psd in ImageReady.
   
   
4. Create your rollover slices for the left navigation in the Web Options pallette (or Rollover pallette, if working in Photoshop 7) just like we did in Demo 4. Refer to Demo 4 Steps 9-14 if you need to refresh your memory.
   
   
5. Next we are going to create a spacer image, that we will later replace with a spacer.gif.
   
   
6. Take a guide and drag it over to the area where the three small flower images begin. Create a slice right next to the navigation menu that just touches that guide, like so:
   
   
   
   
   
   
   
   
   
7. Test it in the browser to make sure the rollovers work correctly.
   
   
8. This time, when we Save Optimized As, we will select ONLY the navigation items and the spacer .gif. But we will optimize the as HTML and Selected Slices only. This will enable ImageReady to ONLY optimize that HTML table. See below:
   
   
   
   
9. Now go back and optimize that Poetry About Flowers header as a GIF.
   
   
10. Open demo5.html in Dreamweaver. Move the table that was just created down the page a bit. You will need room to create the following table: 800 pixels wide with 2 rows, 2 columns. 0 Cellpadding, 0 Cellspacing, 0 Border.
    
    
11. In this newly created table, merge the top to cells in the top row. Go to the Insert pallette and click on the image icon to insert the header graphic. Save demo5.html.
    
    
12. Select all of the table cells and set the Vertical Alignment to "top" (tr valign="top"). When you select all the table cells, go to your Properties pallette and in the drop-down menu of Vert, choose "Top".
    
    
13. Merge the two columns of the top row. Insert your header graphic in that top row (Insert>Image).
    
    
14. Cut your table with the navigation and spacer and paste it into the second row, first column.
    
    
15. Click inside the table cell you just pasted the navigation and spacer into. Set the width of this <td> to be 456, the same width as the table that is nested. Set the other <td> to be 343. (Go to Properties pallette and click in each cell and fill in the value next to the "W"). Save demo5.html.
    
    
16. As in demo4.html, set up your Alt text, and links correctly (e.g. have the tulip link go to index.html, the daff link go to daff.html, and the peonies link go to peonies.html. Save demo5.html. Replace the spacer image with spacer.gif in the code, as done in demo4.html.
    
    
17. As we did before, re-save demo5.html as index.html, daff.html, and peonies.html (Steps 5-8 in your demo 4 instructions). Also don't forget to insert an HTML title for each page.
    
    
18. Once all is working, open Microsoft word, and open each poem within the poems folder.
    
    
19. Copy and paste each poem into its appropriate page.
    
    
20. Add a link to demo5/index.html on your index.html page.