Cursus: maak uw eigen website (2)

U wilt een eigen website of weblog maken, maar u wilt het vanaf het begin goed aanpakken. In deel 2 van deze cursus maakt u daarom kennis met kleur, lettertypes, toegankelijkheid en websites waar u materiaal kunt vinden. Ook leert hoe u een eenvoudige weblog opzet. In het eerste deel hebben we de basiskennis behandeld, zodat u weet wat html is, weet welke keuzemogelijkheden er zijn en welke gereedschappen u nodig hebt. Nu is het tijd om uw website of weblog daadwerkelijk te gaan inrichten. Daarvoor zijn twee methoden: voor een kleine, statische website gaat u aan de slag met html en voor een website waarvan de inhoud regelmatig wijzigt roepen we de hulp in van WordPress. Beide methoden zijn ook voor beginners goed te doen en geven meteen resultaat. Het verschil is dat u bij de html-aanpak elke webpagina als een los html-bestand in uw webruimte zet (wat nogal snel onoverzichtelijk kan worden), terwijl u bij WordPress gebruikmaakt van een content managementsysteem (cms) Alle webpagina's worden daarbij bewaard in een database, zodat u ze gemakkelijker kunt beheren.

Wat is het doel van uw website en wie is de beoogde bezoeker? Wilt u nieuws, foto's en video delen, of een sociale website, met interactie? Uw keuze heeft gevolgen voor het ontwerp en ook voor de software die u gebruikt. Tot voor kort was Microsoft Frontpage een populair pakket om eenvoudige websites te maken. Frontpage is inmiddels vervangen door het prijzige Expression Web, maar gelukkig zijn er genoeg alternatieven. Hostingaanbieders zoals Strato en Lycos bieden software om uw eigen website te bouwen. Wij kiezen in deze cursus voor opensource-software die u niet lastigvalt met reclame en registratiecodes. Onze keuze is Nvu, een gebruiksvriendelijk alternatief voor pakketten zoals Macromedia's Dreamweaver.

Met Nvu is het maken van een website net zo makkelijk als het typen van een tekstdocument en het toevoegen van wat plaatjes om de boel op te vrolijken. Nvu werkt volgens het WYSIWYG-principe: wat u ziet is wat u krijgt. Mocht u uitgroeien tot een gevorderde gebruiker dan zit u met Nvu nog steeds goed; het programma ondersteunt heel wat geavanceerde functies.

Het is niet toevallig dat Nvu lijkt op populaire webeditors als Dreamweaver, Frontpage en Adobe GoLive. De makers hebben goed gekeken welke onderdelen voor beginnende gebruikers belangrijk zijn. U kunt de software hier vinden. Nvu is Nederlandstalig, gratis en wordt ontwikkeld door Mozilla, de makers van Firefox.

Nvu ziet er meteen vertrouwd uit - met de menubalk, knoppenbalk en werkbalken die u ook uit andere Windows-programma's kent. Een knipperende aanwijzer wacht totdat u iets begint te tikken. In het menu Invoegen vindt u alle elementen die u in een webpagina kunt invoegen en met de tekengereedschappen in de werkbalken kunt u blokken en tekstvakken in verschillende grootte en kleuren aanbrengen. In de knoppenbalk staan knoppen voor het invoegen van afbeeldingen, koppelingen, tabellen en formulieren. Maar waar moet u beginnen? Heel eenvoudig: u verzint niet zelf iets maar maakt gebruik van een van de honderden sjablonen (templates) die op internet te vinden zijn. Zoek in Google maar eens naar free css templates.

Wilt u verderop in de cursus niet vastlopen, dan is het van belang dat u een template kiest die op Cascading Style Sheets (css) is gebaseerd. We kiezen een sjabloon dat de gewenste indeling en uitstraling heeft. Het kleurschema maakt niet zoveel uit, want de kleuren kunt u gemakkelijk vervangen. De meeste templates mag u gratis gebruiken, mits u een koppeling naar de ontwerper laat staan. Pak het zip-bestand met het sjabloon uit en sla het lokaal op, zodat u het straks gemakkelijk terugvindt.

