Een tweedede website (optioneel)
Hoofdstuk 11
Een tweede website (optioneel)
Aan het begin van deze cursus schreef ik: wees consequent in je opmaak!
Dat hebben we in de eerste oefening van het maken van een website juist helemaal
niet gedaan, integendeel. Tijdens het maken van de voorgaande pagina’s zijn we vooral
inconsequent bezig geweest; iedere pagina heeft een andere achtergrond, tekstkleur en
overal staan verschillende knoppen. Erg mooi is dat allemaal niet en de website oogt
hierdoor niet als een geheel. Dat kan veel beter.
Het ging er vooral om de basisvaardigheden onder de knie te krijgen en te leren werken
met het programma.
Daarom volgt hier nog een oefening voor het maken van een website die wel
consequent is voor wat betreft de opmaak. Als je denkt dat je de vorige onderwerpen
voldoende beheerst, kun je deze oefening overslaan en beginnen aan je eigen
persoonlijke website.
De opdracht is nu: geef alle pagina’s die je gaat maken dezelfde achtergrondkleur of
achtergrondafbeelding, gebruik overal hetzelfde lettertype en lettergrootte en gebruik
overal dezelfde knop voor.
Omdat je in de afgelopen lessen al flink wat vaardigheden hebt opgebouwd is de uitleg
wat minder uitgebreid dan in het voorgaande gedeelte. Nog een website maken is een
goede oefening om te ontdekken hoe het met de opgedane kennis en vaardigheden
staat.
Eerst ga je de benodigde mappen aanmaken en de bestanden van de map
oefenbestanden gebruiken.
Ga naar de map: Mijn Documenten en maak een nieuwe map aan met de naam:
mijn tweede website, maak in deze map weer een map: afbeeldingen.
Kopieer nu de inhoud van de map Oefenbestanden naar de map afbeeldingen.
Open KompoZer, klik in de werkbalk op: Opmaak en selecteer in het menu:
Paginakleuren en achtergrond.
Klik op bestand kiezen en selecteer in de map afbeeldingen achtergrond192.gif
Klik nu op openen en OK.
Als het zo is dat je de extensie niet ziet staan (gif) moet je even iets veranderen in de
instellingen van je PC. Je gaat als volgt te werk:
Open: Deze computer en klik in de werkbalk op het tabblad Extra.
Selecteer in het menu: Mapopties en klik dan op het tabblad Weergave.
Verwijder het vinkje bij de optie: extensies voor bekende bestandstypen
verbergen, klik op Toepassen en OK.
Als je nu terugkeert naar de map afbeeldingen zul je zien dat achter de bestandsnaam
nu ook het bestandstype (extensie) staat vermeld.
Ga nu terug naar KompoZer, selecteer in de werkbalk bij Tekst: Kop 2
Selecteer bij lettertype: Palatino Linotype en klik op de knop: centreren.
Klik nu op het tabblad: Opmaak, selecteer Paginakleuren en achtergrond, kies
voor aangepaste kleuren en kies voor alle opties: wit en vervolgens OK.
Typ de volgende tekst:
Welkom op de website van Jan de tuinkabouter.
Geef eenmaal een enter, klik op invoegen en dan op afbeelding en selecteer in de
map oefenbestanden de map lijnen, open deze en selecteer: lijn55.jpg; open deze en
klik OK.
De lijn staat nu strak onder de tekst. Geef nu viermaal een Enter en klik op: centreren.
Klik op Invoegen en dan op Afbeelding.
Klik op Bestand kiezen, open de map Foto’s en selecteer daar het bestand Flora.jpg
Je ziet nu dat deze foto te groot is.
Open PhotoFiltre, open de map oefenbestanden en dan de map foto’s, selecteer de
afbeelding flora en verander de afmeting van de foto in 400 pixels.
Klik op Bestand en dan op Opslaan als.. en sla de afbeelding nu op in de map
afbeeldingen in de map mijn tweede website.
Klik nu in KompoZer op opslaan geef als paginanaam op: Welkom op de website
van Jan de tuinkabouter en sla de pagina vervolgens op in de map mijn tweede
pagina als index pagina. De overige pagina’s die we gaan maken kunnen
vervolgens onder een andere naam worden opgeslagen.
Stel je nu voor dat de website van Jan de tuinkabouter een website is die voornamelijk
zal bestaan uit mooie foto’s van zijn tuin.
We willen pagina’s gaan maken die identiek zijn aan elkaar en dat kun je met een paar
muisklikken bereiken.
Open in KompoZer een nieuwe pagina. voeg net als in de voorgaande pagina
achtergrond192 toe, centreer de cursor en sla de pagina nu op in de map mijn
tweede website met de naam: overmijzelf
Sla deze pagina nogmaals op, bestand opslaan als: tuinfoto’s2005
Sla deze pagina nogmaals op, bestand opslaan als: tuinfoto’s2006
Sla deze pagina nogmaals op, bestand opslaan als: tuinfoto’s2007
Je hebt nu 5 identieke pagina’s ontworpen waarvan de achtergrond en tekstkleur al zijn
vastgelegd, dat scheelt weer en dat ziet er dan zo uit:
Let op: dat je bij de volgende oefening wanneer je afbeeldingen gaat invoegen, je
de afbeeldingen haalt uit de map afbeeldingen van je tweede website en niet uit de
map afbeeldingen van Mijn HomePage. Dus goed kijken of je op de goede locatie zit.
Let er ook ieder keer op dat gebruikte afbeeldingen relatief zijn ten opzichte van de
pagina locatie.
Open de index pagina
Selecteer de afbeelding flora, klik op koppeling, klik op bestand kiezen en
selecteer in de map mijn tweede website de overmijzelf pagina, klik op openen
en OK.
Klik op bekijken en als je nu op de afbeelding flora klikt wordt je doorgelinkt naar
de overmijzelf pagina.
De index pagina is nu helemaal klaar (sluit de browser). Dat ziet er al heel anders uit
dan de eerste index pagina die je hebt gemaakt.
Ga nu de pagina overmijzelf verder opmaken: er moeten nog knoppen gemaakt en
geplaatst worden om te kunnen navigeren. In de map oefenbestanden (Afbeeldingen)
zit ook een map buttons waarin een hele verzameling knoppen staat.
De overmijzelf pagina
We gaan eerst in PhotoFiltre tekst op de te gebruiken knoppen plaatsen.
open het programma en selecteer in de map buttons: button125.gif
Je ziet nu dat de knop T niet te activeren is (hij is grijs) en je op deze gif afbeelding
geen tekst kunt plaatsen. Dit klopt, want zoals eerder uitgelegd, is een gif bestand
opgebouwd uit meerdere lagen en die kun je niet zomaar bewerken. Je moet die
lagen weer terug brengen tot één laag.
Sla deze knop op als button125.jpg: bestand opslaan als en dan als
bestandsformaat JPG kiezen.
Sla de knop op in de map: afbeeldingen.
Open nu de map afbeeldingen, selecteer het bestand button125.jpg en nu zul je
zien dat de knop T wel is geactiveerd en je tekst op de knop kunt plaatsen.
Selecteer de T knop en geef in het venster de volgende opties aan:
* Lettertype: Times New Roman
* Afmetingen: 10 punten
* Plaats een vinkje bij: vet
*Tekstkleur: lichtblauw
*Uitlijning: gecentreerd
* Tekstinvoer: Tuinfoto’s 2005
Klik OK.
Sla deze knop op in de map afbeeldingen als: tuinfoto’s2005 (JPG).
Klik in de werkbalk nu op ongedaan maken
De tekst wordt nu van de knop verwijderd, zodat je weer een blanco knop hebt.
Klik opnieuw op de T knop. Je hoeft nu alleen nog maar de tekstinvoer 2005 te
veranderen in 2006.
Maak op deze wijze ook nog een knop:
*tuinfoto’s2007
*Over mijzelf
*Home
*ikke@home.nl
Sla alle afbeeldingen op in de map: afbeeldingen.
Sluit PhotoFiltre.
Je hebt nu alle benodigde en gelijksoortige knoppen gemaakt. Deze knoppen gaan we
nu toevoegen aan de betreffende pagina’s.
Open de overmijzelf pagina en klik op centreren. Klik op Invoegen / Afbeelding
en selecteer in de map afbeeldingen tuinfoto’s2005 en klik OK. Voeg naast deze
knop de afbeeldingen tuinfoto’s2006 en tuinfoto’s2007. Geef vervolgens een
Enter.
Voeg op deze plaats de knop: Over mijzelf toe en geef een enter.
De pagina is nog verder helemaal leeg, er moet nog wat informatie op komen te
staan, zodat de bezoekers kunnen lezen waar de website over gaat. Kies als
lettertype Tahoma en type de volgende tekst:
Welkom op mijn website die helemaal in het teken staat van fotografie.
In 2000 ben ik afgestudeerd aan de Academie voor Fotografie en na een aantal jaren te
hebben gereisd, bied ik u hier een aantal fotocollecties aan van de laatste drie jaren.
Alle foto’s zijn gemaakt met een digitale spiegelreflex camera: Nikon D80 + 18-135mm.
Ik hoop dat de foto’s u zullen inspireren.
Wilt u reageren dan kunt u een e-mail sturen naar het onderstaande adres.
voeg hier nu de knop in: ikke@home.nl
Er kan nu, zoals we dat met de eerste website gedaan hebben, een knop Home
toegevoegd worden, maar dat is op deze pagina niet nodig. De index pagina bevat
geen informatie en is alleen maar de entree naar de website. Voor de andere pagina’s
hebben we de knop wel nodig.
Voeg nu op alle pagina’s de benodigde knoppen in. Breng koppelingen aan en
controleer of alles goed werkt.
Als je een lang email adres hebt, dan heb je daarvoor niet altijd de ruimte op een knop
en dan heb je een probleem.
Dat kan echter gemakkelijk opgelost worden door zelf een knop te maken.
Voor deze website hebben we achtergrond192.gif gebruikt en deze kunnen we mooi
gebruiken om een email knop mee te maken.
Open Photofiltre en open vervolgens in de map afbeeldingen achtergrond192.gif.
Sla dit bestand opnieuw op onder de naam emailknop.jpg
Sluit de afbeelding en open opnieuw de emailknop.jpg, klik in de werkbalk op
Afbeeldingen en selecteer Afmetingen afbeelding.
Verwijder het vinkje bij: hoogte/breedte verhoudingen behouden en geef als
breedte op: 200 pixels en als hoogte 50 pixels. Klik op OK en klik op Opslaan.
Je hebt nu een nieuwe email knop die naadloos aansluit bij de achtergrond.
Je kunt er nu het volgende adres in typen, knop T, tekstinvoer:
tuinkabouter@tuinwereld.nl
Op deze manier kun je je eigen knoppen maken voor een website.
De bedoeling van deze oefening was om je het verschil te laten zien tussen een website
die er wat rommelig uitzag en een website die mooi uit een geheel bestaat.
Het oog wil tenslotte ook wat.
Foto’s gaan we nu niet invoegen, er van uitgaande dat je dat voldoende beheerst.
