CSS Heaven - Free XHTML, HTML5 & CSS Templates

Note : This tutorial is strictly for newbies. This will sound like a joke to those who know HTML and CSS. But, for a newbie, this will be hugely helpful.

So, you found a great looking free CSS template and want to add your contents and publish in your website. But, the problem is that you haven’t done it before. You have no prior experience in HTML, CSS or PHP. Before thinking about hiring a designer just to edit a free CSS Template, why not consider learning to do it yourself? It is actually pretty simple. But, not that simple.

In this tutorial I will show you how to edit the CSS and HTML based template and add contents to it.

I can’t edit this template using MS Word!

No, you can’t use Microsoft Word or iWork Pages to edit your website. You can’t even use Microsoft Frontpage to do that. MS Word and iWork Pages are Word Processors. Not HTML Editor. MS Frontpage will only mess things up. So, keep this in your mind – Never open a website template in MS Word, iWork Page or MS Frontpage. Not even once.

What you need ?

To edit HTML, You will need software that are designated to do that. There are plenty of great apps out there that will help you edit HTML like a Pro. Most people would prefer WYSWYG editors like Adobe Dreamweaver and other expensive software. But serious web designers prefer a simple text editor like Notepad++ or TextMate. But, for a beginner, editing HTML on text editors might be a bit difficult.

Hence, for this tutorial we will use a free and Open Source HTML Editor called KompoZer. This is probably the only free HTML editor that gives the much required importance for accessibility and web standards. So, go ahead and download a suitable version of KompoZer for your Operating System. It works with Mac OS X, Windows and Linux.

The Interface

Below is a screenshot of KompoZer running on Mac OS X.

Set up everything.

Let’s get started. For this tutorial, I am using the CSS Heaven 2 Template I released earlier. Download the template and extract it into a folder. Now open KompoZer and you will see a screen like the above. Click on Edit Site List icon as shown on the image below.

You will get a screen asking you to select a directory (see the image below). Click on the Select A Directory button and choose the folder where you just extracted the template. and click OK.

You will see a list of files and folders at the left side of the screen (see below)

Double click on the index.html file from the list and you will get a window like in the screenshot below.

Now, the real work.

By default, KompoZer will open an html file in design mode. But you should never edit the contents using the Design Mode. Although it is very easy to do it that way, it is not the proper and professional way.

At the bottom of the window, you will see 3 tabs (as shown in the screenshot below). Now, go ahead and click on the second tab (Split).

Now, you will be able to see all the html tags and source code in another window right below the preview. That is where we will be editing our template.

Changing the website name.

Select the Website name from the preview window and you will see the the source code of the selected text right below the preview window. Now, click on the source code and change your website name.

Click again on the preview window and you will see that the name is now changed.

The right way is to edit only the contents and not the design. When you look at the source code of the website, you will see many tags like <h2>, <p>, <div>, <span> etc. These tags should not be removed or edited unless you know what you are doing. If you are a newbie and don’t know anything about HTML, leave these tags alone and edit only the contents inside them.

Now, let’s edit a paragraph.

Select the text under the heading About. You will see the source code under the preview window. You can see that the actual content is inside Paragraph tags (<p>….</p>). Now, when you edit. make sure that you don’t remove the container tags. ie, <p>….</p>. Only edit the text inside that. This way you will be able to edit the text contents without disturbing the design.

Now go ahead and click on all the contents that you want to change and edit the source code shown below the preview window. And, always make sure that you don’t change or delete the container tag. After editing each content, refresh the preview and make sure that all is looking good.

That’s all for now about editing the contents of a website template. In the next tutorial, you will learn how to customize a CSS Template’s design. I am still preparing the tutorial and hope to publish it pretty soon. So, stay tuned.