Learnit

6. Afbeeldingen

Soms zegt een afbeelding meer dan duizend woorden.

Afbeeldingen kunnen vele doelen dienen. Ze kunnen internetpagina's visueel aantrekkelijker maken, ze kunnen dienen als uitleg, ze kunnen de navigatie van een internetsite verduidelijken, het kunnen knoppen zijn met een hyperlink, het kan een achtergrond zijn etc.

Voor het gebruik van afbeeldingen moet met een aantal aspecten rekening worden gehouden. Afbeeldingen hebben een grotere bestandsgrootte dan tekst. Hierdoor duurt het even voordat de bezoeker van jouw internetsite het plaatje op zijn scherm ziet. Er zijn een aantal zaken waar je op moet letten bij het gebruik van plaatjes in de pagina's. Dit zijn onder andere de pixeldiepte en de bestandsgrootte.

Pixeldiepte
Voor afbeeldingen die op een scherm worden weergegeven is de regel dat er 72 pixels per vierkante inch worden gekozen. Dit wordt ook wel dots per inch (dpi) genoemd. Het geeft het aantal pixels per vierkante inch. Een beeldscherm kan maximaal dit aantal pixels weergeven, dus een afbeelding met meer dan 72 dpi is onduidelijk. Beeldpunten worden dan groter afgebeeld dan de bedoeling is en dat zorgt er voor dat je plaatje opgebouwd lijkt uit blokjes van kleurvlakken.

Opschalen van een afbeelding
Als je binnen Dreamweaver een plaatje groter wilt weergeven, kun je deze opschalen. Dit is mogelijk door de afbeelding eerst te selecteren. Dit is te herkennen aan de zwarte blokjes. Je kunt nu door met de zwarte blokjes te verschuiven de afbeelding vergroten en verkleinen. Hou er wel rekening mee dat de oppervlakte veranderd en dus ook de pixeldiepte van het plaatje. Het plaatje krijgt dan last van blokvorming.

Dreamweaver is geen beeldbewerkingprogramma het wordt dan ook niet aangeraden om afbeeldingen binnen Dreamweaver te schalen. Als je een afbeelding wilt vergroten, doe dit dan bijvoorbeeld met Photoshop.

6.1 Bestandsformaten en grootte

Er zijn drie bestandsformaten die elk een andere manier van compressie gebruiken om de bestandsgrootte zo klein mogelijk te maken. De bestandsformaten zijn GIF, JPG en PNG.

6.1.1 GIF (Graphics Interchange Format)

GIF is een veelgebruikte compressietechniek voor afbeeldingen. GIF kent vier subformaten: 87a standard, 87a interlaced, 89a standard en 89a interlaced. De gewone gif is 87a. De GIF-compressie bekijkt een plaatje per pixel-regel van links naar rechts en van boven naar beneden. Kleurwaarden die dichtbij elkaar liggen worden vereenvoudigd. In een kleurovergang zitten veel meer kleuren dan het GIF formaat kan weergeven. Stel dat je een overgang hebt van oranje naar rood, dan kan een GIF plaatje slecht een beperkt aantal kleuren uit die overgang tonen omdat het GIF formaat niet genoeg kleuren bevat die tussen rood en geel liggen.

De belangrijkste eigenschappen van een GIF-afbeelding zijn:

• Goed te gebruiken voor afbeeldingen met effen vlakken (logo’s etc.)
  GIF gebruikt een compressie techniek waarbij vooral op het aantal kleuren wordt gekort. Hierdoor is het goed te gebruiken als je afbeelding een paar effen vlakken heeft.
• Interlacing (87a interlaced en 89a interlaced)
  Hierdoor wordt de afbeelding eerst korrelig en ruw op het scherm getoond, waarna hij later steeds scherper wordt weergegeven. De laadtijd is even lang, maar het duurt minder lang voordat de bezoeker door heeft wat de afbeelding voorstelt.
• Animated GIFs (89a en 89a interlaced)
  Een animated GIF is een reeks afbeeldingen die snel achter elkaar worden getoond. Hierdoor wordt een animatie verkregen. Animated GIFs kunnen worden gemaakt met Image Ready (webgedeelte van Photoshop) en Flash.
• Transparante achtergrond (89a en 89a interlaced)
  Het is mogelijk transparante achtergronden aan te geven bij een GIF. Hierdoor is het mogelijk om een niet vierkante afbeelding zonder vierkante achtergrond weer te geven.

6.1.2 JPG, JPEG (Joint Photographic Experts Group)

JPEG heeft een hele goede compressietechniek. JPG neemt blokken van 8 bij 8 pixels samen en bepaald de gemiddelde kleurwaarde, daarna krijgen de pixels deze kleur vermengd met het pixel-blok waar de pixel aan grenst. Het is mogelijk om de compressie in procenten aan te geven waardoor zeer beheerst kan worden gecomprimeerd.

