Sjablonen en bibliotheek Items

Een sjabloon is een pagina op basis waarvan je nieuwe pagina's maakt. In de sjabloon zet je alle elementen die op elke pagina moeten verschijnen. Bijvoorbeeld het logo en een navigatie balk. In de pagina's die je met het sjabloon maakt kun je dan nog inhoud toevoegen, speciaal voor die pagina.
Zo kun je een site bouwen waar de pagina's er voor een bepaald deel identiek uitzien. Dit is wat er in het sjabloon staat. Een sjabloon bevat daarnaast delen die voor elke pagina die met het sjabloon gemaakt wordt, vrij invulbaar zijn. Dit geef je in het sjabloon aan als bewerkbaar gebied.
Als je een pagina maakt met het sjabloon, kun je in de bewerkbare gebieden de inhoud van de pagina plaatsen. De rest kun je niet bewerken in de pagina. Dat is de inhoud van het sjabloon. Dat kun je enkel in het sjabloon veranderen.

Wanneer het sjabloon aangepast wordt, kun je alle pagina's die het sjabloon gebruiken, in een keer veranderen.
Voeg je bijvoorbeeld een link toe in de navigatie balk in je sjabloon, dan kun je daarna alle pagina's updaten die met het sjabloon zijn gemaakt.
Dit maakt het onderhoud van je site makkelijk: verander je iets aan het sjabloon pagina, dan zullen de veranderingen doorgevoerd worden op alle pagina's die zijn gemaakt op basis van dit sjabloon.
Een ander voordeel van sjablonen is dat ze zorgen voor een consistente vormgeving: alle delen van het sjabloon zullen op elke pagina gemaakt met het sjabloon identiek zijn, en op precies dezelfde positie staan.

Het werken met sjabloon's wordt hier uitgelegd aan de hand van een praktijk voorbeeld. Het is goed de verschillende handelingen na het lezen meteen uit te voeren in Dreamweaver.

Een sjabloon pagina creëren

kies Bestand > Nieuw, en in het dialoogvenster Nieuw Document: Lege pagina (of Lege sjabloon), en als Pagina Type: HTML sjabloon. Als layout, in de rechter kolom, gaan we uit van <geen>.

Er is nu een nieuwe pagina gemaakt, die er in het code venster iets anders uitziet dan een gewone html pagina:

De groene commentaar regels geven sjabloon code aan. Dreamweaver herkent deze en zal overeenkomstig actie ondernemen. Omdat het hier om standaard HTML-commentaar regels gaat, is het mogelijk met een ander programma "om het sjabloon heen te werken". Enkel Dreamweaver "begrijpt" deze code.
In de code staan twee zogenaamde bewerkbare gebieden. Dit zijn gedeelten van de pagina, die te veranderen zijn op elke pagina die op basis van het sjabloon gemaakt wordt. Dat zijn de titel, en de head sectie. Logisch, want elke pagina moet een andere titel kunnen krijgen, en ook elke pagina moet andere inhoud in de head kunnen krijgen. Bv metatags, of javascripts die toegevoegd worden als er rollovers of andere elementen worden toegevoegd die met javascript werken.

Inhoud in het sjabloon plaatsen

We gaan nu een klein menu in het sjabloon maken. Een tabel met een rij, vier kolommen, met daarin de woorden rood, geel en blauw in de eerste drie. Dat ziet er ongeveer als volgt uit:

Dit willen we deel laten uitmaken van het sjabloon, dwz dat komt op elke pagina die straks met het sjabloon gemaakt wordt.

Een bewerkbaar gebied maken

Nu willen we in elke pagina ook eigen inhoud kunnen zetten. We voegen weer een tabel in, van 1 bij 1, breedte 200 pixels. Klik daarna in de tabel en kies uit het hoofdmenu Invoegen > sjabloon objecten > Bewerkbaar gebied

Een dialoogvenster opent

Geef de het bewerkbare gebied een toepasselijke naam. We hebben nu een plaats in het sjabloon waar inhoud kan worden geplaatst die op elke pagina verschillend kan zijn. De tabel met de kleur namen is niet bewerkbaar, die zal er dus op elke pagina identiek uitzien. In het document venster ziet de pagina er nu zo uit:

