Turning a template into a site

“How can I edit a website template?” That’s one of the most common questions I receive by email. There are several ways to edit templates, but I have my own methods. This tutorial will show you the most logical way to edit a template.

This tutorial assumes that you know how to uncompress a .zip file. We wont cover that in this tutorial.

You also need an HTML editor for this tutorial. There are two types of editors. WYSIWYG editors, which you would edit HTML in a word processor like environment, are very popular. Another style is the text editor style, where you edit HTML like you would a text document.

I’m going to use KompoZer for this tutorial because it is probably the easiest way for a beginner to edit a template. KompoZer is a 100% free and open source WYSIWYG editor. These steps will work with any editor.

Before you start, think about the pages you want to access from any page. I’m going to use Home, Products, Services, About, and Contact.

The steps we are going to take:

1. Create the navigation links
2. Use the template file to create the rest of the pages
3. Edit the content
4. Test the navigation to make sure it works

Step I: The template I chose already had those pages listed in the navigation. Go ahead and list the pages you want accessible from every page. Now we’ll make a link to the pages using a one-word name followed by .html. For example, About Us would become about.html and Contact Us would become contact.html. Right click the page name and go to link properties. For the Home link I’ll put index.html because that’s the default file a webserver loads when you go to a website. For the rest of the pages just enter your desired name for the page followed by .html. It’s important to make sure the link is lowercase. Save the file and proceed to the next step.

Step II:The next step is pretty easy. We’re now going to make a copy of the template file to make the other pages of the site. The easiest way to do that is right-click the index.html file and select copy. Then right-click a blank space in the folder and select paste. That will create a copy of index.html named Copy of index.html. Just rename that file to the second page of the site. We already have index.html which is the homepage. Now repeat that step for the rest of the pages.

Step III: The next step is also very easy. Go ahead and enter all the content across all the pages. There are lots of places to get pictures for you to use on your site. Sites like Stock.XCHNG and morguefile have very good free photos you can use on our site without paying royalty fees.

Step IV: We’re at the last step. Now we want to test the navigation and make sure it all works. Just open index.html up in your favorite browser and click all the links in the navigation.

We’re done! Congratulations, you now have your very own website. Now all you need to do is upload it to your webserver so people can access it.