using free web designs

Types of Templates

There are many sites offering free web templates, and these fall into four basic categories:

  1. Skeletal layouts
  2. Polished designs
  3. Dreamweaver designs
  4. Designs for content management systems

For the first three approaches in the list above, the process will be similar: Open the relevant HTML and CSS files in your development text editor of choice (do not use a word processor!) and begin customizing the included files to match your needs. If you use a tool such as Dreamweaver or NVU, you'll be able to work visually, while raw text editors such as TextMate or BBEdit will require you to work directly in the HTML and CSS code.

See our HTML 101 tutorial for a starting point, or try the W3School's excellent HTML and CSS tutorials.

In this tutorial, we'll point you to resources where you can obtain free pre-fab site templates. Then we'll walk you through the steps of customizing a single pre-fab site we've provided for your use.

Tip: Don't try to populate all of your pages with content first and then work out the design - you want to avoid replicating mistakes or unfinished design elements to other pages on your site. Instead, finalize your design elements for a single page of the site first (generally the homepage, which should be called index.html), then pull down File | Save As and save the page with another filename representing the next page of your site. This problem is avoided by using a content management system, in which content is totally separated from design elements.