weballey logo
 
left Webdesign - achtergrond backnext right
hometoolssite mape-mail
ALGEMEEN

WERKWIJZE

BANDBREEDTE

LAYOUT

GRAPHICS

paletten
voorbeelden
webpalet
anti-aliasing
dithering
minimaliseren
< achtergronden >

      Het uiterlijk van een site wordt in belangrijke mate bepaald door de achtergrond van de pagina's. Je kunt eenvoudig de kleur van tekst, linken en achtergrond instellen zoals je zelf wilt. De meeste grafische browsers kunnen ook een bitmap als achtergrond laten zien. Net als de achtergrond van een Windows desktop wordt deze 'getegeld'. Een klein plaatje is genoeg om de gehele achtergrond te vullen.
    De standaard kleur van je browser is lichtgrijs. Je ziet dit op puur tekstgeörienteerde pagina's. De eenvoudigste manier om je achtergrond te veranderen is het instellen van de bgcolor optie in de body tag. Deze pagina gebruikt bgcolor="#FFFFFF", wit voor de kenners. De kleuren worden hexadecimaal aangegeven, met twee posities voor de kleuren rood groen en blauw. Je kunt kiezen uit een spectrum van 16,7 miljoen kleuren.
    Beeldschermen kunnen vaak niet meer dan 256 kleuren aan. Kies dus een kleur in dit beperkte spectrum. Dit is te doen door voor elk van de hexadecimale codes 00, 33, 66, 99, CC, of FF te gebruiken. Je hebt dan 6x6x6=216 mogelijkheden. Doe je dit niet, dan kiest het beeldscherm de kleur die er het dichtste bij komt. Dit kan bij pasteltinten ook lichtgrijs zijn; bij donkere tinten zwart.
    Je kunt voor de achtergrond ook een plaatje gebruiken. Je gebruikt hiervoor de background optie in de body tag. Elke willekeurige gif of jpeg file is hiervoor te gebruiken. Je hoeft niet de gehele achtergrond te vullen; een klein plaatje is genoeg. De browser vult de rest van het venster met kopiën van hetzelfde plaatje. Je ziet hiervoor vaak naadloze tegels; de achtergrond lijkt dan door te lopen over de randen van het plaatje.
    Verander je de achtergrond, hou dan de leesbaarheid van je tekst in de gaten. Een drukke achtergrond gaat al snel concurreren met de tekst. Soms kan het nodig zijn de tekst groter te maken, om het leesbaar te houden. Zorg voor voldoende contrast bij gekleurde of drukke achtergronden. Is er onvoldoende verschil in helderheid, dan kunnen kleurenblinde mensen (ca. 10% van de bevolking!) de tekst sowieso niet meer lezen. Vele anderen zullen er grote moeite mee hebben.

blauw op rood cyaan op oranje blauw op geel

    Gebruik geen contrastkleuren, zoals rood op blauw, cyaan op oranje, of blauw op geel. Dit kan er mooi uitzien, maar het is heel onprettig lezen voor je ogen. De letters gaan wat zweven op de achtergrond, door het verschil in brekingsindex van je ooglens bij deze kleuren. Kijk je wat langer naar dezelfde plek, dan gaan de letters vervloeien met de achtergrond. Het beste is nog altijd zwart op een witte ondergrond. Vind je dit te fel neem dan een donkere tint op gebroken wit.
    Gebruik een kleine file voor je achtergronden. Helemaal als je voor elke pagina een andere achtergrond toepast. Een grote paginavullende foto is mooi, maar het duurt erg lang voor deze verschijnt. Je hebt hiervoor al gauw een bestand van 100 kB nodig. Je verspilt hiermee veel bandbreedte, en de meeste bezoekers zullen er ook niet op gaan zitten wachten. De achtergrond van deze pagina is een gif-file van 870 bytes. Ik heb ook hele mooie achtergronden gezien met bestandjes van ca. 100 bytes.
    Je kunt een gedeelte van een gif-plaatje transparant maken. Je laat dan de achtergrondkleur (bgcolor) van de pagina verschillen. Zo kun je elke pagina of groep pagina's een andere achtergrond geven, zonder dat het extra bandbreedte -- en dus downloadtijd -- kost.
    Vul altijd de achtergrondkleur in als je een plaatje gebruikt. Kies hiervoor een kleur die dicht bij de hoofdkleur van het plaatje ligt. Je kunt witte tekst laten zien op een zwarte achtergrond. Staat een browser ingesteld op een witte achtergrond, dan is de tekst onleesbaar, tot het plaatje geladen is. Je kunt namelijk ook surfen zonder de plaatjes te laden. Doe ik ook altijd als het druk is en veel pagina's moet afzoeken om iets te vinden. Je ziet in dat geval een maagdelijk wit browser-venster.
    Fotografische afbeeldingen vertonen vaak grote contrastverschillen. Welke kleur je ook kiest, er zullen altijd plekken zijn waar de tekst moeilijk te lezen is. Of je ziet de tekst gewoon helemaal niet meer tegen de drukke achtergrond. Je zult dit contrast dan moeten verkleinen met grafische software, zoals Paint Shop Pro of Photoshop. Je kunt een rastereffect toevoegen of een kleurwaas over de foto heen trekken. Dit kan mooie effecten opleveren, die er buitengewoon professioneel uitzien. Op dezelfde manier kun je een (bedrijfs)logo op de achtergrond laten zien zonder dat het storend werkt.
    Mensen zijn eigenwijs. Soms willen ze helemaal geen achtergronden zien. Soms hebben ze geen behoefte aan plaatjes; soms duurt het laden gewoon te lang. Deze mensen stellen hun browser dus een beetje anders in. Let op de gevolgen voor je pagina's. Is je pagina nog leesbaar als de achtergrond niet geladen wordt? Is je tekst nog leesbaar op een witte of grijze achtergrond? Je kunt niet alles voor zijn, maar probeer toch enkele verschillende mogelijkheden uit. Bekijk in ieder geval je pagina's zonder achtergrondplaatjes.

goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right