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.
Thank you for coming up with such informative content.I will be back!
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.
He meant use IE 6 instead of 7.
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
Yea I have a suite of every IE version back to 6 for compatibility testing.
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!
How about ColorZilla for firefox? Check it out – https://addons.mozilla.org/en-US/firefox/addon/271. Also Firebug is a must have for a firefox.
its good thing i learn lot from u
thank you:))
good tutorial and nice tool information about Colour To HTML