Fotopagina maken
Hoofdstuk 6
Kies in de werkbalk voor een nieuwe pagina.
Klik nu op Opmaak en kies in het menu voor paginakleuren en achtergrond.
Kies voor aangepaste kleuren en geef alle kleuren: Wit.
Klik in hetzelfde scherm bij achtergrondafbeelding op: Bestand kiezen of het gele
mapje.
Selecteer in de map: Afbeeldingen Achtergrond3.jpg en klik dan: Openen en OK.
Klik in de werkbalk op: Invoegen, kies in het menu voor Afbeelding.
Klik in het scherm dat verschijnt op: Bestand kiezen.
Selecteer in de map Afbeeldingen, de afbeelding Agni1280
klik vervolgens op Openen en op OK.
Je ziet nu dat de ingevoegde foto veel en veel te groot is. Dit euvel doet zich vooral
voor bij foto’s die met een digitale camera zijn gemaakt en op de pc zijn gezet. Die
foto’s zijn voor een webpagina veel te groot. De foto is niet alleen in afmeting te groot,
de bestandsgrootte is ook nogal fors (214 KB) en zal daarom traag geladen worden.
Bovendien is het nadeel van zulke grote foto’s dat je al gauw ruimtegebrek krijgt op de
server van je internet provider. Je hebt immers maar een beperkt aantal MB’s ter
beschikking. Stel dat je een foto website wilt maken en dat je daar een honderdtal
foto’s op kwijt wilt, dan kom je met deze afmetingen en bestandsgrootte al snel in de
problemen. Door de afbeelding tot normale proporties terug te brengen wordt ook
automatisch de bestandsgrootte aangepast en dat scheelt behoorlijk. Zo kun je veel
meer foto’s plaatsen.
We moeten dus eerst de afmetingen van de foto’s wijzigen.
Verkleinen van foto’s met PhotoFiltre
Open het programma Photofiltre.
Klik in de werkbalk op: Bestand en dan Openen.
Navigeer naar de map: mijn homepage, open de map: Afbeeldingen en selecteer
de afbeelding AGNI1280, klik op Openen.
Klik in de werkbalk op het tabblad: Afbeelding en kies in het menu voor:
Afmetingen afbeelding.
In het venster dat nu verschijnt geef je bij de breedte op: 800 pixels. De hoogte
wordt automatisch aangepast. Klik op OK.
Klik nu op het tabblad: Bestand en kies voor: Opslaan als
Navigeer naar de map: Afbeeldingen en geef als bestandsnaam: Agni
Er komt nu een melding dat dit bestand al bestaat en de vraag of het moet
worden overschreven. Kies voor ja.
Dit is enkel een oefening die je een keer gedaan moet hebben, om te weten hoe je met
dit programma foto’s kunt verkleinen. Om tijd te winnen heb ik alle foto’s waar 1280
achter staat al verkleind tot 800 x 640
Let op: als je digitale foto’s wilt gebruiken voor je website en je verandert de
afmetingen om een foto hanteerbaarder te maken sla de foto dan vervolgens altijd op
met: Opslaan als..!
Hiermee gaat de originele foto niet verloren. Wanneer het formaat van een foto wordt
aangepast wordt er ook compressietechniek toegepast. Hiermee neemt de kwaliteit van
de foto af, ook al is dat niet zichtbaar. Dezelfde foto later weer vergroten levert dan een
slechter resultaat op omdat de compressie niet ongedaan gemaakt kan worden.
Met andere woorden: wil je de afmetingen van originele foto’s veranderen zonder de
oorspronkelijke foto te verliezen, sla de foto’s voor de zekerheid dan altijd op onder
een andere naam. Net zoals we met de foto van AGNI hebben gedaan.
Die foto is nu verkleind naar het formaat 800 x 640 pixels en als je nu in de map
Afbeeldingen kijkt, zul je zien dat de bestandsgrootte nog maar 63 KB bedraagt in
plaats van 241 KB, een aanzienlijke besparing.
De grote foto vervangen door een kleiner formaat
Selecteer de foto die je in de pagina hebt toegevoegd en verwijder deze met de
delete toets.
Klik in de werkbalk op het tabblad: Invoegen
Kies voor: Afbeelding, vervolgens op: Bestand kiezen
Selecteer in de map Afbeeldingen: Agni klik op Openen geef Alternatieve tekst op
en klik dan op OK.
Je ziet nu dat de foto nog steeds te groot is; er passen niet eens twee foto’s naast
elkaar. Als we de foto nu nog verder zouden verkleinen wordt deze er niet mooier op.
We gaan daarom nu gebruik maken van een zogenaamde ‘thumbnail’ of miniatuur.
Dat wil zeggen: we geven in KompoZer de opdracht om de foto niet groter te tonen dan
29
200 x 160 pixels zonder daadwerkelijk de foto aan te passen.
Foto’s als thumbnail / miniatuur
Klik met de rechtermuisknop op de afbeelding, selecteer in het menu dat
verschijnt: afbeelding eigenschappen.
Klik op het tabblad Afmetingen en kies daar voor: Aangepaste grootte en zet een
vinkje voor: behouden.
Geef
nu als breedte op: 200 pixels, de hoogte wordt automatisch
aangepast.Klik nu op het tabblad: Koppeling en vervolgens op: Bestand
kiezen.
Bij deze handeling, na het klikken op Bestand kiezen wordt standaard een scherm
getoond waarin HTML staat geselecteerd. Met het rolmenu moet Afbeeldingsbestanden
geselecteerd worden of Alle bestanden.
Selecteer in de map: Afbeeldingen, het bestand Agni.jpg en klik op Openen en
dan op OK. Sla de pagina op: fotopagina.
Klik nu weer rechtermuisklik op de miniatuur, klik op Afbeelding en koppeling
eigenschappen, plaats een vinkje voor: URL is relatief ten opzichte van de pagina
locatie.
We kunnen nu nog een rand om de foto plaatsen, zodat iedereen in één oogopslag kan
zien dat deze miniatuur naar een grotere foto verwijst. Maar omdat dit niet altijd
evengoed tot zijn recht komt, laten we dat hier achterwege. Uiteraard kun je hier
gerust mee oefenen en als je het mooi vindt, vooral doen. De kleur van de rand is
standaard altijd blauw, maar die kun je iedere gewenste / passende kleur geven.
Dit doe je door in de werkbalk op tabblad Opmaak te klikken, kies in het menu voor
Paginakleuren en achtergrond, en verander de standaard kleuren voor koppelingen.
30
Als je nu, zoals het scherm laat zien, de actieve koppelingstekst en de bezochte
koppelingstekst op wit zet, dan wordt de rand van de miniatuur wit in plaats van blauw,
wat een mooi contrast geeft op de pagina, ook al is dat een kwestie van persoonlijke
smaak.
Sla de pagina op en geef als naam op: fotopagina
Bekijk de pagina in de browser, je ziet nu weer dat er een handje verschijnt
zodra je met de muis op de miniatuur gaat staan. En als je nu klik op de miniatuur
krijg je in een nieuw venster een mooie grote foto te zien van Agni, met het formaat
800 x 640 pixels.
Sluit het venster met de foto en de browser. Je keert dan automatisch terug in
het programma KompoZer.
Je ziet nu dat er veel meer ruimte beschikbaar is voor nog meer foto’s. Er kunnen nog
zeker drie foto’s naast geplaatst worden.
Dit gaan we in de volgende oefening doen.
