From Comp to Completion: Final Layout

Now it is time to implement these slices into a Web page. This can be done with an HTML Editor such as Dreamweaver, GoLive, or FrontPage, or it can be done by hand coding in a text editor. For this exercise I used Dreamweaver.

As I mentioned, it's a good idea to look at the page that ImageReady creates, but not a good idea to use it. Why not use it? There are several reasons, but there are two that are extremely important:

You want your design to hold together later. Unfortunately ImageReady creates one table without any horizontal or vertical alignment specified. ImageReady also doesn't use width and height attributes in the table code, so if you remove a slice, the design can fall apart.
You want your page to load as fast as possible. ImageReady writes the HTML in one large table with COLSPANS and ROWSPANS, and sometimes even uses spacer images. I recommend you use multiple tables for each section of the comp. I will demonstrate this momentarily.

Now it is time to create the page that will soon contain the graphic you just created. You should create a table with the same width as your graphic. Make sure you have the Vertical Alignment within each cell set to Top. Also make sure you set the cellpadding and cellspacing of the table to 0.

First I created a table with one cell. I placed the headline slice in there and formatted the container cell to be the same width and height of the image itself. I gave the cell a horizontal alignment of Left and a vertical alignment of top. You can see the page here.

Now I created a second table below the first. I gave this table 3 cells, each formatted as the width of the individual slices. I intended to use the middle cell as the content area, which would include HTML text. This meant I had to approach this table a little differently. Instead of placing the left slice directly into the table, I had to make it the background image and just place a space as the cell content. You can see the sample here.

As I mentioned before, I planned to toss the middle slice out. Before I do this, I need to find out the width of the slice and use that for my middle cell. That's it. Now for the last cell in this table I just need to get the width of the third slice and use that for the cell. I now need to use that last graphic as the background image. You can see the sample here.

Now I can add content and it will keep the table intact. You can see the sample with some content here.

All that is left now is to add the footer. Because this is the last slice, I just had to make a container table for it just like I did with the header. You can see that sample here.

That's it. The last sample was the finished page design. Now I could add whatever I want in the content area and not have to worry about the design breaking.

Affordable, reliable web hosting solutions

From Comp to Completion: Final Layout

Affordable, reliable
web hosting solutions