Cursus: maak uw eigen website (4)

De navigatie van uw website is net zo belangrijk als de inhoud zelf. Als de inhoud van uw website chaotisch is georganiseerd zullen bezoekers niet vinden wat ze zoeken. In deel 4 van deze webcursus leert u een goede menustructuur te ontwerpen en maakt u kennis met de mogelijkheden van JavaScript en zoekvakken.Op de openingspagina (homepage) van uw website past niet alle informatie die u kwijt wilt. U zult de informatie daarom op een logische manier over verschillende pagina's moeten verdelen. Het heeft zin om vooraf na te denken over de navigatiestructuur en de manier waarop u dit in een menu kunt onderbrengen. Vroeger werden voor menu's nogal wat geneste tabellen, JavaScript en plaatjes gebruikt. Tegenwoordig zijn er betere oplossingen, dankzij CSS, maar dat komt pas verderop ter sprake. We gaan eerst kijken welke menu-indelingen er mogelijk zijn.

Hebt u een eenvoudige website, zoals onze voorbeeldwebsite Eetblog.nl, dan hebt u aan een paar menu-items genoeg: Home, Nieuws, Achtergrond, Galerie, Contact en RSS. We hebben bij deze website voor de menu-items eenvoudige tekstlinks gekozen.

Het kan ook anders: op de website van Computer Idee is zoveel informatie aanwezig dat het niet lukt om alles in een mooie boomstructuur te gieten. Nieuws, Forum en Weblog zijn aparte onderdelen, maar hoort FAQman onder het blad of zijn er ook vragen die niet bij een bepaald nummer horen? Zijn bezoekers eigenlijk wel geïnteresseerd in welke editie een bepaalde vraag heeft gestaan? Vandaar dat bij Computer Idee vier verticale menulijstjes bovenaan de pagina zijn geplaatst. Daaronder staat nog een horizontale rij met zeven menu-items. Eerlijk gezegd: het wordt er niet overzichtelijker op, maar bij een website met zoveel verschillende content is er eigenlijk geen andere oplossing.

Of toch wel? De website van Emerce heeft het anders aangepakt. Ook daar moesten heel veel onderwerpen in het menu worden ondergebracht. De oplossing die hier is bedacht, is een zogenaamd rollover-effect: wanneer u met de muis over één van de twaalf horizontale menu-items gaat, verschijnt er een submenu. Rechtsboven is nog een klein verticaal menu voor verschillende abonnementen toegevoegd.

Ook de Volkskrant gebruikt een menustructuur met meerdere niveaus, maar daar verschijnen de subitems pas wanneer u daadwerkelijk op een item in het hoofdmenu klikt. Er zijn weinig voorschriften voor een ideale menustructuur te geven. Of u voor horizontaal of verticaal menu kiest (of een combinatie daarvan) hangt af van de hoeveelheid menu-items die u kwijt wilt en de indeling van uw webpagina. Hebt u meer dan tien menu-items, dan kunt u ze beter in een verticale lijst plaatsen. Bezoekers verwachten deze lijst aan de linkerkant van de webpagina. Wilt u niet de hele linkerkolom opofferen voor het menu, dan kunt u ook de oplossing kiezen zoals bij Eetblog wordt getoond. U kunt de rest van de linkerkolom dan gebruiken voor andere interessante informatie. Hebt u minder dan tien menu-items, maar bestaat elk daarvan uit meerdere subitems, dan is de oplossing van Emerce en de Volkskrant beter.

Een rollover-effect houdt in, dat er iets gebeurt wanneer u met de muispijl over een tekstlink of knop beweegt. Zo’n knop of link kan bijvoorbeeld van kleur wijzigen of er kan een uitklapbaar menu verschijnen. Tegenwoordig is daarvoor geen JavaScript meer nodig. U kunt met CSS net zo makkelijk menu's met mooie effecten maken.

Om te voorkomen dat u alle code moet overtypen maken we gebruik van kant-en-klare codevoorbeelden die op internet te vinden zijn. Een goed bruikbare website daarvoor is Listamatic.Hier vindt u een workshop lijstjes maken (Listutorial) en een enorme hoeveelheid verticale en horizontale lijstjes die u kunt gebruiken om een menu te maken.