Het groene gebied geeft aan dat het een bewerkbaar gebied is. De naam staat in een label, en ook nog eens in het gebied zelf. We maken nu nog links in het menu naar de verschillende kleuren pagina's, en gaan dan die pagina's maken.

Bij het opslaan van de pagina, Opslaan als sjabloon, verschijnt het volgende dialoogvenster:

De map Templates ????

Als je gewoon Opslaan als kiest, en je hebt de pagina aangemaakt als sjabloon, dan zul je in de Opslaan dialog de map sjablonen zien staan. Wat is dat? Dit is een map binnen de site, speciaal voor sjablonen. sjablonen moeten altijd in deze map staan. Sla ze nooit ergens anders op. Dit is deel van het werken met sjablonen. Je hoeft de map sjablonen of de sjablonen zelf nooit te publiceren op het web. Alle info die nodig is, wordt in de pagina's gezet die met het sjabloon worden gemaakt.

Je kunt ook een pagina die je als HTML of een andere soort pagina bent begonnen, op deze manier opslaan. Als je een sjabloon wilt opslaan zonder bewerkbare gebieden, dan kan dat, maar bij het afsluiten ervan krijg je deze waarschuwing:

Je kunt gewoon doorgaan. Je kunt zelfs een bewerkbaar gebied invoeren in een gewone pagina, zonder hem eerst op te slaan als een sjabloon, en Dreamweaver zet 'm dan zelf om in een sjabloon.

Pagina's maken met het sjabloon

Kies uit het hoofdmenu Bestand > nieuw. Het dialoogvenster Nieuw Document opent. Kies voor Pagina van sjabloon, en selecteer in de kolom Site de site waarin je werkt, en in de kolom sjablonen het sjabloon dat je wilt gebruiken. Op dat moment zie je in de rechter kolom een voorbeeld van het sjabloon. Klik vervolgens op Maken.

Wat je nu ziet is bijna hetzelfde als de sjabloon pagina zelf, alleen staat er een geel kader om de pagina heen, en in de rechterbovenhoek zie je een kader met de naam van de sjabloon. Indien je nu de links zou willen aanpassen, kan dat niet. Je kunt dit niet bewerken. Je kunt alleen dingen toevoegen in het deel binnen het groene kader, met het label waar de naam van het bewerkbaar gebied boven staat.

Deze pagina wordt de rood.html, dus we voegen iets toe in het bewerkbaar gebied, geven de pagina een titel en slaan de pagina op als rood.html . De code toont wat mogelijk is in deze opzet:

Alles wat grijs is, is niet te bewerken. Het is onderdeel van de sjabloon. Toen het sjabloon werd gemaakt, is simpelweg geklikt binnen een tabel cel, en dat is bewerkbaar gemaakt. Er kan dus niets veranderd worden aan de tabel, of zelfs aan de cel daarin. Wel was het mogelijk een nieuwe tabel in de cel te plaatsen, de achtergrond rood te maken, en er tekst in te typen.

Hetzelfde kan nog tweemaal gedaan worden, voor een gele pagina, en een blauwe. Er zijn dan drie pagina's gemaakt op basis van het sjabloon. Leuk tot dusver, maar wat is de winst? De eerste winst is dat de tabel met de links niet iedere keer ingevoegd hoeft te worden, en dat die altijd exact op dezelfde plaats staat in de pagina.

Het grote voordeel wordt duidelijk op het moment dat het sjabloon zelf veranderd wordt.

Een sjabloon aanpassen

Open vanuit het Bestanden paneel uit de map Templates de sjabloon "kleuren". Voeg in de bovenste tabel een nieuwe kleur bij, bv groen. Sla de pagina op. Er verschijnt nu een dialoogvenster:

Alle pagina's die gebruikmaken van het sjabloon, zullen aangepast worden, en de veranderingen in het sjabloon overnemen. De bewerkbare gebieden worden niet aangetast. Klik Ja.
Dreamweaver zal eerst de site scannen, en de pagina's worden vernieuwd.

Tenslotte een verslag welke pagina's geüpdatet zijn. Pagina's die op dit moment geopend zijn binnen DW, zullen opgeslagen moeten worden, want ze zijn veranderd. Andere pagina's worden automatisch opgeslagen.

Werken met bewerkbare gebieden

