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 http://www.opensourcecms.com/ 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 – www.computerkit.be 2008 – Copyright: Creative Commons License
61
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) ■
bananen (hyponiem)
■
...
nieuws ○
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 – www.computerkit.be 2008 – Copyright: Creative Commons License
62
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 – www.computerkit.be 2008 – Copyright: Creative Commons License
63
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”.
3. We plakken de bovenstaande code (of we tikken ze in) in de div met id “knoppenbalk”.
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
64
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. 7.
8. 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 – www.computerkit.be 2008 – Copyright: Creative Commons License
65
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 – www.computerkit.be 2008 – Copyright: Creative Commons License
66
