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:

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.

css template

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

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

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 Basics

    July 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 template

  • CSS Template Tutorial – Finishing Off

    September 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.

  • CSS Template Tutorial – Right column links

    September 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.



  1. Richard says:

    Thank you for coming up with such informative content.I will be back!

  2. shan says:

    IE installed instead of FF? You’re kidding! Then you talk about the w3c validator (of course). But isn’t IE the ONLY browser that truly doesn’t give a damn about the w3c reccommendations… (?). And don’t the webbuilders ALWAYS have to look for workarounds to have their pages viewed as was intended? I’m a BIT puzzled here.

  3. admin says:

    Sorry its a bit misleading. I recommend having IE6 also installed with firefox because a lot of errors happen in IE6 and its handy to have installed while you create a template as you can quickly check them by loading the page in IE6.

    I ofcourse prefer firefox 🙂

  4. Trahanache says:

    Hi! Thanks for the tut, but Color 2 HTML doesn’t work with Vista Ultimate x64. When I select the “pick color” tool, the screen goes blank (black). Therefore, the only color picked is black.. is there an alternative for this program? Thanks!

  5. pavithra says:

    its good thing i learn lot from u

  6. good tutorial and nice tool information about Colour To HTML

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books