CSS Template Tutorial – 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
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.
Want to learn CSS fast?
Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.
Related CSS Tutorials
CSS Template Tutorials – Coding the BasicsJuly 20, 2008 / 8 Comments
The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the templateRead
CSS Template Tutorial – Finishing OffSeptember 16, 2007 / 34 Comments
I will show you in this part how to finish the template off with a footer and just make our coding a little neater.Read
CSS Template Tutorial – Right column linksSeptember 16, 2007 / 3 Comments
The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.Read