Natuurlijk zijn er nog veel meer andere vormen mogelijk, zoals een horizontaal menu met rollover-effect bijvoorbeeld, de Rollover horizontal list. Het grappige is dat de manier waarop u zo'n menu maakt niet zoveel verschilt van een verticale lijst. De code display: inline zorgt ervoor dat de items horizontaal worden getoond.

Bij een verticale navigatielijst kiezen we voor een eenvoudige uitvoering met rechthoekige 'knoppen'. Als de bezoeker met de muis over de knoppen beweegt, veranderen deze van kleur. Op Listamatic vindt u er twee: Rollover list en Simple nested rollover list. De tweede stelt u in staat om meerdere niveaus in uw lijst aan te brengen.

Het maken van zo'n menu bestaat uit twee stappen. We gaan er daarbij vanuit dat u CSS gebruikt.

1. In het html-bestand geeft u aan waar het verticale menu getoond moet worden, bijvoorbeeld in de linkerkolom. U definieert een div-blok met de naam 'navcontainer' met daarin een ongenummerde lijst. Voor eetblog.nl ziet dat er als volgt uit:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Nieuws</a></li>
<li><a href="#">Achtergrond</a></li>
</ul>
</div>

2. Vervolgens moet u met behulp van CSS definiëren hoe de elementen navcontainer en navlist eruit zien. Omdat u het menu op meerdere pagina's wilt gebruiken is het verstandiger dat in een apart CSS-bestand te definiëren. Door met de kleuren en afmetingen te experimenteren kunt u het menu helemaal aan uw wensen aanpassen. De items worden als blokken getoond, zonder dat u een tabel hoeft te maken.

U kunt ook een menu maken dat horizontaal of verticaal uitklapt, of een horizontaal menu maken met tabbladen. Dat kan met afbeeldingen worden gedaan, maar met CSS is het ook mogelijk. Kijk maar eens naar Untaveled CSS Tabs en naar de andere voorbeelden op Listamatic. Knoppen vervangen door afbeeldingen behoort ook tot de mogelijkheden.

Met een goede navigatiestructuur is het voor uw bezoekers al een stuk eenvoudiger om snel bij de juiste informatie op uw website te komen. Door de juiste menustructuur te gebruiken en de belangrijkste informatie niet meer dan drie klikken vanaf de homepage te verstoppen zullen veel gebruikers al enorm geholpen zijn. Helaas blijft sommige informatie toch wat verstopt en moet u de websitebezoekers een eindje tegemoet komen. Een zoekfunctie is daarvoor ideaal, maar hoe voegt u deze op eenvoudige wijze aan uw website toe? Op internet zijn heel veel scripts te vinden die uw website kunnen doorzoeken, maar ze maken vrijwel altijd gebruik van een combinatie van een scripttaal en een database, zoals bijvoorbeeld de combinatie PHP en MySQL. Als u daar nog niet zo ervaren in bent, kan dat nog een lastige kluif zijn. Gelukkig kan het ook een stuk minder ingewikkeld door gebruik te maken van de kracht van Google.

Met Google was het altijd al mogelijk om specifiek de inhoud van een bepaalde website te doorzoeken met de zoekparameter site:uwdomeinnaam.nl. We kunnen deze zoekopdracht daarom ook op onze eigen website gebruiken, maar dan moeten we natuurlijk wel eerst voor een zoekvak zorgen. De code daarvoor is zeker niet moeilijk; alleen de meest geschikte plek op uw webpagina moet u zelf even bepalen. De meeste bezoekers verwachten de zoekfunctie overigens rechtsboven op een pagina, dus houdt daar rekening mee in uw ontwerp.

Een zoekvak wordt opgebouwd uit een formulier (<form></form>), een invoertekstvak (<input type="text">) voor de zoektermen, twee keuzerondjes voor zoeken op het hele internet of alleen op uw website (<input type="radio") en een knop (<input type="submit">) om de zoekactie te starten. Voor een Google Zoekvak ziet de code er als volgt uit. Waar u "uwdomeinnaam.nl" ziet staan vult u uiteraard uw eigen domeinnaam in.

