afbeeldingen (vervolg), films, flash en geluid

afbeeldingen (vervolg), films, flash en geluid Herhaling Oefening 8.1 a. Start KompoZer. b. Voeg (indien nodig) uw eigen website toe aan de Websitebeheerder. c. Open de webpagina index.html. Als het goed is, ziet u het menu terug dat u in de vorige les gemaakt hebt. d. Open de webpagina s informatie.html. In deze pagina is nog geen menu gemaakt. Als herhaling gaat u nu het menu van de webpagina index.html kopiëren en plakken op de pagina informatie.html. Oefening 8.2 a. Klik op de pagina informatie.html ergens in het menu. b. Klik op de Statusbalk op het element <div> om in één klap alle onderdelen van het menu te selecteren. c. Druk op Enter om het menu te wissen en een lege regel in te voegen. d. Schakel over naar de pagina index.html. e. Klik ook ergens in het menu. f. Klik vervolgens ook op de Statusbalk op het element <div> (om precies te zijn: <div#menu>). De inhoud van dit element is geselecteerd. g. Klik in het geselecteerde gedeelte met de rechter muisknop en kies voor kopiëren. h. Schakel over naar de pagina informatie.html. i. Klik met de rechter muisknop op de plaats waar het menu moet komen (de lege regel boven de horizontale lijn) en kies voor Plakken. Nu heeft u het menu overgezet, alleen ziet het er niet als zodanig uit. Het is een ongenummerde lijst! Dat klopt natuurlijk, want u heeft de pagina nog niet gekoppeld met het bijbehorende stijlblad. DataDidact Computeropleidingen pagina 137

Websites maken met KompoZer Oefening 8.3 a. Koppel de pagina informatie.html met het stijlblad horizontaal.css. Het menu is geboren! b. Klik op het element <div#menu> op de Statusbalk en centreer het menu. c. Pas het menu eventueel nog aan, zodat het er precies zo uit ziet als op de pagina index.html. d. Kopieer en plak het menu ook op de pagina contact.html. e. Sla de wijzigingen op alle pagina s op. f. Schakel over naar de pagina index.html. g. Bekijk de pagina in de browser en probeer het menu uit. Tevreden? h. Als het allemaal goed is, sluit u de browser en alle geopende webpagina s in KompoZer. In deze les gaan we verder met de mogelijkheden die afbeeldingen, films en flash ons bieden. We pakken eerst de draad nog even op over het werken met afbeeldingen. Thumbnails Eerder in de cursus heeft u geleerd om van een afbeelding een koppeling te maken. Door de afbeelding een klein formaat te geven en een koppeling te maken naar het origineel, maakt u een zogenaamde thumbnail. Dit is een miniatuurafbeeldingen die wordt vergroot als je er op klikt. Oefening 8.4 a. Open de pagina activiteiten.html. b. U ziet drie kleine afbeeldingen in een tabel naast elkaar: vlakwaterkanoën, wildwaterkanoën en zeewaterkanoën. Dit zijn wel drie kleine afbeeldingen, maar nog geen thumbnails! Dat krijgen we voor elkaar door er een koppeling naar de originele afbeelding van te maken. U dubbelklikt op de afbeelding en kiest het tabblad Koppeling. Door te klikken op Bestand kiezen kunt u de afbeelding selecteren. Standaard is ingesteld dat u een koppeling wilt maken naar HTML-bestanden. Dat moet u in dit geval veranderen in Afbeeldingsbestanden. pagina 138 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 Tip: Op het tabblad Koppeling kunt u het vakje Rand om gekoppelde afbeelding weergeven aankruisen om het effect van een thumbnail te versterken. Oefening 8.5 a. Maak van alle drie afbeeldingen een koppeling naar het originele bestand via het tabblad Koppeling op het venster Afbeeldingseigenschappen. b. Geef elke gekoppelde afbeelding een rand. c. Sla de wijzigingen op en bekijk het resultaat in de browser. d. Als u alles goed bekeken hebt, kunt u het venster van de browser weer sluiten. Het is leuker om de koppeling naar het origineel te openen in een nieuw venster. Door dit venster te sluiten, keert de gebruiker weer terug naar het venster met de thumbnails. Door eerst op de afbeelding te klikken en vervolgens op de Statusbalk dubbel te klikken op het element <a>, krijgt u het venster Koppelingseigenschappen te zien. In het kader Doel kunt u opgeven dat de koppeling in een nieuw venster moet worden geopend. DataDidact Computeropleidingen pagina 139

Websites maken met KompoZer Oefening 8.6 a. Zorg ervoor dat de drie koppelingen naar de afbeeldingen in nieuwe vensters geopend worden. b. Sla de wijzigingen op en bekijk het resultaat in de browser. U kunt met de kennis die u inmiddels heeft van HTML natuurlijk ook de tag handmatig wijzigen. Klik dan ook eerst even op de afbeelding en kijk vervolgens op de Statusbalk of u het element <a> ziet staan. Klik hier één keer op. Schakel over naar de modus Splits. U ziet bijvoorbeeld: <a href="media/vlak_water.jpg"> Door dit element aan te vullen met het attribuut target= _blank (doel=nieuw venster), krijgt u het voor elkaar dat de koppeling in een nieuw venster wordt geplaatst. Bijvoorbeeld: <a href="media/vlak_water.jpg" target="_blank"> Afbeeldingen als menu In de vorige lessen hebben we een menu gemaakt door met andere achtergronden tekstkleur te werken. Vaak worden ook afbeeldingen in de vorm van knoppen (buttons) gebruikt om te navigeren tussen de verschillende pagina s van een website. Er zijn veel websites met knoppen die u (al dan niet gratis) kunt downloaden. Dit downloaden doet u normaal gesproken door op de afbeelding met de rechter muisknop te klikken en dan te kiezen voor Afbeelding opslaan als. Dan kunt u een map op uw computer kiezen om de afbeelding in op te slaan en kunt u eventueel een duidelijke naam geven aan de knop. Vaak is het probleem bij knoppen dat de achtergrond niet transparant is, maar wit of zwart. Op een witte c.q. zwarte webpagina is dat natuurlijk helemaal niet erg, maar als de webpagina een kleurtje heeft, is dat soms niet zo fraai. Oefening 8.7 a. Minimaliseer het venster van KompoZer en start Internet Explorer. b. Ga naar de volgende website: www.leejoo.nl c. Klik links op het scherm op de koppeling Buttons. d. Klik op de koppeling Zwart 1-10 e. Bekijk de knoppen uit de groep Button 6 (schuif iets naar beneden). f. Bovenin de pagina kunt u een andere paginakleur kiezen. Ziet u dat de knoppen een zwarte achtergrond houden? g. Klik op één van de afbeeldingen met de rechter muisknop en bekijk of u de optie Afbeelding opslaan als ziet. Dit hoeft u nu niet te doen. We hebben één van de knoppen al voor u opgeslagen in de map media onder de naam blauwe_knop.gif. pagina 140 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 h. Bekijk de knoppen uit de groep Transp. 11-14. Ook uit deze groep hebben we een knop alvast opgeslagen in de map media onder de naam Transparante_knop.png. i. Kies nu ook eens een andere paginakleur. Ziet u dat de knoppen transparant zijn? Oftewel, u ziet nu geen zwarte of witte rand om de knoppen. Oefening 8.8 a. Open de webpagina index.html. b. Sla de pagina op onder de naam index_knoppen.html. c. Voeg ergens op een lege plek op de pagina een tabel in. Kies daarom voor Invoegen en Tabel. Maak een tabel met 4 kolommen en 2 rijen. d. Klik in de eerste cel en voeg hier de afbeelding blauwe_knop.gif uit de map media in. e. Kopieer deze afbeelding en plak deze in de cellen ernaast. f. Zet in de rij eronder per cel de volgende teksten: Home, Informatie, Activiteiten en Contact. De tabel ziet er als volgt uit: Om er een menu van te maken, kunt u van elke afbeelding een koppeling maken. De tabel plaatst u dan bijvoorbeeld midden boven de pagina, waar het menu nu ook staat. Oefening 8.9 a. Maak van elke knop een koppeling naar de betreffende pagina. b. U kunt nu op de bekende manier het menu bovenaan de pagina krijgen: Eerst klikt op de Statusbalk op het element <div#menu> om in één klap alle onderdelen van het menu te selecteren. c. Dan drukt op Enter om het menu te wissen en een lege regel in te voegen. d. Vervolgens selecteert u de zojuist gemaakte tabel (gebruik ook weer het element <table> op de Statusbalk!) en knipt en plakt u de tabel bovenaan de pagina. e. Centreer de tabel (tabeleigenschappen!). f. Bekijk het resultaat in de browser (wijzigingen op de webpagina opslaan). g. Als alles OK is, sluit u de browser weer. In dit voorbeeld is het helemaal niet zo erg dat de afbeeldingen niet transparant zijn. Het zwarte achtergrondje misstaat niet. Om het verschil te zien kunnen we ook eens een transparante afbeelding invoegen. DataDidact Computeropleidingen pagina 141

Websites maken met KompoZer Oefening 8.10 a. Dubbelklik op de eerste knop om de afbeeldingseigenschappen te bekijken. b. Selecteer de afbeelding Transparante_knop uit de map media. c. Doe dat ook bij de andere afbeeldingen. d. Pas eventueel de grootte van de tabel aan. e. Bekijk het verschil eens als u een tabel zonder rand maakt (tabeleigenschappen!). Het ziet er nu zo uit: f. Sla de pagina op onder de naam index_knoppen2.html. g. Bekijk het resultaat ook in de browser. h. Als alles OK is, kunt u de browser weer sluiten. i. Sluit de pagina ook. Tip: In de volgende les gaan we met behulp van een javascript ervoor zorgen dat de knop van kleur verandert als u de knop aanwijst. Zoals u ziet, kunt u eindeloos experimenteren met afbeeldingen. Op onze website kunt u bij de cursusinformatie over KompoZer een overzicht krijgen van handige websites. Daar zitten ook websites tussen met verzamelingen van buttons en andere afbeeldingen. Films en flash invoegen Op webpagina s ziet u regelmatig films of fragmenten van films. Hieronder gaan we kijken hoe u zelf een filmpje kunt plaatsen op een webpagina. Een probleem met films is dat het doorgaans erg grote bestanden zijn. Niet echt geschikt voor een webpagina dus, want niet veel bezoekers kunnen het geduld opbrengen om lang te wachten tot een film geladen is. Daarom wordt er veel gebruik gemaakt van flash. Flash is een voor het internet geschikt gemaakte indeling om filmpjes te bekijken. De bestanden zijn niet overdreven groot en de kwaliteit is prima. Er is natuurlijk wel een verschil tussen film en flash. Een film wordt afgespeeld met een mediaplayer. U kunt dan vooruit spoelen, stoppen enz. Een flash lijkt meer op een bewegende afbeelding. Er verschijnt dus geen mediaplayer, alles gebeurt vanzelf. Flash bestanden hebben de extensie SWF (Shock Wave Flash) en kunnen met een speciaal programma worden gemaakt. Er zijn echter ook veel (freeware) programma s waarmee van gewone films flash gemaakt kan worden. pagina 142 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 Digitale films komen in verschillende soorten en maten voor. Op internet zijn het vooral Quicktime-filmpjes (exensie MOV) of Windows Media Video s (extensie WMV) die op websites te zien zijn. Films van hoogwaardige kwaliteit (extensie AVI) komen minder vaak voor. De bestanden van dit type doorgaans zijn veel te groot. Als u een eigen film wilt gebruiken, moet u hem via een filmbewerkingsprogramma, zoals Windows Moviemaker of Pinnacle Studio opslaan als flash. Er zijn echter op internet natuurlijk ook miljoenen filmpjes te zien en te gebruiken voor uw eigen website. Misschien wel de meest bekeken website op dit gebied is YouTube. Een YouTube filmpje kunt u heel gemakkelijk plaatsen op uw eigen website. De stappen die u moet nemen zijn: Ga naar de website van YouTube: www.youtube.nl Zoek naar een geschikt filmfragment. Als u het filmpje bekijkt, ziet u eronder een aantal mogelijkheden: <insluiten> Klik op de knop <Insluiten>. De benodigde HTML-code wordt in een apart kadertje voor u geselecteerd. Klik hierin met de rechter muisknop en kies voor Kopiëren. Schakel over naar uw eigen webpagina. Klik in de modus Ontwerp op de plek waar het filmpje moet komen. Kies voor Invoegen en HTML U ziet het volgende venster: DataDidact Computeropleidingen pagina 143

Websites maken met KompoZer Klik met de rechter muisknop in het venster en kies voor Plakken. Klik op de knop Invoegen. U ziet op de pagina de plek waar het filmfragment te zien zal zijn. Het wordt aangegeven als een ingesloten object. Tip: In plaats van te kiezen voor Invoegen en HTML kunt u natuurlijk ook overschakelen naar de modus Splits om de code te plakken. Oefening 8.11 a. Minimaliseer het venster van KompoZer. b. Ga naar de website van YouTube: www.youtube.nl c. Zoek naar kanotocht. d. Zoek een geschikt filmpje uit en kopieer de code zoals hierboven is beschreven. e. Maximaliseer KompoZer weer. f. Open de webpagina activiteiten.html. g. Plak op een geschikte plaats het filmpje op de pagina. h. Bekijk het resultaat in de browser (wijzigingen opslaan). i. Als het allemaal goed is, kunt u de browser weer sluiten. pagina 144 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 Tip: Als u bij YouTube een account aanmaakt, kunt u ook uw eigen filmpjes uploaden. Dan kunt u de films op dezelfde manier als hierboven is uitgelegd op uw eigen website krijgen. In de extra stof gaan we nog wat dieper in op de HTML-codes die gebruikt worden om films op een internetpagina te kunnen zetten. Nu willen we nog even wijzen op de mogelijkheid om zo n filmpje mooi te centreren op de pagina door het in een algemene container te plaatsen. Werkwijze: Stel de modus Splits in en zet de weergave op HTML-tags: Klik in het bovenste deel van het venster op de tag <object>. Onderin beeld ziet u de inhoud van de tag <object>. Typ ervoor de tag <div>. Voor de duidelijkheid kunt u eerst een Enter geven. Zoek de tag </object> op (helemaal rechts; gebruik de schuifbalk). Typ erna de tag </div>. Voor de duidelijkheid kunt u eerst een Enter geven. Het filmfragment heeft u zo in een algemene container geplaatst. Schakel over naar de modus Ontwerp. Klik even op het object wat het filmpje voorstelt en klik dan op de Statusbalk op het element <div> vlak voor het object. Nu heeft u de algemene container geselecteerd. Klik op de knop Centreren op de Opmaakwerkbalk 2. Oefening 8.12 a. Centreer het filmpje op de pagina zoals is uitgelegd. U ziet dit misschien niet direct gebeuren. b. Bekijk het resultaat in de browser: hier ziet u dat u filmpje keurig in het midden staat. c. Pas eventueel de pagina nog wat aan zodat alles naar wens is. Flash zelf maken en invoegen Er zijn diverse programma s (gratis) te downloaden waarmee u zelf flash-filmpjes kunt maken. Een erg leuk programma is Flash SlideShow Maker. Hiermee kunt u een diavoorstelling maken van foto s. Het gaat buiten de cursus om dit programma uitgebreid te behandelen. U kunt op onze website bij de cursusinformatie over KompoZer een link vinden waar u het programma kunt downloaden. In de bijlage van dit cursusboek vindt u een overzicht van allerlei handige freeware programma s. DataDidact Computeropleidingen pagina 145

Websites maken met KompoZer Nu is het vooral van belang hoe u een eigen flash-filmpje op een webpagina krijgt. We hebben daarom voor u alvast een flash-filmpje gemaakt met Flash SlideShow Maker van de foto s op de pagina activiteiten.html. Het filmpje is terug te vinden in de map media onder de naam activiteiten.swf Het formaat van het filmpje is 640 pixels breed en 480 pixels hoog. Dit kunt u allemaal instellen met het programma, net zoals het uiterlijk, de snelheid van de voorstelling enz. De werkwijze om een flash-filmpje op een webpagina te plaatsen is als volgt: Klik in de modus Ontwerp op de plek waar u het filmpje wilt invoegen. Kies voor Invoegen en HTML... Typ in het venster op de volgende manier een object in: <object height="480" width="640"> <param name="movie"> <embed src="foto.swf" height="480" width="640"></object> Verduidelijking: height= 480 width= 640 geeft de hoogte en de breedte van het object aan. src= film.swf verwijst naar de naam van het flash-filmpje. In plaats van via het menu te kiezen voor Invoegen en HTML kunt u natuurlijk ook de code typen in de modus Splits of Bron. Tip: Op dezelfde manier kunt u ook films invoegen. U geeft de hoogte en de breedte op en na <embed src= geeft u de volledige naam van het filmpje. Oefening 8.13 a. Sla de pagina op onder de naam film. b. Voeg ergens op de pagina het flash-filmpje activiteiten.swf in. Omdat het filmpje in de map media is opgeslagen, geeft u dat als volgt aan: src=media/activiteiten.swf c. Geef ook het formaat van het filmpje goed op! d. Bekijk het resultaat in de browser. e. Als u nog tijd heeft voor de extra stof, houdt u de pagina gewoon op het scherm geopend. Anders sluit u de pagina. In de extra stof nemen we de bovenstaande HTML-code wat beter onder de loep en gaan we ook kijken hoe u geluiden op een webpagina kunt invoegen. pagina 146 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 extra stof/opdrachten De elementen <object> en <embed> Als u goed gekeken hebt naar de HTML-codes die in de basisstof zijn gebruikt om een film of flash in te voegen, is het u misschien al opgevallen. Er worden 2 elementen gebruikt: <object> en <embed>. Kijk maar eens naar de volgende code: <object height="480" width="640"> <param name="movie"> <embed src="foto.swf" height="480" width="640"></object> Dat lijkt dubbelop. Zowel het element <object> als het element <embed> geeft bijvoorbeeld het formaat van de film of flash aan. Dat deze elementen worden gecombineerd heeft natuurlijk wel een rede. Niet alle gangbare browsers kunnen goed omgaan met het element <embed>. Andere browsers werken niet goed met het element <object>. Door beide elementen te gebruiken, wordt dit probleem opgelost. De ene browser zal het element <embed> gebruiken om een object af te spelen en de andere het element <object>. Opdracht 8.1 a. Schakel over naar de modus Splits. b. Wijzig de weergave van Normaal in HTML-tags. c. Klik op de tag <object> d. Verwijder in het onderste scherm het element <object>, zodat alleen het element <embed> overblijft: <embed src="media/activiteiten.swf" height="480" width="640"> e. Het kader object verdwijnt van het scherm. Dat is al behoorlijk lastig! f. Bekijk de pagina in de browser. U ziet dat de flash wel werkt! Maar dat is met Internet Explorer wel, maar misschien met Mozilla Firefox weer niet! g. Sluit de browser. h. Merk op dat het behoorlijk lastig is om met KompoZer te werken zonder het element <object> te gebruiken. Waar staat het flashfilmpje op de pagina? Hoe groot is het? Dat is allemaal onduidelijk. DataDidact Computeropleidingen pagina 147

Websites maken met KompoZer Geluid invoegen Net zoals u een film of flash als object invoegt, kunt u ook geluid invoegen. Voor geluid bestaan er verschillende bestandstypen, waarvan mp3, midi en wave de bekendste zijn. Midi-bestanden bevatten allerlei commando s. Het is een soort elektronisch notenschrift. De bestanden zijn klein, maar hebben daarom ook geen volle klankkleur. Het zijn ideale bestanden voor eenvoudige deuntjes of geluiden. Op internet zijn er volop voorbeelden van te vinden (en te downloaden). Wave-bestanden zijn juist kwalitatief erg goed. Voor internet daarom meteen niet zo geschikt: de bestanden zijn doorgaans erg groot. Mp3-bestanden zijn voor webpagina s meer geschikt: de kwaliteit is goed en de bestandsgrootte is beperkt. Geluid invoegen doet u op dezelfde manier als een object. Het makkelijkst gaat dat dus door in de modus Ontwerp de juiste plek aan te klikken en dan te kiezen voor Invoegen en HTML In het venster dat dan op het scherm verschijnt, typt u de volgende HTML-code: <embed src="naam van muziekfragment.mp3" type="audio/wav"> In de modus Ontwerp is er verder niets van te zien. In de modus Splits of Bron kunt u natuurlijk de code wel weer bekijken. In de browser ziet u een mini-mediaplayer. Hoe dat er precies uitziet, is afhankelijk van de geïnstalleerde mediaplayer. Standaard is dat voor Windows de Windows Mediaplayer, maar in veel gevallen zal de Quicktime Mediaplayer geïnstalleerd zijn. Zo ziet de Quicktime Mediaplayer eruit: En zo de Windows Mediaplayer: Opdracht 8.2 a. Voeg het mp3-bestand watergeluiden.mp3 in op de manier zoals het hierboven is beschreven. Het bestand vindt u in de map media. b. Omdat u het element <object> niet gebruikt hebt, kunt u er niets van terugvinden op de pagina in KompoZer. c. Bekijk het resultaat in de browser (zet indien nodig het geluid op uw computer aan!). Als het goed is, hoort u vriendelijke watergeluiden en ziet u een mediaplayer. pagina 148 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 Zoals hierboven is uitgelegd, is het beter om het element <embed> te combineren met <object>. Om e.e.a te verfijnen hebt u nog enkele attributen nodig. Zo is het verstandig om een hoogte op te geven van de mediaplayer. Anders neemt hij te veel ruimte in beslag (bij geluid hoeft u niets te zien ). De breedte (width= getal ) mag ook, maar is nu iets minder belangrijk. De code van het bovenstaande voorbeeld is: <object type="audio/wav" height="50"> <param name="src" value="media/watergeluiden.mp3"> <embed src="media/watergeluiden.mp3" type="audio/wav" height="50"> </object> Opdracht 8.3 a. Zoek het zojuist door u ingevoerde element <embed> op. Dat is best lastig, want KompoZer laat het element nergens zien. Ga daarom naar de modus Bron en laat hier zoeken (Bewerken en Zoeken en vervangen). Bedenk dat er ook nog een YouTube filmpje in een <embed> element zit. Selecteer het hele element (dus t/m de afsluitingstag) en kies met de rechter muisknop voor Knippen. b. Schakel weer over naar de modus Ontwerp. c. Voeg op de plaats waar u dat wilt de code opnieuw in via Invoegen en HTML d. Pas de code aan zoals hierboven is weergegeven. e. Bekijk het resultaat weer in de browser. Mogelijk ziet zelfs een andere mediaplayer! f. Nadat u het bekeken (en beluisterd) hebt, kunt u de browser weer sluiten. Als u wel muziek wilt horen, maar u wilt geen mediaplayer zien, dan kunt u de player verbergen door de hoogte en de breedte op 0 te zetten. Bij het openen van de pagina zal er direct een achtergrondmuziekje gaan spelen. Bijvoorbeeld: <object type="audio/wav" height="0" width= 0 > <param name="src" value="media/watergeluiden.mp3"> <embed src="media/watergeluiden.mp3" type="audio/wav" height="0" width= 0 > </object> Let op: Geef de hoogte en de breedte op bij zowel het element <object> als het element <embed>. Opdracht 8.4 a. Zorg ervoor dat u geen mediaplayer meer te zien krijgt. b. Bekijk en beluister het resultaat in de browser. c. Sluit de browser weer. DataDidact Computeropleidingen pagina 149

Websites maken met KompoZer Als u niet automatisch een muziekje wilt laten afspelen, maar alleen als de bezoeker dat wil, kan dat ook. Dan moet de mediaplayer natuurlijk wel in beeld zijn, want daarmee kan de muziek worden afgespeeld! U doet dat door (2x!) het attribuut autostart= false op te geven. Zo ziet dat er dan uit: <object type="audio/wav" height="50"> <param name="src" value="media/watergeluiden.mp3"> <param name="autostart" value="false"> <embed src="media/watergeluiden.mp3" type="audio/wav" autostart= false height="50"> </object> Opdracht 8.5 a. Zorg ervoor dat het ingevoegde geluidsfragment niet automatisch wordt afgespeeld, door de code zoals hierboven is uitgelegd te wijzigen. Vergeet niet om het formaat weer goed in te stellen (hoogte 50 pixels, breedte kunt u weglaten). b. Bekijk het resultaat in de browser. Als het goed is, ziet u de mediaplayer weer en moet u zelf op de knop Afspelen drukken om het geluid te kunnen horen. c. Sluit de browser weer. Tip: Op de website www.handleidinghtml.nl vindt u hele goede informatie over alle elementen en mogelijke attributen. Leuk om eens te kijken naar alle mogelijkheden bij de elementen <object> en <embed>. Koppeling maken naar film, flash of geluid Natuurlijk kunt u ook koppelingen maken naar film-, flash- of muziekbestanden. Het geeft een ander effect, want het is geen ingesloten object op een webpagina. U verwijst gewoon naar een bepaald soort bestand. Dat kan de bedoeling zijn als u de film, flash of muziek niet wilt laten verweven met de webpagina. Let op: Als u in KompoZer een koppeling gaat maken, gaat het programma er standaard vanuit dat u een koppeling wilt maken naar een HTML-pagina. Om andere bestanden te kiezen, moet u naast het kadertje Bestandsnaam kiezen voor Alle bestanden. pagina 150 DataDidact Computeropleidingen

Websites maken met KompoZer les 8 Opdracht 8.6 a. Zet ergens op de pagina de tekst diavoorstelling. b. Maak een koppeling naar het bestand activiteiten.swf in de map media. Zorg ervoor dat de koppeling in een nieuw venster wordt geopend. c. Zet ergens anders de tekst Luister naar water en maak hiervan een koppeling naar het geluidsbestand watergeluiden.mp3 in de map afbeeldingen. d. Test beide koppelingen uit door de pagina in de browser te bekijken. e. Sluit de browser weer. f. Sluit de pagina. Laag maken Als u iets op een willekeurige plek op de pagina wilt plaatsen, is het een idee om met lagen te gaan werken. U kunt elk element (en vooral afbeeldingen zijn daarvoor geschikt) in een andere laag krijgen door het element te selecteren en vervolgens te klikken op de knop Laag helemaal rechts op het scherm. Laag Naar achterkant brengen Naar voorgrond brengen Als er foto s (of elementen met tekst) over elkaar heen zijn geplaatst, kunt u met de knoppen Naar voorgrond brengen en Naar achterkant brengen bepalen wat op de voorgrond moet komen. Als u een laag gemaakt hebt, verschijnt er een vierpijl linksboven de laag. Vierpijl Hiermee kunt u de laag naar een andere plek slepen. Vooral met afbeeldingen kunt u leuke effecten krijgen door ze half over elkaar te slepen. Toch is het niet altijd verstandig om met lagen te werken. Een laag verhoudt zich altijd onvoorspelbaar ten opzichte van de rest van de webpagina. Op de ene monitor zal een laag op een andere plek staan als op de andere monitor DataDidact Computeropleidingen pagina 151

Websites maken met KompoZer (omdat er verschillen in grootte of resolutie zijn). Dat is de reden dat er heel vaak gewerkt wordt met tabellen. Een laag stoort zich echter niet aan een tabel! Als u daarmee rekening houdt, kunt u echter leuke, speelse effecten krijgen. Opdracht 8.7 a. Open de pagina contact.html. b. Maak een laag van de GIF-afbeelding van een fles met een brief. c. Sleep deze laag naar het water van de rivier de Eem, bovenin de pagina. Dit is het resultaat: d. Bekijk de pagina in de browser. e. Maak het venster van Internet Explorer eens groter en kleiner. Ziet u dat de fles wegdrijft? Dat is dus het risico van een laag. Als u ermee rekening houdt, is dat niet erg. f. Sluit de browser en de pagina. pagina 152 DataDidact Computeropleidingen