Handboek Annuleren

Over sjablonen van Dreamweaver

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen

 

Meer informatie over hoe u Dreamweaver-sjablonen gebruikt om een 'vaste' paginalay-out te ontwerpen en vervolgens op deze sjabloon gebaseerde documenten kunt maken, die de paginalay-out ervan overnemen.

Een sjabloon is een speciaal type document waarmee u een “vaste” paginalay-out kunt ontwerpen. Vervolgens kunt u op deze sjabloon gebaseerde documenten maken, die de paginalay-out ervan overnemen. Bij het ontwerpen van een sjabloon geeft u aan welke inhoud gebruikers kunnen bewerken in een document dat is gebaseerd op de sjabloon. Sjablonen bieden sjabloonauteurs de gelegenheid om te bepalen welke pagina-elementen sjabloongebruikers—zoals schrijvers, grafici of andere webontwikkelaars—kunnen bewerken. Er zijn verschillende typen sjabloongebieden die de sjabloonauteur in een document kan opnemen.

Opmerking:

Sjablonen geven u de controle over een groot ontwerpgebied en bieden de mogelijkheid van hernieuwd gebruik van complete lay-outs. Als u afzonderlijke ontwerpelementen opnieuw wilt gebruiken, bijvoorbeeld een logo of de auteursrechtelijke informatie van een site, kunt u bibliotheekitems maken.

Door sjablonen te gebruiken kunt u meerdere pagina's tegelijk bijwerken. Een document dat is gemaakt op basis van een sjabloon, blijft gekoppeld aan die sjabloon (tenzij u het document later loskoppelt). U kunt een sjabloon aanpassen en het ontwerp in alle erop gebaseerde documenten onmiddellijk bijwerken.

Opmerking:

Sjablonen in Dreamweaver verschillen van sjablonen in sommige andere Adobe Creative Cloud-softwareproducten omdat de paginasecties in sjablonen van Dreamweaver standaard vast zijn (en dus niet bewerkbaar).

Typen sjabloongebieden

Als u een document opslaat als een sjabloon, zijn de meeste gebieden van een document vergrendeld. Als sjabloonauteur bepaalt u welke gebieden van een op een sjabloon gebaseerd document bewerkbaar zijn door bewerkbare gebieden of bewerkbare parameters in de sjabloon in te voegen.

Terwijl u de sjabloon maakt, kunt u zowel in bewerkbare als vergrendelde gebieden wijzigingen aanbrengen. In een op de sjabloon gebaseerd document kan een sjabloongebruiker echter alleen wijzigingen aanbrengen in de bewerkbare gebieden; de vergrendelde gebieden kunnen niet worden gewijzigd.

Er zijn vier typen sjabloongebieden:

Een bewerkbaar gebied: Een niet-vergrendeld gebied in een op een sjabloon gebaseerd document—een gedeelte dat een sjabloongebruiker kan bewerken. Een sjabloonauteur kan elk gebied van een sjabloon aanmerken als bewerkbaar. Een sjabloon is pas doelmatig als het ten minste één bewerkbaar gebied bevat; Als dit niet het geval is, kunnen pagina's die op de sjabloon zijn gebaseerd, niet worden bewerkt. Zie Bewerkbare gebieden maken in sjablonen voor gedetailleerde informatie in bewerkbare gebieden.

Een herhalingsgebied: Een gedeelte van de documentlay-out dat dusdanig is ingesteld dat de sjabloongebruiker desgewenst kopieën van het herhalingsgebied kan toevoegen aan of verwijderen uit een document dat op de sjabloon is gebaseerd. Zo kunt u instellen dat een tabelrij moet worden herhaald. Herhalingsgedeelten zijn bewerkbaar zodat de sjabloongebruiker de inhoud in het herhalingselement wel kan bewerken, maar dat het ontwerp zelf onder de controle van de sjabloonauteur blijft.

Er zijn twee typen herhalingsgebieden die u in een sjabloon kunt invoegen: een herhalingsgebied en een herhalingstabel. Zie Herhalingsgebieden en tabellen maken in Dreamweaver als u wilt weten hoe u met herhalingsgebieden kunt werken.

Een optioneel gebied: Een gedeelte van een sjabloon dat inhoud—zoals tekst of een afbeelding—bevat die al dan niet in een document wordt weergegeven. Op de op een sjabloon gebaseerde pagina bepaalt meestal de sjabloongebruiker of de inhoud wordt weergegeven. Zie de sectie Optioneel gebied voor meer informatie.

Een bewerkbaar tagkenmerk: Hiermee ontgrendelt u een tagkenmerk in een sjabloon, waardoor het kenmerk kan worden bewerkt in een op een sjabloon gebaseerde pagina. Zo kunt u “vergrendelen” welke afbeelding wordt weergegeven in het document, waarbij de sjabloongebruiker nog wel de uitlijning kan instellen op links, rechts of gecentreerd. Zie Bewerkbare tagkenmerken in Dreamweaver definiëren voor meer informatie.