De belangrijkste eigenschappen van een JPG-afbeelding zijn:

• Gebruik bij foto’s
  Een foto kan zeer goed door het JPG-formaat worden weergegeven. Een JPG maakt namelijk gebruik van vele kleuren en geeft kleurverlopen goed weer.
• Progressive
  Net zoals bij GIF heeft ook JPG de mogelijkheden om de afbeelding in fasen op te bouwen. De progressive kan vaak ook ingesteld worden, Dit geeft aan of een afbeelding in 1, 2, 3, of 4 keer wordt opgebouwd. Hoe hoger je deze waarde kiest hoe vloeiender de JPG zal worden opgebouwd. Er worden meerdere stappen genomen om van de eerste onduidelijke afbeelding tot de uiteindelijke optimale JPEG te komen.
• Geen transparantie
  Het is niet mogelijk om een JPG transparant te maken.

6.1.3 PNG (Portable Network Grafics)

Het PNG-formaat (spreek uit Ping) is een nieuwere compressiemethode dan GIF en JPG. Het is een grafisch formaat dat is ontworpen als vervanging van het GIF formaat. De laatste versies van Netscape en Internet Explorer ondersteunen dit bestandsformaat inmiddels, alhoewel niet alle aspecten werkzaam worden weergegeven. Een PNG heeft 5% tot 25% betere compressie dan een GIF. De meeste kwalitatieve beeldverwerkings-programma’s kunnen het PNG-formaat inmiddels openen, bewerken en opslaan.

De eigenschappen van een PNG-bestand zijn:

• Alpha-transparant
  Het is mogelijk om de hele afbeelding een bepaalde mate van transparantie te geven.
• Gamma-correctie
  Gamma-correctie zorgt ervoor dat een afbeelding er op een Mac even helder wordt weergegeven als op een PC.

PNG combineert de beste eigenschapen van GIF en JPG, met eigen kwaliteiten als alpha-transparantie en gamma correctie. Meer informatie kan gevonden worden op de internetsite http://www.libpng.org/pub/png/.

Oefening 6.1 Gegevens uit Word kopiëren en toevoegen aan Dreamweaver.

1. We gaan onderstaande webpagina namaken door de tekst van een Word documenten te kopiëren en in Dreamweaver te plakken.
2. Open het bestand techno, je kunt deze vinden in de map cursus Dreamweaver, webteksten.
3. Kopieer de inhoud van het document, kies in de menubalk de menuoptie Bewerken. Selecteer de optie Kopiëren.
4. Ga naar Dreamweaver, open daar het bestand house.htm.
5. Kies in de menubalk de menuoptie Edit, selecteer de optie Paste. De inhoud van het document techno wordt nu aan de house pagina toegevoegd.
6. Doe dit op dezelfde manier voor het bestand Club in de map cursus Dreamweaver, webteksten.
7. Maak de pagina op zoals in het voorbeeld, geef de achtergrond de kleur #330000, de tekst is wit (#FFFFFF). Het lettertype is Georgia, de grootte van het lettertype voor de platte tekst is 14 en voor de subkoppen 18.
8. De platte tekst wordt vetgedrukt weergegeven en de subkoppen vet- en schuingedrukt.

Figuur 6.1: Voorbeeld house.htm pagina

Oefening 6.2 Een afbeelding invoegen.

1. We gaan een afbeelding invoegen in de pagina house.
2. Open de pagina house, voeg voor de subkop trance een afbeelding in.
3. Plaats de muis na de alinea met informatie over de muziekstijl trance.
4. Kies in de menubalk de menuoptie Insert.
5. Kies de optie Image.
6. Je komt in het venster Select Image Source terecht.
7. Selecteer de afbeelding met de naam trance.jpg. Druk op OK, de afbeelding wordt ingevoegd.
8. Selecteer de afbeelding door er op te klikken, druk nu op de knop , de afbeelding wordt nu rechts uitgelijnd.
9. Maak de afbeelding iets kleiner, door in de Property Inspector voor W: (Width) en voor H: (height) beiden100 in te voeren.

Figuur 6.2: Venster Select Image Source voor het invoegen van een afbeelding

6.2 Flash (movie en Button)

Naast Dreamweaver heeft het bedrijf Adobe een softwarepakket wat Flash heet. Het is ontwikkeld voor maken van bewegende beelden op het internet. Doordat Flash de gegevens als vectoren opslaat is de benodigde ruimte voor filmpjes relatief klein. Bovendien kun je er snel en gemakkelijk bewegende beelden mee maken omdat het kan “tweenen”. Dat wil zeggen dat Flash bij een beginbeeld en een eindbeeld de tussenliggende beelden berekent.

6.2.1 Flash Button

