2008

Web, video, audio:

webquests
ontwerpen

1|Page
Bart Bonamie – Geert Bonamie
Canakkale Onsekiz Mart University – Universiteit Gent
 INHOUDSTAFEL
DEEL 1: OVER WEBQUESTS .............................................................................................................................................. 1
INLEIDING .............................................................................................................................................................................. 1
Doelstellingen ................................................................................................................................................................... 1
Voorkennis ........................................................................................................................................................................ 1
WEBQUESTS: WAT, WAAROM EN HOE ................................................................................................................................... 1
Wat? .................................................................................................................................................................................. 1
Waarom? ........................................................................................................................................................................... 1
Hoe? .................................................................................................................................................................................. 3
Een paar voorbeelden: ...................................................................................................................................................... 4
Evalueren van andere webquests ...................................................................................................................................... 5
DE STRUCTUUR VAN WEBQUESTS ........................................................................................................................................... 6
Inleiding ............................................................................................................................................................................ 6
Taak .................................................................................................................................................................................. 6
Uitwerking......................................................................................................................................................................... 6
Bronnen ............................................................................................................................................................................. 7
Evaluatie ........................................................................................................................................................................... 7
Conclusie........................................................................................................................................................................... 8
Optioneel: Lerarenpagina ................................................................................................................................................. 8
DEEL 2: HET MAKEN VAN DE WEBQUEST................................................................................................................... 9
VOORBEREIDEND WERK ....................................................................................................................................................... 10
Een strategie ................................................................................................................................................................... 10
Wat is een Website? ........................................................................................................................................................ 10
Principes van Website–navigatie .................................................................................................................................... 11
Aandachtspunten voor goed leesbare teksten ................................................................................................................. 13
AANMAKEN VAN DE SITE IN FRONTPAGE ............................................................................................................................. 15
Stap 1: Maak via de sjablonen een “Persoonlijke Website” aan.................................................................................... 15
Stap 2: Pas de namen aan van de pagina’s..................................................................................................................... 19
Stap 3: Maak bijkomende pagina’s aan en voeg ze toe aan de site ................................................................................ 23
Stap 4 (optioneel): hoe zit het met de knoppen bij websites met meerdere niveau’s? ..................................................... 25
GESTALTE GEVEN AAN DE SITE IN FRONTPAGE ................................................................................................................... 30
Invoeren van tekst ........................................................................................................................................................... 30
Invoeren van links ........................................................................................................................................................... 30
Invoeren van afbeeldingen .............................................................................................................................................. 33
Werken met Opmaakstijlen : toepassen en Aanpassen.................................................................................................... 38
AANMAKEN VAN DE SITE IN EXPRESSION WEB .................................................................................................................... 40
Stap 1: Maak via de sjablonen een “Persoonlijke Website” aan.................................................................................... 40
Stap 2: Voeg pagina’s toe en pas de namen aan ............................................................................................................. 40
Stap 3: pas de knoppen aan in de navigatierij en footer ................................................................................................. 41
Stap 4 (optioneel): Sidebar aanpassen............................................................................................................................ 42
GESTALTE GEVEN AAN DE SITE IN EXPPRESSION WEB ........................................................................................................ 43
Invoeren van tekst ........................................................................................................................................................... 43
Invoeren van links ........................................................................................................................................................... 43
Invoeren van afbeeldingen .............................................................................................................................................. 44
De kracht van CSS .......................................................................................................................................................... 45
ONLINE ZETTEN.................................................................................................................................................................... 46
De website comprimeren in een zipfile ........................................................................................................................... 46
Gratis Webhosting........................................................................................................................................................... 46
DEEL 3: WERKEN MET AUDIO– EN VIDEOBESTANDEN ........................................................................................ 51
AUDIO BEWERKEN MET AUDACITY ...................................................................................................................................... 52
Basisbegrippen digitale audio......................................................................................................................................... 52
Audacity: het opstartscherm ........................................................................................................................................... 52