Koppelingen in sjablonen

Als u een sjabloonbestand maakt door een bestaande pagina op te slaan als een sjabloon, worden de nieuwe sjabloon in de map Sjablonen en eventuele koppelingen in het bestand bijgewerkt, zodat hun documentafhankelijke relatieve paden correct zijn. Later, wanneer u een document maakt dat op deze sjabloon is gebaseerd, en dit opslaat, worden alle documentafhankelijke relatieve koppelingen opnieuw bijgewerkt om deze naar de juiste bestanden te laten verwijzen.

Als u een nieuwe documentafhankelijke relatieve koppeling toevoegt aan een sjabloonbestand, bestaat het gevaar dat u een onjuiste padnaam opgeeft als u in het tekstvak voor de koppeling in de eigenschappencontrole het pad typt. Het correcte pad in een sjabloonbestand is het pad van de map Sjablonen naar het gekoppelde document, niet het pad van de map van het op een sjabloon gebaseerde document naar het gekoppelde document. Zorg ervoor dat de correcte paden voor koppelingen bestaan door bij het maken van koppelingen in sjablonen het pictogram met de map of het pictogram Wijzen naar bestand in de eigenschappencontrole te gebruiken.

Serverscripts in sjablonen en op een sjabloon gebaseerde documenten

Bepaalde serverscripts worden ingevoegd in het allereerste begin of uiterste einde van het document (vóór de tag <html> of na de tag </html>). Dergelijke scripts moeten op een speciale manier worden behandeld in sjablonen en op een sjabloon gebaseerde documenten. Normaal gesproken geldt dat als u wijzigingen aanbrengt aan scriptcode vóór de tag <html> of na de tag </html> in een sjabloon, de wijzigingen niet worden gekopieerd naar documenten die op die sjabloon zijn gebaseerd. Hierdoor ontstaan serverfouten als andere serverscripts, binnen de hoofdtekst van de sjabloon, afhankelijk zijn van de scripts die niet worden gekopieerd. U ontvangt een waarschuwing als u scripts vóór de tag <html> of na de tag </html> in een sjabloon wijzigt.

Als u dit probleem wilt vermijden, kunt u de volgende code invoegen in het gedeelte head van de sjabloon:

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

Met deze code in een sjabloon worden wijzigingen aan scripts vóór de tag <html> of na de tag </html> gekopieerd naar documenten die op deze sjabloon zijn gebaseerd. U kunt deze scripts in documenten die op de sjabloon zijn gebaseerd, dan echter niet meer bewerken. U hebt dan ook de keuze tussen deze scripts in de sjabloon bewerken en deze scripts bewerken in documenten die op de sjabloon zijn gebaseerd; beide mogelijkheden hebben is niet mogelijk.

Sjabloonparameters

Sjabloonparameters geven waarden voor het bepalen van de inhoud in documenten die zijn gebaseerd op een sjabloon. Gebruik sjabloonparameters voor optionele gebieden of bewerkbare tagkenmerken, of voor het instellen van waarden die u wilt doorgeven aan een bijgevoegd document. Voor elke parameter selecteert u een naam, een gegevenstype en een standaardwaarde. Elke parameter moet een unieke naam hebben die hoofdlettergevoelig is. Ze moeten een van de vijf toegestane gegevenstypen zijn: text (tekst), boolean (Booleaans), color (kleur), URL of number (getal).

Sjabloonparameters worden aan het document doorgegeven als objectparameters. In de meeste gevallen kan een sjabloongebruiker de standaardwaarde van de parameter bewerken om datgene wat in een op een sjabloon gebaseerd document wordt weergegeven, aan te passen. In andere gevallen bepaalt sjabloonauteur wat er in het document wordt weergegeven, op basis van de waarde van een sjabloonexpressie.

Sjabloonexpressies

Sjabloonexpressies zijn instructies die een waarde berekenen of beoordelen.

U kunt een expressie gebruiken om een waarde op te slaan en deze in een document weer te geven. Een expressie kan bijvoorbeeld gewoon de waarde van een parameter zijn, zoals @@(Param)@@, maar kan ook complex genoeg zijn om waarden te berekenen, die de achtergrondkleur in een tabelrij wisselen, zoals @@((_index & 1) ? rood : blauw)@@.

Ook kunt u expressies definiëren voor enkelvoudige en meervoudige if-voorwaarden. Als een expressie wordt gebruikt in een voorwaardelijke instructie, beoordeelt Dreamweaver deze als true (waar) of false (onwaar). Als de voorwaarde waar is, wordt het optionele gebied in het op een sjabloon gebaseerde document weergegeven; als deze onwaar is, wordt het niet weergegeven.

U kunt expressies definiëren in de codeweergave of in het dialoogvenster Optioneel gebied wanneer u een optioneel gebied invoegt.