Vanuit Dreamweaver is het mogelijk om reeds gemaakte knoppen in je internetpagina in te voegen. Dit zijn knoppen die in Flash zijn gemaakt. Je kunt zelf tekst invoegen en bewerken en de achtergrondkleur aanpassen.

Oefening 6.3 Een Flash button maken en invoegen.

1. Plaats de muis naast de afbeelding die bij de vorige oefening is ingevoegd.
2. Kies in de menubalk de menuoptie Insert.
3. Kies de optie Media.
4. Kies Flash Button.
5. Selecteer de knop de Blip Arrow.
6. Type de tekst Terug in bij Button text.
7. Het Font is Georgia, 13 pixels groot.
8. Voer bij Link: index.htm in, dit is de Homepage.
9. Geef bij BG color de kleur #FFFFFF in, dit is de achtergrondkleur van de Button.
10. Sla de button op als terug_house.swf in de map Buttons.
11. Druk op Apply.
12. Druk op OK.
13. Zorg er voor dat de knop rechts uitgelijnd wordt.

Figuur 6.3: Venster Insert Flash Button voor invoegen van Buttons.

TIP: let erop dat het Flashbestand in dezelfde map geplaatst wordt als de internetpagina waarin deze link wordt gebruikt. Dit voorkomt gebroken links. Dreamweaver houdt verwijzingen bij als je objecten verplaatst, maar de hyperlink in deze Flashbutton is echt Flash en is niet toegankelijk voor Dreamweaver. Dreamweaver kan de links in Flashbestanden dus niet aanpassen.

6.2.2 Movie

Het is ook mogelijk om met Dreamweaver in Flash gemaakte animaties of bewegende menu’s in je HTML-pagina te importeren. Deze bestanden kun je herkennen aan de extensie .swf.

Oefening 6.4 Een Flash film invoegen.

1. Kies in de menubalk de menuoptie Insert.
2. Kies de optie Media.
3. Druk op Image viewer.
4. Wijs het bestand equalizer.swf aan, deze kun je vinden in de map cursus Dreamweaver, images.
5. Druk op OK.
6. De volgende vraag wordt gesteld: "Would you like to copy to Local Root Folder?"
7. Druk op OK.

Figuur 6.4: Voorbeeld house.htm pagina met een Flash Movie.

Er wordt nu een grijs vlak in je internetpagina getoond, druk op ‘play’ in de ‘Property Inspector’ of op F12 om het resultaat te bekijken. Als de Flash movie is geïmporteerd is het mogelijk om het filmpje te schalen. Dit kan gedaan worden door op movie te klikken, waarna je door middel van de zwarte blokjes aan de rechteronderkant de film kunt verslepen. Het is ook mogelijk om de achtergrondkleur van het filmpje nog aan te passen als de maker van de movie deze in zijn filmpje heeft aangegeven, kijk dan in de Property Inspector bij bgcolor.

6.3 Rollover image

Een rollover image is een techniek die vaak gebruikt wordt voor navigatie-elementen op een webpagina. Als de gebruiker zijn muis beweegt over een plaatje, dan verandert dat plaatje op het moment dat de muis erboven zweeft. Dit is handig, want dan weet de gebruiker op welke knop hij drukt als hij klikt.

Een Rollover wordt in Dreamweaver op een wizard-achtige manier aangemaakt. Aangezien Dreamweaver zelf de benodigde javascript automatisch aanmaakt. Het is ook mogelijk om een hyperlink aan de afbeelding toe te kennen. Op deze manier kun je dus vrij gemakkelijk knoppen maken van reeds bestaande GIF-jes.

Figuur 6.5: Venster voor invoegen van een Rollover Image.

Oefening 6.5 Een Rollover Image invoegen.

1. Kies in de menubalk de menuoptie Insert.
2. Kies de optie Insert Rollover Image.
3. Vul bij Image name rollover image house in.
4. Selecteer bij de Original Image door gebruik te maken van de Browse knop de afbeelding daft_bg_font.jpg.
5. Selecteer bij de Rollover image de afbeelding billie.jpg.
6. Vul bij Alternate text het volgende in: "Als je met de muis over de afbeelding gaat, zie je de foto van een Jazz zangeres".
7. Voeg de hyperlink jazz. htm in bij When clicked , Go to Url: of selecteer deze door de Browse knop te gebruiken.
8. Klik op OK.

Zoals je waarschijnlijk ziet maakt Dreamweaver de afmetingen van de tweede afbeelding identiek aan de eerste. Zorg er daarom voor dat de afbeeldingen dezelfde afmetingen hebben.

De werking van de Rollover image kan worden bekeken in de show code view (HTML) en in het behaviour window. Dit paneel vind je onder Window Behaviours. Daar zijn de acties zichtbaar als de afbeelding geselecteerd is.

6.4 Navigation Bar