B. & G. Bonamie
 Basisfuncties ................................................................................................................................................................... 53
Veel Voorkomende taken ................................................................................................................................................. 58
VIDEO’S MAKEN MET WINDOWS MOVIEMAKER ................................................................................................................... 69
Voorbereiding: verzamelen materiaal ............................................................................................................................ 69
Movie Maker: importeren foto’s & ruwe montage.......................................................................................................... 71
Video–effecten toevoegen ................................................................................................................................................ 76
Video–overgangen instellen tussen twee clips ................................................................................................................ 77
Titels invoegen ................................................................................................................................................................ 79
Achtergrondmuziek of Voice–over invoegen ................................................................................................................... 82
Film afwerken ................................................................................................................................................................. 84
INTEGRATIE VAN AUDIO EN VIDEO IN DE WEBQUEST ............................................................................................................ 86
Audio in de webquest ...................................................................................................................................................... 86
Uitbreiding van de mogelijkheden: Podcasts met Odeo ................................................................................................. 88
Video in de wbequest....................................................................................................................................................... 92
Uitbreiding van de mogelijkheden: Online videos in Youtube ........................................................................................ 96
APPENDICES ........................................................................................................................................................................ 98
APPENDIX A: RUBRIEK TER EVALUATIE ............................................................................................................................... 99
APPENDIX B: INSTALLATIE VAN LAME_ENC.DLL ............................................................................................................... 102
Windows installatie ....................................................................................................................................................... 102
MacOS installatie.......................................................................................................................................................... 102

B. & G. Bonamie
 AANMAKEN VAN DE SITE IN FRONTPAGE

STAP 1: MAAK VIA DE SJABLONEN EEN “PERSOONLIJKE WEBSITE” AAN

In deze eerste stap maken we een website aan en tonen we hoe je best de standaardteksten
kunt verwijderen.

1. Ga naar Bestand > Nieuw en kies in het rechterpaneel onder “Nieuwe website” voor “meer sjablonen”.

FIG. 6 KIES IN HET RECHTERPANEEL HET TYPE DOCUMENT DAT U WIL AANMAKEN

2. Voer een locatie in waar je de site wil bewaren. In ons geval plaatsen we de website op C:\Webquest.
Dubbelklik vervolgens op het type “Persoonlijke Website”.

FIG. 7 VOER EEN LOCATIE IN ...

B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage Pagina | 16

FIG. 8 ... EN SELECTEER HET TYPE PERSOONLIJKE WEBSITE EN BEVESTIG MET OK.

3. U krijgt een aantal dialoogboxen te zien, en zonder dat u zich ook maar van iets hebt hoeven aan te
trekken, wordt een kant–en–klare website aangemaakt met een startpagina en een vijftal andere
pagina’s: aboutme, favorite, feedback, interest & photo. Merk het verschil op tussen het startpagina–
icoon en de iconen die voor andere pagina’s worden gebruikt.

FIG. 9 DE STRUCTUUR VAN DE NET AANGEMAAKTE PERSOONLIJKE WEBSITE

4. Dubbelklik op de startpagina, index.htm zodat we kunnen zien hoe de site er eigenlijk visueel is
opgemaakt. De index.html wordt in een tweede tabblad centraal op uw scherm geopend (zie Fig. 10).
Merk ten andere de fijne stippellijntjes op: dit wijst erop dat de hele pagina eigenlijk is opgebouwd aan de
hand van tabellen. Willen we de informatie wijzigen, of anders structureren, dan zullen we hier rekening
mee moeten houden.

