6. De sitemap of stamboom van uw website

Transcriptie

1 6. De sitemap of stamboom van uw website Dynamisch of statisch? CMS of Dreamweaver? Een databankgestuurde website en CMS Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen, aan te passen en/of te verwijderen. Daarom is zeer snel de nood ontstaan om websites te kunnen koppelen aan databanken. HTML voorziet echter niet in die mogelijkheid. Daarom zijn er doorheen de jaren zowel commerciële als gratis toepassingen ontwikkeld voor databankgestuurde websites. Meest gebruikt is zonder twijfel PHP in een combinatie met een Linux- of UNIX-server en een MySQL-databank. Grotere toepassingen maken gebruik van een Oracle-databank en of CGI-toepassingen geschreven in C of Perl. Ook Microsoft kon niet te na blijven en ontwikkelde met die doeleinden voor ogen ASP oftewel Active Server Pages. ASP kent sinds enige jaren een veel geavanceerdere opvolger met ASP.NET (ondertussen al aan versie 3). Tal van PHP- en ASP-sites beschikken over een systeem van content management (CMS). De mogelijkheid tot het online wijzigen, invoeren en verwijderen van gegevens op de website biedt immers heel wat voordelen. Daar de klant zijn eigen site op vrij eenvoudige wijze kan beheren, bespaart dit niet alleen tijd, maar op langere termijn ook geld. Bovendien krijgt de webontwikkelaar meer ademruimte om te werken aan nieuwe projecten én een werkend content management-systeem kan heel snel geïmplementeerd worden op een andere site. Bij een CMS-systeem kan heel snel online een structuur van een website worden opgezet. Het enige wat de webdesigner vaak nog moet doen is het uitwerken van een layout (HTML-sjabloon en CSS). Ook met Dreamweaver is het mogelijk om een dynamische (databankgestuurde) website op te zetten. Toch is het om diverse redenen niet aan te raden om hiervoor Dreamweaver te gebruiken. Het is weliswaar veel gemakkelijker om met een aantal muisklikken een databankgestuurde website op te zetten. Wanneer je echter op problemen stuit of extra vragen krijgt van uw klant, is het niet makkelijk om zonder enige kennis van bijvoorbeeld PHP aanpassingen te doen. De door Dreamweaver geautomatiseerde code is bovendien niet altijd makkelijk leesbaar. Veel ontwikkelaars met een beperkte of gebrekkige kennis van PHP of ASP, maken gebruik van kant-en-klare CMS-systemen zoals Open Mambo, Joomla... Je kan tientallen op maat geschreven CMS-systemen uittesten op Een klassieke statische website Een klassieke website bestaat uit een beperkt aantal webpagina's die via 'hard coding' aan elkaar gelinkt zijn. Dit wil zeggen dat u de pagina's manueel aan elkaar linkt in de HTMLcode of via een WYSIWYG-programma zoals Dreamweaver. Kris Merckx Webontwikkeling Copyright: Creative Commons License 61

2 Een stamboom van uw website Wanneer u een website bouwt (zowel bij een dynamische als bij een statische) is het belangrijk dat u nadenkt over welke pagina's u nu precies wil. Welke relatie hebben de diverse pagina's ten opzichte van elkaar? Denk na over het hoofdniveau en de subniveaus. In de taalkunde spreken ze van HYPERONIEMEN en HYPONIEMEN. Bijvoorbeeld: homepagina contactpagina adresgegevens kaart contactformulier winkel (hyperoniem) groenten (hyponiem) fruit (hyponiem en hyperoniem)... nieuws... bananen (hyponiem) promoties einde reeks Het hoofdniveau: homepagina contactpagina winkel nieuws Op het hoofdniveau tellen we vier pagina's die vanuit elke webpagina te bereiken zijn. Wanneer een bezoeker op één van de links in het hoofdniveau klikt (in de knoppenbalk), verschijnen er nieuwe links (in de div links ) naar het onderliggende subniveau. U kan de structuur uittekenen in: een outline editor (bijvoorbeeld Tkoutline) een mindmap-programma (bijvoorbeeld Freemind) Kris Merckx Webontwikkeling Copyright: Creative Commons License 62

3 Freemind gebruiken als linkgenerator Met het open sourceprogramma's Freemind (Windows, Mac OS X, Linux) kan u makkelijk via een mindmap een structuur van een website uitbouwen. Freemind kan het eindresultaat exporteren naar een PDF-bestand of naar een XHTMLpagina met CSS en Javascript. Kris Merckx Webontwikkeling Copyright: Creative Commons License 63

4 Het eindresultaat kan u perfect integreren in uw website. Links van het hoofdniveau U kan de links van het hoofdniveau (de bovenste hyperoniemen) al toevoegen aan het html-sjabloon. De onderliggende niveau's (de hyponiemen) verschillen naargelang de pagina. De links van het hoofdniveau komen in de div met id knoppenbalk. 1. Open sjabloon.html in het codevenster van Dreamweaver of in een teksteditor. 2. We gebruiken een HTML-lijst om de links toe te voegen aan de div knoppenbalk. <ul> </ul> <li><a href= index.html >Home</a></li> <li><a href= winkel.html >Winkel</a></li> <li><a href= nieuws.html >Nieuws</a></li> <li><a href= contact.html >Contact</a></li> 3. We plakken de bovenstaande code (of we tikken ze in) in de div met id knoppenbalk. <div id= knoppenbalk > <ul> </ul> </div> <li><a href= index.html >Home</a></li> <li><a href= winkel.html >Winkel</a></li> <li><a href= nieuws.html >Nieuws</a></li> <li><a href= contact.html >Contact</a></li> Kris Merckx Webontwikkeling Copyright: Creative Commons License 64

5 4. We slaan de pagina op. 5. We openen nu het bestand stijl.css 6. In het CSS-bestand passen we de stijl aan van de lijst. Standaard toont een webbrowser de items in een lijst onder elkaar. Met behulp van CSS kunnen we de items naast elkaar weergeven We voeren nu de CSS-code toe om de lijst en de links in het onderdeel knoppenbalk vorm te geven. #knoppenbalk ul{ float:right; margin:0; padding:0; } #knoppenbalk ul li a{ color:white; padding-left:15px; padding-right:15px; display:block; font-variant:small-caps; text-decoration:none; } #knoppenbalk ul li a:hover{ color:black; background:#3c485e; padding-left:15px; padding-right:15px; display:block; Kris Merckx Webontwikkeling Copyright: Creative Commons License 65

6 font-variant:small-caps; text-decoration:none; } 9. De links worden nu naast elkaar weergegeven. Bestudeer de code en vergelijk het met punt 4 van deze cursus waarin we CSS-opmaak uitgebreid hebben bestudeerd. Kris Merckx Webontwikkeling Copyright: Creative Commons License 66