Met Dreamweaver sjablonen (templates) bouw je één keer de vaste opbouw van je website: de kop, het menu, de voettekst en de verwijzingen naar je stijlbladen. Elke pagina die je op dat sjabloon baseert, neemt die opbouw over. Wil je later het menu aanpassen, dan doe je dat één keer in het sjabloon en werkt Dreamweaver alle pagina’s voor je bij.

Zeker bij sites met meer dan een paar pagina’s scheelt dat veel tijd en voorkom je dat pagina’s ongemerkt uit elkaar gaan lopen. In dit artikel lees je hoe sjablonen werken, hoe je een sjabloon maakt, bewerkbare gebieden toevoegt, pagina’s op basis van een sjabloon maakt en alles bijwerkt na een wijziging.

Hoe werken sjablonen in Dreamweaver?

Een Dreamweaver-sjabloon is een gewoon HTML-bestand met de extensie .dwt (Dreamweaver Template). Dreamweaver bewaart sjablonen altijd in de map Templates in de hoofdmap van je site. Die map wordt automatisch aangemaakt zodra je je eerste sjabloon opslaat.

In een sjabloon is standaard alles vergrendeld. Jij geeft aan welke delen per pagina mogen verschillen: de bewerkbare gebieden (editable regions). Op een pagina die op het sjabloon is gebaseerd, kun je alleen in die gebieden typen. De rest blijft gekoppeld aan het sjabloon.

Belangrijk om te weten: sjablonen zijn een functie van Dreamweaver zelf. Je bezoekers merken er niets van. Wat online komt te staan, zijn gewone HTML-pagina’s waarin het sjabloon al is verwerkt. Je hebt dus geen speciale server of PHP nodig.

Een sjabloon maken

Zorg eerst dat je werkt binnen een gedefinieerde site. Sjablonen werken niet zonder site. Heb je nog geen site opgezet, volg dan eerst het stappenplan voor je eerste website in Dreamweaver.

De handigste aanpak is om een pagina te nemen die al af is, bijvoorbeeld je startpagina, en die om te zetten naar een sjabloon:

1. Open de pagina die als basis moet dienen.
2. Kies Invoegen > Sjabloon > Sjabloon maken (Insert > Template > Make Template).
3. Kies je site en geef het sjabloon een duidelijke naam, bijvoorbeeld basis.
4. Klik op Opslaan. Dreamweaver vraagt of links moeten worden bijgewerkt; kies Ja, zodat paden naar CSS en afbeeldingen vanuit de map Templates blijven kloppen.

Je kunt ook een leeg sjabloon maken via het paneel Elementen (Assets), dat je opent via Venster > Elementen (Window > Assets). Klik daar op het pictogram voor sjablonen en daarna op de knop voor een nieuw sjabloon.

Bewerkbare gebieden toevoegen

Een sjabloon zonder bewerkbare gebieden is onbruikbaar: je kunt dan op geen enkele pagina eigen inhoud kwijt. Voeg daarom minimaal één bewerkbaar gebied toe, meestal rond de hoofdinhoud.

1. Open je .dwt-bestand.
2. Selecteer het deel dat per pagina mag verschillen, of klik op de plek waar het gebied moet komen.
3. Kies Invoegen > Sjabloon > Bewerkbaar gebied (Insert > Template > Editable Region).
4. Geef het gebied een unieke naam zonder speciale tekens, bijvoorbeeld inhoud.

In de code ziet een bewerkbaar gebied er zo uit:

Paginatitel
Hier komt de inhoud van de pagina.

Dreamweaver plaatst in de <head> standaard ook bewerkbare gebieden, zoals een gebied voor de paginatitel. Zo kun je elke pagina een eigen <title> en eigen metatags geven, wat belangrijk is voor zoekmachines. Laat die gebieden dus staan.

Naast bewerkbare gebieden zijn er ook herhalende gebieden, optionele gebieden en bewerkbare tagkenmerken. Daarmee kun je bijvoorbeeld per pagina een andere klasse op de <body> zetten. Voor de meeste sites heb je genoeg aan gewone bewerkbare gebieden. De officiële uitleg vind je in de Adobe-handleiding Bewerkbare gebieden maken in sjablonen.