Wanneer u zich hebt geabonneerd op een hostingpakket, krijgt u daarbij een bepaalde hoeveelheid webruimte. Met het File Transfer Protocol (ftp) transporteert u bestanden van en naar deze webruimte. Een voorbeeld van een ftp-programma is FileZilla, dat u gratis kunt downloaden. Na de installatie logt u in met uw hostnaam (bijvoorbeeld ftp.eetblog.nl), uw gebruikersnaam en wachtwoord. Het poortnummer is meestal 21, de standaardwaarde.

Bladeren door uw webruimte werkt net als het bladeren door uw eigen harde schijf met Windows Verkenner. FileZilla geeft links de lokale bestanden en mappen weer, en rechts de bestanden op de externe site. U kunt bestanden in beide richtingen slepen. Ook kunt u mappen aanmaken, hernoemen en verwijderen. Een alternatief voor FileZilla is Core FTP LE.

Het gebruik van Nvu is in feite heel eenvoudig: klik op de knop Openen, blader naar het html-bestand met de naam index.html (dit is de homepage) en kies Openen. De webpagina verschijnt in Nvu en u kunt hem vrij aanpassen. Tik een andere tekst, vervang afbeeldingen of probeer de kleur van achtergrond en van letters te wijzigen. Het werkt eigenlijk net als in een tekstverwerker. Onderin het venster van Nvu ziet u vier tabbladen. Normaalgesproken werkt u in het tabblad Normaal, maar u kunt ook alleen code of het eindresultaat bekijken.

U kunt meerdere pagina’s op basis van ditzelfde sjabloon aanmaken. Open index.html opnieuw, breng wijzigingen aan en sla het op onder een andere naam. Belangrijk: Zorg altijd dat er een index.html aanwezig blijft.

U kunt tussen pagina's koppelingen aanbrengen door een tekst of plaatje te selecteren waarna u op Koppeling klikt en de gewenste paginanaam intikt. Zorg dat u paginaverwijzingen relatief maakt: u zet een vink in het vakje voor 'URL is relatief ten opzichte van paginalocatie'. Dat voorkomt dat de koppeling straks verwijst naar een bestand in de map C:\Users\Uwnaam\Documents\Website\Test\ dat voor anderen niet toegankelijk is. Afbeeldingen bewaart u altijd in de map images of een submap daarvan.

Bent u tevreden met de wijzigingen die u hebt aangebracht, dan slaat u uw html-bestanden op en opent u uw ftp-programma. Maar wacht, Nvu bevat een ingebouwde ftp-functie waarmee u uw website kunt publiceren. Klik op de knop Publiceren in de werkbalk en er verschijnt een venster waar u het ftp-adres, uw gebruikersnaam en wachtwoord kunt invullen. Lukt het hier niet, dan kunt u altijd nog met FileZilla alle bestanden en mappen uploaden.

U uploadt niet de bovenliggende mappen, maar alleen de inhoud van de map waarin index.html staat en eventuele submappen daarvan. U kopieert deze bestanden en mappen naar de zogenaamde root: dit is het laagste niveau in uw webruimte; het is meestal een map met de naam htdocs, httpdocs of www. De exacte naam is afhankelijk van de keuze die de hostingaanbieder heeft gemaakt. Raadpleeg de instructies van uw hostingaanbieder als u vastloopt.

Bepaalde kleuren roepen bepaalde associaties op. Het blijft natuurlijk een kwestie van smaak, maar onderstaande lijst is wel een aardige leidraad

• Blauw: Waarheid, helderheid, waardigheid, macht
• Bruin: Mannelijkheid, stabiliteit, gewichtigheid
• Geel: Energie, vreugde, lichtheid van het bestaan
• Grijs: Saai
• Groen: Vruchtbaarheid, vrede, natuur
• Oranje: Feest
• Paars: Koninklijk, rijkdom, verfijning
• Rood: Liefde, passie, warmte, vlammen
• Wit: Licht, zuiverheid, netheid, leegte, dood
• Zwart: Dood, rebellie, duisternis, elegantie

