CSS Template Tutorial

CSS Template Tutorial Please take your time to visit http://www.FreeCSS.info Table of Contents Step 1 – Setting up……………………………………………….…page 3 Step 2 – Coding the basics……………………………………….page 5 Step 3 – Coding and slicing the header………………….…page 9 Step 4 – Horizontal CSS Navigation…………………………page 15 Step 5 – Column Floating………………………………………..page 20 Step 6 – Coding the content………………………………….…page 23 Step 7 – Right column navigation…………………………….page 27 Step 8 – Finishing off……………………………………………… page 30 Step 1 – Setting Up 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 o Without slicing already done (get taught) o 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 ...