Blog

Making a Website Template With All the Fixin’s

Now that you’ve learned basic HTML and CSS skills, its time to apply those tools to the website template that we made for the Women’s Group, the design we’ve been working with. If you feel that you’re lacking in the HTML and CSS skills, don’t worry you’ll definitely get a hang of it by the end of the course. Practice makes perfect in this field, but anybody has the capability to be a great artist and programmer. I look forward to hearing from you and seeing all of the designs you’ve put together!

Open the webpage that we’ve generated from the original design. It should be located in /web/index.html. Our graphics editor does a great job at eliminating the creation of HTML files and the initial programming that we did in the previous chapter. By the way, I chose this design because of its simplicity and ease of scalability. Now that we have the HTML file generated, we just need to make this web page practical.

The first thing that needs to be done is to remove the layer where the body of the page where all of the text is (in this design it is the about us section). To do this, hover over the image in your web browser, right click on about us, hit properties and find out what the image is called.

In this case, the image is called Divas_13.jpg, and it’s located in the images folder. Now, open the web page within your text editor like we’ve done earlier in the book. The easiest way to do this is to open note pad (start, run, type in notepad, and click ok) and go to file open, select the HTML file you’ve been working with, and select open.

Now what you need to do is scroll down to where the SRC is images/Divas_13.jpg and completely alter that line. The first thing you need to do is copy the width and the height to the TD tag, ad a background color to the TD tag (bgcolor) and then completely remove the image from that table column. Here is an example:

Before:

<td colspan=”6″><img
src=”images/Divas_13.jpg” width=”539″
height=”410″ alt=”"></td>

After:

<td colspan=”6″ width=”539″ height=”410″
bgcolor=”black”>
</td>

Now preview your HTML file in your web browser: The body has been completely removed and now you have the <TD></TD> space to add text. Here is the text I’m going to add:

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.

So to achieve this, we need to apply it into the table, but we need to apply a white font to all of the text in the table. We will do this with a STYLE tag:

<td colspan=”6″ width=”539″ height=”410″ bgcolor=”black” STYLE=”color:white;”>
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.
</td>

Now, notice that the text is in the middle of the table? We need to move it to the top of the table, and to do this, we use the VALIGN tag. VALIGN allows you to Veritically align your content to the top, middle, or bottom of the column. It defaults to the middle, so we just need to change it to the top:

<td colspan=”6″ width=”539″ height=”410″ bgcolor=”black” STYLE=”color:white;” VALIGN=”top”>
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.
</td>

The next step is to improve this font and add style to your text. To do this, we’re going to add <p> around our content and in the header, we are going to assign <p> to a certain font and font size.

Add this to the top of the page right below the </TITLE> tag, but above the </HEAD> tag:

<STYLE>
P {
Font-Family: Verdana;
Font-Size: 12px;
}
H1 {
Font-Family: Verdana;
Font-Size: 14px;
}
</STYLE>

And add the <P> tag to your content:

<td colspan=”6″ width=”539″ height=”410″
bgcolor=”black” STYLE=”color:white;”
VALIGN=”top”>
<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>

The next step is to apply a background to the actual web page itself. This will get rid of the all of the white you see around the design. For purposes of this design, we’re going to make it black. So, alter the body tag:

Before:

<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

After:

<body bgcolor=”black” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

The next step, how that we’ve established styles, is to associate links to the about us, events, members only, and contact us graphics. I’m also going to associate the logo, to go to a home page (index.html, which we haven’t created yet). We’re going to find these using the same method we did to select the body picture, except this time we’re not going to delete it, we’re going to add an <A> tag around it. Allow me to demonstrate:

Right click on about us, hit properties, and get the name of the image
In this case, it’s named “Divas_06.jpg”. In the future, it may be a good idea to rename all of the images in your
navigation menu to make better sense to you, but for the purpose of this project it is not necessary. Now, open the code for the web page, and find that image. There are a few things you need to do. Notice the ALT tag on the image? You should fill this in with relevant content for a few reasons: search engines like it, it is easier for the visually impaired to use their handicap software to know what the image is, and it is also good etiquette for future web designers to take over your code. You also need to add a zero pixel border around the image, otherwise it will default to a one pixel border when you add the <a> tag.

Before:

<td><img src=”images/Divas_06.jpg” width=”99″ height=”62″ alt=”"></td>

After:

<td><a href=”about.html”><img src=”images/Divas_06.jpg” width=”99″ height=”62″ border=”0″ alt=”About Us Page”></a></td>

Now, do these to all of the images in the navigation menu so it looks like this:

<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>

Also, since we’ve added a style to the <p> tag and the <h1> tag, lets insert an <h1> to demonstrate where the title of the page is located at.