Een juist kleurgebruik op uw website is belangrijk. U snapt ook wel: zwarte letters op een donkere achtergrond zijn nauwelijks leesbaar, maar goed kleurgebruik gaat verder. U kunt met kleuren ook een bepaalde emotie bij uw bezoekers opwekken. Bedrijven gebruiken dit bij het aanprijzen van producten of diensten. En realiseer u dat een op de twaalf mannen kleurenblind is en dus rood en groen niet kan onderscheiden? Allemaal zaken om rekening mee te houden bij het ontwerpen van uw eigen website.

Surf eens naar uw vijf meest favoriete websites en noteer de voornaamste kleuren. Vergelijk vervolgens de websites van de Postbank en ABN Amro. Met kleur proberen ze bij u een bepaalde emotie op te wekken. Zo staat de kleur blauw (Postbank) voor zakelijk, maar ook voor beschermend. De kleur groen (ABN Amro) draagt groei en kalmte uit.

Bepaal voor uw eigen website welke informatie u wilt geven en welke 'emotionele kleur’ daar het beste bij past. Onthoud verder dat u niet vast zit aan groen, blauw of rood. Binnen die kleuren zijn nog tal van schakeringen mogelijk, zoals dieprood, oceaanblauw of morgengroen. Zoek bijvoorbeeld op het web of in uw fotocollectie een foto waar de door uw gewenste kleur op voorkomt en probeer met het kleurpipetgereedschap de rgb-kleur te ontdekken.

Rgb is een kleurenmodel dat gebruikmaakt van de kleuren Rood, Groen en Blauw. Dit zijn de elementaire kleuren waarmee een beeld op een beeldscherm wordt opgebouwd. Op basis van die rgb-kleur kunt u dan weer de aanvullende kleuren vinden die deze kleur het beste complementeren. Een goede website hiervoor is EasyRGB.com. Complementaire kleuren gebruikt u om meer nadruk op knoppen, titels of andere elementen te leggen.

Oorspronkelijk konden we slechts 216 kleuren op het web tonen. Dit had te maken met de beperkte kleurweergave van grafische kaarten en monitoren. Die 216 kleuren werden op pc en Macintosh hetzelfde getoond en werden daarom websafe kleuren genoemd. Webkleuren worden opgebouwd uit hexadecimale codes van drie paren. Het eerste hexadecimale getal stelt de kleur rood voor, het tweede groen en het laatste paar is blauw. Hoe hoger het hexadecimale getal, hoe maximaler de kleur. De kleurcode #FF0000 staat dus voor rood: maak de kleur rood (FF) maximaal, meng geen groen (00) en meng geen blauw (00).

Tegenwoordig zijn er miljoenen kleurcombinaties mogelijk en kunt u dus wat meer nuances aanbrengen op uw webpagina. Een makkelijke website voor het achterhalen van de kleurwaarden van html-kleuren is html-color-codes.info.

Voor tekst- en achtergrondkleur is een hoog contrast (zwart op wit, wit op blauw, zwart op geel) aan te raden vanwege de betere leesbaarheid. Voor achtergrond en grafische elementen op de pagina (knoppen, tabellen, etc.) is een hoog contrast echter niet altijd een goed idee. Probeer de volgende zaken te vermijden:

• * laag contrast tussen tekst en achtergrond, zoals grijze tekst op een witte achtergrond;
• * niet-vetgedrukte letters in felle kleur op een donkere achtergrond;
• * meng rood niet met groen (sommige mensen zijn kleurenblind en kunnen deze kleuren niet van elkaar onderscheiden);
• gebruik liever niet teveel primaire kleuren tegelijk. Kies in dat geval voor gedempte kleuren of pasteltinten.

