Putting It All Together

It is time to put all the images we just sliced into an HTML document to create the template. However you build your website (either with an HTML editor like Dreamweaver or Adobe's Golive or you hand code your HTML) you need to create a table that has 5 rows and 3 columns. Be sure to place the center tag before the table and the /center tag after the table to center it on the page. In the top row make the first cell on the left col span 3. This is so you can place the header.jpg image inside. This will also establish the width of the template. In the next row below the header make each cell's row height 18 pixels to correspond with the blue_square.gif image and make the cells' width 16 pixels. Do the same for the for the fourth row. Place the blue_square.gif image in the outer cells of the 2nd and 4th row. In the third row first cell (to the left) place the image gray_bar.gif and repeat for the 3rd column. Set both of their background colors to #CCCCCC. For the second column in the 2nd and 4th row set those cells' background color to #374256. For the center column in the 3rd row (where your content will be) make that cell have a background color of #CCCCCC. In the last or 5th row choose the 1st cell and make it col span 3 to place the footer.jpeg in it. Also specify the row height of the 1st, 2nd, 4th and 5th rows leaving the 3rd row to grow with your content. And that is it. Your page should look like this(refer to the top image on the right).

Since the white background of the page did not work well with the design I created a background image to tile behind the interface. To make simple scanlines create an image in Photoshop that is 1 pixel wide and 2 pixels tall. Next select a square that is 1px by 1px and color it with a color you feel will compliment your design. Then move that selection down and fill that with another color. Save the entire image as a 2 color gif image and name it bg.gif. In the body tag of your new template simply place it in that tag and it will tile across the page. To see the end result click the image on the bottom right.

Click for Larger View

Click to view finished template