<!-- Search Google -->
<form method="GET" action=http://www.google.nl/search target="_blank">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<div>
<A href="http://www.google.nl/" mce_href="http://www.google.nl/">
<IMG src="http://www.google.com/logos/Logo_40wht.gif" mce_src="http://www.google.com/logos/Logo_40wht.gif"
ALT="Google"></A>
<INPUT TYPE="text" name="q" size="31" maxlength="255" value=""/>
<INPUT type="submit" name="btnG" VALUE=" Zoeken"/>
<INPUT TYPE="hidden" name="domains" value=http://www.uwdomeinnaam.nl/>
<br> <input type="radio" name="sitesearch" value=""/>
WWW <br> <input type="radio" name="sitesearch" value="http://www.uwdomeinnaam.nl" checked="checked"
/>UwDomeinnaam.nl<br> </div>
</form>
<!-- SiteSearch Google --></div>

Gaat u ook gebruikmaken van het advertentieprogramma Google Adsense, dan kunt u het zoekvak zelfs helemaal kant-en-klaar met uw Adsense-code laten aanmaken, door op de Google Adsense-website voor de optie Adsense voor Zoeken te kiezen.

JavaScript is een programmeertaal waarmee u net als bij CSS bepaalde codes in een html-bestand kunt opnemen. Deze zorgen ervoor dat tijdens het bekijken van een webpagina de inhoud of het uiterlijk dynamisch verandert. Eenvoudige interactie met de gebruiker is ook mogelijk; u kunt bijvoorbeeld controleren of een webformulier goed is ingevuld. Er zijn enorm veel boeken over JavaScript geschreven, die we in deze webcursus niet zomaar even kunnen samenvatten. Wel is het zo, dat webprofessionals de afgelopen jaren minder vaak gebruikmaken van JavaScript, om een aantal redenen:

• * JavaScript werkt niet in alle browsers op dezelfde manier;
• * De rol van JavaScript is in sommige gevallen overgenomen door Flash, dat als voordeel heeft dat de meeste browsers voorzien zijn van Flash-plugin;
• * JavaScript heeft een slechte naam omdat het veel werd gebruikt voor ongewenste pop-ups en andere onaangename verrassingen in uw browservenster;
• * Er is geen standaard voor JavaScript; de W3C-standaard hiervoor is nog in ontwikkeling en is bovendien complex.
• * Te veel JavaScript kan het laden van de website onnodig vertragen.

Toch mogen we JavaScript niet zomaar afschrijven. Het komt in specifieke toepassingen goed van pas en het vormt bovendien een van de bouwstenen van Ajax, een techniek voor het bouwen van interactieve Web 2.0 applicaties.

Net als bij CSS zijn er drie plaatsen waar u JavaScript kunt gebruiken:

• * Binnen html-elementen.
• * In scriptblokken binnen het html-bestand, waar ze beginnen met <script> en eindigen met </script> .
• * In aparte tekstbestanden waarvan de naam eindigt op .js. U moet er dan wel vanuit uw html-bestand naar verwijzen.

We geven een voorbeeld van het eerste geval: binnen een alinea (aangegeven met <p>) kunt u een mouse-over-effect teweegbrengen. Wanneer u met de muispijl over een tekst beweegt, verandert deze tekst.

<p style="cursor:pointer"
onmouseover="this.innerHTML='Ja, daar ben je!'"
onmouseout="this.innerHTML='Waar is toch die cursor?'">
Waar is toch die cursor?
</p>

Hier is sprake van een zogenaamde event-handler: een stukje script dat een bepaalde gebeurtenis afhandelt. De event-handler onmouseover betekent, dat zolang de muis zich boven het element bevindt, er een bepaalde actie uitgevoerd moet worden (in dit geval het tonen van een alternatieve tekst). De gewijzigde tekst zou normaal gesproken blijven staan, wanneer u de muispijl weer verplaatst, maar dat willen we niet. We willen de oorspronkelijke tekst weer terugzien. Vandaar de event-handler onmouseout, die de oorspronkelijke tekst herstelt. Met het sleutelbegrip this kunt u met JavaScript ingrijpen op een actueel element. En innerHTML is een objecteigenschap, namelijk de inhoud van een html-element. Ook ziet u in het zojuist getoonde stukje code cursor:pointer. Dit is geen JavaScript, maar een CSS-eigenschap waarmee u het uiterlijk van de muispijl verandert.

