Knight Digital Media Center Multimedia Training

Tutorial: Using Free Web Designs

By Scot Hacker

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/free-web-designs/

Introduction

When building small, standalone multimedia sites (i.e. mini-sites not directly generated by your content management system, if you have one), you have several options:

The development path you choose depends on many factors, such as whether you have more Flash or HTML+CSS skills in-house, how important search-engine optimization is to your organization, and whether you can locate a freely available design to suit your needs. Unless you're a professional designer (or have access to one), it's almost always going to be easier to modify an existing, ready-made design to suit your needs than it will be to create a polished design from scratch.

Developing a functional and attractive page layout can be tricky if you're pressed for skills, time, or both. Fortunately, there are literally thousands of HTML+CSS templates available on the internet, free for the download. Most of these templates are labors of love by designers who have benefitted in their daily work from the gifts of open source and want to give something back, while other designs are sold on a commercial basis.

In this tutorial, we'll look at some of the options for working with pre-existing HTML design templates, and provide a "starter kit" of our own you can customize to suit your needs.

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.

Skeletal Designs

Simple "skeletal" layout templates solve a common problem: How to create the basic layout of a site that commonly has a header or banner area, a content area, a sidebar, a navigation system or menu, and a footer area. Nevermind the color and graphics, font styles, etc. -- you just want a basic layout you can customize and then pour content into. Creating page layouts with HTML tables is easy to do, but it's best to avoid HTML tables for page layout (we'll cover the many reasons for that in a separate tutorial). The right way to lay out pages is with Cascading Style Sheets... but CSS layout can be tricky, especially when you need to guarantee compliance with a wide variety of web browsers. Using a pre-fab skeletal layout is a good way to get the basic architecture taken care of quickly and freely. It takes a bit more skill to work with skeletal templates than with polished designs, but if you don't want someone else's full design concept getting in your way, look to these sites for a starting point:

These sites take different approaches to providing free HTML+CSS skeletal designs -- some offer downloadable packages as a .zip file, while others will expect you to view source in your browser and paste the contents into your HTML editor of choice. In all cases, you'll be able to customize the colors, background images, fonts and other styles with appropriate HTML+CSS skills, then start pasting content into pages you create by saving copies of your finished template.

Complete Pre-Packaged Web Designs

Complete downloadable designs give you the kitchen sink: The skeletal layout plus a pre-fab look and feel -- colors, graphics, font choices, borders, accent graphics, starter banners, list styles... everything. Of course you can still modify the polished designs as you see fit. The advantage to these templates is that if you can find one close to the look you're going for, you'll have much less work to do. The disadvantage is that, despite the huge number of choices, it can be hard to find one that feels "just right," and modifying some aspects of these sites can sometimes be harder than working up from a lower level. Still, for small static sites such as multimedia packages, these may be the quickest path to attractive results:

Designs Built Into Adobe Dreamweaver

If you use Adobe (formerly Macromedia) Dreamweaver, you'll find dozens of designs at your fingertips, ready for customization. When you first launch Dreamweaver, you'll see a splash screen similar to this:

Notice the right column, labeled "Create From Samples." From here you can select from among Dreamweaver's pre-packaged collection of CSS styles, complete page designs, and start pages.

Select a stylesheet or design, save it into your web site's document root, and begin customizing the design.

Designs for Content Management Systems

While this tutorial is focused on creating small static sites that are not stored directly inside a content management system (though they may certainly be uploaded to the same server and linked to from a CMS-generated page), there are many situations where using a CMS such as WordPress, Drupal, or Joomla will be convenient and appropriate. Most CMSs have an associated cottage industry of theme/template designers, who provide downloadable templates  either for free or for a small fee.

If you're building a static site, you probably, don't want to use these designs, as they're full of template tags and programming logic specific to those systems. They will not work "out of the box" without being installed into the right CMS.

On the other hand, if you are using one of these CMS, these templates can save you a ton of time, as they include not just the HTML and CSS needed, but also the programming code needed to make sites fully functional (such as auto-generated navigation menus, category lists, author lists, calendars, and so forth).

Our Sample HTML+CSS Template

Because of the huge variety of approaches to web design, and the many ways to tackle common design problems, it would be impossible to provide a universal guide to working with the downloadable templates linked on the previous pages. However, the Knight Digital Media Center has packaged up an HTML+CSS template of our own, which we can provide instructions for. This HTML+CSS template is based loosely on our freely downloadable Flash template.

 Download this tutorial as a .zip archive

 Preview our free design template site

Notes on this template:

Working With This Template

Changing the Title

Of course, your project won't be called "Disappearing in Darfur," so that's probably the first thing you'll want to change. Start by opening up all of the project files in your favorite text editor, or Dreamweaver.

about.html
index.html
map.html
photos.html
video.html
styles.css

At the top of each Dreamweaver window, you'll see this Title field

That title is important - it doesn't display on the page, but it is how Google will index your page in search results, and it's how your page(s) will show up in people's bookmarks. Checking the title should always be the first thing you do when working on any new HTML document.

If you're using a text editor other than Dreamweaver, look for this section of code near the top of the document:

