Mail nu al uw scripties, en artikelen naar www.skrift.nl      skrift
SDS
  gebruikers
:: balie
:: procesman
:: cursist
  thema's
:: algemeen
  :: zakenbrief
  :: handleiding
  :: nieuwsbrief
:: handboek
  :: nieuwsbrief
  :: rapport
:: verslag
:: interview
:: beleidsrapport
:: website
  lessen
:: cursus intro
:: site-plan
:: basis-layout
:: html
:: teksten.
:: meta-info.
:: .
:: .
   middelen
  woordenboeken
  schrijfsites
  vertaalsites
  illustraties
  foto's
  huur een schrijver
  huur  redacteur
  huur editor
  lineone
Stichting NIMM

 

Methode Poortinga   Systematisch Documenten Schrijven
    Basislay-out  functionele websites bouwen
 
inhoud 

doel  zichtbare-onzichtbare-info   menu  kop  tekst  illustraties  tabellen  kleuren diploma   

  doel

 

Het doel van deze les is, dat u leert om snel en doelgericht de basis layout voor uw site te plannen. Alleen door een vaste herkenbare lay-out krijgt de bezoeker een indicatie voor welke de doelgroep het is. Door de basis-layout in elke pagina terug te laten keren krijgt de lezer greep op uw boodschap. 
 
  zichtbare en onzichtbare informatie Uw site bevat altijd een zichtbaar gedeelte en een onzichtbaar gedeelte. Het zichtbare gedeelte is wat u op het scherm ziet en het onzichtbare deel is de meta-informatie. In de metainformatie staan aanwijzingen voor zoekmachines en dat is onmisbaar voor het bereiken van de doelgroep.

Dit 'metainformatie' klinkt heel geheimzinnig, maar het betekent 'informatie over', over uw website natuurlijk, en het bevat voornamelijk de titel en trefwoorden voor zoekmachines. Als u van deze webpagina de broncode bekijkt (in het browsermenu klikken op "beeld/broncode"), dan staat in de html-tekst op de eerste tiental regels de meta-informatie. Als u dat eens zorgvuldig leest, zult u begrijpen wat ik bedoel. Omdat je de meta-informatie normaal niet ziet, hoef je die ook niet in de vormgeving te betrekken Hoe u zelf meta-informatie maakt staat in de gelijknamige les.

 
  vaste onderdelen


 menu  menu
      tekst


home menu
menu
menu
menu

  tekst


logo-kop-titel
 menu menu menu
home menu
menu
menu
menu

 tekst
      voetmenu








 
 logo-kop-titel
 menu menu menu
home menu
menu
menu
menu

titel
. intro
. alinea
. alinea
. slot
    voetmenu


go-kop-titel
home menu menu menu
home

menu
menu
menu
menu

  titel
  . intro
  . alinea
  . alinea
  . slot
        voetmenu












tabel:
r i j   k
        o
