Extra bijlagen
Website CSS templates
Deze aanvulling heb ik geschreven voor de wat gevorderde website maker en is nog vrij
bescheiden geschreven. Hij is ook meer bedoeld om te laten zien wat er allemaal
mogelijk is met css. Als dit te ingewikkeld voor je is: gewoon overslaan!
Een template is een sjabloon en een sjabloon is een kant en klare opgemaakte
webpagina.
In een template is de menustructuur, kleurgebruik, lettertype, locatie van een
afbeelding allemaal al vastgelegd. De meeste css templates worden ook nog eens, als
bijkomend voordeel, goed gevalideerd door het W3C.
Als je zelf niet zo bedreven bent in het ontwerpen van een website dan is het gebruik
van een template een geweldige uitkomst.
Templates vindt je in alle soorten en maten, bij honderden tegelijk, op het internet.
Omdat we er naar streven om een gevalideerde website te maken. Heb ik een template
opgezocht. Deze zit in de map template.
Deze website is gemaakt met CSS en je hoeft dan ook alleen maar wijzigingen in het
CSS bestand door te voeren, om het geheel naar je eigen wensen aan te passen. Heb
je een CSS bestand gewijzigd en opnieuw bewaard, dan kun je door de index.html te
bekijken direct de veranderingen zien die je hebt aangebracht.
Het enige wat je in de index zelf hoeft te veranderen zijn de menu namen en de
verwijzingen naar de andere pagina’s die je gaat maken.
Met Kompozer open je de index van je template en vervolgens kies je voor opslaan
als... om je andere pagina’s een naam te geven.
Voordat je daar nu mee gaat experimenteren en om te voorkomen dat je de originele
bestanden gaat overschrijven: Maak een kopie van de template die je wilt gaan
gebruiken en ga daarmee aan het werk.
Mocht er van alles mis gaan, kun je later weer
een nieuwe kopie gaan gebruiken.
Als voorbeeld de template dobi.
Het oorspronkelijke template dobi heb ik omgezet tot een bijna complete website.
Ik heb de index geopend, de menuverwijzingen aangepast en vervolgens de index vijf
keer achter elkaar opgeslagen als...html bestand.
De website dobi heeft zes pagina’s die wat uiterlijk betreft allemaal identiek zijn.
Als je de index in de browser gaat bekijken kun je door alle pagina’s navigeren.
Met
uitzondering van de tekst is dobi eigenlijk al compleet en dus bijna af.
Alles wat je verder ziet; de afbeelding in de header (kop van de pagina), de gebruikte
achtergrondafbeelding, lettertype, lettergrootte en kleuren wordt allemaal geregeld en
vastgelegd in het css bestand. Dit is dat ook het meest belangrijkste bestand van de
website.
Gaat het daar verkeerd of worden er daar dingen verkeerd omschreven, dan gaat het
gelijk op alle pagina’s van de hele website verkeerd.
Wil je een andere afbeelding gebruiken, ander lettertype, grootte en kleuren: het css
bestand aanpassen!
Als voorbeeld.
In de map img (images/afbeeldingen) van de template vindt je vier afbeeldingen.
Twee oorspronkelijke afbeeldingen en twee afbeeldingen die door mij zijn veranderd
waardoor het uiterlijk van de website is aangepast. Deze twee aangepaste afbeeldingen
bepalen nu het gezicht van de website. Dat zijn de afbeeldingen: woningen.jpg en de
bdg.jpg
Deze afbeeldingen zijn met een fotobewerkingsprogramma aangepast en vervolgens
heb ik in het css bestand de verwijzing naar deze afbeeldingen opgegeven.
Overal in het css bestand kom je verwijzingen tegen naar gebruikte kleuren,
bijvoorbeeld:
color : #acaf2c;
Door de code in een andere kleurcode te veranderen kun je de gebruikte kleuren van
bijvoorbeeld de tekstkleur veranderen. Een kleurcode begint altijd met een # en wordt
afgesloten met een punt komma. Heb je een kleur verandert, css bestand opslaan en
de index.html in de browser bekijken. Je ziet direct de verandering. Ben je er niet
tevreden over, tabblad ‘Bewerken’ en dan kiezen voor ‘ongedaan maken’.
Door er veel mee te experimenten zul je er vanzelf enige handigheid in krijgen.
Het is vaak een kwestie van vallen en opstaan en wanneer iets mislukt gewoon weer
helemaal opnieuw beginnen en diep zuchten.
Als je meerdere css templates zoekt, dan brengt Google je daar vanzelf naar toe met de zoek opdracht: css templates
Deze website is gemaakt met het voorbeeld Model06.html uit de map templates van de CD.
