Chapter 11 - Creating A Templete Part 2 (HTML)

Now that you have created the graphics, we need to start editing content. Open up a text editor, and open the HTML file you saved in the previous chapter. Open up the browser and preview it. Now you need to find the “null” areas. These are areas where you don’t need graphics, just white space. I have labeled them on my page.

These will be areas where you want to put text, or where there will be no graphic. My areas are the white space at the top, the “you are here” bar, the search form, inside the lines in the center of the page, and under the content area. Now you need to figure out which graphics these are. The easiest way is to go to File | Browse, and match them up. Be sure to write them down. Now go to the HTML page PSP has created, and look at the table data cells. They should all have image tags in them. Now go to each one of these images that you have decided will be null, and delete the image tag. Now you should have gotten rid of the unneeded images, which will speed up page load time.

The next step is to adjust the sizes of the table data cells you need to add content to. For example, in the box in the middle, I will set the height of the middle row tr tag to 95%, so that the box will fit any amount of content I require. Also set the height of each individual table data cell in that row to the same number. Also, in mine, I need to set the image height for each of the vertical lines. Within the table data cell where the content will be, type in test text, to make sure it will work when you start adding content.

You are done with your templete! Now we need to add some interactivity to your page, to make it look cooler!

Rate this Tutorial

Rate this Tutorial: 5 - Excellent! 4 3 - Fair 2 1 - Poor 0 - Awful!

Current Rating:

5/ 5.00 with 1 votes.

Leave your comment: Learn how to add this comment form to your site with our comment form tutorial!
Name:
Email:
URL:
Comments:
	→ retype that here Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.
	Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted. No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.

Copyright © 2000–2008 Brian Zimmer. All Rights Reserved.