Pagina’s maken op basis van een sjabloon

Heb je je sjabloon opgeslagen, dan maak je er nieuwe pagina’s mee:

1. Kies Bestand > Nieuw (File > New).
2. Kies in het venster Nieuw document de categorie met sitesjablonen (Site Templates).
3. Selecteer je site en daarna het sjabloon.
4. Laat de optie aanstaan om de pagina bij te werken als het sjabloon verandert, en klik op Maken.
5. Sla de nieuwe pagina op, bijvoorbeeld als over-ons.html, in je sitemap (niet in de map Templates).

Je kunt een sjabloon ook vanuit het paneel Elementen naar een nieuw, leeg document slepen. Bestaande pagina’s koppel je aan een sjabloon via het menu Extra > Sjablonen (Tools > Templates) met de optie om het sjabloon toe te passen op de pagina. Dreamweaver vraagt dan in welk bewerkbaar gebied de bestaande inhoud terecht moet komen.

Op een pagina op basis van een sjabloon zie je in Ontwerp en Live duidelijk welke delen bewerkbaar zijn. In de code herken je zo’n pagina aan opmerkingen zoals deze:

...

Over ons
Eigen tekst van deze pagina.

Laat die opmerkingen staan. Dreamweaver gebruikt ze om de pagina later te kunnen bijwerken.

Een sjabloon wijzigen en pagina’s bijwerken

Nu komt het grote voordeel. Stel dat je een nieuw menu-item wilt toevoegen:

1. Open het sjabloon, bijvoorbeeld via het paneel Elementen of met Extra > Sjablonen > Gekoppeld sjabloon openen (Tools > Templates > Open Attached Template) vanuit een pagina.
2. Pas het menu aan in een vergrendeld deel van het sjabloon.
3. Sla het sjabloon op. Dreamweaver vraagt of de pagina’s die op dit sjabloon zijn gebaseerd, moeten worden bijgewerkt.
4. Klik op Bijwerken (Update). Je krijgt een logboek te zien met de bijgewerkte bestanden.

Heb je de vraag weggeklikt, of wil je later alles nog eens controleren? Kies dan Extra > Sjablonen > Pagina’s bijwerken (Tools > Templates > Update Pages). Daar kies je of je de hele site bijwerkt of alleen de bestanden die een bepaald sjabloon gebruiken. Voor alleen de open pagina is er Huidige pagina bijwerken (Update Current Page).

Hoe je de gewijzigde bestanden naar je server stuurt, lees je in je website online zetten via FTP of SFTP.

Valkuilen en goede gewoonten

• Bewerk sjabloonpagina’s in Dreamweaver. Pas je de vergrendelde delen van een pagina in een andere editor aan, dan worden die wijzigingen bij de volgende update overschreven.
• Gebruik vaste, duidelijke namen voor gebieden. Hernoem je een bewerkbaar gebied later, dan vraagt Dreamweaver bij het bijwerken waar de bestaande inhoud naartoe moet.
• Houd het aantal sjablonen beperkt. Meestal volstaan één of twee sjablonen, bijvoorbeeld een voor gewone pagina’s en een voor de startpagina.
• Loskoppelen kan altijd. Wil je een pagina volledig vrij bewerken, kies dan Extra > Sjablonen > Loskoppelen van sjabloon (Detach from Template). De pagina wordt dan een gewone HTML-pagina en krijgt geen updates meer.
• Werk je met Git? Zet de map Templates gewoon in je repository, zodat je wijzigingen aan sjablonen kunt terugdraaien.

Conclusie

Dreamweaver sjablonen zijn ideaal om een site met meerdere pagina’s consistent en onderhoudbaar te houden. Je maakt een .dwt-bestand, geeft met bewerkbare gebieden aan wat per pagina mag verschillen, bouwt je pagina’s op basis van dat sjabloon en werkt bij een wijziging alles in één keer bij. Vergeet daarna niet de bijgewerkte pagina’s te uploaden. Wil je ook de opmaak centraal beheren, combineer sjablonen dan met één gedeeld stijlblad.

Veelgestelde vragen