Building a website with a web template

If you are willing to learn a little bit of HTML and how to use an editor, building your website using a prebuilt web template can save you a lot of time and effort. We purchased a professionally designed web template from BasicTemplates.com and used it to build a mini website.

We show the template in different stages as we modified it and little snippets of code that explain how the changes were made. (Sorry we can't show you all of the code because of copyright restrictions)

Two factors determined our choice of a web template to be used in these lessons. We chose a template from BasicTemplates because of the affordable price and the use of CSS in the design structure. Our $5 web template was delivered in a zip file to our email address within the hour of ordering.

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. Skim some of the lessons in our HTML tutorial to familiarize yourself with some of the lingo. Study the lessons on tables, paragraphs, hyperlinks, headings and style sheets.

A Simple HTML Editor

Any simple HTML 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 Here. These are all free editors and we recommend NoteTab Light for beginners.

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 Planning your website. and Webpage Content

Things you'll need LATER

Home

MoonFruit
LIVE JOURNAL
CalgaryPlanet
More websites

Free Website Builders

Web Hosting Services
Web Hosting FAQ
Recommended
Web Hosts

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.

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.

Begin by browsing the lesson in our web design tutorial on Researching 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 if you consider these points:

1...The colors of a chosen template cannot always be easily changed. If you don't have access to a good graphics package for editing background images, choose a template with your desired colors.

2...The images included with the template can be replaced if needed.

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.

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 Hosted at Bluehost.com

|HTML OnLine | Website Tutorial | Home |