Blog

Testing and Preparing Your Template

Now that we have the basics of our web page template set up, we need to prepare it for expansion. Here is some final house cleaning that will make it ready for prime time:

Remove any tags that Adobe Photoshop or The Gimp generate
Move all of the <STYLE></STYLE> information into a separate CSS file. For more information, go back to chapter 12 where it refers to LINK SRC. You will see an example of this below.
Clean up the formatting of your code so that indentions are consistent and add ALT tags to all of the necessary images on the page. For example the cocktail class in the picture above should have an ALT tag of “cocktail glass” or “join us for drinks”

CSS File (styles.css):

P {
Font-Family: Verdana;
Font-Size: 12px;
}
H1 {
Font-Family: Verdana;
Font-Size: 14px;
}

HTML File (index.html):

<html>
<head>
<title>Divas</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=iso-8859-1″>
<link src=”styles.css” />
</head>
<body bgcolor=”black” leftmargin=”0″
topmargin=”0″ marginwidth=”0″
marginheight=”0″>
<table id=”Table_01″ width=”800″
height=”601″ border=”0″ cellpadding=”0″
cellspacing=”0″>
<tr>
<td rowspan=”3″><img src=”images/Divas_01.jpg”
width=”96″ height=”190″ alt=”"></td>
<td colspan=”2″>
<img src=”images/Divas_02.jpg”
width=”256″ height=”61″ alt=”"></td>
<td colspan=”5″ rowspan=”2″>
<img src=”images/Divas_03.jpg”
width=”448″ height=”128″ alt=”"></td>
</tr>
<tr>
<td colspan=”2″>
<img src=”images/Divas_04.jpg”
width=”256″ height=”67″ alt=”"></td>
</tr>
<tr>
<td colspan=”2″><a
href=”index.html”><img
src=”images/Divas_05.jpg” width=”256″
height=”62″ border=”0″ alt=”Home
Page”></a></td>
<td><a href=”about.html”><img
src=”images/Divas_06.jpg” width=”99″
height=”62″ border=”0″ alt=”About Us
Page”></a></td>
<td><a href=”events.html”><img
src=”images/Divas_07.jpg” width=”63″
height=”62″ border=”0″ alt=”Events
Page”></a></td>
<td><a href=”members.html”><img
src=”images/Divas_08.jpg” width=”113″
height=”62″ border=”0″ alt=”Members Only
Page”></a></td>
<td><a href=”contact.html”><img
src=”images/Divas_09.jpg” width=”87″
height=”62″ border=”0″ alt=”Contact Us
Page”></a></td>
<td>
<img src=”images/Divas_10.jpg”
width=”86″ height=”62″ alt=”"></td>
</tr>
<tr>
<td>
<img src=”images/Divas_11.jpg”
width=”96″ height=”410″ alt=”"></td>
<td>
<img src=”images/Divas_12.jpg”
width=”165″ height=”410″ alt=”Join us For
Drinks Every Week”></td>
<td colspan=”6″ width=”539″
height=”410″ bgcolor=”black”
STYLE=”color:white;” valign=”top”>
<h1>Title of Page</h1>
<p>
Test Data delivers the highest quality
designs and marketing solutions at
affordable prices. We Believe that you
need a comprehensive strategy to catch and
compel your target market. We believe in
creating demand for your talents, products
or services through positive Web-based
technologies, Media and networking. </p>
</td>
</tr>
<tr>
<td>
<img src=”images/spacer.gif”
width=”96″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”165″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”91″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”99″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”63″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”113″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”87″ height=”1″ alt=”"></td>
<td>
<img src=”images/spacer.gif”
width=”86″ height=”1″ alt=”"></td>
</tr>
</table>
</body>
</html>

Making Several Pages From the Above Template

The final step is to save your template as multiple web pages. This is how you do it:

Go to File, Save As, Type in about.html (hit Save)
Change all of the content in the page to About Us information including titles, pictures, and text
Go to File, Save As, Type in events.html (hit Save)
Change all of the content in the page to Events information including titles, pictures, and text
Go to File, Save As, Type in members.html (hit Save)
Change all of the content in the page to Members Only information including titles, pictures, and text
Go to File, Save As, Type in contact.html (hit Save)
Change all of the content in the page to Contact Us information including titles, pictures, and text. Now, open your home page (index.html). You should be able to click on every one of your links and doing so should forward you to that specific page.