Tut: Making A Basic Site Using CSS Templates

[Lucaio]

Right, I'm bored and I've seen quite a few posts about how people would like to improve their sites or make themselves a site.
That's why I wrote this tutorial, it's simple and basic and I'm pretty sure anyone can do it. So let's get started!

What You Need:
- Computer
- Internet Connection
- Domain/Subdomain
- Hosting

Step 1
Find a CSS template you would like to use. There are loads on the internet, just Google "Free CSS templates". Once you have found one you like proceed to step 2.

Step 2
For this tutorial I am going to use this template: Template Preview (collaboration) - Free CSS Templates
Which is the one I used for my site.
What you now have to do is download all the files for the template, just basically click on the link that says "Download .zip".

Step 3
Once the file has been downloaded unzip it (Or if your safety conscious, scan it for viruses first).
Most templates should have 3 different files/folders, the CSS, the HTML and a folder full of the images required.

Step 4
Now its time to upload the files to where your site is hosted. I will be doing this tutorial on how the CPanel hosting is laid out, I don't know how the Freewebs one is or any other, but I assume it is very similar.

Firstly upload the css file into the main directory of the site, then upload the HTML file into the same directory (Make sure the HTML file is called index, this will be your homepage).
Next you must upload all the images, these must be uploaded into the "image" directory, if there isn't one create one, if you are using CPanel just click on the "New Folder" button in the File Manager and name it images.
Make sure every image is uploaded into this directory.

Step 5
Check out your site! You should see the template as your homepage, if you don't you have gone wrong somewhere, go over all the steps again to make sure you haven't made any mistakes.
One VITAL point is that you must make sure that the CSS file is in your main directory and it the header of the HTML it says:
[HTML]<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />
[/HTML]
Where it says "/style.css" is the name of the CSS file it is trying to use so you MUST make sure it is the same as the one in your main directory.

Step 6
Now its all about editing the HTML file to display the content you want.
Don't mess round with the DIV layers though (Unless you know what you are doing) as it could mess up the template.
Use this HTML file for every page and just change the content you want changed (If you think copying and pasting this all the time is a bit boring, you could go on to look at PHP includes, just do a quick google of it).

Well, that's it really.
Very basic and vague I know, but its a starting point. If you go and learn some basic HTML aswell it would help greatly as you would actually know what you are doing.

[Joka]

Im sure you will help alot of people with this one...

[Sephora]

Thanks, will have a look at this tonight.

[JoGePa]

ok thanks, stand back, i'm going in!!
hope you get a freebee soon

[mnorhelmi_r]

woa. agree! i'm trying too. Hope you'll get a good karma soon

[Lucaio]

Well, I wasn't expecting a response like this.

Maybe it should be mad into a sticky.