Hoofdstuk 8
De introductiepagina
Maak een nieuwe pagina en sla deze gelijk op als: introductie
Klik in de werkbalk op Opmaak / Paginakleuren en achtergrond
Kies voor: aangepaste kleuren gebruiken
Klik op Bestand kiezen en selecteer in de map: Afbeeldingen achtergrond23
Klik op Openen.
Kies voor alle tekst opties: #D19930
Wat betekent: #D19930 ?
Aan het begin van deze cursus is uitgelegd dat HTML aan de browser vertelt hoe alles
moet worden weergegeven, opmaak, tekst, afbeeldingen en kleuren.
Ook kleuren hebben een eigen code. Als we die code niet opgeven wordt er ook geen
kleur weergegeven. Dus als we voor een kleur kiezen, wordt er feitelijk een code
neergezet die de browser de opdracht geeft om bijvoorbeeld groen weer te geven. Hier
kiezen we voor een goudgeel kleur en die krijgt dan de HTML code #D19930 mee.
Zo bestaan er heel algemene kleuren maar ook hele specifieke kleuren.
Er bestaan drie hoofdkleuren: rood, groen en blauw. Deze drie hoofdkleuren kunnen
bijna eindeloos met elkaar gecombineerd worden. Uiteindelijk hebben we meer dan 16
miljoen RGB kleuren tot onze beschikking.
In de map Achtergronden op de CD staat een tekstbestand dat de codes bevat van de
afwijkende kleuren die we nu willen gaan gebruiken.
Wanneer je een Hex code gebruikt moet daar altijd een # voor staan. Door deze
(HTML) code weet de browser welke kleur weergegeven moet worden.
We hebben nu dus voor een speciale tekstkleur gekozen die een mooi contrast geeft op
de zwarte achtergrond.
Klik in de werkbalk vier keer op de knop Inspringen.
De cursor komt nu mooi naast de linker verticale balk in de afbeelding te staan.
Selecteer in de werkbalk bij tekst: Kop 3
Schrijf nu een verhaaltje over jezelf.
Pagina’s in secties verdelen
Soms is het handig om in een pagina secties aan te brengen, bijvoorbeeld omdat je
verschillende gedeeltes in een pagina wilt hebben die zich duidelijk van elkaar
onderscheiden.
Dit kunnen we gemakkelijk realiseren door een horizontale lijn in te voegen.
Zet de cursor op een plaats in de pagina de waar je een horizontale lijn wilt invoegen.
Klik in de werkblak op het tabblad Invoegen en kies in het menu voor: Horizontale lijn.
Er staat nu over de volle breedte een grijze horizontale lijn.
Laten we er nu van uitgaan dat je deze lijn in de breedte niet mooi vindt.
KompoZer en Nvu bieden zelf geen mogelijkheden om aanpassingen te doen, maar die
aanpassing kunnen we wel realiseren door in de bron van de pagina te kijken en daar
wat aan te passen.
Veranderingen aanbrengen in de bron van de pagina
Klik onderaan de pagina, links, op het tabblad Bron.
Wat je nu allemaal ziet staan is HTML.
Er staat voor wat betreft de lijneigenschappen het volgende:
<hr style="width: 100%; height: 2px;"> hr staat voor horizontale lijn, met een dikte
van twee punten en 100% over de pagina.
Verander het 100 % maar eens in 50 % en verander 2px in 1px.
Klik onderaan in de pagina nu op het tabblad Normaal.
Nu kun je zien wat er veranderd is.
Op deze manier kun je de breedte en de dikte van de lijn geheel naar eigen wens
instellen.
Wil je een gekleurde lijn: in de map oefenbestanden op de CD bevindt zich een map
met lijnen die je kunt gebruiken. Als je dit wilt, vergeet dan niet om de gekozen lijn te
kopiëren naar de map afbeeldingen in mijn homepage..
Knop aanmaken voor de introductie pagina
Open het programma PhotoFiltre.
Klik in de werkbalk op het menu: Bestand en kies dan voor Openen.
Selecteer in de map: Afbeeldingen, button28 en klik op Openen.
Klik in de werkbalk op T en type in het tekst invoer veld: Introductie
Sla deze button op als: introductieknop
Open de index pagina, zet de cursor onder de afbeelding: bosjebloemen.
Klik in de werkbalk op Invoegen / Afbeelding / ga naar de map: mijn
homepage / Afbeeldingen / selecteer de introductie knop en kies voor openen.
Geef alternatieve tekst op: naar de introductie pagina, klik op het tabblad
Koppeling, klik op bestand kiezen,selecteer de introductiepagina, klik op Openen
en OK
Open nu de introductie pagina, klik op Invoegen / Afbeelding / selecteer de
Home knop / Klik op Openen, geef alternatieve tekst op: naar de index pagina,
klik op het tabblad Koppeling, selecteer in de map: mijn homepage de index
pagina, klik op Openen en dan op OK. Sla de pagina op.
Een pagina maken met animaties.
We hebben tot nu toe alleen gewerkt met afbeeldingen die de bestandsextensie JPG
hebben.
Dat is ook de meest gebruikte extensie voor afbeeldingen op het web. Hoewel de
extensie PNG ook aan een flinke opmars bezig is. De letters PNG staan voor Portable
Network Graphics. (gauw vergeten).
De compressie schijnt een stuk beter te zijn dan die van JPG en levert dus een kleinere
bestandsgrootte op.
Naast JPG / PNG is de extensie GIF nog populairder. Het levert een nog kleinere
bestandsgrootte op en is daarom ideaal om te gebruiken als achtergrondafbeelding,
daarnaast is het mogelijk om een GIF bestand op te bouwen uit verschillende lagen
(denk aan een tekenfilm). Als je een GIF bestand met opgebouwde lagen snel laat
herhalen, krijg je een bewegende afbeelding, oftewel een animatie.
Kortom GIF-bestanden nemen nauwelijks ruimte in en zijn daarom ideaal voor gebruik
op een website (hoewel je er een website ook mee gemakkelijk mee kunt verpesten
door een overdaad te gebruiken en sommige mensen is niets te dol). Tevens worden
GIF bestanden erg veel gebruikt in e-mail berichten, vooral de emoticons zijn erg
populair (deze duiden de emotionele toestand van de schrijver van een e-mail bericht).
Omdat de basis van een GIF-afbeelding (de achtergrondkleur) altijd transparant is,
moet je voor het gebruik van gifbestanden altijd een zeer lichte achtergrondkleur
gebruiken. Een witte achtergrond geeft het mooiste resultaat. Alleen is een witte
achtergrond in een webpagina voor de meeste mensen te wit (fel).
We gaan nu nog een pagina maken waar we geen statische afbeeldingen gebruiken,
maar GIF-bestanden met beweging (animatie).
Als je Kompozer open hebt staan maak dan een nieuwe pagina en sla deze
meteen op: animaties
Of start Kompozer op en sla deze blanco pagina gelijk op.
Klik in de werkbalk op Opmaak en dan op Paginakleuren en achtergrond.. en kies
voor een lichte achtergrondkleur en klik op OK:
Klik in de menubalk op Invoegen > Afbeelding en op bestand kiezen (gele
mapje):
Selecteer in de map Abeeldingen de afbeelding: Bounce en voeg deze toe aan
de pagina. Doe dit vervolgens ook met de volgende afbeeldingen: e-mail - Kerst
– Kip – Muis – Regenboog – Vogel – Yay.
Geef na het invoegen van iedere afbeelding twee maal een TAB, zo komen de
afbeeldingen niet te dicht op elkaar te staan. Sla de pagina weer op en bekijk het
resultaat.
Geef na de laatste afbeelding drie of vier maal een Enter. Klik op Invoegen >
Afbeelding > Bestand kiezen en kies de home knop. Na het invoegen de knop
selecteren en dan een koppeling maken naar de index pagina.
Open PhotoFiltre , op de map Afbeeldingen, kies een knop uit en zet er de tekst
Animaties in.
Sla de knop op als animaties.jpg
Keer nu weer terug naar KompoZer, klik op Invoegen > Afbeelding > bestand
kiezen en kies voor de animaties knop. Geef alternatieve tekst op en maak gelijk
een koppeling naar de animatie pagina.
Je animatie pagina ziet er nu zo uit:
Of je deze pagina nu mooi, grappig of iets anders vindt, je ziet wat het effect van het
gebruik van GIF-bestanden is. Ga er in ieder geval (advies) zeer spaarzaam mee om.is
