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
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.
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 under exposed.
|
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.
|
Going a little beyond the basics,
convert the format of the photo from the digital cameras 'jpg' format to 'gif' format 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, at this basic level they are best avoided for now, as older software will not display the images.
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.
"She stood on the balcony
inexplicably mimicking him hiccupping,
and amicably welcoming him home.".
- Text to Speech Software Review. There are more tongue twister clips and other samples of the voices on page 2 of the review.
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.