| |
|
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
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 |
| |
|
|
|