Dreamweaver 4 Intermediate
river mortenson

week2 | week3 | week 4 | week 5 | home | links | contact |

Bird's nest

Week 5
Methods for Nesting Tables
(Pages use CSS styles)

Method 4 - Dreamweaver with extension

| Method 1 HTML| Method 2 ImageReady | Method 3 Dreamweaver | Method 4 Extension


Open Dreamweaver and insert ImageReady images with extension

1. Name all the cells in ImageReady – slice.
2. Save elements as Images and HTML.
3. Install extension for inserting ImageReady HTML in your Dreamweaver document and save.
4.

Open a new Dreamweaver document and save.

5.

Open Common Objects panel and click on the Insert ImageReady HTML objects.

6. Click Browse and make sure convert Rollovers to DW box is checked.
7. Open the ImageReady HTML document your converting. Click Open and the Insert in ImageReady HTML extension box.
8. Put background within Page Properties dialogue box as the background image
9. Select the rollovers in the dreamweaver file by shift click and cut them our of the date cell they are in.
10. Place Rollovers in a separate file. Make sure they are in a table and make that table the pixel width of the space they will be in.
11. In the dreamweaver file, delete the image in the cell you will be placing the rollover table or any other <td> in that cell.
12.

Copy the rollover table from their separate file and paste in Dreamweaver cell. Change the rowspan in the neighboring cell in the row to 1: rowspan=1, to reflect the change in the rollover cell beside it.

13. Place rollover table in the rollover table cell. Set the vertical alignment to top.
14. Delete the image in the content box
15. Insert Table with the width to match the elements in the table above it. In this case 454 pixels. One row and one column. Set vertical alignment of the <td> that holds this table to top.

The hand with the index finger pointed up is the icon in the Common Object palette for the ImageReady extension. Just click the button and follow its directions.

| Method 1 HTML| Method 2 ImageReady | Method 3 Dreamweaver | Method 4 Extension