Free CSS Templates

Okay welcome to part one of the tutorial. What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in photoshop and coding it in dreamweaver. You can also access example code at various stages through the tutorial if you have any problems.

Things you will need:

• Dreamweaver or other software
• Photoshop or similar editing software
• Color to HTML - Free download
• Example PSD
  • Without slicing already done (get taught)
  • Pre-sliced (sliced ready for you)

I would also have Internet Explorer 6 installed instead of 7 and Firefox. You can then preview your template in different browsers as you go along. Another tip would be to bookmark w3c validator to check your coding for errors.

Create a new folder

The first thing to do is to set up a site folder for the design. Go to "My Pictures" and create a "tutorial" folder. This is the folder which all the images and files will be stored in. You can then simply upload the contents of the folder to your website host to get it online.

Set up a new site in dreamweaver

Open up dreamweaver and click on the site tab then new site. This should bring up a box like in the screenshot below. Type in the name of your website and click next (dont bother with URL). Then select "do not use server" and click next. Have edit locally selected and browse to find the folder you set up in for the design. On the next screen select local/ on computer and click the folder to select the folder you set up. That should be your website set up to begin the coding process. Basically Dreamweaver makes the folder you set up your "root" folder. It makes things a lot easier when saving or linking to things.

Set up the index file

The main files which will hold the code for the template are going to be index.html and style.css. I start of my templates with just index.html and will split the CSS into an external file later. So to end the setting up process. click file, new and HTML. Save the file as index and in your folder which you set up. For example purposes I will refer to it as tutorial folder.

Step 2- Coding the basics