Info-books AL9d Toegepaste Informatica Deel 9d: Elektronisch publiceren FrontPage 2003 Jos Gils Erik Goossens
Woord vooraf Info-books geeft een reeks informaticahandboeken uit die opgesteld zijn voor leerlingen van alle onderwijsniveaus, zowel het middelbaar als het hoger onderwijs. Bovendien is er een specifiek boek voor leerkrachten voorzien. Enerzijds is er een reeks boeken die voornamelijk bestemd is voor de derde graad van het middelbaar onderwijs. Deze reeks is een vervolg op de reeks Informatica 3 en Informatica 4 die door de uitgeverij Pelckmans voor de tweede graad uitgegeven wordt. Anderzijds richt Info-books zich ook naar het hoger onderwijs. Bepaalde boeken uit de vorige reeks werden herwerkt, andere zijn zonder meer bruikbaar en meer gespecialiseerde werken voor de richting Toegepaste Informatica werden toegevoegd. Bij het samenstellen van een boek probeert Info-books systematisch van een probleemstelling te vertrekken. Pas daarna wordt het materiaal aangereikt om dat probleem op te lossen. Informatica is een middel om problemen op te lossen. Het is niet louter een opsomming van hardwarecomponenten en programmeringstechnieken. Een ander punt waar Info-books veel belang aan hecht is integratie. Leerstofonderdelen zijn geen eilandjes. Het is dan ook logisch dat door vrijwel de hele boekenreeks een rode draad loopt. Een klein bedrijf wordt voortdurend met nieuwe problemen geconfronteerd en lost die met behulp van de computer op. Het gaat hier om concrete problemen zoals een facturatie die tot in het detail uitgewerkt wordt. Als het nodig is worden rekenblad, databaseprogramma en tekstverwerking samengebracht om tot een oplossing te komen. Integreren doe je niet om het integreren zelf maar om een probleem op te lossen. Niettemin is elk boekdeel zelfstandig bruikbaar. Je hoeft je dus bijvoorbeeld geen zorgen te maken dat voorkennis van Word noodzakelijk is om PowerPoint of FrontPage te kunnen gebruiken In Info-books wordt op een praktische manier in één omgeving, Windows en meestal Microsoft Office, gewerkt. De opdrachten zijn gedeeltelijk in de hoofdstukken opgenomen, gedeeltelijk gegroepeerd op het einde ervan. Na elk hoofdstuk volgen een besluit en de leerdoelen of eindtermen ('Wat je moet kennen en kunnen:'). Het is niet de bedoeling dat alle opdrachten in de klas gemaakt worden. Dat hangt van de beschikbare tijd af. De auteurs 2006
De publicaties van Info-books werden samengesteld in een Windows 98/ME-, later XP-, en Internet Explorer 6.0-omgeving. Er werd gebruik gemaakt van Office 2002 (XP) en Office 2003. Van zodra een recentere versie in de omgeving of in het Officepakket de belangrijkste op de markt wordt, zullen de publicaties aangepast worden. De reeks Informatica voor het Secundair 0nderwijs (Toegepaste Informatica) bestaat uit de volgende boeken: Boekhouden-informatica, Informaticabeheer: BI1c Deel 1: Systeemsoftware, Netwerken, Internet en Hardware (Win XP) BI2cd Deel 2: Het rekenblad Excel (*) BI3cd Deel 3: Gegevensbeheer in Access (*) BI4ac Deel 4: Programmeren in Visual Basic for Applications (**) (a: DAO-objecten, c: ADO-objecten) BI5 Deel 5: Programmeren voor een bedrijfsecon. toepassing: de facturatie (**) Handel, Secretariaat-talen: HA1c Deel A: Systeembeheer, Netwerken en Internet (WinXP) HA2cd Deel B: Het rekenblad Excel (*) HA3cd Deel C: Gegevensbeheer in Access (*) HA40 Deel 40: Gegevensbeheer en algoritmen in Access Voor alle richtingen, zowel Secundair als Hoger Onderwijs werden uitgewerkt: AL6cd Deel 6: Tekstverwerking met Word (*) AL7cd Deel 7: Elektronisch presenteren met PowerPoint (*) AL8cd Deel 8: Elektronisch publiceren: HTML (korte versie) en FrontPage (*) AL9cd Deel 9: Elektronisch publiceren: FrontPage (*) AL10 Deel 10: Elektronisch publiceren: HTML (uitgebreide versie) AL11cd Deel 11: Communicatie via Outlook (*) AL12 Deel 12: JavaScript AL13 Deel 13: VBScript AL20 Deel 20: Algoritmen en programmeren in Access en Excel (Basis) Voor het Hoger Onderwijs biedt Info-books de volgende publicaties aan: HO31 Deel 31: Dubbel boekhouden HO33a Deel 33a: ERP met Navision, Basis en Financieel 1 HO33b Deel 33b: ERP met Navision, Financieel 2 HO34 Deel 34: Internetapplicaties HO36 Deel 36: JavaScript (uitgebreide versie) HO37 Deel 37: Programmeren in Java HO38cd Deel 38: Gegevensbeheer in Access (basis en uitbreiding) (*) HO39 Deel 39: Scripttalen HO40a,b Deel 40a,b: Programmeren in Java: AWT en SWING HO40c,d Deel 40c,d,e: Java voor het internet: Servlets, JSP, Persitentie en Threads (*) Deze boeken worden zowel in de versie 2000, 2002/XP [c] als 2003 [d] aangeboden. (**) Deze boeken zijn geschikt voor de versie 2000, 2002/XP en 2003. Inlichtingen kunt u ook bekomen op onze website: http://www.info-books.be Jos Gils Boskant 26, 2970 Schilde Telefoon: 03 383 57 24 E-mail: jos.gils@telenet.be Erik Goossens Eekstraat 67, 9240 Zele Telefoon: 052 44 64 40 E-mail: erik.goossens@telenet.be 2006, Schilde Zele Niets uit deze uitgave mag verveelvoudigd en/of openbaar gemaakt worden door middel van druk, fotokopie, digitale media, microfilm of op welke andere wijze ook, zonder voorafgaandelijke schriftelijke toestemming van de auteurs.
Hoofdstuk 4 Toeters en bellen 4.1 Probleemstelling In heel wat websites worden speciale effecten gebruikt om de aandacht op belangrijke informatie te vestigen. Het gevaar bestaat dan wel dat de aandacht van de essentie afgeleid wordt. Bovendien duurt het laden van de site vaak veel langer. Dit heeft bij heel wat bezoekers tot gevolg dat zij al afhaken voordat de pagina geladen is. Wanneer echter strategisch en met mondjesmaat van bepaalde speciale effecten gebruik gemaakt wordt is de kans groot dat bezoekers meer tijd op de site doorbrengen. Een nuttig instrument om een website op te fleuren is een 'image map', een foto of een figuur met hyperlinks naar de afzonderlijke elementen die op de foto of op de figuur afgebeeld staan. Vooral in commerciële sites wordt gebruik gemaakt van bewegende tekst ('lichtkranten'). 4.2 Het web Regering_2004 ontwerpen In dit hoofdstuk maak je een nieuw web (REGERING_2004) met informatie over de Vlaamse regering die in 2004 beëdigd werd. Opdrachten 1. Ontwerp een nieuw web via BESTAND, NIEUW, PAGINA OF WEB, hyperlink LEEG WEB in het taakvenster en vul in het veld locatie C:\WEBS FRONTPAGE\REGERING_2004 of maak het nieuwe web in de standaardlocatie. Kopieer alle werkbestanden van REGERING_2004 naar deze map. 2. Wijzig de naam VLAAMSE_REGERING_2004.HTM in INDEX.HTM en open dit bestand in de ontwerpweergave. (In dit document is aangegeven waar je wat moet invoegen.) Plaats bovenaan titel ( Vlaamse Regering, 2004 ) op een lichtgroene achtergrond (Markeerstiftkleur), opmaakprofiel KOP2 en centreer hem. Kies het thema LENTE voor ALLE PAGINA'S via OPMAAK, THEMA. Voeg onder de titel de groepsfoto (FOTOVLREG2004.JPG) als bestand in. Het is nu de bedoeling om van de foto een image map en van de hoofden van deze excellenties hotspots te maken. Sla het bestand op. 3. Van alle ministers werd een eenvoudige webpagina opgesteld. Zorg ervoor dat alle bestanden met de namen van ministers ook in het web REGERING_2004 terecht komen. 50 FrontPage 2003 J. Gils E. Goossens
4.3 Hotspots aan een afbeelding toevoegen Wanneer je een illustratie als hyperlink gebruikt kunnen bezoekers om het even waar in de illustratie klikken om naar het doel van de hyperlink te gaan. Soms is het echter gewenst dat er maar een beperkt gebied van de illustratie als hyperlink gebruikt wordt. Het stukje figuur met de hyperlink wordt hotspot genoemd. Wanneer je met de muiswijzer over de figuur beweegt verandert die in een wit handje als een hotspot gedetecteerd wordt. Het is ook mogelijk om in eenzelfde figuur meerdere hotspots op te nemen. In dat geval wordt de figuur image map genoemd. Opdrachten 4. Hotspots toevoegen Zorg dat INDEX.HTM zichtbaar is in de ontwerpweergave. Van links naar rechts zie je: Kathleen Van Brempt - Kris Peeters - Frank Vandenbroucke - Bert Anciaux - Yves Leterme - Dirk Van Mechelen - Fientje Moerman - Geert Bourgeois - Inge Vervotte - Marino Keulen. Selecteer de foto en maak de werkbalk AFBEELDINGEN zichtbaar via BEELD, WERK- BALKEN. (AFBEELDINGEN aanvinken) Op die werkbalk staat een gewoon rechthoekje (een rechthoekige 'hotspot'). Wijs het aan met de muiswijzer. Deze verandert in een stift als je over de foto beweegt. Teken met die stift een rechthoek rond het hoofd van de persoon links (Kathleen Van Brempt). Wanneer het rechthoekje getekend is verschijnt het dialoogvenster HYPER- LINK INVOEGEN. Selecteer daarin het bestand KATHLEEN_VAN_BREMPT.HTM. Vul in het vak SCHERMINFO J. Gils E. Goossens FrontPage 2003 51
de naam van de persoon in en druk op OK. Wijs de hotspot met de muiswijzer aan. Ga naar het voorbeeld om na te gaan of de hyperlink naar de gewenste pagina verwijst. 5. Breng op dezelfde manier hotspots aan voor alle andere ministers. 6. Experimenteer met de knoppen MEER, MINDER CONTRAST en MEER, MINDER HELDER- HEID om de figuur beter tot uiting te doen komen. TIP TIP Met de knop BIJSNIJDEN kun je delen van een figuur wegsnijden. Snij bijvoorbeeld een stuk van de onderrand weg. Als je in de ontwerpweergave dubbelklikt op een hotspot, wordt het dialoogvenster HYPERLINK BEWERKEN geopend. 4.4 Interactieve knoppen toevoegen Interactieve knoppen zijn knoppen waaraan een hyperlink toegewezen is. Opdracht 14. Zorg dat je via een knop vanuit elke pagina kunt terugkeren naar INDEX.HTM. a. Open het document KATHLEEN_VAN_BREMPT.HTM en zet de invoegpositie helemaal onderaan. b. Kies INVOEGEN, WEBCOMPONENT, DYNAMISCHE EFFECTEN, INTERACTIEVE KNOP en klik op VOLTOOIEN. Het volgende venster verschijnt: 52 FrontPage 2003 J. Gils E. Goossens
Vul als TEKST Hoofdpagina in, klik op de knop BLADEREN, selecteer in het dialoogvenster INDEX.HTM. Kies de gewenste knop uit de lijst KNOPPEN. Eventueel kun je ook nog het lettertype en de grootte van de knop wijzigen. Druk op OK en sla het bestand op. c. Ga naar VOORBEELD. Wijs met de muiswijzer de knop aan. Wat is het effect? Open INDEX.HTM in een browser en test opnieuw het resultaat. d. Voeg aan alle andere pagina s dezelfde knop toe. TIP Klik met de rechtermuisknop op de knop om via de optie KNOPEIGENSCHAPPEN toegang te krijgen tot het dialoogvenster INTERACTIEVE KNOPPEN. 4.5 DHTML-effecten toevoegen Je kunt animatie-effecten op webpagina's toepassen via de knoppen van de werkbalk DHTML-EFFECTEN. DHTML is de afkorting van Dynamic HyperText Markup Language. DHTML-effecten zijn interactief omdat er eerst een handeling moet uitgevoerd worden om het effect te verkrijgen. In de volgende oefening wordt er voor gezorgd dat een afbeelding van een leeuw vanaf rechts de pagina met de foto van de Vlaamse Regering binnenvliegt als die pagina geladen wordt. J. Gils E. Goossens FrontPage 2003 53
Opdracht 7. Een bewegende figuur toevoegen a. Zet de invoegpositie onder de titel en boven de foto van de pagina VLAAM- SE_REGERING_2004.HTM en voeg de afbeelding VLAAMSE_LEEUW.GIF op die plaats in de pagina. b. Maak de werkbalk DHTML-EFFECTEN zichtbaar via BEELD, WERKBALKEN en klik links van de leeuwfiguur zodat de muiswijzer verandert in een grote verticale zwarte streep. In het vak BIJ <KIES GEBEURTENIS> selecteer je PAGINA LADEN. In het vak TOEPASSEN selecteer je BINNENVLIEGEN. In het vak <INSTELLINGEN KIEZEN> selecteer je VANAF RECHTS. Als de knop DHTML-EFFECTEN MARKEREN aangeklikt is verschijnt de figuur in een gekleurde band: Schakel over naar VOORBEELD. Hoe verschijnt het leeuwtje? c. Klik in het lichtblauwe gebied links of rechts van het leeuwtje en verwijder het effect door op de knop EFFECT VERWIJDEREN op de DHTML-EFFECTEN werkbalk te klikken. Laat het leeuwtje springen bij het laden van de pagina. 8. Zet onder de foto van de ministers de volgende tekst Klik op het hoofd van de minister als je meer wilt weten. en wijs er een geschikt annimatie-effect aan toe. 54 FrontPage 2003 J. Gils E. Goossens
4.6 Een lichtkrant maken Om de aandacht te trekken wordt vooral in commerciële websites gebruik gemaakt van lichtkranten. Een boodschap beweegt dan over het scherm. Lichtkranten worden ook gebruikt om belangrijke datums aan te kondigen en om verwarring te voorkomen. In de site van de Vlaamse Regering gaan wij de namen van de ministers heen en weer over de pagina laten bewegen zodanig dat bezoekers de bevoegdheden aan de juiste minister koppelen als zij een hotspot aanklikken. Opdrachten 9. Open de pagina VLAAMSE_REGERING_2004.HTM in de ontwerpweergave, maak ruimte tussen het logo en de foto. Kies INVOEGEN, WEBCOMPONENT, DYNAMISCH EFFECTEN, LICHTKRANT. In het vak TEKST vul je de namen van de personen in de juiste volgorde in. Experimenteer met de waarde van VERTRAGING. Klik op OK als je klaar bent. Bekijk het resultaat in een browser. J. Gils E. Goossens FrontPage 2003 55
10. Toon de pagina FIENTJE_MOERMAN.HTM en selecteer de naam van de minister. Kies INVOEGEN, WEBCOMPONENT, DYNAMISCH EFFECTEN, LICHTKRANT. Laat de naam tamelijk snel eenmalig naar rechts bewegen. Klik ten slotte op de knop OK. Probeer het effect via het tabblad VOORBEELD uit. 11. Doe een paar kleine aanpassingen aan de lichtkrant. Dubbelklik in de ontwerpweergave op de tekst van de lichtkrant om het dialoogvenster EIGENSCHAPPEN VAN LICHTKRANT te openen. (Je kunt dit dialoogvenster ook met de rechtermuisknop openen.) Nu kun je de eigenschappen aanpassen. Maak ook een lichtkrant voor de andere ministers en breng variatie in de effecten (richting, snelheid, beweging). 4.7 Geluid toevoegen Omdat de websites over politici nogal saai kunnen zijn, kun je ze onder andere met geluidsfragmenten opsmukken. Opdracht 12. Een geluidsbestand aan een knop met aanwijseffect toewijzen a. Open de hoofdpagina VLAAMSE_REGERING_2004 en zet onder de foto een hyperlink 'Vlaamse Leeuw' die gekoppeld is aan het muziekfragment VLAAMSE_LEEUW.MID. b. Open de pagina in je browser en test de werking van het muziekfragment. 4.8 HTML-code Opdrachten 13. Open het web van de Vlaamse regering en bekijk de HTML-code van INDEX.HTM. a. Welke scripttaal wordt gebruikt om de dynamische elementen aan de code toe te voegen? b. Welke functie zorgt voor het springen van het leeuwtje bij het laden van de webpagina? c. Welke functie zorgt ervoor dat het leeuwtje in een rechthoek geplaatst wordt wanneer erop geklikt wordt? d. Bij het laden van deze pagina wordt een functie uitgevoerd die voor een dynamisch effect zorgt. Hoe wordt dat geformuleerd in de <body>-tag? e. Welke tag zorgt voor het aanbrengen van hotspots? Hoe zie je dat die hotspots rechthoekjes zijn? Hoe worden de coördinaten van de hoeken weergegeven? 14. Roep de HTML-code van FIENTJE_MOERMAN.HTM op. a. Welke tag zorgt voor het heen en weer bewegen van de naam van deze minister? b. Welk attribuut zorgt voor de snelheid van de beweging? 56 FrontPage 2003 J. Gils E. Goossens
Besluit FrontPage beschikt over een gamma van mogelijkheden om speciale effecten aan websites toe te voegen. Figuren en foto's kunnen tot image maps omgevormd worden. In dat geval worden hyperlinks (hotspots) gelegd vanuit verschillende afgebakende gebieden van de figuur of de foto. Ook dynamische elementen kunnen aan websites toegevoegd worden. Zo kan ervoor gezorgd worden dat, wanneer een bepaalde gebeurtenis zich voordoet, een figuur op een bepaalde manier in de pagina geplaatst wordt. Je kunt ook bewegende teksten (lichtkranten) in pagina's opnemen. Wat je moet kennen en kunnen: de termen image map en hotspot verklaren; een image map met hotspots in een web aanbrengen; interactieve knoppen als hyperlinks in een webpagina aanbrengen; DHTML-effecten aan webpagina's toevoegen; lichtkranten in webpagina's opnemen. Opdrachten 15. Voeg de volgende dynamische effecten toe aan het Stravinski-web: a. Zorg ervoor dat bij het laden van de Stravinski-introductiepagina (TITEL.HTM) de titel 'Histoire du Soldat' woord voor woord neergezet wordt. b. Wanneer op de tekening van Stravinski (in TITEL.HTM) geklikt wordt gebeurt het volgende: de opmaak van de figuur verandert. Er wordt een dubbele rode rand rond de figuur gezet. Je kunt daarvoor gebruik maken van het werkbestand STRAVINSKIROOD.BMP. c. Bij het laden van de pagina INLEIDING.HTM komt de titel met de partituur als een spiraal de pagina binnen. 16. Verwerk enkele dynamische elementen in de website over de Vlaamse Regering. Wees creatief! 17. Gebruik een klasfoto om daarrond een website te ontwerpen met daarin informatie over al je medeleerlingen. J. Gils E. Goossens FrontPage 2003 57