Je moet goed opletten wat je met bewerkbare gebieden doet. Als je een bewerkbaar gebied verwijderd, en de sjabloon opslaat, dan wordt de sjabloon opnieuw geconstrueerd, en moet je een nieuwe lokatie aanwijzen voor de inhoud van dat verdwenen bewerkbaar gebied. Doe je dat niet goed, dan loop je het risico al je inhoud in dat bewerkbaar gebied in alle pagina's te verliezen.
Als voorbeeld is de naam van het bewerkbaar gebied veranderd van "kleurtabel" in "content". Bij het opslaan van de sjabloon opent het onderstaande dialoogvenster, op het moment dat de pagina's geüpdatet worden.

Inconsistente gebiedsnamen. Dreamweaver vindt nu in de pagina's een bewerkbaar gebied "kleurtabel", maar die bestaat niet meer. Wat moet met de inhoud van dat gebied gebeuren?
Selecteer de regel waar de naam van het gebied staat dat een probleem vormt (kleuren), en kies dan uit het uitklap menu wat je ermee wilt doen. Je kunt de inhoud van het gebied verplaatsen naar verschillende locaties:
Nergens
De inhoud van het gebied zal verwijderd worden in alle pagina's die gebruik maken van de sjabloon
kleurtabel
Dit is de naam waarin het oorspronkelijke gebied is veranderd. In dit geval zouden we dit willen kiezen. In het uitklap menu worden alle bewerkbare gebieden getoond die in de sjabloon staan.
Doctitle
De titel tag, een standaard bewerkbaar gebied
Head
De head tag, ook een standaard bewerkbaar gebied

Op deze manier zijn met sjablonen niet alleen de gebieden die overal hetzelfde zijn (de vaste gebieden in het sjabloon), door de hele site in één operatie te wijzigen, maar ook de blokken content, (de bewerkbare gebieden) kunnen verplaatst of verwijderd worden, ongeacht de inhoud ervan.
Het spreekt voor zich dat het slim is om bij ingrijpende acties eerst een backup te maken van de site, want content die verwijderd is, zo'n actie kan niet zomaar ongedaan worden gemaakt omdat de bestanden meteen worden opgeslagen op de harde schijf. Ook de wijzigingen in pagina's die veranderd worden terwijl ze niet geopend zijn, kunnen niet zomaar ongedaan gemaakt worden.

Wees dus voorzichtig met het wijzigen van bewerkbare gebieden, en het veranderen van de namen van sjablonen. Vermijd deze acties gewoon als het niet perse nodig is. Deze acties kunnen gevolgen hebben over de hele site, die niet meer terug te draaien zijn.

Andere sjabloon functies

In het hoofdmenu onder Wijzigen > Sjablonen zijn nog een aantal opties te vinden voor het werken met sjablonen.

Sjabloon topassen op pagina
Je kunt hiermee een bestaande pagina op deze manier aan een sjabloon koppelen. Eerst opent het dialoogvenster Sjabloon selecteren

na het sjabloon te hebben gekozen, moet je alle inhoud van de pagina in een bewerkbaar gebied plaatsen.

Loskoppelen van sjabloon
Hiermee wordt alle sjabloon markup (code) verwijderd uit de pagina. Er veranderd niets aan het uiterlijk van de pagina, maar de pagina is niet meer gekoppeld aan het sjabloon. De delen van de pagina die onderdeel waren van het sjabloon, staan nog op de pagina, maar zijn nu gewoon aan te passen.

Gekoppelde sjabloon openen
Open de sjabloon waar de pagina mee gemaakt is.

Sjabloon syntaxis controleren
Dit is vooral bedoelt als je met de geavanceerde sjabloon toepassingen werkt, zoals variabelen en expressies. Je kunt dan controleren of de code juist is voordat je de sjabloon opslaat.

Huidige pagina bijwerken
Om de huidige pagina up te daten.

Pagina's bijwerken
Alle pagina's updaten die met het sjabloon zijn gemaakt. Je kunt bij het maken van een sjabloon kiezen of de pagina's automatisch geupdate worden, en dat niet doen. Ook kun je nog voor "Nee" kiezen als je de sjabloon opslaat en de vraag "Update pages" tevoorschijn komt. Je kunt dan bv eerst een enkele pagina updaten, als je niet zeker bent van je zaak, en als het resultaat goed is, alsnog alle pagina's updaten.

