Building a website with a web template

Things you'll need NOW

A basic knowledge of HTML

HTML is the Mark Up Language that web pages are built with. It is very easy to learn. I highly recommend that you work your way through our tutorial on Learning the Basics of HTML before you start this tutorial. Then, skim some of the lessons in our HTML tutorial to familiarize yourself with the lingo. Study the lessons on divisions, paragraphs, hyperlinks ( anchor tag), header tags and style sheets.

A Simple HTML Editor

Any simple HTML or text editor can be used to modify your web template and build the pages of your website. Some free ones that we recommend can be found in the right column of this web page. These are all free HTML editors. Do Not use WYSIWYG editors like SeaMonkey Composer. They mess up your code.

Your Website Content

Before you even choose your template, you should have your website content including text and images, organized and ready to go. Completing this task before you start may help to influence the structure of the web template that you choose. See Researching Your Website, Planning your website. and Webpage Content

Photo Editing Software

You'll need this to resize, crop and optimize the pictures that you will use on your website. A good free on that we recommend is PhotoScape.

Things you'll need LATER

A Web Host

You can build your site and test it on your PC. After it is completed you'll need web space on the internet to transfer your website to. This web space is provided by a Web Host. We provide options on this website for free or affordable web hosting. We sell quality web hosting for $3.25 per month.

FTP Tool

Though all web hosts provide an FTP tool for transferring the web pages on your PC to your web space on the internet (uploading), the process can be performed a bit faster if you get your own personal FTP tool. Some of the HTML editors we have recommended include a tool for uploading your website in their package. If they don't you can download a simple free one (CoreFTP) from our website.

Choosing a template

There are a few things to consider before choosing a web template that will be used to build your website.

If you already have an idea about what you want your site to look like it may make the job of choosing the correct template a little easier.

Consider these points:

1...The colors of your chosen template can be changed. That is, of course, if you are using one of our free templates.

2...The images included with the template can be replaced with your own.

3...All font types and colors can be changed using the CSS style sheets.

With this in mind, the main factor you'll consider when making your choice is the layout or structure of the web template.

Our free templates come in kits that include 3 different layouts pictured below.

You can use all 3 layouts in the construction of your website or choose one and make all the pages the same.

Our free templates also come in fixed width and liquid designs. Liquid designs expand and contract with the width of the visiting browser and can give vistitors a full width display of your heading image at monitor resolutions up to 1920 pixels in width.

Modifying the Template

The Original Template

Changing the Logo

Our first change was to modify the image in the upper left corner to supply a heading for our web page. We used a graphics package that allowed us to convert the image to a bit map, modify it and save as a gif image. It was important to retain the exact size when reconstructing the image.

Changing Some Links

First we changed the image at the top of the first group of links on the left side of the page. An alternate image was supplied in the zip package. We simply changed the name of the file in the code from btn-temp to btn.

From:

<td valign="top"><img width="126" height="40" src="images/btn-temp.gif" border="0"></td>

To:

<td valign="top"><img width="126" height="40" src="images/btn.gif" border="0"></td>

We then altered the hyperlinks themselves and changed their alignment atrribute from right to left.

From:

<div align="right">
<a href="#">HyperLink</a><br>
<a href="#">HyperLink</a><br>
<a href="#">HyperLink</a><br>
<a href="#">HyperLink</a><br>
<a href="#">HyperLink</a><br>
<a href="#">HyperLink</a><br>
</div>

To:

<div align="left">
<a href="#">Cap</a><br>
<a href="#">Charlie</a><br>
<a href="#">Chester</a><br>
<a href="#">Little Man</a><br>
<a href="#">Lilla</a><br>
</div>

Changing Page Content

To change the content of the page we simply removed the text between the paragraph tags (<p>Text</p>) and replaced it with our own.

If we were doing a complete job, we would finish this template by changing the rest of the links, as we did in the example above. We still need to change the destination URLs for each link that we modified. We'll give each page the name of a dog change the hyperlinks and then create the pages.

<div align="left">
<a href="cap.html">Cap</a><br>
<a href="charlie.html">Charlie</a><br>
<a href="chester.html">Chester</a><br>
<a href="little-man.html">Little Man</a><br>
<a href="lilla.html">Lilla</a><br>
</div>

Adding More Pages

Once you have finished all of the links and changed any images that you want to appear on every page, save a copy of the finished page to be used as your final template. You might delete all of the text between the paragraph tags or just replace it each time you create a new page.

New pages are created by simply saving the finished template with a new name, then changing the content and images. We created a page for each of the links we created.

Completed Website

Copyright © 1997 - 2011 - Net Success 2000 Plus Inc - Somerset KY 42502