Interface to HTML - DW
Return to part I of this tutorial

This portion of the tutorial should be opened in Dreamweaver to fully see what is happening. You can download the source file here. You do not need to do the first part if this tutorial to take advantage of the techniques being used.

1. Below is the interface straight from fireworks. I exported it from Fireworks as a Fireworks HTML document. This page is the result. As is, this won't do. If we want to add content to it we will need to edit it to make it expandable vertically. This is so simple it may blow you away. Ready? Ok, lets get started. Go to step 2.

2. Remember when I said I sliced the interface a certain way for a reason? Well, by slicing it this way we are able to tile images so that our interface holds its visual appearance no matter how much content you add. You will see this come together as we go.

The slice technique is the same used in my site (ultraweaver.com). Each slice that I placed in fireworks is represented by the empty tables it created (below). I simply removed the sliced images so you can see each table it created. Go to Step 3.

3. What we want to do is have our interface expand vertically to meet content needs. We will need to remove the sliced images #2 and #4. To do this we need to prepare the interface so that it does not fall apart once we remove the sliced images from our interface.

To prevent this we need to select the "table" that holds slices 1, 2, 3, 4 and 5. The easy way to select it is to select slice image #2. The image should now be noticeably selected. If you are working in Dreamweaver you can now select the "table" tag at the bottom of our page window. Click for image instructions. Once you have the table tag selected you will notice that the entire table that holds these slices is now selected. Now all we have to do is click on this button (convert table widths to pixels) in the property inspector. This will tell Dreamweaver to add the absolute values to tables and the cells. Basically this will keep our tables from falling apart once we remove slice #2 and #4.

Try this step on the interface below.

Once you have set up the table so that it won't collapse and you remove slice 2 and 4 you should end up with something like the image below.

4. Our next step is to make the white boxes in the previous step the same color as our background to the interface. Just place the cursor inside the tables and go to the property inspector and choose the "BG" color box. The color value is #BFC4B0.

5. In the interface below I added some paragraph tags and the words "Uh Oh!" Notice how we now have gaps where the sliced images are? This is easily fixed by selecting slice #1 and then going to the property inspector to get the source path to the image. It happens to be assets/images/index_r5_c1.jpg We need to place this as the background image of the table that the slice sits in.

1. Select the slice #1
2. Select the <td> tag at the bottom of the page window, select the last one if readin from left to right. (just like you did in step 3).
3. Once the <td> tag is selected copy and past the source path of the sliced image to the "BG" field in the property inspector (Its the one with the yellow folder).
4 Repeat the steps above to slice 3 and 5.

That's it! It should now look like the interface below.