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
- 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.
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.
thanks you so so much…