2duck-bluegreen.png

Stories illustrated with pictures

Tutorial

For stories that have
1.1. More text.
1.2. Few pictures.
1.3. Stories broken into chapters which can be linked together.
Authoring is made easy using SeaMonkey's Composer.

Oamaru Banks

Gallery

Tutorial

For stories that have
2.1. A bit of text for each pic - like the old photo albums.
2.2. An arrangement of pics in 3column table with brief descriptions.
2.3. Such pics are usually linked to a larger pic
2.4. Magnify and return (as in steps 3.4 to 3.8 below - and as shown in Oamaru Town, Rail Trail examples lower right)

Oamaru town as gallery

Thumbnail pictures in the left column

Tutorial

For stories that offer everything on the one page.
3.1. Pictures (many or few) are accompanied by brief text descriptions.
3.2. Thumbnail pics (100px wide) reveal a larger pic (500px longest side) when hovered on.
3.3. Click thumbnail to replace page with fullsize pic.
3.4. There may be an option to "magnify" part of the fullsize pic.
3.5. Chrome permits clicking on the part of interest and makes it the centre of magnification.
3.6. A second click reduces to fullsize in the browser window again.
3.7. Which permits another magnification - of a different part of the picture (ideal for group photos - examine people one-at-a-time!).
3.8. Use back button (top left browser, left-of-Home-button on Android phone, dedicated button on mouse ....) to return to Thumbnail page.

Oamaru Town

Rail Trail

Audio & Video

Web pages can link usefully to audio and video files. These media files can be on the computer (for offline streaming) or somewhere (YouTube, Vimeo) for online streaming. Online streaming will be subject to download speeds. Offline streaming will not have ads (like YouTube).

Both methods will be described for the two main varieties of story-telling above. (Under construction)

Oamaru town - 3col

+ audio, video

Oamaru town - simple

+ audio, video

Colour palette choices in web page design

Web page design might begin thus:
5.1. Layout the page in blocks. (Blocks can be realised using divs or tables).
5.2. Choose a colour palette or create one.
5.3. Photos may look better on a pattern background in the chosen palette colour.
5.4. Choose font characteristics.

The links at right are about colour choices.

Palette examples at coolers.co
Palette generator at
paletton.com
How-to video at
youtube