Een website maken op basis van een van de templates die je op deze site vindt is een makkelijke manier om te beginnen met je site. Hoe pas je een template aan?
Heb je een template uitgekozen om te gebruiken voor het maken van je eigen site? Dan moet je het nog aanpassen naar je eigen voorkeur, je eigen tekst erop zetten, foto’s veranderen en misschien iets aan het kleurgebruik doen. Hier lees je stap voor stap hoe dat in zijn werk gaat.
Stap 1
Als eerste moet je het zip-bestand van het template downloaden naar je eigen computer en de map uitpakken. Dat uitpakken van een zip-bestand kan in Windows gewoon door op het bestand te dubbelklikken en te klikken op ‘alle bestanden uitpakken’. Je krijgt dan een scherm te zien waar je een map kunt selecteren om de bestanden naar toe te kopiëren. In een zip-bestand met template zitten een aantal vaste bestanden. Zo vind je er de homepagina (index.html), alle pagina’s (pagina1.html, contact.html etc.), een style.css bestand met de stylesheets van je site en een map ‘images’ met de afbeeldingsbestanden die op de site gebruikt worden.
Als het template uitgepakt is kun je allereerst eens op index.html dubbelklikken. Het template opent dan in je browser (bijv. Chrome of Internet Explorer). Natuurlijk wil je hier vervolgens het een en ander aan gaan veranderen, de tekst bestaat bijvoorbeeld grotendeels uit “dummy-tekst”. Daar moet je je eigen webteksten gaan neerzetten.
Stap 2
Ga nu opnieuw naar de map met uitgepakte bestanden. Klik met de rechtermuisknop op index.html en kies voor “Openen met kladblok”.
In het index.html bestand zie je alle tekst van je homepage in HTML-tags staan.
Hier kun je alles veranderen wat je aan de homepage anders wil hebben. Verander bijvoorbeeld de titel van de webpagina “<title>Dit is de titel van je homepage</title>” door je eigen titel en sla het bestand op. Open het opnieuw in de browser, en je zult zien dat de titel bovenaan in de browserbalk veranderd is. Verander ook de “Lorem Ipsum”-tekst onder “Welkom op deze website” eens en bekijk het resultaat.
Afbeeldingen veranderen
De afbeeldingen in de templates kun je ook inruilen voor je eigen afbeeldingen. Bij het template Provence kun je bijvoorbeeld de paginabrede afbeelding op de homepage wijzigen. Kies een eigen afbeelding uit en maak deze even groot als de huidige afbeelding (930 bij 230 pixels). Verander nu de HTML-code die de afbeelding regelt:
<div id="splash"> <img src="images/lavendel.jpg" width="930" height="230" alt="" /> </div>
Vul voor lavendel.jpg je eigen bestandsnaam in.
De header-afbeelding in het template Skyline is op een andere manier te wijzigen. Kies een eigen afbeelding uit en maak deze 890 bij 200 pixels groot. Sla deze nu op als header.jpg in de map images. Je moet daarbij de vorige header.jpg overschrijven. Ververs nu de site in je browser, en je zult zien dat de header-afbeelding aangepast is.
Kleuren wijzigen
Om het kleurgebruik op de site te veranderen, zul je het CSS-bestand van het template moeten openen in kladblok. Wil je bijvoorbeeld de achtergrondkleur veranderen, zoek dan in style.css deze code op:
body {
background: #555555;
}
Vervang de cijfers (555555) door een eigen kleur. Hier vind je een site waarop je de kleurcodes van de verschillende kleuren terug kunt vinden.
Je kunt op deze manier alle pagina’s van de templates openen in kladblok en de teksten en afbeeldingen inwisselen voor die van jezelf. Experimenteer naar hartelust, daar leer je het meest van. Gaat het mis, en maak je het template “stuk”? Open dan gewoon het zip-bestand van het oorspronkelijke template opnieuw en probeer het nog een keer! Ook slim is om, als je al veel veranderd hebt, zo af en toe een back-up te maken van je website.