CSS Template Tutorial FreeCSS.info（教程FreeCSS.info CSS模板）.pdf

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