Putting It All Together

Now it’s time to put all the images we just sliced up into an HTML document, to create our page template.

  1. 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 make sure it’s centered on the page.
  2. Then, in the top row, make the first cell on the left col span 3, so you can place the header.jpg image inside that cell. This will also establish the width of the template.
  3. In the 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 fourth row.
  4. Now, place the blue_square.gif image in the outer cells of the second and fourth rows. Place the image gray_bar.gif into the first cell (to the left) of the third row, and repeat this step for the third column.
  5. Set the background colors of both cells to #CCCCCC. Set the second column in the second and fourth rows’ background color to #374256. Give the center column in the third row (where your content will be located) a background color of #CCCCCC.
  6. In the fifth row, choose the first cell and make it col span 3, so that you can place footer.jpg in it.
  7. Lastly, be sure to specify the row height of the first, second, fourth and fifth rows, leaving the third row unspecified, so it can grow with your content.

And that’s it! Your page should look like this:

881_screen10As the page’s original white background didn’t work well with the design, I created a background image to tile behind the interface.

To make these simple scanlines, create an image in Photoshop that is 1 pixel wide and 2 pixels tall. Select a square that is 1px by 1px and color it to compliment your design. Then, move that selection down, and fill the new square with another color. Save the entire image as a 2-color gif image and name it bg.gif. Simply place this gif in the body tag of your new template, and it will tile across the page. To see the end result, click here.

Notice how the text seems to be indented in the content area, as a result of the placement of the gray_bar image. You will need to change the background color of those cells to the same color (#CCCCCC) as the gray_bar image, so that when the page grows longer, it will still look the same.

To create the space on which the text links are placed, I merely made the background color of that cell in the table the same color as the blue_square image (#374256). The changing color rollover effect on the text links is created with CSS (Cascading Styles Sheets).

Go to page: 1 | 2 | 3 | 4
Adem has been a Web Designer for over 5 years. Along with creating Websites for his clients he also makes pre-made Web templates.

No Reader comments

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.