Hoe maak je een..Tijdbalk
Gepubliceerd op 17 juli 2007
Het is vaak leerzaam en verhelderend om op je website een chronologisch overzicht te presenteren met perioden, personen en gebeurtenissen. Vanuit dit overzicht kun je dan doorverwijzen naar pagina’s op je website.
Gerelateerde kennis:
Schema (Hoe maak je een..)
Opmaak (Hoe maak je een..)
Lay-out (Hoe maak je een..)
Onderstaande afbeelding toont een paar tijdbalken zoals je ze vaak aantreft op websites:
Diverse tijdbalken op een rijtje
Tijdsoverzichten heb je in alle soorten en maten. Toch kun je veelal twee soorten onderscheiden: de simpele lijst en de uitgebreidere tijdbalk. Zie onderstaande illustratie.
De tijdlijst
Een tijdlijst is een chronologische lijst met gebeurtenissen. Het is belangrijk dat het voldoende overzicht biedt. Goede (CSS) opmaak is daarom erg belangrijk.
Bekijk het voorbeeld van een tijdlijst
Tijdlijst broncode
[HTML
1 Kb
]
Andere voorbeelden van tijdlijsten
Een simpele lijst op Wikipedia
Tijdlijst met drie kolommen op annefrankguide.net
Uitgebreid opgemaakte tijdlijst op katemonkey.co.uk
De tijdbalk
Wil je grafisch meer informatie bieden is een tijdbalk onmisbaar. Een tijdbalk heeft een tijdschaal waarop gebeurtenissen, personen, perioden etc. nauwkeurig geplaatst zijn. Omdat je niet zoveel tekst kunt plaatsen is het belangrijk dat je kunt klikken op de begrippen om zo uitleg te krijgen.
Bekijk de voorbeeld tijdbalk
Tijdbalk broncode
[HTML
1 Kb
]
Bovenstaand voorbeeld maakt gebruik van CSS opmaak. Dit is efficiënt, geschikt voor diverse media en makkelijk aan te passen. De balken worden op de pixel nauwkeurig geplaatst door gebruik te maken van absolute posities. Zo wordt de positie en breedte van de balk van de Renaissance (ofwel het begin en tijdsduur van die periode) als volgt gedefinieerd:
.renaissance {
left: 0px;
width: 180px;}
De tijdschaal wordt gedefinieerd in:
ul#schaal li {
border-left: 1px solid black;
text-align: center;
width: 120px;
float: left;
margin: 0;}
Andere voorbeelden
Een voorbeeld van een Macromedia Flash tijdbalk
Een flexibele (X)HTML opzet die zelf de posities van de elementen bepaalt: http://simile.mit.edu/timeline/
|
ThinkQuest Lounge