B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage
FIG. 10 ZO ZIET DE STARTPAGINA VAN ONZE SITE ER AANVANKELIJK UIT.
Laten we even stilstaan bij de structurele elementen die deze
pagina opbouwen. Bovenaan bevindt zich een grote witte
rechthoek met “Welkom op mijn website” erin: dit is de header
van de site, die ook wel eens met de naam topbanner of topbar
wordt aangeduid. Aan de linkerkant hebben we een kolom met
een aantal knoppen: Start, Info over mezelf, Interesses,
Favorieten, … Deze kolom noemen we de navigatiekolom.
Centraal op het scherm, waar de inhoud van de pagina’s wordt
afgebeeld, bevindt zich de body. Helemaal onderaan, maar niet
zichtbaar op Fig. 10 bevindt zich de footer, met opnieuw
snelkoppelingen naar de verschillende pagina’s van deze site.
Pagina | 17
Opgelet!
Er kan wat verwarring ontstaan met betrekking
tot de term “body”: het is immers ook een html–
tag! Als je de code van een webpagina bekijkt, dan
zie je dat die bestaat uit twee grote stukken: het
HOOFD (aangeduid met <head>–tags) en de BODY
(aangeduid met <body>–tags). De inhoud van de
<head>–sectie bevat allerlei rand–informatie over
de webpagina in kwestie: titel, metadata, … De
<body> –sectie bevat alles wat visueel zichtbaar is
op het scherm: niet enkel het centraal gelegen deel
van de pagina (eveneens “body”genoemd), maar
ook de header, navigatiekolom, footer, etc. . De
“BODY” uit Fig. 10 die oranje is ingekleurd, verwijst
naar alles wat tussen de body–tags staat en zal als
dusdanig de volledige zichtbare pagina selecteren,
en niet enkel het centrale deel, zoals je misschien
zou verwachten!
B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage Pagina | 18

5. Om onze startpagina van inhoud te voorzien gaan we eerst en vooral de bestaande inhoud moeten
wissen. Plaats uw cursor ergens in de eerste paragraaf en klik daarna op <td> aan de linkerbovenkant van
de pagina (zie Fig. 11). Dit selecteert voor ons enkel de inhoud van het centrale schermdeel.
6. Druk op de DELETE–toets om de selectie te wissen en plaats uw cursor ergens in het centrale body–deel
van de pagina (Fig. 12)

FIG. 12 VIA DELETE IS ALLE OORSPRONKELIJKE INFORMATIE GEWIST

FIG. 11 KLIK OP <TD> OM HET CENTRALE DEEL VAN DE PAGINA TE SELECTEREN.

7. We zijn klaar om alles in te voeren wat we op de startpagina van onze webquest willen. In dit geval gaan
we een welkom–boodschap ingeven, al kun je natuurlijk meteen ter zake komen. Hoe je precies op een
goede manier afbeeldingen invoert, dat wordt later in dit boek behandeld. Momenteel gaan we enkel
pure tekst invoeren.

FIG. 13 VOER EEN WELKOMTEKST IN

Oefening

Wis nu zelf de inhoud van de andere standaardpagina’s van de net

aangemaakte site.

B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage Pagina | 19

STAP 2: PAS DE NAMEN AAN VAN DE PAGINA’S

In deze stap gaan we de namen van de html–pagina’s wijzigen en er tevens voor zorgen dat de
knoppen in de linkernavigatiekolom en de footer worden aangepast. We gaan ook
demonstreren hoe je het makkelijkst een bijkomende pagina kunt aanmaken.
1. Zorg ervoor dat u links op uw scherm het mappenoverzicht voor u hebt. Als dat niet zo is, ga dan naar
Beeld > Mappenlijst, of gebruik de toetsencombinatie ALT–F1.
2. We zien op de visuele weergave van de index–pagina dat de knoppen als volgt zijn geordend:
linksbovenaan de navigatiekolom zien we “Info over mezelf”, vervolgens “Interesses”, gevolgd door
“Favorieten”, “Fotocollage” en tenslotte “Feedback”. Hoewel je later de volgorde van deze knoppen
makkelijk kunt wijzigen, toch ligt het eigenlijk voor de hand dat we pagina’s dan ook best als volgt kunnen
aanpassen. Zo verschijnen ze meteen in de juiste volgorde!

