Je eigen website
Zelf een site maken, hoe doe je dat?

Zoeken

You are here: Home ∼ Templates gebruiken

Templates gebruiken

Published by admin on 20 november 2012

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.

Posted in De basis Tagged Gratis templates, Template veranderen, Templates aanpassen, Websitemodel aanpassen
← Previous Next →

Hoe maak je zelf je eigen site?

  • De basis
    • HTML of Online sitebuilder
    • Kies een HTML-editor
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Een MySQL-database
    • PHP op je eigen computer
    • Je site online zetten met FTP
    • Zelf een webpagina maken – een handleiding
    • Gratis website templates
      • Templates gebruiken
  • Hosting en domeinnaam kiezen
    • Gratis hosting
    • Goedkope hosting
    • Gratis blog maken
    • Een domeinnaam registreren
  • Voorbeelden om je website uit te breiden
    • PHP-includes
    • Slideshow op je site
    • Een lightbox voor foto’s
    • Reacties via Facebook installeren
    • Kleuren kiezen
    • Google Analytics installeren
  • WordPress
    • WordPress installeren
    • WordPress-plugins en thema’s installeren
    • Gratis WordPress-thema’s
    • 10 handige WordPress-plugins
    • WordPress en plugins updaten
  • Bezoekers trekken
    • Hoger in Google
      • Hoger in Google – Opbouw van je site
      • Hoger in Google – Webteksten schrijven
    • Social media marketing
    • Een gratis nieuwsbrief maken
  • Geld verdienen met je website
    • Google Adsense op je website
    • Geld verdienen als affiliate

Copyright © 2021 Je eigen website.