Step 6) Preparing it for content. Once you open the layout.html (or whatever you called it) you will see that all your slices have now converted to a nice looking table with an image in each cell. (screenie: what it looks like when I open up Dreamweaver ->) If you don't have Dreamweaver, you can also attempt to do the following in notepad.

We need to get rid of the picture in the cell if we want to put content in it. Go to each cell that's going to have content and click on the picture. GO down to the properties panel and copy the image link (Src). Then delete the image, so the cell becomes blank. Click in the blank cell, and down in the Properties area, paste the link into the Bg area.

Repeat for all the cells that have areas with content.

(So the code equivalent for this would be to first find the proper <td> cell to work in. This is will easier if you gave a name to your slices. So. ie. If you named your main content area main, just go into the code and search for which <td> cell has the image main.jpg in it.

Each <td> tag stands for a cell of the table. Once you find the proper <td> tag, copy the link inside the <img src="copythislink.jpg"> and paste it inside the <td> tag, so that the tag should now look something like <td height="blah" width="blah" background="copythislink.jpg"> Now delete the <img> tag entirely. You may type in just temporarily stuff in this table cell so that you can find it later if you are working solely in a text editor.

 

>> Next: Page properties, styles & background image

<< Previous: Coding in ImageReady