Learnit

11. Libraries en Templates

Dreamweaver heeft een aantal opties om tijd te besparen en het maken en onderhouden van internetsites te vergemakkelijken. Twee belangrijke hiervan zijn de library en de templates. In beide gevallen gaat het om centraal bewaarde objecten. Deze objecten kun je toepassen op verschillende plekken op de website, maar ze worden maar één keer opgeslagen. Als ze gewijzigd worden, dan gebeurt dit centraal en worden de wijzigingen overal doorgevoerd waar het object is toegepast. In de library worden elementen opgeslagen zoals afbeeldingen of logo's die op meerdere plaatsen op de site kunnen worden toegepast. Met templates maak je een standaard pagina waarin een variabel deel is opgenomen dat per toepassing ingevuld kan worden. Het is dus een sjabloon van een HTML pagina. Het werken met libraries lijkt heel erg op het werken met templates.

11.1. Library

Stel het bedrijf waar je een enorme muziek internetsite voor maakt heeft een slogan. Jij maakt een internetsite voor ze en als je bijna klaar bent krijg je een mailtje dat de slogan is veranderd. Of je het ook even op de site verandert. Dan zou je willen dat je een library item hebt toegepast.

Het werken met de library heeft twee voordelen. Ten eerste kun je snel een groep elementen invoegen. Ten tweede kun je deze elementen, overal waar je ze hebt toegepast, in één handomdraai veranderen door het element in de library te wijzigen. Een library item kan woorden bevatten, maar ook afbeeldingen, tabellen, layers en Flash animaties.

Als we willen werken met de library dan moeten we eerst het library paneel openen.

Oefening 11.1. Libary Paneel openen

1. Kies in de menubalk de menu optie Window.
2. Kies de optie Assets.

De Library is een gedeelte van het Assets Paneel, en te herkennen aan .

Figuur 11.1: Assets paneel, library.

11.1.1. Toevoegen library item

Figuur 11.2: Muziekslogan toegevoegd aan de Library.

Oefening 11.2. Libary item aanmaken.

1. Open de pagina index.htm.
2. Voeg de tekst “Music is the mood maker” in onder het navigatiemenu.
3. Geef de tekst de grootte 36 en de kleur wit.
4. Sleep het geselecteerde gedeelte in het witte venster van het Assets paneel.
5. Geef het library item de naam: Muziekslogan.

Je ziet nu dat de slogan (of andere groep elementen) een kleur heeft gekregen. Dit geeft aan dat het een library item is. Dit item is nu centraal opgeslagen. Omdat het centraal is opgeslagen is het ook heel makkelijk aan een andere pagina toe te voegen.

Oefening 11.3. Libary item aanpassen op de pagina.

1. Open de pagina's klassieke_muziek.htm, jazz.htm, house.htm en wereldmuziek.htm.
2. Plaats je muis boven de naam van het library item.
3. Klik en sleep hem het document venster in.
4. Doe dit bij alle pagina's.

Je kunt dit library item dus op alle pagina's plaatsen door het item op de betreffende pagina te slepen.

11.1.2. Updaten

Als de slogan nu veranderd moet worden dan is het mogelijk om alleen het library item te veranderen. Je hoeft dan niet op al de verschillende pagina's de verandering aan te brengen, alleen maar in de library:

TIP: Voordat je een library item gaat aanpassen is het aan te raden dat je de pagina's waar het op gebruikt is afsluit. Hierdoor voorkom je dat pagina's die openstaan nog een oude versie van het library item weergeven en je op het verkeerde been zetten.

Oefening 11.4. Libary item aanpassen.

