Voor je begint met het bouwen van je template dien je uiteraard eerst je design volledig afgerond te hebben en bepaald te hebben welke pagina’s er zijn binnen je website. Aan de hand van deze gegevens weet je dus ook hoeveel templates je moet bouwen.
Laten we voor het gemak even uitgaan van een basis website die opgebouwd is uit een homepage, een over ons pagina en een informatie pagina en een contact pagina.
Wat is een theme en template?
Tesla CMS heeft een eigen template engine die het heel eenvoudig maakt om snel websites te produceren. Ons systeem gaat uit van een theme en templates. Schrik niet want dit klinkt moeilijker dan dat het is.
- De templates bepalen puur waar elementen binnen je website geplaatst worden. Bijvoorbeeld een logo linksboven, het menu eronder horizontaal en de content (tekst, afbeeldingen, video, etc.) eronder.
- Een theme doet niks meer dan een sausje over de template heen leggen, dus de kleuren voor bijvoorbeeld tekst en afbeeldingen die je wilt gebruiken voor de look en feel van je website.
Hoe is een template opgebouwd?
Een template is opgebouwd uit een main.tpl, die eigenlijk het vaste kader van een website definieert (denk aan achtergrond afbeelding of kleur, het menu, logo en footer), en uit mappen voor elk element die je wilt definiëren. In elke map vind je minimaal een index.tpl die een bepaalde pagina indeling bepaald. Overige pagina elementen (die dus aan een pagina gekoppeld worden) kun je in de components map vinden (denk aan banners en formulieren).
Hoe is een theme opgebouwd?
Een theme is opgebouwd uit alle verdere styling objecten. Denk hieraan de kleur, font maar ook animaties en algemene plaatjes.
Als je in de public html map van je website kijkt zie je de map theme. Onder de theme map zijn de volgende mappen te zien:
- Images: Hierin kan je alle algemene plaatjes plaatsen die gebruikt worden in je webdesign, zoals achtergronden, of door css gebruikte afbeeldingen.
- CSS: Hieronder vallen de css files. De css die gebruikt wordt door het systeem heeft de naam layout.css.
Moet ik nog iets doen voordat ik een theme of template kan maken?
JA! Zoals vermeld moet je wel een goed basis begrip van html hebben, thats it! Indien je nog geen enkele kennis hebt helpen we je hieronder op weg om de basis kennis te vergaren van html en het omzetten van photoshop bestanden om je eigen website te bouwen.
- Basis HTML
Deze bron zal je de basis leren van html en enkele referenties tonen. http://www.handleidinghtml.nl/ *
- Slicen en basen
Slicen en basen is de vakterm voor het omzetten van een webdesign pagina, welke opgebouwd is in photoshop, naar html. Wat je dus doet is dat je alle design elementen van je website pagina gaat uitknippen en dat je de overige elementen zoals tekst, links, etc. in html plaatst. Slicen betekent het uitknippen van plaatjes uit je photoshop bestand en basen betekent het opbouwen van die plaatjes en style elementen in html en css. De tutorial hieronder helpt je eenvoudig op weg om DE slicer en baser te worden J
http://www.webdesign.org/html-and-css/tutorials/how-to-slice-the-cleanportfolio-psd-layout.21011.html *
- W3C
Het Web Consortium (W3C) is in het leven geroepen om regels op te stellen voor het coden die bijna elke browser ondersteund. Het is heel belangrijk om “schone” code op te leveren. Dit wordt niet alleen goed geïndexeerd door de zoekmachines maar maakt je website ook sneller. Test dus altijd je pagina’s via onderstaande W3C validator.