Meer foto's aan een pagina toevoegen
Hoofdstuk 7
Klik in de werkbalk op het tabblad Bestand en kies voor openen.
Selecteer in de map: mijn homepage, de fotopagina en klik op openen (tenzij je
die pagina nog voor je hebt).
Selecteer met de muis de afbeelding: Agni, druk eenmaal met de pijltjestoets op
rechts.
Kies in de werkbalk op het tabblad: Invoegen / Afbeelding en klik vervolgens op
Bestand kiezen of het gele mapje.
Selecteer in de map: Afbeeldingen, Alpine.jpg, plaats een vinkje voor: URL is
relatief, geef alternatieve tekst op en klik op OK.
Dubbelklik op de foto, klik op het tabblad Afmetingen en wijzig de breedte in 200
pixels. Klik vervolgens op het tabblad Koppeling, klik op Bestand kiezen, selecteer
in de map Afbeeldingen de foto Alpine.jpg, klik op Openen en dan op OK.
De miniaturen staan nu strak naast elkaar en er kan er nog een naast worden gezet.
Dit doen wij echter niet om de volgende reden: onder deze afbeelding willen we graag
wat tekst plaatsen en dan lopen we tegen het probleem aan, dat de tekst onder beide
foto’s doorloopt en dat is hier niet mooi. We willen onder iedere foto een aparte tekst.
We kunnen dit heel mooi oplossen door gebruik te maken van tabellen.
Verwijder beide foto’s op de pagina. Kies in de werkbalk voor Opslaan.
Foto’s in tabellen plaatsen
Je hebt nu de lege foto pagina voor je.
klik in de werkbalk op de knopTabel / Invoegen / Tabel
Selecteer één rij en vier kolommen en klik dan op OK.
Er verschijnt nu 1 tabel met vier kolommen / cellen.
Zet de cursor in de linker cel, klik in de werkbalk op het menu Tabel en
vervolgens op Tabeleigenschappen.
Kies bij uitlijning: gecentreerd
Als je geen randen om de tabel wilt zien zet dan alle waarden bij Rand / Ruimte en
Opvulling op 0.
Klik op het tabblad cellen en kies daar voor inhoudsuitlijning vertikaal boven en
horizontaal gecentreerd.
Klik vervolgens op Toepassen en OK.
Herhaal dit bovenstaande bij de overige cellen door op de knop volgende te
klikken totdat je alle vier de cellen hebt gehad.
Zet nu de cursor in de 1e cel, kies in de werkbalk voor Invoegen / Afbeelding
Klik op Bestand kiezen, selecteer in de map Afbeeldingen, Agni.jpg
Geef in het tabblad afmeting de juiste breedte op: 200 pixels
Geef in het tabblad Koppeling de juiste verwijzing op, dus weer de foto Agni in
de map afbeeldingen.
Geef alternatieve tekst op en klik opOK.
Zet de cursor in de 2e cel en voeg nu respectievelijk en in de andere cellen de
volgende foto’s in:
Cel 1: Agni
Cel 2: Alpine
Cel 3: Arboreal
Cel 4: Autumnal
Klik nu op opslaan en bekijk de pagina in de browser.
Nu kunnen we onder iedere foto een toepasselijk stukje tekst plaatsen.
Tekst toevoegen onder foto’s
Klik met de muis op de eerste foto en druk één maal op de rechterpijltjes toets
en geef dan een Enter. De cursor komt nu precies onder de foto te staan.
Zet onder de eerste foto de volgende tekst: De planeet Agni.
Zet onder de tweede foto: Uitzicht op de berg Alpine.
Zet onder de derde foto: Uitzicht op Arboreal.
Zet onder de vierde foto: Campingplaats op Autumnal.
Als je dit allemaal goed gedaan hebt, staan alle miniaturen keurig op hun plaats met
daaronder de tekst. Je kunt, als je dat wilt tabellen een kleur geven. Dat kun je doen in
de Tabeleigenschappen.
Sla nu de pagina op en bekijk de pagina in de browser.
Om, voor mij, onduidelijke redenen kan het voorkomen dat bij wat langere tekst de
afbeeldingen in de cellen niet meer gelijk naast elkaar staan en dat er een verschuiving
heeft plaats gevonden. Gebruik in dergelijke gevallen dan minder tekst.
Titel toevoegen aan de pagina
Je ziet dat de tabel helemaal boven in de pagina is geplaatst en er lijkt geen ruimte te
zijn om er nog een titel boven de zetten, dit kan echter wel.
Zet de cursor in de eerste cel, verplaats met de pijltjestoets de cursor naar boven
en geef 2 maal een Enter. De Tabel wordt twee witregels naar beneden geduwd
en er is nu ruimte vrij gekomen voor tekst.
Kies bij Tekst voor: kop 1
Centreer de cursor en typ: Mijn Fotopagina
Nu moeten we nog een navigatieknop toevoegen om weer terug te kunnen navigeren
naar de index pagina.
Ook de indexpagina moeten we veranderen om een link te maken met de fotopagina.
Navigatie knop aanmaken voor de fotopagina
Plaats de cursor in een van de cellen en druk een paar maal op de pijltjestoets
naar beneden. De cursor komt nu onder de tabel te staan en we kunnen een
button invoegen. Maar...daar moeten we eerst weer tekst opzetten.
Start het programma PhotoFiltre.
Klik in de werkbalk op Openen.
Selecteer in de map Afbeeldingen de button14.jpg en klik op Openen.
Klik in de werkbalk op de knop T (tekstopmaak).
Kies voor de tekstkleur Zwart, lettertype Arial en Afmetingen 16 punten.
Typ in het tekst invoerveld Home en klik dan op OK.
Deze knop hebben we ook vaker nodig dus kiezen we voor Opslaan als...
Sla de knop op met als bestandsnaam: Home2
Navigatieknop toevoegen aan de fotopagina
Ga naar je fotopagina in KompZer.
Klik in de werkbalk op Invoegen.
Selecteer in het menu Afbeelding.
Selecteer in de map Afbeeldingen: Home2 en klik op Openen.
We gaan nu ook een koppeling met de index pagina aanmaken, dus...
Selecteer de knop Home, klik in de werkbalk op de knop Koppeling en selecteer
vervolgens in de map: mijn homepage de indexpagina, klik vervolgens op Openen.
Centreer de knop door in de werkbalk op centreren te klikken.
Sla de pagina op en controleer alles door op de knop Bekijken te klikken.
Nog een foto toevoegen aan de fotopagina
Er is nog ruimte genoeg over voor nog een mooie foto onder de tabel met de vier
foto’s.
Plaats de cursor onder de tabel en geef een Enter.
Centreer de cursor door op Centreren in de werkbalk te klikken.
Klik op Invoegen, selecteer Afbeelding en navigeer naar de map: Afbeeldingen.
Selecteer het bestand Mandala en klik op Openen.
Klik in het scherm op het tabblad Afmetingen en pas de breedte aan: 400 pixels.
Klik op het tabblad Koppeling en maak weer de koppeling naar foto Mandala.
De fotopagina is nu klaar en als alles goed is ziet de pagina er nu zo uit:
Aanpassen van de index pagina
De index pagina moet nu ook weer aangepast worden; we doen dit nu achteraf, maar
als je van tevoren ongeveer weet, hoeveel pagina’s je wilt hebben en de titels ook al
hebt bedacht, kun je natuurlijk een hele serie knoppen achter elkaar maken om deze
later in te voegen.
Om zo uniform mogelijk te werken gebruiken we uiteraard dezelfde knoppen. Een index
pagina met verschillende knoppen lijkt nergens op en de pagina ziet er ook niet als een
geheel uit. Als je de knop die hier in het boek gebruikt wordt niet mooi vindt dan neem
je gewoon een andere. Op de CD staan er nog genoeg om een keuze te maken.
Let er wel op dat als je tekst op knoppen gaat zetten, je bij het opslaan altijd kiest voor
Opslaan als...om zo de originele knop te behouden.
Open het programma PhotoFiltre.
Klik in de werkblak op het tabblad Bestand en dan op Openen.
Selecteer in de map Afbeeldingen button2, klik op openen.
Klik op de knop T en kies weer als lettertype Arial, kleur zwart en afmetingen 16
punten. Type Foto’s en klik op OK.
Sla de foto op als: fotoknop.
Open nu de indexpagina in KompoZer.
Plaats nu de cursor naast of onder de knop: 2epagina
Klik in de werkbalk op Invoegen. Selecteer in de map Afbeeldingen de fotoknop,
klik op openen, klik op het tabblad Koppeling, klik op bestand kiezen, selecteer
de fotopagina in de map: mijn homepage, klik op openen en dan op OK.
Als je alles goed gedaan hebt, kun je nu probleemloos navigeren door alle drie de
pagina’s.
De basis website is nu bijna klaar, maar we zijn er nog niet. We hebben weliswaar drie mooie pagina’s gemaakt, maar wie zit er nu eigenlijk achter deze website en waarom is die gemaakt? Kortom...Wie bent u eigenlijk? Probeer je een voorstelling te maken van de mensen die je website gaan bezoeken. Dat zullen in eerste instantie vrienden en bekenden zijn, maar afhankelijk van de inhoud van je website en als je met je website meer bekendheid krijgt, zullen volslagen onbekende mensen je website bezoeken. Daarom is het een goed idee om je voor te stellen en uitleg te geven over wie je bent, eventueel wat je doet, en waarom je deze website hebt. Kortom we gaan een introductiepagina maken, waarop je kort en bondig schrijft wat je kwijt wilt aan je bezoekers.