1. Selecteer het library item, Muziekslogan uit het library paneel.
2. Dubbelklik op de tekst van het item (bovenste gedeelte van het library paneel).
3. Je ziet een document venster met de tekst daarin. Bovenin de blauwe balk zie je <<library item>> staan. Je kunt het library item nu aanpassen.
4. Vervang de tekst “Music is te mood maker” door “Music the mood maker”
   Geef de volgende opmaak:
   Lettertype: Century Gothic
   Size: 24 pixels
   Kleur: wit (#FFFFFF).
5. Sla het library item op.
6. Onderstaand venster wordt geopend.
   Figuur 11.3: Update Library items.
   
7. Druk op Update, nu wordt het library item op alle webpagina's aangepast.

Je kunt nu al de pagina's bekijken waar het item op geplaatst is. Je zult zien dat het overal veranderd is. Dit is een beduidend snellere manier om een groepje elementen op een aantal pagina's te veranderen dan als je het op iedere pagina zou moeten doen.

11.2. Templates

Een Template is een sjabloon van een complete internetpagina. Het sjabloon bewaar je net zoals het library item in een gedeelte van het Asset Paneel. Het is mogelijk om op basis van een Template snel nieuwe pagina's te maken en deze zijn tevens centraal te veranderen van opmaak! Binnen de centraal opgeslagen opmaak kun je plekken open laten waarin je per pagina inhoud gaat plaatsen.

11.2.1. Een Template maken

Het maken van een Template is betrekkelijk simpel. Je maakt eerst een mooie opmaak, bijvoorbeeld door middel van tabellen of layers, compleet met logo's afbeeldingen etc. Daarna bewaar je deze opmaak als template.

Oefening 11.5. Template aanmaken.

1. Maak een nieuwe pagina aan.
2. Open de menuoptie Page Properties en geef de volgende opmaak:
   Category: Appearance
   Page font: Georgia, Times New Roman, Times, Serif
   Size: 12 pixels
   Tekst color: #CCFFCC
   Background color: #330000
   Category: Links
   Size: 14 pixels
   Link color: #FFFFFF
   Visited links: #660033
   Rollover links: #660000
   Underline style: Show underline only on rollover
   Category: Headings
   Heading 1: 16 pixels
   Heading 2: 14 pixels
3. Druk op File.
4. Druk op Save as Template.
5. Geef het Template de naam muziek.
6. Druk op Save.

Figuur 11.4: Pagina opslaan als template.

Het bestand waar je mee begon is nu een Template geworden. Je kunt dit zien aan het feit dat er <<Template>> in de blauwe bovenbalk staat.

Als we deze pagina zouden gebruiken als template dan zouden we er niets aan kunnen veranderen op de pagina's waar hij wordt toegepast. Je moet dus nog wel even een aantal plekken aangeven waar inhoud in komt te staan die per pagina verschilt. Zulke plekken heten editable regions.

11.2.2. Editable region

Een editable region is een plek op een internetpagina (die op basis van een Template is gemaakt) waar tekst of andere inhoud kan worden gezet die per pagina verschilt. Je maakt een editable region op de volgende manier:

Oefening 11.6. Editable region maken.

1. We gaan de template die we in oefening 11.5 gemaakt hebben aanpassen.
2. Druk op Insert.
3. Druk op Template Objects.
4. Druk op Editable Region.
5. Geef de Editable Region de naam: body tekst.
6. Sla de Template op en sluit hem af.

Alleen op de plekken waar je een editable region neerzet kun je straks tekst plaatsen die per pagina verschilt!

TIP: Sluit het Template af als hij klaar is. Dat voorkomt verwarring. Als je zodadelijk een aantal pagina's gaat maken op basis van dit Template is hij moeilijk te onderscheiden van de andere pagina's.

11.2.3. Een Template toepassen

Je kunt nu heel snel pagina's maken met allemaal dezelfde opmaak. Dit kan je op twee manieren doen:

Oefening 11.7. template toepassen methode 1.

1. Open een nieuwe pagina.
2. Open het paneel Assets.
3. Druk op de knop Templates.
4. Selecteer de Template Muziek en sleep deze het document venster in.

Oefening 11.8. template toepassen methode 2.

1. Open een nieuwe pagina.
2. Druk op File.
3. Kies het tabblad Templates.
   Figuur 11.5: Toepassen van een Template op een nieuwe pagina.
   
4. Druk op New from Template.
5. Selecteer de naam Site “Muziek”.
6. Druk op Create.

Als je een pagina hebt gemaakt op basis van het Template dan zal je merken dat je er niets aan kan veranderen behalve aan de plekken die je als een editable region hebt aangegeven.

11.2.4. Aanpassen van een Template

Als je iets moet veranderen aan de opmaak van de pagina's van de internetsite dan hoef je alleen de Template aan te passen. Dit doe je op de volgende manier:

Oefening 11.9. template aanpassen.

1. Selecteer de Template Muziek in het Assets paneel.
2. Dubbelklik op de afbeelding van de Template(bovenste gedeelte van het Template paneel).
3. Je ziet een document venster met bovenin de blauwe balk <<Template>>.
4. Je kunt het Template nu aanpassen.
5. Pas het volgende aan:
   Editable region: ga met de cursor in de editable region staan en geef 15 enters.
   Tekst kleur: #CCFFFF.
6. Sla het Template op en sluit het venster af.

Oefening 11.10. Template koppelen.

1. Open de pagina's klassieke_muziek.htm en jazz.htm.
2. Open het paneel Assets.
3. Selecteer de Template Muziek.
4. Druk op de knop Apply onderaan in het Assets paneel.
5. Aangezien er in deze pagina's geen onderverdeling is gemaakt in Body en Head wordt het volgende venster getoond.
   Figuur 11.6: Template koppelen aan editable regions.
   
6. Selecteer van de Editable regions de Document body.
7. Selecteer in het dropdown menu achter Move content to new region, body tekst.
8. Doe dit op dezelfde manier voor de editable region Document head.
9. Druk op OK.
10. De template wordt toegepast.

Je kunt nu al de pagina's bekijken die op basis van het Template zijn gemaakt. Je zult zien dat de wijziging overal doorgevoerd is. Dit is een beduidend snellere manier om een aantal pagina's te veranderen dan als je ze stuk voor stuk moet aanpassen.

Tip: Als je een pagina die op basis van een Template is gemaakt eigenlijk niet meer wil laten mee veranderen met het Template dan is het mogelijk om de pagina los te koppelen van het Template:

Oefening 11.11. template loskoppelen.

1. Open de pagina klassieke_muziek.htm en jazz.htm.
2. De template muziek moet worden losgekoppeld van deze pagina's.
3. Klik op Modify.
4. Klik op Template.
5. Klik op Detach from Template.

11.3. Eindopdracht

Opdracht 11.3.1. Library item toevoegen.

1. Open de pagina house.htm.
2. Maak van het navigatiemenu een Library item.
3. Selecteer het navigatiemenu en kies Modify, library, Add Object to Library.
4. Voeg dit item toe aan de pagina index.htm.
5. De pagina ziet er dan als volgt uit.

Figuur 11.7: Voorbeeld toevoegen library item aan de index.htm pagina.

Opdracht 11.3.2. Template maken.

1. Maak een nieuwe pagina aan.
2. Met de volgende opmaak:
   Page font: Century Gothic, Century, Century Schoolbook.
   Size: 13 pixels
   Tekst color: #CCFFFF
   Background color: #660000
   Left margin: 2 cm
   Right margin: 2 cm
   Font: Georgia, Times New Roman, Times, Serif
   Size: medium
   Link color: #FFFFFF
   Visited links: #CCFFFF
   Rollover links: #00CCFF
   Underline style: Always underline
3. Voeg het library item navigatiemenu in.
4. Maak een editable region met de naam Body tekst.
5. Sla de template op onder de naam muziekgeschiedenis.

Figuur 11.8: Voorbeeld van de template muziekgeschiedenis.

Opdracht 11.3.2. Template koppelen.

1. Open de pagina's index.htm en jazz.htm. Als deze nog niet geopend zijn.
2. Selecteer de Template Muziekgeschiedenis.
3. Druk op de knop Apply onderaan in het Assets paneel.
4. De template wordt toegepast.
5. Pas de template toe op deze twee pagina's.

Figuur 11.9: Voorbeeld jazz.htm pagina na koppeling van de template wereldmuziek.

Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.