Er zijn nog veel meer eventhandlers, zoals onclick (bij het klikken met de muis), onmousedown (bij het langer ingedrukt houden van de muisknop) en onsubmit (bij het verzenden van een formulier).

Wilt u dat de acties die u met JavaScript definieert voor de hele webpagina gelden, dan kunt u dit vastleggen in een script-element. Dit ziet er als volgt uit:

<script type="text/javascript">
</script>

Tussen deze twee elementen voegt u de JavaScript-code in. U kunt op de website DynamicDrive.com allerlei kant-en-klare scripts vinden, die u tussen <script> en </script> kunt plakken. U staat nu voor de keuze of u het script-element in de header (dus tussen <head> en </head> plakt of verderop in het document, wanneer het nodig is. De beste keuze is afhankelijk van uw toepassing. Zo hoeft u bijvoorbeeld een Google AdSense-advertentie niet in de header te definiëren, maar pas verderop in het document, op de plaats waar deze moet worden getoond. U kunt bijvoorbeeld ook met JavaScript informatie inlezen die al in de header is gedefinieerd.

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.

Een voorbeeld maakt dat duidelijk: in de header van onze webpagina staat de naam van de auteur gedefinieerd. We kunnen deze informatie gebruiken om in de voettekst van de webpagina informatie over auteursrecht op te nemen:

<html>
<head>
<meta id="author" name="author" content="Computer Idee">
<title>Mijn handige webpagina</title>
</head>
<body style="background-color:#FFCCFF">
<h1>Koptekst</h1>
<p style="border-bottom:solid 1px black;
padding-bottom:15px;">Hier komt een uitgebreide tekst.</p>
<p id="url_and_author" style="font-style:italic">
<script type="text/javascript">
var url = document.URL;
var author =
document.getElementById('author').getAttribute('content');
var now = new Date();
var year = now.getFullYear();
document.write("Copyright " + author + ", " + year);
</script>
</p>
</body>
</html>

In bovenstaand voorbeeld legt u in de metadata bovenin het document vast dat de auteur Computer Idee is. In het stukje JavaScript geeft u aan dat de tekst Copyright Computer Idee, 2007 moet verschijnen. Het jaartal past zich overigens automatisch aan.

Wanneer u overtuigd XHTML-gebruiker bent, is het niet zo netjes om JavaScript-code in de webpagina tussen <script> en </script> op te nemen. Het is beter om de code in een apart bestand op te nemen. Dat is ook de beste oplossing wanneer het stukje JavaScript dat u wilt gebruiken erg ingewikkeld is of wanneer u een bepaald effect in meerdere pagina's wilt gebruiken.

Een JavaScript-bestand is niet meer dan een eenvoudig tekstbestand, dat alleen JavaScript-code bevat. De naam van het bestand eindigt op .js. We geven een voorbeeld, van een bestand dat de actuele datum netjes uitschrijft, dus bijvoorbeeld: maandag 31-12-2007. Nadat u de code hebt ingetypt of gekopieerd van een website zoals DynamicDrive.com slaat u het op met de naam voorbeeld.js. Vanuit uw (X)HTML-webpagina kunt u er in de header nu als volgt naar verwijzen:

<script type="text/javascript" src="voorbeeld.js">
</script>

Het JavaScript-bestand zelf bevat alleen de volgende code:

function show_date(id_name) {
var weekdays = new Array("zondag","maandag","dinsdag",
"woensdag","donderdag","vrijdag","zaterdag");
var now = new Date();
var day = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var weekday = now.getDay();
var day0 = ((day < 10) ? "0" : "");
var month0 = ((month < 10) ? "-0" : "-");
var today = day0 + day + month0 + month + "-" + year;
var date_to_show = weekdays[weekday] + today;
document.getElementById(id_name).innerHTML = date_to_show;
}

In deel 5 gaan we het hebben over beeld en animaties. Want goed beeld maakt een website aantrekkelijk(er), en dat geldt ook voor animaties.

Klik hier om naar deel 1 van deze cursus te gaan.

Klik hier om naar deel 2 van deze cursus te gaan.

Klik hier om naar deel 3 van deze cursus te gaan.