Docentenhandleiding bij Websites maken met WEB! Pro
ISBN 90 5905 152 1
2 1. Introductie De cursushandleiding gaat uit van een lessenschema dat bestaat uit negen punten. Deze punten zijn in drie groepen verdeeld. In principe ziet een cursusbijeenkomst er als volgt uit: A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les 2. Uitleggen wat de leerdoelen van deze les zijn 3. Noodzakelijke voorkennis in herinnering brengen
B Instructie
1. De informatie (leerstof) aanbieden 2. De cursisten helpen bij het leren 3. Cursisten het gevraagde gedrag laten tonen 4. Terugkoppeling geven over de getoonde prestaties
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) 2. Herhaling en wijzen op toepassingen
Het schema wordt van begin tot eind stap voor stap doorlopen. De stappen B1 tot B4 worden steeds herhaald, dat wil zeggen dat de leerstof steeds in kleine delen wordt aangeboden (B1). Er zullen dus vele momenten zijn waarop de cursist hulp nodig kan hebben (B2). Daaruit volgt ook dat tijdens een cursusbijeenkomst cursisten meerdere handelingen aanleren die ze kunnen demonstreren (B3), waarop de cursusleider kan reageren met goedkeuring of eventueel noodzakelijke corrigerende opmerkingen (B4). Op de volgende pagina wordt dit schema aangevuld met extra informatie om de inhoud en het waarom van elke stap te verduidelijken. De uitwerking van de acht cursusbijeenkomsten wordt telkens binnen dit schema gegeven. Reserveer voor: • de Inleiding 10-15% • de Instructie 60-70% • de Afsluiting 20-25% van de beschikbare tijd.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
3 Lesschema A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les De cursusleider kan om stilte verzoeken, de deur dichtdoen, een aankondiging op het bord schrijven of op een andere manier de aandacht op zijn persoon en de komende les richten. 2. Uitleggen wat de leerdoelen van deze les zijn Voor cursist en leraar is het van belang precies te weten wat de gewenste resultaten voor een les zijn. De werkhouding van de cursist tijdens de les is er van afhankelijk of bijvoorbeeld de behandelende stof herkend moet worden, uit het hoofd geleerd moet worden, of toegepast moet kunnen worden. Alleen maar noemen van onderwerpen die behandeld gaan worden is onvoldoende. De docent moet dit in begrijpelijke termen doen. 3. Noodzakelijke voorkennis in herinnering brengen De docent moet in het begin van de les zorgen dat de nieuwe informatie aansluit op en voortbouwt op eerder verworven begrippen en regels. De betreffende kennis van de cursisten moet dan eerst opgehaald (geactiveerd) worden.
B Instructie
1. De informatie (leerstof) aanbieden De kern van het onderwijsleerproces is het aanbieden van de informatie door de docent of door het studieboek. 2. De cursisten helpen bij het leren De docent blijft tijdens het leerproces niet op zijn plaats, maar is bezig de verrichtingen van de cursisten te observeren en waar nodig te ondersteunen. De toegepaste didactische opvatting wordt ‘begeleid ontdekkend leren’ genoemd. 3. Cursisten het gevraagde gedrag laten tonen Het gaat hier niet om het controleren of de cursisten hun huiswerk hebben gedaan, maar om een oefenmogelijkheid voor het uitvoeren van de gewenste (eind)handeling. Een gerichte vraag geeft de cursist de mogelijkheid om zichzelf en de docent te tonen dat hij of zij het weet of kan.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
4
4. Terugkoppeling geven over de getoonde prestaties Het geven van informatie over de getoonde prestaties aan cursisten is informatief en versterkend. Terugkoppeling van informatie over de uitvoering van de handeling van de lerende gaat in vele gevallen vanzelf: het werkt of het werkt niet. Terugkoppeling moet in ieder geval informatie geven over de correctheid van het uitvoeren van de handelingen die tijdens het leren zichtbaar zijn. C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) De bedoeling van deze gebeurtenis is vast te stellen of de cursist het leerdoel heeft bereikt en of hij of zij met zekerheid de gewenste eindhandelingen kan uitvoeren. Voor dit doel zijn verschillende toetsingsvormen mogelijk: bijvoorbeeld een opdracht uitvoeren of een opgave maken. Ze hoeven niet allemaal op hetzelfde tijdstip te worden afgenomen. Uiteraard behoort de toets afgestemd te zijn op de gestelde leerdoelen. 2. Herhaling en wijzen op toepassingen Deze laatste stap is gericht op het bevorderen van het beklijven op de wat langere termijn. Daarom dienen deze aanwijzingen lesoverstijgend te zijn en gericht op het zichtbaar maken van cursusverbanden.
2. Voorkennis Voor deze cursus is minimaal voorkennis op het niveau ‘Windows basisvaardigheden’ vereist. Daarnaast zijn kennis en vaardigheden vereist op het gebied van: • Tekst verwerking (opmaak en bewerking) • Werken met foto’s en afbeeldingen.
3. Algemeen Technische zaken zoals het op de juiste wijze geïnstalleerd zijn van Windows 95, 98, Me of XP en WEB! Pro zijn essentieel voor het geven van deze cursus. Het installeren van de benodigde software en hardware valt buiten het bestek van deze handleiding. De beschrijving van de installatie van het programma WEB! Pro en het aanvragen van een bijbehorende licentiecode/serienummer vindt u in hoofdstuk 1. Ook eventuele registratie en aanmelding voor webhosting bij MySite wordt daar beschreven. Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
5 Aanvullend materiaal: tips en herhalingsoefeningen De herhalingsoefeningen waar in deze handleiding naar wordt verwezen, kunt u downloaden van www.visualsteps.nl/webpro en www.visualsteps.nl/websites De herhalingsoefeningen zijn in principe bedoeld als huiswerk.
4. Referenties Inleiding Instructietheorie E. Warries en J.M. Pieters Swets en Zeitlinger b.v. Amsterdam/Lisse, 1992 Onderwijs en leerpsychologie J. Molter en A. Borg Intro Nijkerk, 1990
5. Overzicht van de cursusbijeenkomsten De cursusopzet beslaat acht bijeenkomsten, waarbij gebruik wordt gemaakt van het volgende boek (inclusief bijbehorende cd-rom met oefenfoto’s):
Website maken met Web! Pro Addo Stuur ISBN 90 5905 152 1 De lessen zijn gekoppeld aan de volgende lesstof in het boek: Les 1 Hoofdstuk 2 Een eenvoudige website maken Les 2 Hoofdstuk 3 Werken met tekstobjecten Les 3 Hoofdstuk 4 Werken met frames Les 4 Hoofdstuk 5 Afbeeldingen invoegen Hoofdstuk 6 Knoppen maken/invoegen Les 5 Hoofdstuk 7 Hyperlinks maken Les 6 Hoofdstuk 9 Uploaden van de website Les 7 Eigen ontwerp maken Gouden regels voor een website Structuur van een website Les 8 Eigen ontwerp maken Domeinnamen Aandachtspunten: Les 6: Voor het uploaden van een (oefen)website is het noodzakelijk dat cursisten over een werkende internetaansluiting beschikken. Bovendien moet de cursist zich vóór het uploaden van de website naar de webhost-service van MySite (zoals beschreven in het boek) eerst hebben aangemeld bij deze organisatie (zie hoofdstuk 1). Controleer vooraf of deze service nog actueel is. Als u dit tijdens de cursus wilt laten oefenen, laat u de cursisten eerst aanmelden. Per geïnstalleerd programma is een aparte aanmelding nodig. Uiteraard kunt u er ook voor kiezen om een andere webhost-service te gebruiken. U kunt de lesstof ook behandelen in de vorm van een demonstratie. Les 7 en 8: Voor het ontwerpen en bouwen van een eigen website, kunnen cursisten zelf materiaal meenemen, bijvoorbeeld tekst, afbeeldingen etc. Kondig dit tijdig aan.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
6 Les 1 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Een website bestaat uit één of meer webpagina’s. Bij het maken van een website bouwt u de site pagina voor pagina op. U begint met de hoofdpagina. Dat is de pagina die u als eerste ziet wanneer u een website bezoekt. Dit wordt de homepage of homepagina genoemd. Via deze homepagina kunt u de andere pagina’s van de website bekijken. Met het programma WEB! kunt u eenvoudig een webpagina maken. In de hulpvensters kunt u allerlei eigenschappen voor de pagina instellen, zoals de achtergrondkleur en de titel. In deze les leert u het programma WEB! Pro kennen door aan de hand van voorbeelden een webpagina van een oefenwebsite te maken. Als u alle lessen in deze cursus (c.q. hoofdstukken in het boek) heeft doorgewerkt, bent u in staat om een eigen website te ontwerpen en te bouwen. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • een nieuwe website maken • een nieuwe webpagina maken; • een achtergrond invoegen; • geluid aan een webpagina meegeven; • de voorlopige website bekijken; • informatie aan een webpagina meegeven; • een webpagina opslaan.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
7
B Instructie
3. Noodzakelijke voorkennis in herinnering brengen Omdat dit de eerste bijeenkomst is, kunt u niet terugwijzen naar de vorige bijeenkomst. 1. De informatie (leerstof) aanbieden Boek: hoofdstuk 2 pag. 45 t/m 67. 2. De cursisten helpen bij het leren Zie hiervoor het algemene schema. 3. Cursisten het gevraagde gedrag laten tonen Zie hiervoor het algemene schema. 4. Terugkoppeling geven over de getoonde prestaties Zie hiervoor het algemene schema.
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich tijdens B Instructie voordeden. Laat de cursisten thuis de herhalingsoefening 2.1 Nieuwe website maken en opslaan maken. 2. Herhaling en wijzen op toepassingen Keer terug naar de doelstellingen en lees ze nog eenmaal door. Moedig de cursisten aan de opgedane kennis en vaardigheden thuis te herhalen.
Aanvullende Achtergrondinformatie en tips: pag. 68 t/m 70 in het boek. lesstof:
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
8 Les 2 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Een webpagina bestaat uit verschillende onderdelen. Die onderdelen worden in WEB! objecten genoemd. Zo is er bijvoorbeeld een tekstobject, waarin u teksten in allerlei vormen kunt zetten. Met behulp van objecten kunt u een website helemaal inrichten naar uw eigen smaak. In het programma WEB! is het heel eenvoudig om objecten aan een webpagina toe te voegen. In een hulpvenster kunt u allerlei eigenschappen opgeven voor het object. Bij een tekstobject zijn dat bijvoorbeeld de kleur en het lettertype van de tekst. Als u de eigenschappen heeft opgegeven, voegt WEB! het object toe aan de webpagina. Daarna kunt u het object op de juiste plaats zetten. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • • • • • • • • •
een webpagina openen; lettertypes instellen; een titel invoegen; een object verplaatsen; een object centreren; een tekst invoegen; een object vergroten; opsommingen invoegen; een lichtkrant invoegen.
3. Noodzakelijke voorkennis in herinnering brengen Breng in het kort de leerstof van de vorige bijeenkomst in herinnering. • • • • • • •
een nieuwe website maken een nieuwe webpagina maken; een achtergrond invoegen; geluid aan een webpagina meegeven; de voorlopige website bekijken; informatie aan een webpagina meegeven; een webpagina opslaan.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
9 B Instructie
1. De informatie (leerstof) aanbieden Boek: hoofdstuk 3 pagina 71 t/m 106. 2. De cursisten helpen bij het leren Zie hiervoor het algemene schema. 3. Cursisten het gevraagde gedrag laten tonen Zie hiervoor het algemene schema. 4. Terugkoppeling geven over de getoonde prestaties Zie hiervoor het algemene schema.
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich tijdens B Instructie voordeden. Laat de cursisten thuis de herhalingsoefeningen 3.1 Titel toevoegen aan de webpagina, 3.2 Een object bewerken en 3.3 Tekst en lichtkrant invoegen maken. 2. Herhaling en wijzen op toepassingen Keer terug naar de doelstellingen en lees ze nog eenmaal door. Moedig de cursisten aan de opgedane kennis en vaardigheden thuis te herhalen.
Aanvullende Achtergrondinformatie en tips: pag. 107 en 108 in het boek. lesstof:
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
10 Les 3 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Een webpagina kan opgebouwd zijn uit twee of meer aparte delen. Zo’n deel wordt een frame genoemd. Een frame heeft naast de gewone pagina-eigenschappen, enkele bijzondere extra’s. Een frame kan bijvoorbeeld in het venster blijven staan als een bezoeker een andere pagina van de website wil bekijken. Frames worden daarom vaak gebruikt voor onderdelen die op elke webpagina hetzelfde zijn, zoals de titel en lijsten met knoppen. Het frame hoeft dan niet opnieuw geladen te worden op de computer van de bezoeker. Een frame is altijd gekoppeld aan andere frames en/of een webpagina. Samen vormen ze dan een frameset. In deze les leert u frames gebruiken voor uw eigen website. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • • • • • • • • • •
frames maken; frames splitsen; frames toevoegen; frames verwijderen; frames opslaan; een frameset opslaan; eigenschappen van frames instellen; eigenschappen van een frameset instellen; objecten kopiëren; objecten verwijderen.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
11 3. Noodzakelijke voorkennis in herinnering brengen Breng in het kort de leerstof van de vorige bijeenkomst in herinnering: • • • • • • • • • B Instructie
een webpagina openen; lettertypes instellen; een titel invoegen; een object verplaatsen; een object centreren; een tekst invoegen; een object vergroten; opsommingen invoegen; een lichtkrant invoegen.
1. De informatie (leerstof) aanbieden Boek: hoofdstuk 4 pagina 109 t/m 139. 2. De cursisten helpen bij het leren Zie hiervoor het algemene schema. 3. Cursisten het gevraagde gedrag laten tonen Zie hiervoor het algemene schema. 4. Terugkoppeling geven over de getoonde prestaties Zie hiervoor het algemene schema.
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich tijdens B Instructie voordeden. Laat de cursisten thuis de herhalingsoefeningen 4.1 Frames maken en bewerken, 4.2 Eigenschappen van een frame en een frameset en 4.4 Objecten kopiëren en verwijderen maken 2. Herhaling en wijzen op toepassingen Keer terug naar de doelstellingen en lees ze nog eenmaal door. Moedig de cursisten aan de opgedane kennis en vaardigheden thuis te herhalen en toe te passen met behulp van de extra oefeningen.
Aanvullende Achtergrondinformatie en tips: pagina 140 t/m 142 in het boek. lesstof:
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
12 Les 4 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Met WEB! kunt u aan een webpagina allerlei soorten afbeeldingen toevoegen. Bijvoorbeeld foto’s in verschillende formaten, maar ook plaatjes en zelfs animaties. Aan een afbeelding op de webpagina kunt u effecten verbinden. Zo kunt u een afbeelding of een ander object met een animatie laten verschijnen op de pagina. Ook kunt u een object een bijzonder uiterlijk geven, zoals bijvoorbeeld een schaduw of een speciale belichting. Een bijzonder soort afbeelding is de knop. Door te klikken op een knop kan de bezoeker van uw website direct naar een bepaalde pagina gaan. Met WEB! kunt u eenvoudig en snel knoppen maken, met een eigen kleur en tekst. Met een optie als Muis Over kunt u opgeven wat er moet gebeuren als de muiswijzer over een object als een knop gaat. Met behulp van de dupliceermogelijkheid kunt u snel een kopie van een object maken. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • • • • • • • •
een frameset openen; afbeeldingen invoegen; grootte van afbeeldingen aanpassen; transities invoegen; speciale effecten gebruiken. knoppen invoegen; de Muis Over-functie invoegen; objecten dupliceren.
3. Noodzakelijke voorkennis in herinnering brengen Breng in het kort de leerstof van de vorige bijeenkomst in herinnering: • • • • • •
frames maken; frames splitsen; frames toevoegen; frames verwijderen; frames opslaan; een frameset opslaan;
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
13 • • • • B Instructie
eigenschappen van frames instellen; eigenschappen van een frameset instellen; objecten kopiëren; objecten verwijderen.
1. De informatie (leerstof) aanbieden Boek: hoofdstuk 5 pag. 143 t/m 163. Boek: hoofdstuk 6 pag. 169 t/m 184 2. De cursisten helpen bij het leren Zie hiervoor het algemene schema. 3. Cursisten het gevraagde gedrag laten tonen Zie hiervoor het algemene schema. 4. Terugkoppeling geven over de getoonde prestaties Zie hiervoor het algemene schema.
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich tijdens B Instructie voordeden. Laat de cursisten thuis de herhalingsoefeningen 5.1 Afbeelding invoegen en 5.2 Transities en effecten invoegen van Hoofstuk 5 maken. Van hoofdstuk 6 kunnen de cursisten herhalingsoefeningen 6.1 Knoppen invoegen, 6.2 Muis Over-functie invoegen en 6.3 Object dupliceren maken. 2. Herhaling en wijzen op toepassingen Keer terug naar de doelstellingen en lees ze nog eenmaal door. Moedig de cursisten aan de opgedane kennis en vaardigheden thuis te herhalen.
Aanvullende Achtergrondinformatie en tips hoofdstuk 5: pagina 164 t/m 168. Achtergrondinformatie en tips hoofdstuk 6: pagina 185 t/m 189 lesstof:
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
14 Les 5 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Een website is niet bruikbaar zonder hyperlinks. Door op een hyperlink te klikken, kunt u naar een andere pagina op de website springen of een e-mail versturen of een andere website openen. Een hyperlink, kortweg link genoemd, kunt u als tekstobject op een webpagina plaatsen. U kunt een hyperlink ook koppelen aan een afbeelding of knop. Bij de eigenschappen van het object maakt u met de Na Muis Klik-optie een link met een andere webpagina. Opmerking voor docent: In deze les wordt een openingspagina voor de oefenwebsite gemaakt. In dat verband is het belangrijk dat u de informatie van Tip Bestandsnaam van de pagina (blz. 69 in boek) nog even herhaald: U kunt een webpagina in principe elke bestandsnaam geven. Het is aan te raden om de beginpagina de titel ‘index’, of ‘default’ te geven. Deze twee bestandsnamen worden door Internet Explorer automatisch herkend. Als er op een website meerdere bestanden naast elkaar staan, zal Internet Explorer automatisch het bestand openen met de titel ‘index.htm’ of ‘default.htm’. U hoeft zich om de extensie ‘htm’ niet te bekommeren: wanneer u de optie Opslaan kiest, plaatst Web! Pro die extensie automatisch achter de bestandsnaam. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • • • •
meerdere pagina’s aan een website toevoegen; een Na Muis Klik-functie invoegen; hyperlinks invoegen; een openingspagina maken en vernieuwen.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
15 3. Noodzakelijke voorkennis in herinnering brengen Breng in het kort leerstof van de vorige bijeenkomst in herinnering: • • • • • • • • B Instructie
een frameset openen; afbeeldingen invoegen; grootte van afbeeldingen aanpassen; transities invoegen; speciale effecten gebruiken; knoppen invoegen; de Muis Over-functie invoegen; objecten dupliceren.
1. De informatie (leerstof) aanbieden Boek: hoofdstuk 7 pagina 191 t/m 225. 2. De cursisten helpen bij het leren Zie hiervoor het algemene schema. 3. Cursisten het gevraagde gedrag laten tonen Zie hiervoor het algemene schema. 4. Terugkoppeling geven over de getoonde prestaties Zie hiervoor het algemene schema.
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich tijdens B Instructie voordeden. Laat de cursisten thuis de herhalingsoefeningen 7.1 Meer pagina’s aan een website toevoegen en 7.2 een Na Muis Klik invoegen, 7.3 Hyperlinks invoegen en 7.4 Een webpagina vernieuwen maken. 2. Herhaling en wijzen op toepassingen Keer terug naar de doelstellingen en lees ze nog eenmaal door. Moedig de cursisten aan de opgedane kennis en vaardigheden thuis te herhalen en toe te passen met behulp van de extra oefeningen.
Aanvullende Achtergrondinformatie: boek pagina 226 t/m 229. lesstof:
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
16 Les 6 Aandachtspunt voor docent:Voor het uploaden van een (oefen)website, zoals in deze les ter sprake komt, is het noodzakelijk dat cursisten over een werkende internetaansluiting beschikken. Bovendien moet de cursist zich vóór het uploaden van de website naar de webhostservice van MySite (zoals beschreven in het boek) eerst hebben aangemeld bij deze organisatie (zie hoofdstuk 1Als u dit tijdens de cursus wilt laten oefenen, laat u de cursisten eerst aanmelden. Per geïnstalleerd programma is een aparte aanmelding nodig. ). Controleer vooraf of deze service nog actueel is. Uiteraard kunt u er ook voor kiezen om een andere webhost-service te gebruiken. U kunt de lesstof ook behandelen in de vorm van een demonstratie. A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Webpagina’s worden gemaakt in een speciale programmeertaal: HTML (Hyper Text Markup Language). Als u in WEB! werkt, ziet u daar niets van. WEB! plaatst zelf de HTML-code terwijl u de webpagina’s maakt. U kunt deze HTML-code wel bekijken en laten afdrukken. Ook kunt u er zelf wat aan veranderen. Dat kan handig zijn als u extra mogelijkheden wilt toevoegen aan uw website. Bijvoorbeeld lijnen, filmpjes en tellers. Als uw website klaar is, zult u hem op internet willen publiceren. Daarvoor heeft u webruimte nodig. Deze webruimte kunt u tegen betaling reserveren bij een hosting provider. Ook bij uw eigen internet-aanbieder kunt u vaak ruimte krijgen om uw website neer te zetten. Ook bij WEB! krijgt u gratis webruimte. U heeft zich daarvoor kunnen opgeven in hoofdstuk 1. Om uw website op internet te zetten, moet u de website uploaden. Dat houdt in dat u de webpagina’s verzendt naar de webruimte bij de hosting provider. Daarvoor zijn in WEB! zelf verschillende opties beschikbaar. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • • • • • •
de HTML-code van een webpagina bekijken; een webpagina afdrukken; HTML-code invoegen; de website uploaden; de website beheren; de website testen.
3. Noodzakelijke voorkennis in herinnering brengen Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
17 Breng in het kort leerstof van vorige bijeenkomst in herinnering: • • • •
B Instructie
meerdere pagina’s aan een website toevoegen; een Na Muis Klik-functie invoegen; hyperlinks invoegen; een openingspagina maken en vernieuwen.
1. De informatie (leerstof) aanbieden Boek: hoofdstuk 9 pagina 279 t/m 300. 2. De cursisten helpen bij het leren Zie hiervoor het algemene schema. 3. Cursisten het gevraagde gedrag laten tonen Zie hiervoor het algemene schema. 4. Terugkoppeling geven over de getoonde prestaties Zie hiervoor het algemene schema.
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich tijdens B Instructie voordeden. 2. Herhaling en wijzen op toepassingen Keer terug naar de doelstellingen en lees ze nog eenmaal door. Moedig de cursisten aan de opgedane kennis en vaardigheden thuis te herhalen.
Aanvullende lesstof: Aandachtspunt voor docent:
Achtergrondinformatie en tips: pag. 301 t/m 308 in het boek. De volgende twee lessen kunnen cursisten besteden aan het ontwerpen en bouwen van hun eigen website. Laat cursisten hiervoor eigen materiaal meenemen, bijvoorbeeld teksten, afbeeldingen/foto’s, geluidsbestanden, etc.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
18 Les 7 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Gouden regels voor een website Als u wilt dat bezoekers het prettig vinden om uw website te bezoeken en dat ze ook terugkomen, is het belangrijk rekening te houden met de volgende zaken: • Zorg ervoor dat teksten goed leesbaar en overzichtelijk zijn. Het is belangrijk dat letters niet te klein zijn en dat ze goed te lezen zijn tegen de achtergrond van de pagina, anders komt wat u wilt vertellen niet over. Donkere letters tegen een lichte achtergrond zijn vaak het beste te lezen. Ook een goede indeling in alinea’s met af en toe een witregel is aan te raden. Grote lappen tekst maken lezen niet aantrekkelijk. • Zorg ook voor een goede grammatica en spelling van de teksten. Als u een bijzonder lettertype voor uw tekst kiest, houd er dan rekening mee dat het regelmatig zal gebeuren dat de bezoeker van uw website dat lettertype niet op zijn computer heeft staan. Het zal dan vervangen worden door een standaard lettertype. Voor gewone tekst zijn lettertypes als Arial of Times New Roman een goede keuze. • Zorg ervoor dat de hyperlinks op uw pagina werken. Het is nogal vervelend als een bezoeker op een link klikt en dan het bericht ziet dat de webpagina niet bestaat. Ook een verwijzing naar een pagina op uw website die nog niet af is, is af te raden. Sommigen proberen dat op te vangen door een leuk plaatje met ‘Werk in uitvoering’ op zo’n pagina te zetten, maar dat is geen goed idee. Plaats pas een link naar een webpagina als die pagina af is. • Houd de laadtijd voor de webpagina’s zo kort mogelijk. De pagina’s van uw website moeten eerst naar de computer van de bezoeker gedownload worden voordat hij ze kan bekijken. Als er veel afbeeldingen, muziekjes en andere onderdelen op de webpagina staan, zal het downloaden erg lang duren. Houd daarom de losse onderdelen op de pagina vooral klein wat betreft kilobytes. • Vermijd popup-vensters. Popup-vensters zijn die kleine vensters die soms automatisch verschijnen als u op een website komt. Meestal bevatten ze reclame. Als u uw website bij een gratis commerciële hosting-provider plaatst, moet u vaak genoegen nemen met deze popup-vensters. Probeer daarom uw website te plaatsen bij een provider zonder popups.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
19 • Test uit of uw website er goed uitziet op verschillende schermresoluties. Anders kan het zijn dat bezoekers met een afwijkende schermresolutie de webpagina’s niet goed kunnen lezen. • Zet een contactadres, zoals een e-mailadres, op uw website. Structuur van een website De homepagina van een website is vergelijkbaar met de inhoudsopgave van een boek. Vaak vindt u daar een opsomming van de inhoud van de website in de vorm van hyperlinks (knoppen). Afhankelijk van waar u de hyperlinks plaatst, is het echter niet noodzakelijk om webpagina’s in een vaste volgorde te bekijken zoals in een doorsnee boek. Met het ontwerpen van uw website moet u met dat gegeven rekening houden. De structuur van een website met frames ziet er als volgt uit: Homepagina link 1 link 2 link 3
Pagina 1
Pagina 2
Pagina 3
De homepagina van deze website bevat een knoppenframe met hyperlinks naar alle webpagina’s. Omdat het knoppenframe altijd links in het venster blijft staan, kunnen bezoekers vanaf iedere pagina naar een andere pagina springen. Zo’n structuur kan er ook anders uitzien. De onderstaande website heeft bijvoorbeeld geen knoppenframe dat altijd in het venster blijft staan: Homepagina link 1 link 2 link 3
Pagina 1 link Home
Pagina 2 link Home
Pagina 3 link Home
In deze structuur ziet een bezoeker op de afzonderlijke webpagina’s geen knoppen om door te linken naar een andere pagina. In deze opzet moet u dus op iedere webpagina een hyperlink aanbrengen om terug te gaan naar de homepagina. Vanaf de homepagina kan de bezoeker weer doorklikken naar een volgende webpagina. Als u zelf een website gaat ontwerpen, kunt u vooraf zo’n schema tekenen. In het schema geeft u aan welke webpagina’s met welke inhoud u wilt maken en hoe de navigatiestructuur gaat worden. Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
20 De navigatiestructuur is de wijze waarop bezoekers door de pagina’s kunnen bladeren. U bedenkt van tevoren dus waar u de hyperlinks wilt plaatsen. Aan de hand van het schema kunt u teksten maken, afbeeldingen verzamelen en de website gaan bouwen. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • •
een ontwerp maken voor een website met een overzichtelijke navigatiestructuur het ontwerp uitvoeren
3. Noodzakelijke voorkennis in herinnering brengen Breng in het kort leerstof van vorige bijeenkomst in herinnering. • • • • • • B Zelfwerkzaamheid
de HTML-code van een webpagina bekijken; een webpagina afdrukken; HTML-code invoegen; de website uploaden; de website beheren; de website testen.
Cursisten ontwerpen en bouwen een eigen website. 1. De cursisten gaan zelf aan de slag 2. Cursisten tonen/presenteren het ontwerp. 3. Terugkoppeling geven over het ontwerp en de gekozen navigatiestructuur
C Afsluiting
Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich bij het ontwerpen/bouwen van een website voordeden. Wijs op het nut van lijstjes met benodigdheden per pagina (knoppen, afbeeldingen, teksten etc.)
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
21 Les 8 A Inleiding
1. Zorgen dat de cursisten aandacht hebben voor de les Zie hiervoor het algemene schema. 2. Uitleggen wat de leerdoelen van deze les zijn Geef eerst onderstaande informatie. Schrijf de vetgedrukte woorden (behalve de achtervoegsels van de webadressen) in grote letters op een plaats (bijvoorbeeld op een bord) waar iedereen ze goed kan zien Domeinnamen Een webadres dat verbonden is met een bepaalde naam, wordt ook wel een domeinnaam genoemd. Elk webadres heeft een achtervoegsel zoals .com. Bijvoorbeeld: www.addostuur.com Voor dit achtervoegsel bestaan verschillende varianten. In Europa is het de gewoonte om een landaanduiding te gebruiken: Bijvoorbeeld: www.visualsteps.nl Andere landaanduidingen zijn .be voor België en .de voor Duitsland. Buiten Europa en in de Verenigde Staten wordt een ander systeem gebruikt. Daarbij geeft het achtervoegsel aan wat voor soort organisatie het is: com commercieel bedrijf edu onderwijs org niet-commerciële organisatie Als u een website heeft gemaakt, dan ziet het adres van uw website er vaak ongeveer zo uit: http://www.planet.nl/~gebruikersnaam/index.html. Dat is geen eenvoudige naam. U kunt zelf een eigen domeinnaam aanvragen, zoals www.uwnaam.nl of www.uwnaam.com. Webhosting Er zijn twee soorten internet-providers. De ene groep biedt u toegang tot het internet, zodat u kunt surfen en e-mailen. De andere groep biedt ruimte aan op internet waar u uw website neer kunt zetten. Dit worden webhosting-providers genoemd. Vaak krijgt u bij een gewoon internet-abonnement ook webruimte aangeboden. Voor veel mensen met een eenvoudige website is dat genoeg. Maar het kan zijn dat u meer wilt. Bijvoorbeeld: meer webruimte, een eigen domeinnaam voor uw website (www.mijnnaam.nl) of speciale mogelijkheden om forums en formulieren te gebruiken. U kunt dan terecht bij een hosting-provider. Hosting-providers bieden allerlei pakketten aan. Variërend van basis
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
22 (met weinig extra’s) tot complete bedrijfspakketten. Voor eenvoudige websites kunt u vaak toe met het goedkoopste pakket. Als extra kunt u bij hosting-providers een domeinnaam laten vastleggen. Zo kunt u voor een klein bedrag per maand mensen laten doorverwijzen naar een website met een herkenbaar adres. Er zijn ook hosting-providers die gratis webruimte aanbieden, maar u moet dan gewoonlijk ‘betalen’ in de vorm van het toestaan van reclame op uw website. Wilt u meer informatie? Kijk dan op www.visualsteps.nl/websites. In deze bijeenkomst leert u het volgende: (zet ook dit ergens goed leesbaar neer) • •
een schematisch ontwerp maken/aanpassen voor een website met een overzichtelijke navigatiestructuur het ontwerp uitvoeren
3. Noodzakelijke voorkennis in herinnering brengen Breng in het kort leerstof van de vorige bijeenkomst in herinnering. B Zelfwerkzaamheid
Cursisten ontwerpen en bouwen een eigen website. 1. De cursisten werken verder aan eigen website. 2. Cursisten tonen/presenteren het ontwerp. 3. Terugkoppeling geven over het ontwerp
C Afsluiting
1. Het eindresultaat vaststellen van het leren (toetsing) Bespreek in het kort eventuele veel voorkomende problemen die zich bij het ontwerpen van de website voordeden.
Docent:
Stel cursisten in de gelegenheid om de gemaakte website(onderdelen) mee te nemen naar huis.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps
23 6. De eindtoets Ter afsluiting is de toets Website maken beschikbaar. Deze toets bestaat uit meerkeuzevragen. De toets kan online gemaakt worden op www.computerbrevet.nl Na afloop ziet de cursist direct het behaalde resultaat. De cursist ontvangt gratis per e-mail een brevet met zijn/haar naam en het resultaat. Het brevet kan worden geprint.
7. Ander cursusmateriaal De populaire boeken van Addo Stuur zijn uitstekend geschikt voor gebruik als cursusmateriaal. Bij een aantal boeken zijn docentenhandleidingen beschikbaar. Kijk voor meer informatie op www.visualsteps.nl.
Docentenhandleiding Websites maken met Web! Pro, ISBN 90 5905 152 1 2003 Addo Stuur / Visual Steps