printer friendly version

Installing premade templates

People who make designs are sometimes in doubt: who are these templates made for? Will those people know how to use them? Aren't people who know how to use premade layouts able to make their own?
I think premade layouts are primarly made for those not so experienced with image editors, or people who found themselves in an inspiration block, but they want to refresh their site's look. Premades are not for people who can't use basic HTML! One who doesn't know what's a start and what's an ending tag, how to link pages together and how to add their own content won't have much use of any premade layout.

If you're totally new to HTML I can give you a few shortcuts that will help you just enough to set up your web site — but this will not be enough if you want to make a layout of your own. Please, read all HTML tutorials I wrote if you want to learn some real stuff. This tutorial is for the lazy ones.

This text has been written with my templates in mind, but I'm sure other designers have a similar pattern, so it may be useful when using other people's templates as well.

Why is linking back necessary?

If you're still wondering this, then you obviously don't know much about image creation and web design. It takes time to produce a quality layout. There are hours of effort behind my designs, and I demand to be credited for this work.
I charge for designs on request, and they're not what you'd consider cheap.

Setting up pages on your computer

Before uploading your web pages to a public server, you should have the site completely set up on your computer. This means there should be no broken images or links while you test them on your computer, otherwise they may not work on the Internet either.

Step 1: Unzip the template

First of all, you will need to unzip all files to your computer. If you have Windows XP, no additional software is required — on older systems you will need some unzipping software, like 7zip. Unzip the contents of the .zip file anywhere on your computer. This will create a folder named something like 005 (depending on the ID of the file you downloaded). You can rename this folder, it won't affect the files inside it. You may not, however, rename folder images or any image inside it, or the stylesheet (file with extension .css) since this will break the layout.

As I already mentioned, I always save images in a separate folder named images. The stylesheet is saved in the root folder together with HTML file(s). You are not supposed to edit any of the images, or the stylesheet — this is my original design that I don't allow to be altered.

The stylesheet and images are relatively linked to .html documents, so they will work on any computer, and online as well.

Step 2: Edit the content

Open the file(s) to be edited in Notepad (Notepad++, EditPad, Programmers Notepad, PSPad... any editor will do). On HTML templates it's the file index.html that needs to be edited.

My templates contain comments that explain where your content and navigation should begin, and where they should end. It looks something like this:


Do not edit anything that has not been suggested with comments, since you may ruin the layout. And don't remove the credits, either. Do not, and I seriously mean do not remove the DOCTYPE declaration, it is not there to look pretty, but to insure the layout will look as imagined in all browsers, on all systems. If you remove a part of code and then something looks off, don't ask me to fix it. (It happens occasionally.)

First of all, edit the title inside the <title> tag.

The main title of the page is inside <h1> tag. If you want a fancy formatting I set in my stylesheet, make sure your titles are all wrapped in this tag.

Smaller headings are inside <h2> tags — these titles are usually in the sidebar, but may sometimes also be in the content.

On some layouts there is a third level of headings as well, all wrapped in <h3> tags — this is more often on a blog-like templates. <h4> tag is extremely rare but, may appear on some templates.

Some layouts have pretty boxes for some content you wish to emphasize — it's usually a div with class box or a blockquote — this is mentioned in the template itself.

Make sure all text you write is inside a paragraph <p>, otherwise text might not be justified, or line spacing may not be convenient for reading. You should do your best to use tags that I used, so your page would closely match the original template.

When you insert your own images, make sure they're relatively linked to the document, instead of, for example, write files/myimage.gif.

In the end, don't forget to save your files. Name them somewhat recognizable. For example, the first page that will be displayed to the visitors must be index.html. A page where you will link to other web sites could be named links.html, while a page where you will write about yourself might be named about.html. If you use names that are easily connected with the content, this will help your visitors to find their way, and to you when you decide to edit some pages.

Step 3: Link the documents

I strongly advise you to use relative addresses, because this way you will be able to test all pages while they're still on your computer. When linking to the About me page from any other page in the same folder, you should use:

<a href="about.html">About me</a>

Step 4: Testing pages locally

Open your index page and follow all the links on it to other pages. If you get an error "The page cannot be displayed" your link is probably incorrect, or you linked to a page on the Internet and you're not connected at the moment.

If you used relative URL-s then every page that works on your computer, should also work online.

Setting the website online

Of course, you need a free server where you'll be able to upload it. The easiest way to do it is using FTP (learn how to use FTP). If your server does not allow it, then you'll just have to use the file manager they provided, altough uploading may take more time. With FTP you'll be able to upload all files and folders at once, by selecting all .html and .css files and the folder images, and selecting Upload. When using file manager, you will have to create the folder named images and upload all images there, otherwise they won't be shown.

After the upload is complete, type your site's address. Your index page should be there now. If something is wrong, you may have uploaded files to a wrong folder. Otherwise, it should look exactly as it did on your computer.

What if it doesn't work?

If this tutorial was not helpful, you may always try one of the following:

  • Try again
  • Choose another template
  • Read another tutorial
  • Learn HTML

I hope you will manage it after all :)

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business