Clifton Suspension Bridge, Bristol by Peter Frost 

Your Material

Keyboard shortcuts: Alt or Ctrl Key + 0 to 8, for help see Wikipedia access keys.

Get your material into a useful form.

Already have your content arranged as you want it? If so I suggest skipping to Organise the Material

Basics

The first step should be to get your material into electronic form if its not already in that form. So that you or whoever writes the page can paste elements from it into the page.

If you have a large quantity of text in printed form and in good condition. Consider a OCR (Optical Character Recognition) software package and a scanner.

If the copyright of text and images is not clear you need to get permission to use it.

Images

Millennium Square, Bristol Larger photo of Millennium Square, Bristol. Is a picture worth a thousand words? Without a doubt true on web pages. Web pages that don't use images can be pretty drab and unappealing.

Pictures don't have to be large. In fact, take care with large images as they can make pages that are slow to load.

A useful technique is to display a thumbnail (scaled down) photo. Any interested visitors can click on the picture to see a larger photo.

It can be difficult to get interesting 'on topic' photos too. If you don't have the photo(s) you want there are a number of free or inexpensive options:

  • Ask someone with a digital camera to take a photograph, most cameras take photos in the Jpeg (jpg) format which can be used directly in web pages.
  • Use free photos and clip art supplied with CD/DVD's on some computer magazines.
  • Get royalty free photo's from the web - Pixelperfect Digital and Stock Xchng are two of many web sites doing this. The balloon moon glow photo on the home page and the key on the next page are from Stock Xchng.

Check the terms and conditions of use on these. While there are no conditions on many of these, the author may want a credit or simply just want to be told what use is being made of the photo.

Of course you can also buy:

  • Library CD/DVD's of photos or clip art.
  • Individual photos on lots of web sites a common price is $1 per photo.

Manipulating Images

Getting some skills to manipulate your own photos is not essential but will greatly help in getting suitable photos for a page.

The basics are image resizing, cropping and adjusting the brilliance (exposure in pre-digital camera terms). That's getting a photo the size you actually want, trimming unneeded material from a photo and changing the light/dark balance. Some digital cameras come bundled with a package to do these basics.

Of course this is a subject for study in its own right. This example shows what can be done with just a basic knowledge. Tutorials and help on several graphic packages in Graphics-world.com.

underexposed photo The first image is two balloons passing over Ashton Court Mansion in Bristol from the August 2005 Bristol Balloon Fiesta. The bright sky makes both the balloons and Ashton Court Mansion under exposed.
trimmed and brightness adjusted photo The next step is to trim the original image remove any material you do not want to show. Then make the photo lighter by adjusting the brilliance. This photo shows the balloon colours but washes out the sky to white or near white.
Photo with transparent background - merges with page! Going a little beyond the basics, convert the format of the photo from the digital cameras 'jpg' format to 'gif' or 'png' formats gives an option to make the background transparent, allowing the pages background colour to show. I also removed the image border in the html so that it sits naturally in with the text.

The Key on the next page also uses this technique as the key has a shadow it gives a nice 3-D effect.

Image File Formats

The following three image formats are best for use web pages. They are compressed forms so help make a page load more quickly : -
  • jpeg's also called jpg's are very common especially on digital cameras.
  • gif's or animated gif's. Animated gifs are just two or more still photos 'stuck' together to give an animated effect.
  • png's are a more recent addition, very old browsers don't support them but they will be visible to the vast majority of your visitors.

Multimedia

Audio or video clips can also be used as part of your material. You can either get them to load and play when the page loads or run them via a link as in the tongue twister clip below. Multimedia files however: -
  • Dramatically increase page sizes making pages much slower to load.
  • May cause extra running costs see Web Hosting.
  • Are very dependent on what software the visitor uses and the multimedia effects may not work for some visitors.

There are too many formats to mention for multimedia.

The following is a mp3 audio file, produced by an artificial voice called Microsoft Mike. It reads a tongue twister at the fastest voice setting:

It will only work if your visitors have the software needed to play mp3 files. The software is free but older PC's may not have it loaded.

Microsoft Mike speaking.
"She stood on the balcony
inexplicably mimicking him hiccupping, and amicably welcoming him home.".

Content

In Web Design terms all of these raw materials make up the 'content' of the web page. For this site the content is all in the pale yellow area.

Next: Organise the Material >>