Bij de keuze van een lettertype voor uw webteksten en andere pagina-elementen moet u rekening houden met een aantal factoren. Uw letterkeuze bepaalt de uitstraling van uw website (zakelijk en formeel versus vriendelijk en speels). Daarnaast zijn sommige lettertypes beter leesbaar (op het scherm) dan andere. En u moet weten of het lettertype ook aanwezig is in de fontbibliotheek van de bezoeker. Houd u daarom aan de volgende drie vuistregels bij de keuze voor een bepaald lettertype:

• * passend bij de uitstraling van uw website;
• * goed leesbaar vanaf een computerscherm;
• * beschikbaar in de gebruikelijke browsers in onder verscheidene besturingssystemen.

We onderscheiden twee verschillende lettertypes: serif en sans-serif. Serif-fonts hebben een pootje onderaan de letters en zijn vooral geschikt voor langere teksten. Een voorbeeld is Times New Roman. Bij Sans-serif-letters ontbreekt het pootje; dit lettertype heeft een modernere uitstraling, bijvoorbeeld Arial. We bespreken hieronder de meest populaire lettertypes, hun leesbaarheid en de beschikbaarheid onder de verschillende besturingssystemen:

Bestel dan nu de workshopgids Zelf Websites Bouwen & Onderhouden. Deze gids bevat talloze tips, verrassende ideeën en stap-voor-stap workshops voor iedereen die voor het eerst een website bouwt en voor iedereen die na eerdere pogingen de draad weer op wil pakken. Ook besteedt de gids uitgebreid aandacht aan de promotie en mogelijkheden om met uw site geld te verdienen. Bestellen? Klik dan hier.

Arial is op vrijwel elk besturingssysteem beschikbaar en een van de meest bekende sans-serif-lettertypen. Het was tot aan Windows Vista zelfs het standaardlettertype voor dialoogvensters en schermteksten in Windows. De leesbaarheid van Arial, met name bij grotere lappen tekst, is niet goed. Vooral als de letters klein worden afgebeeld, lijdt de leesbaarheid daaronder.

Deze letter gebruikt u vooral als de grootte minimaal 12 punts is en u veel tekst moet schrijven, bijvoorbeeld voor een uitleg of een handleiding. Times New Roman heeft een zakelijke uitstraling.

Dit is min of meer de verbeterde opvolger van de Arial. Verdana staat door zijn brede letters bekend om zijn zeer goede leesbaarheid. De Verdana heeft een moderne uitstraling en is geliefd bij zowel webmasters als websitebezoekers.

Waar Verdana de sans-serif opvolger is van Arial, is Georgia de serif-variant van Times New Roman. Georgia herkent u dus aan de pootjes onderaan de letters, maar ook aan de modernere uitstraling. Georgia is inmiddels op de meeste besturingssystemen standaard beschikbaar.

Andere lettertypen die probleemloos gebruikt kunnen worden zijn Trebuchet, Comic Sans en Courier New.

We hebben in deze aflevering uitgelegd hoe u een eenvoudige website met Nvu maakt. Hebt u haast, dan kunt u met de opgedane kennis alvast op Web-log uw eigen weblog inrichten.

1. Ga naar Web-log.nl en klik op ‘Een weblog in 3 stappen’

2. Vul een gebruikersnaam, wachtwoord en uw e-mailadres in. Klik op de knop Volgende.
3. Wacht tot de bevestiging per e-mail binnenkomt. Klik op de link 'Registratie voltooien'.

4. Vervolgens mag u een ontwerp kiezen; helaas heeft Web-log daarbij niet overal echt rekening gehouden met leesbaarheid. Overigens is Web-log niet de enige online dienst waarmee u snel een eigen weblog maakt; met Blogger.com en WordPress.com WordPress.com kan het ook.

In deel 3 gaan we het hebben over lay-out en opmaak, en hoe u die naar uw hand kunt zetten met html-code, het aanpassen van Style Sheets, frames en div-blokken. Klik hier om naar de eerste aflevering van deze cursus te gaan.