Exporteren zonder opmaakcodes
Exporteer de site zonder de sjabloon code. Zo kun je de site publiceren zonder dat er code in voorkomt die te maken heeft met sjablonen. Er wordt een kopie van de site gemaakt zonder de sjabloon code. Het volgende dialoogvenster opent.

Kies een folder buiten de huidige site.
Keep sjabloon data files zal een extra XML-bestand van de op sjablonen gebaseerde pagina's opslaan, zodat je nog een versie van de pagina's met sjabloon markup hebt ook.
Alleen gewijzigde bestanden extraheren, als je enkel de veranderde bestanden op wilt slaan. Als je deze actie al eens uitgevoerd hebt, hoef je dus niet weer de hele site te exporteren, maar kun je volstaan met het deel dat veranderd is.

Sjabloon opmaak verwijderen
Selecteer een bewerkbaar gebied binnen een sjabloon, en kies deze actie om het bewerkbare gebied te verwijderen.

De opties onderin het menu zijn voor Herhaal gebieden. Er zijn nog een aantal andere bewerkbare gebieden die je kunt gebruiken in sjablonen, als je er eenmaal mee vertrouwd bent. Het gewone bewerkbare gebied is echter het belangrijkste, en volstaat meestal.

bibliotheek Items

Wat is een Bibliotheek Item?
Het is een stukje van een pagina, dat je opslaat als apart brokje informatie. Je kunt dat dan op elke gewenste plaats invoegen.
Je kunt Bibliotheek Items terugvinden in het Middelen paneel, als je op het onderste knopje klikt. (Het opengeslagen boekje) Als je het item bewerkt, wordt het overal veranderd waar het gebruikt is. Het is als een sjabloon zonder bewerkbaar gebied. Het is ook geen gehele pagina, maar een stukje ervan, dat geplaatst moet worden in het zichtbare gedeelte van de pagina.
Net als sjablonen hebben Bibliotheek Items hun eigen map: Library. Deze wordt automatisch aangemaakt op het moment dat je het eerste item maakt, en je moet altijd de Bibliotheek Items in deze folder opslaan.

Hoe maak je een Bibliotheek item?
- Selecteer het gedeelte van de pagina waar je een Bibliotheek Item van wil maken, en sleep het in het Assets venster wanneer de categorie Bibliotheek is geselecteerd.
- Maak een selectie, en kies uit het hoofdmenu Wijzigen > Bibliotheek > Object aan Bibliotheek toevoegen.
- Klik onderin in het paneel op het knopje Nieuw Bibliotheek Item. (Knopje met het plusje)
- Kies Bestand > Nieuw en selecteer Lege pagina, Bibliotheek Item.

Hoe gebruik je een Bibliotheek item?
- Sleep het item vanuit het Middelen paneel naar de plaats waar je het in wilt voegen in de pagina.
- Selecteer het item in het Middelen paneel en klik onderin op de knop Invoegen.
Een Bibliotheek item dat in een pagina is geplaatst, is te herkennen aan een gele achtergrond. Als je het item selecteert in de pagina, dan wordt het geheel gearceert weergegeven.

Hoe bewerk je een Bibliotheek Item?
Je kunt op een item in het paneel dubbelklikken om het te openen in Dreamweaver om te bewerken. Je kunt dan de bewerkingen uitvoeren die je wilt. Sla het item daarna op in de folder Library. Er wordt dan gevraagd of je het item wilt veranderen in de pagina's waar het gebruikt is.

Een Bibliotheek Item opnieuw creëren.
Als een Bibliotheek item is verwijderd uit het Middelen paneel, zul je toch op de pagina's het item nog zien staan. Er wordt geen code aangepast in de pagina's die het item gebruiken. De arcering duidt er ook op, dat het een Bibliotheek Item is.
Je kunt het item opnieuw creëren door het op de pagina te selecteren, en dan in het Eigenschappen paneel op de knop Opnieuw maken te klikken. Het Bibliotheek Item is dan weer in het Middelen paneel terug te vinden en opnieuw in te voegen in pagina's.

Klik op de knop Loskoppelen van origineel om de code in de pagina los te koppelen van het Bibliotheek Item. Klik op Openen om het Bibliotheek Item te openen binnen Dreamweaver en het te bewerken.