
Dreamweaver-sjablonen
Wanneer een HTML-pagina wordt opgeslagen als sjabloon, maakt Dreamweaver een sjabloonmap aan op het hoofdniveau van de lokale hoofdmap en genereert een .dwt-bestand dat de bron wordt voor alle pagina's die erop worden toegepast.Telkens wanneer een HTML-pagina op een sjabloon wordt toegepast, (Bestand > Nieuw van sjabloon of Wijzigen > Sjablonen > Sjabloon toepassen op pagina), wordt een koppeling naar het DWT-bestand gemaakt, die relatief is ten opzichte van de hoofdmap. De reden waarom deze hoofdmaprelatieve link altijd correct wordt gekoppeld, is dat het DWT-bestand zich altijd in de map Sjablonen bevindt op het hoofdniveau van de mapstructuur van de site. Als het DWT-bestand uit de map Sjablonen wordt verplaatst, of als de map Sjablonen wordt verplaatst of hernoemd, wordt de koppeling verbroken. Het is van groot belang dat u het DWT-bestand in de map Sjablonen laat staan, waar dit door Dreamweaver is gemaakt. Om verwarring te voorkomen, is het een goede gewoonte om andere items van uw site (afbeeldingsbronbestanden of HTML-documenten) NIET in de map Sjablonen op te slaan.
Hoe worden pagina's gekoppeld aan de template-bestanden?
Wanneer een bestand wordt toegepast op een bestaande pagina of nieuw wordt aangemaakt vanuit een template, wordt de volgende code ingevoegd in de bron:
<!-- #BeginTemplate "/Templates/templateName.dwt" -->
Als u de HTML-broncode wilt weergeven die Dreamweaver genereert, kiest u Venster > HTML.
Het bovenstaande pad vervangt de normale HTML-bron die op een nieuwe pagina zou verschijnen. In plaats van te beginnen met de gebruikelijke tags die het nieuwe bestand zou genereren, wordt aangegeven dat één niveau binnen de lokale hoofdmap, in een map met de naam Sjablonen, een DWT-bestand bestaat met alle gegevens die niet binnen de bewerkbare gebieden van de pagina staan. Dit pad zorgt dat de browser op de juiste locatie zoekt naar het bestand dat de pagina-eigenschappen, lay-out en grafische eigenschappen biedt - alle inhoud die alleen in het DWT-bestand voorkomt. Om deze reden moeten wijzigingen buiten de bewerkbare gebieden van een pagina rechtstreeks worden aangebracht in het DWT-bestand. Wanneer het DWT-bestand zelf wordt geopend en herzien, worden alle pagina's die op de sjabloon zijn toegepast gekoppeld aan het bestand op dezelfde locatie als voorheen. Alle pagina's die op de sjabloon worden toegepast, worden automatisch bijgewerkt met de nieuwe gegevens.
Document-relatief versus site-root-relatief
Het pad dat een HTML-pagina koppelt aan een template is een site-root-relatief pad. Het is relatief ten opzichte van de hoofdmap omdat het begint vanaf het hoogste niveau van de mapstructuur (de lokale hoofdmap) en zo verder loopt naar de volgende map eronder (Sjablonen) en tot slot koppelt naar het DWT-bestand. Dreamweaver genereert automatisch een aan de hoofdmap relatief pad naar de sjablonen in de map Sjablonen, omdat het precies weet waar de sjabloon zal worden geplaatst, ongeacht welke andere bestandmappen zich in de mapstructuur bevinden.
Bij relatief ten opzichte van document wordt een pad gemaakt dat specifiek is voor een bestand. In plaats van te beginnen bij hoogste niveau (de hoofdmap) van de bestandmappenstructuur, wordt een pad gegenereerd dat begint bij één bestand en verder loopt door de bestandsmappen die nodig zijn, en dan stopt bij de locatie van het andere bestand. Het is absoluut noodzakelijk dat beide bestanden worden opgeslagen binnen de lokale hoofdmap VOORDAT u een documentrelatieve koppeling van het ene naar het andere bestand maakt.
Als u lokaal in een browser een voorbeeld van uw pagina's wilt kunnen zien voordat u de bestanden naar een externe server uploadt, moeten ze documentrelatief zijn. Zowel Internet Explorer- als Netscape-browsers weten niet welke lokale hoofdmap is gedefinieerd (wat Dreamweaver wel weet), dus deze browsers kunnen alleen een pad volgen dat relatief is ten opzichte van het document dat op dat moment wordt weergegeven. Aangezien de meeste gebruikers hun pagina's liever lokaal in een browser bekijken voordat ze deze uploaden, wordt in Dreamweaver standaard relatief ten opzichte van document gebruikt wanneer een bestand wordt gekoppeld of een afbeelding wordt ingevoegd. Als het bestand niet is opgeslagen VOORDAT u een afbeelding of een koppeling naar een andere HTML-pagina probeert in te voegen, heeft Dreamweaver geen verwijzing voor de locatie van de huidige pagina en genereert daarom een pad dat er ongeveer als volgt uitziet:
file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm
of
file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm
Deze paden zijn specifiek voor ALLEEN uw computer en werken niet wanneer u bestanden naar een externe server uploadt.
De onderstaande grafiek geeft een grafische uitleg van het verschil tussen document-relatief en site-root-relatief. In het onderstaande voorbeeld heeft de pagina bio.htm een afbeelding genaamd logo.jpg die erin is ingevoegd met alternatieve padkeuzes.
|
|
Document-relatieve paden in de template
Het invoegen van afbeeldingen en koppelingen rechtstreeks in het .dwt-bestand kan verwarrend zijn. Houd er rekening mee dat wanneer u werkt in het DWT-bestand en een documentrelatieve koppeling maakt, deze koppeling ook precies dat is, namelijk relatief ten opzichte van het DWT-bestand. Het pad dat wordt gegenereerd is specifiek vanaf die HTML-pagina of afbeeldingsbron naar het DWT-bestand. In Dreamweaver wordt bijgehouden waar de pagina's die op de sjabloon worden toegepast, zich bevinden en het pad naar het desbetreffende HTML-bestand wordt automatisch aangepast zodat dit correct is voor de huidige pagina. Als u de HTML-bron voor zowel het DWT-bestand als een pagina die op de sjabloon is toegepast, bekijkt, zult u zien dat de paden verschillend zijn, wat ook juist is. Als Dreamweaver niet automatisch het pad voor de specifieke locatie van elke pagina aanpast, wordt het documentrelatieve pad voor alle bestanden, behalve voor het DWT-bestand, verbroken.
Hier is een voorbeeld van de wijze waarop Dreamweaver een pad dat relatief is ten opzichte van een document, zou kunnen aanpassen:
|
Het oorspronkelijke pad van de sjabloon naar de afbeelding: |
|
../graphics/images/banner.gif |
|
Het aangepaste pad in de pagina toegepast op de sjabloon: |
|
../../graphics/images/banner.gif |
Dreamweaver past geen aan de hoofdmap relatieve of absolute (http://) paden van de sjabloon naar de pagina's toegepast in de sjabloon toe, omdat dit niet nodig is.
Document-relatieve paden in de pagina's die op de template worden toegepast
Het invoegen van afbeeldingen en koppelingen binnen het bewerkbare gebied van een pagina die aan een template is gekoppeld, werkt precies hetzelfde als het invoegen van afbeeldingen of koppelingen in een pagina die niet aan een template is gekoppeld. Als u de procedure uitvoert waarbij u Bestand > Nieuw van sjabloon selecteert en vervolgens Bestand > Opslaan (het kiezen van een locatie binnen de lokale hoofdmap) VOORDAT u koppelingen maakt naar andere pagina's of afbeeldingen, schakelt Dreamweaver standaard over naar Relatief ten opzichte van document in zowel het dialoogvenster HTML-pagina selecteren als het dialoogvenster Afbeeldingsbron selecteren. Zolang het pop-upmenu 'Relatief ten opzichte van' niet handmatig wordt gewijzigd in Hoofdmap, zijn de afbeeldingen en koppelingen beschikbaar wanneer u lokaal een voorbeeld van uw werk in de browser bekijkt.
Site-root-relatieve paden in de template
Bij het werken aan een template-bestand om koppelingen naar andere pagina's te maken of om te verwijzen naar de afbeeldingsbron van graphics, bieden de pop-up-menu's in de dialoogvensters HTML-bestand selecteren en Image Source selecteren je de keuze tussen document-relatief en site-root-relatief. Zoals getoond in het diagram hierboven, wordt met Hoofdmap een pad gemaakt vanaf de lokale hoofdmap rechtstreeks naar het bestand dat wordt geselecteerd, ongeacht welk DWT-bestand op dat moment is geopend in Dreamweaver. Het kan handig zijn om koppelingen te gebruiken die relatief zijn ten opzichte van de hoofdmap wanneer de inhoud in de mapstructuur van de site waarschijnlijk binnen de lokale hoofdmap wordt verplaatst, omdat zo de koppeling intact blijft zelfs wanneer de bestanden vanaf de oorspronkelijke locatie worden verplaatst.
|
Het oorspronkelijke pad van de sjabloon naar de afbeelding: |
|
/graphics/images/banner.gif |
|
Het pad in de pagina die wordt toegepast op de sjabloon: |
|
/graphics/images/banner.gif |
Dreamweaver past geen aan de hoofdmap relatieve of absolute (http://) paden van de sjabloon naar de pagina's toegepast in de sjabloon toe, omdat dit niet nodig is. De locatie van het document (ongeacht of dit het DWT-bestand is of een HTML-bestand dat is bevestigd aan de sjabloon) is niet relevant voor een pad dat relatief is ten opzichte van de hoofdmap.
Site-root-relatieve paden in de pagina's die op de template worden toegepast
Het gebruik van site-root-relatieve koppelingen kan nuttig zijn als de site complex is, een team van ontwikkelaars samen werkt of een site-mapstructuur heeft die regelmatig wordt herzien. Wanneer u een koppeling wilt maken die relatief is ten opzichte van de hoofdmap, selecteert u Hoofdmap in het pop-upmenu bij 'Relatief ten opzichte van' dat zowel in het dialoogvenster HTML-pagina selecteren als het dialoogvenster Afbeeldingsbron selecteren te vinden is.
Omdat het gemaakte pad bij de lokale hoofdmap begint, door een willekeurig aantal submappen loopt en uiteindelijk eindigt bij de pagina of afbeelding waaraan het is gekoppeld, krijgen de ontwikkelaars de mogelijkheid om pagina's of elementen een of meer submappen omhoog te verplaatsen in de mapstructuur van de site, zonder de koppelingen te verbreken. Als bijvoorbeeld in het diagram hierboven het bestand logo.jpg wordt verplaatst vanuit de afbeeldingenmap naar de kenmerkenmap en de koppeling relatief is ten opzichte van de hoofdmap, kan de browser de afbeelding nog steeds vinden. Als het pad een koppeling is die relatief is ten opzichte van het document, MOETEN zowel logo.jpg als de bio.html in de mapstructuur blijven staan, waar ze zich bevonden toen het documentrelatieve pad werd gemaakt. Wanneer deze bestanden na het maken van het pad worden verplaatst, wordt het pad verbroken.
Zoals hierboven vermeld, kan alleen van documentrelatieve koppelingen lokaal in de browser een voorbeeld worden bekeken. Als u ervoor kiest om koppelingen te gebruiken die relatief zijn ten opzichte van de hoofdmap, kunt u uw pagina's slechts op twee manieren in de browser weergeven.
De eerste is de bestanden uploaden naar de externe server (Put) en vervolgens uw browser gebruiken om naar de pagina te gaan door het absolute pad in het URL-veld te typen. Met deze methode worden de pagina's net zo weergegeven als anderen ze op internet zouden zien. Als u wijzigingen in de pagina's wilt aanbrengen, opent u een lokale kopie van de bestanden, brengt u de wijzigingen aan, slaat u de HTML-pagina's op, maakt u verbinding met de FTP-server en uploadt u de nieuwe bestanden naar de externe server (Put). Bestanden met dezelfde naam in dezelfde map overschrijven de oudere versies van het bestand op de externe server.
De tweede manier om een voorbeeld van koppelingen die relatief zijn ten opzichte van de hoofdmap, in een browser weer te geven, is door een persoonlijke webserver te gebruiken. In Windows kunt u deze optie alleen instellen door via Bestand > Voorvertoning in browser > Browserlijst bewerken Dreamweaver in te gaan en Voorvertoning met lokale server te selecteren. Wanneer u deze optie instelt, kunt u in Dreamweaver een voorbeeld van documenten weergeven met gebruikmaking van een persoonlijke webserver.
Opmerking: Voor Macintosh wordt een persoonlijke webserver ingesteld op systeemniveau. Raadpleeg de documentatie bij het systeem voor hulp.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.