c c c   l
c c c   o
c c c   m
Het zichtbare deel bevat altijd een aantal vaste onderdelen.
(let op: We hebben het hier niet over toeters en bellen als java applets, flash-intro's, sound-effecten etc.)
menu
o Een klein menu staat aan de bovenzijde van uw pagina onder de kop met logo en sitenaam/sitetitel
o een groot menu staat aan de zijkant op de eerste 100 tot 150 pixels. Meestal aan de linkerkant, soms aan de rechterkant. Even fout als flash-intro's is het om op de eerste pagina alleen een hoofdmenu te zetten. Nog fouter om dit een speelse vorm te geven met louter iconen of zoekplaatjes. 
o Een menu voor sites over uw bedrijf zelf, zoals email, route, etc. mag ook aan de onderkant. De bezoeker zal die pas nodig hebben nadat de heftige interesse is opgewekt.
o Een menu kan prachtig opgebouwd worden met kleurige knoppen, iconen, uitklapbare submenu's etc. Java applets zijn alom zat verkrijgbaar, gratis. Dat is echter nog geen reden om ze te gebruiken. De bezoeker is meestal vertrokken voordat hij de functionaliteit heeft herkend. 
Een menu in de vorm van een goed leesbare inhoudsopgave, met woorden die het onderwerk treffen is per saldo de meest effectieve handwijzer. Zoek de verfraaiing van uw opmaak liever in andere subtielere vormgeving.
 
Toelichting:  Om van de uw ene webpagina naar uw ander te komen, om de pagina om te slaan zogezegd, hebben we een aantal links nodig. Het is juist om die links in vaste volgorde op een vaste plek van uw pagina's te zetten.Ook op die plek waarop de bezoeker dit verwacht. Sluit u dus aan bij het algemeen gebruik op veel bezochte sites. De bezoeker kan zo altijd zonder elke pagina af te speuren door uw hele site bladeren. Hij zal nooit verdwalen. Soms maakt met een combinatie van een hoofdmenu terzijde en een topmenu voor het onderdeel. (b.v. www.Telegraaf.nl) Alleen als een site uit slechts 1 pagina bestaat is geen menu nodig.
 
titel of kop: Om in een oogopslag te kunnen zien (scannen) op welke site men is wil de bezoeker graag een grote kop of een duidelijk logo boven de site die direct kernachtig aangeeft wat voor site het is en waarover die gaat. Bijvoorbeeld een logo met een nieuwbouwwoning en de kop "Bouwbedrijf Timmers" in grote letters.
De bovenste paar centimeter, vaak ongeveer 60 pixels, van de webpagina zijn gereserveerd voor de site-naam of site-titel al dan niet samen met een bedrijfslogo. In dezelfde of in bescheidener vorm keert deze kop na de introductie- of hoofdpagina. terug in de onderliggende pagina's. Soms nu met een ondertitel. Vaak  is het bedrijfslogo zo duidelijk beletterd, dat het tegelijk de titel is. 

  
tekst:  De tekst staat op het resterende deel van de pagina. Met titel, verdeeld in enkele kernachtige alinea's en met veel witruimte. De tekst op een website moet kort, kort en nog eens kort. Bezoekers lezen vooral scannend en vluchtig en u moet snel uw informatie onvergetelijk in hun grijze cellen plaatsen. Maar behalve bezoekers zijn er ook gebruikers. De eis 'Kort en compact"  geldt in mindere mate voor interactieve en lessites of een site waar een roman op staat. Zulke sites zijn die bedoeld zijn om gedurende een langere tijd te gebruiken, maar vormen nooit de openingssite voor een eerste toevallig bezoek. Op de eerste of index-site vangt u uw bezoeker met een kernachtige boodschap voor  dieper gelegen gebruikssites zoals deze.
  
illustraties: Alleen op een kunstpagina is de illustratie zelf de boodschap.Dit geldt ook voor site's waarop spullen aan de man worden gebracht. Maak geen kerstboom. Maak bescheiden en doelmatig gebruik van illustraties. Voor het overige is een illustratie ondergeschikt aan de geschreven tekst. Illustraties die hinderlijk blijven bewegen zijn altijd fout. De beweging is visueel dominant en irriteerd de bezoeker bij het lezen.
 
tabellen om te layouten:  Het opmaken van websites gebeurd standaard met tabellen. Ook dit is goed te zien op de site van www.tiscali.com of deze site die uit allemaal blokjes is opgebouwd.
Een tabel is een dambord. Een rij vakjes van links naar rechts heet inderdaad een rij. Van boven naar beneden noemt men een kolom. en een vakje heet een cel. In een cel kun je iets zetten, bijvoorbeeld een tekst en/of een plaatje en/of een andere tabel. (zie de les over tabellen)
Tabellen worden altijd zonder zwarte of gekleurde randen gebruikt. Randen storen. Een rand wordt alleen gemaakt om een tabel of om een cel als dat een duidelijke functie heeft in de standaardopmaak. In plaats van door tabelranden worden blokken informatie gescheiden door witruimte, dat wil zeggen lege regels, lege rijen of lege kolommen of zoals in deze tabel enige extra pixels ruimte tussen de cellen.

Tabellen worden genest, dat wil zeggen, men maakt tabellen in tabellen. Voor de opbouw van deze site is eerst een tabel gebruikt om titels, menu en tekstdeel te plaatsen. De tekst is geplaatst met een tabel voor tekst en trefwoorden. Lijsten zijn met een derde tabel geplaatst. Lijsten of opsommingen maken kan ook met HTML-instructies, maar met tabellen is het eenvoudiger en flexibeler. Bekijk goed de reeks voorbeelden in de marge!


 
kleuren: Kies een bescheiden aantal kleuren om je site een herkenbare kleurstemming te geven. Kindersites vrolijk, met veel kleuren, begrafenis sites stemmig met geringe variaties op grijs. Kijk bijvoorbeeld eens naar het deftige grijs van www.mercedes.nl, een dure wagen die ook veel voor begrafenissen wordt gebruikt. Op deze site wordt een variatie van blauw gebruikt met een tikje rood voor de accenten.

     
  diploma De stichting NIMM reikt u een certificaat van bekwaamheid uit als u een aantal standaardopdrachten op aanvaardbare manier uitvoert.
Vervolg