ORIGINELE NAAM NIEUWE NAAM

ABOUTME.HTM INLEIDING.HTM

INTEREST.HTM TAAK.HTM

FAVORITE.HTM UITWERKING.HTM

PHOTO.HTM BRONNEN.HTM

FEEDBACK.HTM EVALUATIE.HTM

TABEL 3 PAS DE NAMEN AAN VOLGENS DIT OVERZICHT

Merk op dat we vooralsnog geen pagina “conclusie.htm” hebben. Geen nood: zo meteen tonen we aan
hoe je best een pagina bijmaakt.

3. Om nu de naam van “aboutme.htm” aan te passen selecteer je de pagina in het mappenoverzicht, en

druk je de functietoets F2 in. Andere manieren om hetzelfde te bereiken: een “trage dubbelklik” of
rechtsklikken op de paginanaam en kiezen voor “naam wijzigen.

B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage Pagina | 20

FIG. 14 WIJZIG DE NAAM VIA RECHTSKLIKKEN EN "NAAM WIJZIGEN" OF VIA DE FUNCTIETOETS F2

Tip

Vermijd het aanmaken van pagina’s via

Bestand > Nieuw > Lege pagina, of via
het icoon rechtsbovenaan op de
werkbalk (zie Fig. 15). Dit zal een
werkelijk volledig lege pagina
aanmaken, die qua layout helemaal niet
overeenstemt met de rest van de
website en waar je vervolgens nog alle
knoppen, headers, footers,… zelf
manueel zou moeten invoegen.

FIG. 15 NIEUWE PAGINA AANMAKEN? TOCH MAAR BETER NIET OP DEZE MANIER!

4. Als je klaar bent, dan zou alles er moeten uitzien zoals in Fig. 16.

B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage Pagina | 21

FIG. 16 ALLE PAGINA'S ZIJN HERNOEMD

Dit is een noodzakelijke stap, die echter weinig visuele meerwaarde blijkt te hebben. De knoppen op de
index–pagina zijn immers nog altijd bij het oude gebleven! Dat is natuurlijk juist –aan die knoppen gaan
we trouwens in de volgende stap meteen iets doen–, maar dat neemt niet weg dat het altijd aan te raden
valt om uw webpagina’s zo efficiënt mogelijk te benoemen.

5. De knoppen dus. Die gaan we aanpassen in de navigatieweergave van de site. Klik op het tabblad Website
en vervolgens onderaan op “Navigatie” (zie Fig. 17). Rechtsklik met de cursor op de tekst “Welkom op
mijn website” en vervang het door een titel naar keuze. In ons geval kiezen we kortweg voor “De Stad”
(Fig. 18).

B. & G. Bonamie
2. Het maken van de webquest Aanmaken site Frontpage Pagina | 22

FIG. 18 DE WELKOM–BOODSCHAP IS VERVANGEN DOOR DE TITEL "DE STAD

"

FIG. 17 DE INHOUD VAN DE KNOPPEN PAS JE AAN IN DE NAVIGATIEWEERGAVEN VAN DE

WEBSITE

Op dezelfde manier kunnen we alle andere pagina’s in deze navigatieweergave aanpassen. Dit is waar het
schema van Tabel 3 opnieuw zijn nut bewijst: had je dit niet, dan was het nu misschien moeilijk geweest
om te weten hoe je precies alle pagina’s had hernoemd! Verander nu de oude labels door de nieuwe. Als
je klaar bent, dan zou het er als volgt moeten uitzien.

FIG. 19 ALLE KNOPPEN ZIJN HERNOEMD.

Klik het tabblad “index.htm” aan et voilà: alle knoppen zijn netjes aangepast, en alles staat meteen in
dejuiste volgorde!

B. & G. Bonamie