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:

• Each section of the site is a separate page, which means each section has its own unique URL which can be bookmarked independently and indexed separately by the search engines.
• All pages refer to a single external stylesheet for all design points - page background, fonts, and overall page layout. However, the layout of the content area, title, and navigation icons is done in HTML tables to simplify modifications to the design for novice users.
• Because all content on the page is in plain HTML text, important content such as the headline and "about" text is indexed by search engines, which means it stands a better chance of bringing in traffic from web searchers than does an all-Flash site (Flash sites can be made indexable too, if proper production steps are followed).
• The video is embedded as QuickTime rather than as a Flash player, so its controls look a little different (it would certainly be possible to convert the video to Flash .flv and embed that, but the QuickTime embedding process is easier.)
• The map is embedded directly with code provided by Google, and does not need to be handled with a special Flash component.
• In this example, we use a single static image on the Photos page; you'll probably want to embed a SoundSlides or other type of slideshow here.
• This particular site design is not optimized for including lots of text in the page - you'll find that text scrolls off the bottom of the background photo. However, take a look at the About section - you can embed large blocks of text into pages with an iframe, so that text can scroll without scrolling the whole page.

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:

• Monoslideshow
• Smoothgallery
• Meyerweb's S5
• Scooch
• Many more (search)

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!