Omdat veel internetsites een navigatiebalk met een menu nodig hebben is er in Dreamweaver een speciale functie voor gemaakt. Eigenlijk zijn het een aantal Rollover Images onder elkaar in een tabel.

Figuur 6.6: Venster voor aanmaken en invoegen van een Navigation Bar.

Oefening 6.6 Een Navigation bar invoegen.

1. Kies in de menubalk de menuoptie Insert.
2. Kies de optie Image Objects.
3. Kies de optie Navigation Bar.
4. Geef als Element name: Home op.
5. Voeg als Up image: bnt_home_up.png in door op de Browse knop te drukken en te zoeken in de map met buttons.
6. Voeg als Over image: bnt_home_over.png, bij de Down image: bnt_home_down.png en bij Over while down image: bnt_home_over.png.
7. Druk nog niet op OK maar op het +-teken bovenaan om nog een knop toe te voegen.
8. Voeg bij de tekst When clicked, Go to URL: de hyperlink index.htm in, deze kun je ook vinden door op de Browse knop te drukken en te zoeken in de map Dreamweaver Cursus.
9. Geef als Element name: Klassieke_Muziek.
10. Voeg als Up image: bnt_klassieke_muziek_up.png in door op de Browse knop te drukken en te zoeken in de map Dreamweaver Cursus.
11. Voeg als Over image: bnt_klassieke_muziek_over.png, bij de Down image: bnt_klassieke_muziek_down.png en bij Over while down image: bnt_klassieke_muziek_over.png.
12. Voeg bij de tekst When clicked, Go to URL: de hyperlink klassieke_muziek.htm in, deze kun je ook vinden door op de Browse knop te klikken en te zoeken in de map Dreamweaver Cursus.
13. Maak op deze manier nog drie knoppen aan voor de muziekstijlen Jazz, House en Wereldgeschiedenis en voeg bij alle drie de knoppen de hyperlinks in, deze zijn achtereenvolgens jazz.htm, house.htm en wereldgeschiedenis.htm. Deze zijn ook te vinden via de Browse knop.
14. Als alle knoppen en de hyperlinks zijn aangemaakt kun je op de OK knop drukken en wordt de navigatiebalk aangemaakt.

Als je een Navigation Bar wilt aanpassen doe je dat via Modify Navigation Bar.

Na maken van opdracht 6.5 zou het scherm er uit moeten zien zoals in figuur 6.7.

Figuur 6.7: Voorbeeld house.htm pagina met onder andere een Rollover Image

Oefening 6.7 Aanvullende opmaak oefening.

1. Maak de rollover image van Daft Punk kleiner, voeg in de Property Inspector voor de W: (Width) en H: (Height) voor beiden de waarde 100 in
2. Voeg de tekst HOUSE toe, in hoofdletters met een lettertype grootte van 36 en vetgedrukt weergegeven.

6.5 Eindopdracht

Open het bestand wereldmuziek.htm, maak voorbeeld in figuur 6.7 na. De volgende gegevens kun je gebruiken bij het maken van je pagina over wereldmuziek:

Invoegen Flash Button

1. Voeg een Flash Button in.
2. Plaats de muis aan het einde van de tekst.
3. Kies de knop Soft-Light blue.
4. Type de tekst Terug in bij Button text.
5. Het Font is Georgia, 15 punten groot.
6. Voer bij Link: index.htm in, dit is de Homepage.
7. Zorg er voor dat de knop rechts uitgelijnd wordt.

Invoegen Rollover Image

1. Voeg een rollover image toe, geef de afbeelding de naam rollover image house
2. De afbeelding die ingevoegd moet worden bij Original Image de afbeelding wereldmuziek_clip_image.jpg.
3. De afbeelding die ingevoegd moet worden bij Rollover image de afbeelding djs background.jpg.
4. De Alternate text is: Als je met de muis over de afbeelding van de Buena Vista Social Club gaat, krijg je de afbeelding van een draaitafel te zien.
5. De hyperlink die toegevoegd moet worden is house.htm, druk op OK.

Invoegen Navigation Bar

1. Voeg een Navigation Bar in.
2. De Element name is Home. Up image: bnt_home_up.png, Over image: bnt_home_over.png, Down image: bnt_home_down.png en Over while down image: bnt_home_over.png.
3. Druk op het +-teken bovenaan om nog een knop toe te voegen
4. When clicked, Go to URL: de hyperlink index.htm in.
5. Maak voor de muziekstijlen Klassieke_Muziek, Jazz, House en Wereldgeschiedenis de navigatieknoppen aan zoals hierboven.

Figuur 6.7: Voorbeeld wereldmuziek.htm pagina

Disclaimer: The free online courses have been put to your disposal and have been developed by the Learnit company. This course is free but should not be used for any commercial purposes. This work is copyright protected; copyright is in the keeping of Learnit.