<title>Disappearing in Darfur</title>

Either way, change the title so it's meaningful to your project.

Note: Ideally, each page of your site should have a slightly different title, so they don't all appear the same in people's bookmarks. A good convention to follow is:

Site Name - Page Name

for example:

Disappearing in Darfur - Video

Once you've got the title tags changed on all pages, you'll also want to change the visible "Disappearing in Darfur" headline on all pages.

Changing the main background image

To create a differently colored gradient for the overall background, open up images/bg.jpg in an image editor such as Adobe Photoshop and use its gradient tool to create a different gradient. This is done by setting both a foreground and a background color, then dragging the mouse vertically down the face of the image.


To alter the gradient in Photoshop, select both a background and a foreground color, then use the gradient tool (circled) and drag your mouse over the image, for example top to bottom. The gradient will start with the foreground color and finish with the background color.

Save the new file into the same location you opened it from, overwriting the original file.

To remove the background entirely, open the file styles.css and remove the following line from the body{} section:

background-image: url(images/bg.jpg);
background-repeat: repeat-x;

With the background image removed, you may want to alter the background color, by changing the hex value in this string:

background-color: #343A54;

You can obtain hexadecimal color values from most web/html editing tools, from Photoshop, or with a web-based color picker such as this one.

Changing the content area background

Prepare a photograph with these exact dimensions: 800px x 540px.

Overwrite the file images/background-photo.jpg with the new image file.

If you want to work with a different photo size, that's fine, but you'll need to edit the CSS rules for width: and height: in the .content section of the stylesheet to match.

Changing the Rollover Icons

Each rollover icon consists of two images -- one displayed when the mouse is over it, and another when the mouse is not over it. Create 129px x 99px images (in pairs) in Photoshop or another image editor and save them with logical filenames, such as "about-on.jpg" and "about-off.jpg" in the images folder.

You then have two choices:

A) If you have a copy of Adobe Dreamweaver, you can simply remove a sample icon from the sidebar, leaving your cursor in its place. Then pull down Insert | Image Objects | Rollover Image. Fill out the fields as shown below, then click OK.

B) If you're working with a plain text editor, open up index.html and look for the section marked:

<!-- BEGIN ROLLOVER ICONS -->

You'll find one line of HTML for each icon. Edit the referenced filenames so they point to your new files. Remember to edit the alt= tags too!

Changing the "About" text

The scrolling "About" text lives in an external file called text-inc.html. Any HTML document with that name will be read into the scrolling text area (we use an "iframe" to do this). Note that the provided include file includes a few of its own style rules for its page background color, which is different from that of the rest of the site.

Changing the Video

Prepare your video for the web using the export and compression instructions in our Compressing Web Video tutorial.

Save your web-ready video file in the "video" folder, then open the video.html file and change the video reference.

With Dreamweaver:

On the page, select the placeholder object where the video goes and take a look at the Properties inspector:

Click the folder icon (circled) next to the word "Embed... Src" and navigate to the new video file.

With a plain text editor:

Open video.html and find the section labeled:

<!-- Embed video here -->

replace the two references to countdown.mov with the filename of the QuickTime movie you placed in the "video" folder earlier.

Inserting a slideshow

The example Photos page embeds just a single image. You can either replace this with a single image of your choice, or use an embedded slideshow app of your choice. SoundSlides is a popular choice, and we have a complete tutorial for it. Once your SoundSlides slideshow is complete, open the index.html file that it generates and find the section of code that actually embeds the slideshow. Replace the image reference in your example site's photos.html file with the SoundSlides-generated code, then copy the SoundSlides-generated "publish_to_web" folder into your example site's "images" folder.

Don't own a copy of SoundSlides? There are many other ways to create play-in-place slideshows with freely available web software. Here are a few that we like:

Using a different map

Go to maps.google.com and type in an address (or state name, country name, etc.) Zoom in or out, scroll side to side, enable the satellite view, or make any other changes you like. Once you're satisfied that your map looks right, click the link marked "Link to this page" at the top right.

 You'll see two fields: One for linking to your custom map, the other for embedding the map in blogs or other web pages. Click in that second field and its content will be selected. Copy the contents of the field to the clipboard (Edit | Copy).

Now open map.html in a text editor or in Dreamweaver's "Code" view. Find the section of code marked <iframe> and remove the entire line. Then paste Google's code from the clipboard into the same location (Edit | Paste). Save the file, refresh your browser, and you should see your custom map on the page.

Cleaning Up

There's one last job to take care of before uploading your site to a web server: You want to make sure your site includes only the files it actually references. By this point, you may have added new icons, page backgrounds, video files and more to your document root (i.e. your project folder). There would be no sense in uploading this tutorial media to your web server - it would take up space needlessly and make future site management more confusing and complex. Delete any files that are not actually used in your site, and you're ready to upload.

Congratulations on your new multimedia web site!

About this Tutorial

This tutorial was created to augment our Flash Templates tutorial, in order to give our students a fellows equivalent starting points when deciding whether to implement their multimedia sites in Flash or in HTML+CSS. 

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.