In de codeweergave kunt u op twee manieren sjabloonexpressies definiëren: gebruik de <!-- TemplateExpr expr="uw expressie"--> of gebruik @@(uw expressie)@@. Als u de expressie invoegt in de sjablooncode, wordt in de ontwerpweergave een markering voor de expressie weergegeven. Als u een sjabloon toepast, wordt in Dreamweaver de expressie geëvalueerd en wordt de waarde weergegeven in het op de sjabloon gebaseerde document.

Taal voor sjabloonexpressies

De taal voor sjabloonexpressies bestaat uit een kleine subset van JavaScript en gebruikt de JavaScript-syntaxis en voorrangsregels. Gebruik JavaScript-operatoren om een expressie als de volgende te schrijven:

@@(firstName+lastName)@@

De volgende functies en operatoren worden ondersteund:

  • numerieke constanten, tekenreeksconstanten (uitsluitend syntaxis met dubbele aanhalingstekens), Booleaanse constanten (true (waar) of false (onwaar))

  • variabele verwijzing (zie de lijst van gedefinieerde variabelen verderop in dit gedeelte)

  • veldverwijzing (de “punt”-operator)

  • monadische operatoren: +, -, ~, !

  • binaire operatoren: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>

  • voorwaardelijke operator: ?:

  • haakjes: ()

    De volgende gegevenstypes worden gebruikt: Booleaans, IEEE 64-bpc drijvende komma, tekenreeks en object. Dreamweaver-sjablonen ondersteunen niet het gebruik van de typen “null” of “undefined” van JavaScript. Ook zijn geen schaalbare typen toegestaan die impliciet moeten worden omgezet in een object; de expressie "abc".length zou dan ook tot een fout leiden in plaats van de waarde 3 als resultaat.

    De enige beschikbare objecten zijn die die worden gedefinieerd door het expressieobjectmodel. De volgende variabelen zijn gedefinieerd:

    _document

    Bevat de sjabloongegevens op documentniveau met een veld voor elke parameter in de sjabloon.

    _repeat

    Alleen gedefinieerd voor expressies die voorkomen binnen een herhalingsgebied. Biedt ingebouwde informatie over het gebied

    _index

    De numerieke index (vanaf 0) van de huidige vermelding

    _numRows

    Het totaal aantal vermeldingen in dit herhalingsgebied

    _isFirst

    True (waar) als de huidige vermelding de eerste vermelding is in het herhalingsgebied ervan

    _isLast

    True (waar) als de huidige vermelding de laatste vermelding is in het herhalingsgebied ervan

    _prevRecord

    Het object _repeat voor de vorige vermelding. Deze eigenschap kan niet worden gebruikt voor de eerste vermelding in het gebied.

    _nextRecord

    Het object _repeat voor de volgende vermelding. Deze eigenschap kan niet worden gebruikt voor de laatste vermelding in het gebied.

    _parent

    In een genest herhaald gebied krijgt u hiermee het object _repeat voor het omgevende (buitenste) herhaalde gebied. Toegang tot deze eigenschap buiten een genest herhaald gebied leidt tot een foutsituatie.

    Tijdens de beoordeling van een expressie zijn alle velden van het object _document en het object _repeat impliciet beschikbaar. Zo kunt u title opgeven in plaats van _document.title voor toegang tot de titelparameter van het document.

    In gevallen waarin sprake is van een conflict tussen velden, krijgen velden van het object _repeat voorrang op velden van het object _document. Daarom zou u bij de verwijzing naar documentparameters die worden verborgen door parameters van een herhaald gebied, alleen een expliciete verwijzing naar _document of _repeat moeten gebruiken wanneer _document zich mogelijk binnen een herhalingsgebied bevindt.

    Als geneste herhaalde gebieden worden gebruikt, zijn alleen velden van de binnenste herhaalde gebieden impliciet beschikbaar. Naar buitenste gebieden moet expliciet worden verwezen door middel van _parent.

Meerdere if-voorwaarden in sjablooncode

U kunt expressies definiëren voor enkelvoudige en meervoudige if-voorwaarden. Het volgende voorbeeld toont de manier waarop u een parameter met de naam “Dept” definieert, een aanvankelijke waarde instelt en een meervoudige if-voorwaarde definieert die bepaalt welk logo wordt weergegeven.

Hieronder ziet u een voorbeeld van de code die u zou kunnen invoeren in het gedeelte head van de sjabloon:

<!-- TemplateParam name="Dept" type="number" value="1" -->

De volgende instructie voor een voorwaarde controleert de waarde die is toegewezen aan de parameter Dept. Als de voorwaarde true (waar) is (dat wil zeggen wanneer eraan wordt voldaan), wordt de juiste afbeelding weergegeven.

<!-- TemplateBeginMultipleIf --> 
<!-- checks value of Dept and shows appropriate image--> 
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

Als u een op een sjabloon gebaseerd document maakt, worden de sjabloonparameters er automatisch aan doorgegeven. De sjabloongebruiker bepaalt welke afbeelding moet worden weergegeven.

Adobe-logo

Aanmelden bij je account