- Dreamweaver Handboek
- Inleiding
- Dreamweaver en Creative Cloud
- De werkruimten en weergaven van Dreamweaver
- Sites opzetten
- Over Dreamweaver-sites
- Een lokale versie van uw site instellen
- Verbinding maken met een publicatieserver
- Een testserver instellen
- Instellingen van Dreamweaver-sites importeren en exporteren
- Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
- Toegankelijkheidsfuncties in Dreamweaver
- Geavanceerde instellingen
- Sitevoorkeuren instellen voor het overzetten van bestanden
- Proxyserverinstellingen opgeven in Dreamweaver
- Dreamweaver-instellingen synchroniseren met Creative Cloud
- Git gebruiken in Dreamweaver
- Bestanden beheren
- Bestanden maken en openen
- Bestanden en mappen beheren
- Bestanden van uw server ophalen en op uw server plaatsen
- Bestanden inchecken en uitchecken
- Bestanden synchroniseren
- Bestanden vergelijken om verschillen op te sporen
- Bestanden en mappen op uw Dreamweaver-site camoufleren
- Ontwerpnotities inschakelen voor Dreamweaver-sites
- Potentieel misbruik van Gatekeeper voorkomen
- Lay-out en ontwerp
- CSS
- Informatie over CSS (Cascading Style Sheets)
- Pagina's opmaken met CSS ontwerpen
- CSS-preprocessors gebruiken in Dreamweaver
- CSS-stijlvoorkeuren instellen in Dreamweaver
- CSS-regels verplaatsen in Dreamweaver
- Inline CSS converteren naar een CSS-regel in Dreamweaver
- Werken met div-tags
- Verlopen toepassen op een achtergrond
- CSS3-overgangseffecten maken en bewerken in Dreamweaver
- Code opmaken
- Pagina-inhoud en assets
- Pagina-eigenschappen instellen
- Eigenschappen voor CSS-koppen en CSS-koppelingen
- Werken met tekst
- Tekst, tags en kenmerken zoeken en vervangen
- Het deelvenster DOM
- Bewerken in Live View
- Documenten coderen in Dreamweaver
- Elementen selecteren en weergeven in het documentvenster
- Teksteigenschappen instellen in de eigenschappencontrole
- Spelling op een webpagina controleren
- Horizontale lijnen gebruiken in Dreamweaver
- Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
- Werken met assets
- Datums in Dreamweaver invoegen en bijwerken
- Favoriete assets maken en beheren in Dreamweaver
- Afbeeldingen invoegen en bewerken in Dreamweaver
- Mediaobjecten toevoegen
- Video's toevoegen in Dreamweaver
- HTML5-video invoegen
- SWF-bestanden invoegen
- Audio-effecten toevoegen
- HTML5-audio invoegen in Dreamweaver
- Werken met bibliotheekitems
- Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
- Koppelingen en navigatie
- jQuery-widgets en -effecten
- Websites coderen
- Over coderen in Dreamweaver
- Coderingsomgeving in Dreamweaver
- Coderingsvoorkeuren instellen
- Codekleuren aanpassen
- Code schrijven en bewerken
- Coderingstips en codevoltooiing
- Code samenvouwen en uitvouwen
- Code hergebruiken met codefragmenten
- Linting voor code gebruiken
- Code optimaliseren
- Code bewerken in de ontwerpweergave
- Werken met de kopinhoud van pagina's
- Include-bestanden op de server invoegen in Dreamweaver
- Tagbibliotheken gebruiken in Dreamweaver
- Aangepaste tags importeren in Dreamweaver
- JavaScript-gedrag gebruiken (algemene instructies)
- Ingebouwd JavaScript-gedrag toepassen
- Over XML en XSLT
- XSL-transformaties op de server uitvoeren in Dreamweaver
- XSL-transformaties op de client uitvoeren in Dreamweaver
- Tekenentiteiten toevoegen voor XSLT in Dreamweaver
- Code opmaken
- Productonafhankelijke workflows
- Extensies in Dreamweaver installeren en gebruiken
- In-app updates in Dreamweaver
- Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
- Werken met Fireworks en Dreamweaver
- Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
- Integratie van Dreamweaver met Business Catalyst
- Persoonlijke e-mailcampagnes maken
- Sjablonen
- Over Dreamweaver-sjablonen
- Sjablonen en op een sjabloon gebaseerde documenten herkennen
- Een Dreamweaver-sjabloon maken
- Bewerkbare gebieden maken in sjablonen
- Herhalingsgebieden en tabellen maken in Dreamweaver
- Optionele gebieden in sjablonen gebruiken
- Bewerkbare tagkenmerken in Dreamweaver definiëren
- Geneste sjablonen maken in Dreamweaver
- Sjablonen bewerken, bijwerken en verwijderen
- XML-inhoud exporteren en importeren in Dreamweaver
- Een sjabloon uit een bestaand document toepassen of verwijderen
- Inhoud bewerken in Dreamweaver-sjablonen
- Syntaxisregels voor sjabloontags in Dreamweaver
- Voorkeuren voor de markering van sjabloongebieden instellen
- Voordelen van het gebruik van sjablonen in Dreamweaver
- Mobiel en meerdere schermen
- Dynamische sites, pagina's en webformulieren
- Informatie over web-applicaties
- Uw computer instellen voor het ontwikkelen van applicaties
- Problemen met databaseverbindingen oplossen
- Verbindingsscripts verwijderen in Dreamweaver
- Dynamische pagina's ontwerpen
- Overzicht van dynamische inhoudsbronnen
- Bronnen met dynamische inhoud definiëren
- Dynamische inhoud toevoegen aan pagina's
- Dynamische inhoud wijzigen in Dreamweaver
- Databaserecords weergeven
- Livegegevens leveren en problemen oplossen Dreamweaver
- Aangepast servergedrag toevoegen in Dreamweaver
- Formulieren maken met Dreamweaver
- Formulieren gebruiken om informatie van gebruikers te verzamelen
- ColdFusion-formulieren maken en inschakelen in Dreamweaver
- Webformulieren maken
- Verbeterde HTML5-ondersteuning voor formulierelementen
- Een formulier ontwikkelen met Dreamweaver
- Applicaties visueel samenstellen
- Hoofd- en detailpagina's maken in Dreamweaver
- Zoekpagina's en resultatenpagina's maken
- Een pagina voor het invoegen van records maken
- Een pagina voor het bijwerken van records maken in Dreamweaver
- Pagina's voor het verwijderen van records maken in Dreamweaver
- ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
- Een registratiepagina maken
- Een aanmeldingspagina maken
- Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
- Mappen beveiligen in ColdFusion met Dreamweaver
- ColdFusion-componenten gebruiken in Dreamweaver
- Websites testen, voorvertonen en publiceren
- Problemen oplossen
Gebruik JavaScript-gedrag in Adobe Dreamweaver om JavaScript-code in documenten te plaatsen, zodat bezoekers in staat zijn een webpagina te wijzigen of bepaalde taken te starten.
Met gedrag van Adobe Dreamweaver plaatst u JavaScript-code in documenten die bezoekers in staat stelt een webpagina op diverse manieren te wijzigen of bepaalde taken te starten. Met gedrag wordt een combinatie aangeduid van een gebeurtenis en een actie die door die gebeurtenis wordt geactiveerd. In het deelvenster Gedrag kunt u een gedrag aan een pagina toevoegen door een actie op te geven en vervolgens de gebeurtenis op te geven die de desbetreffende actie moet activeren.
De code van een gedrag is JavaScript-code aan de client-kant. Dit houdt in dat de code in browsers en niet op servers wordt uitgevoerd.
Gebeurtenissen zijn in feite berichten die worden gegenereerd door browsers en die aangeven dat een bezoeker van uw webpagina een handeling heeft uitgevoerd op de pagina. Wanneer een bezoeker bijvoorbeeld de aanwijzer op een koppeling plaatst, genereert de browser een onMouseOver-gebeurtenis voor die koppeling. De browser controleert vervolgens of er als antwoord bepaalde JavaScript-code moet worden aangeroepen (aangegeven op de pagina die wordt weergegeven). Voor de verschillende pagina-elementen worden verschillende gebeurtenissen gedefinieerd. Zo zijn onMouseOver en onClick in de meeste browsers gebeurtenissen die aan koppelingen zijn gekoppeld, terwijl onLoad een gebeurtenis is die is gekoppeld aan afbeeldingen en aan de hoofdsectie van het document.
Een actie is vooraf geschreven JavaScript-code voor het uitvoeren van een taak, zoals het openen van een browservenster, het tonen of verbergen van een AP-element, het afspelen van een geluid of het stopzetten van een Adobe Shockwave-filmpje. De acties die bij Dreamweaver worden geleverd, zijn compatibel met vrijwel alle browsers.
Nadat u een gedrag aan een pagina-element hebt gekoppeld, roept dat gedrag telkens de actie (JavaScript-code) aan die aan een gebeurtenis is gekoppeld, op het moment dat die gebeurtenis voor dat element plaatsvindt. (De gebeurtenissen die u kunt gebruiken om een bepaalde actie te activeren, verschillen van browser tot browser.) Als u bijvoorbeeld de actie Pop-upbericht toevoegt aan een koppeling en opgeeft dat deze wordt geactiveerd door de onMouseOver-gebeurtenis, wordt uw bericht weergegeven wanneer iemand de aanwijzer op die koppeling plaatst.
Eén gebeurtenis kan meerdere verschillende acties activeren en u kunt opgeven in welke volgorde deze acties moeten plaatsvinden.
Bij eXchange worden ongeveer twee dozijn acties geleverd. Extra acties vindt u op de Exchange-website op www.adobe.com/go/dreamweaver_exchange_nl en ook op websites voor ontwikkelaars van derden. U kunt ook uw eigen acties schrijven als u ervaring hebt in het werken met JavaScript.
De termen gedrag en actie zijn Dreamweaver-termen en geen HTML-termen. Vanuit de browser gezien verschilt een actie in geen enkel opzicht van andere stukjes JavaScript-code.
Overzicht van het deelvenster Gedrag
U kunt het deelvenster Gedrag (Venster > Gedrag) gebruiken om gedrag aan pagina-elementen (of om precies te zijn aan tags) te koppelen en om parameters van gedrag dat u al eerder hebt gekoppeld, te wijzigen.
Gedragingen die al zijn gekoppeld aan het op dat moment geselecteerde pagina-element, worden in de lijst met gedragingen (het hoofdgedeelte van het paneel) weergegeven en alfabetisch gerangschikt op gebeurtenis. Als er voor één gebeurtenis meerdere acties worden weergegeven, worden deze acties uitgevoerd in de volgorde waarin ze in de lijst worden weergegeven. Als er geen gedragingen in de lijst met gedragingen worden weergegeven, zijn er geen gedragingen aan het op dat moment geselecteerde element gekoppeld.
In het deelvenster Gedrag kunt u de volgende opties selecteren:
Ingestelde gebeurtenissen weergeven
Hiermee geeft u alleen die gebeurtenissen weer die aan het huidige document zijn gekoppeld. Gebeurtenissen zijn onderverdeeld in client-kant- en server-kantcategorieën. De gebeurtenissen in beide categorieën bevinden zich in een uitvouwbare lijst. Ingestelde gebeurtenissen weergeven is de standaardweergave.
Alle gebeurtenissen tonen
Hiermee geeft u een alfabetisch gerangschikte lijst van alle gebeurtenissen voor een bepaalde categorie weer.
Gedrag toevoegen (+)
Hiermee geeft u een menu weer met acties die aan het op dat moment geselecteerde element kunnen worden gekoppeld. Als u in deze lijst een actie selecteert, wordt er een dialoogvenster weergegeven waarin u de parameters voor de actie kunt opgeven. Als alle acties lichter gekleurd worden weergegeven (niet beschikbaar zijn), kunnen er geen gebeurtenissen worden gegenereerd door het geselecteerde element.
Gebeurtenis verwijderen (–)
Hiermee verwijdert u de geselecteerde gebeurtenis en actie uit de lijst met gedragingen.
De knoppen pijl-omhoog en pijl-omlaag
Hiermee plaatst u de geselecteerde actie hoger of lager in de lijst met gedragingen voor een bepaalde gebeurtenis. U kunt de volgorde van acties alleen voor een bepaalde gebeurtenis wijzigen—u kunt bijvoorbeeld de volgorde wijzigen waarin bepaalde acties worden uitgevoerd voor de gebeurtenis onLoad, maar de acties voor de gebeurtenis onLoad blijven bij elkaar in de lijst met gedragingen. Voor acties die niet hoger of lager in de lijst kunnen worden geplaatst, zijn de pijlknoppen uitgeschakeld.
Gebeurtenissen
Hiermee geeft u een pop‑upmenu weer dat alleen zichtbaar is wanneer er een gebeurtenis is geselecteerd en dat alle gebeurtenissen bevat die de actie kunnen activeren (dit menu verschijnt wanneer u op de pijlknop naast de naam van de geselecteerde gebeurtenis klikt). Welke gebeurtenissen worden weergegeven, hangt af van het object dat is geselecteerd. Als er andere gebeurtenissen worden weergegeven dan u had verwacht, moet u controleren of u wel het juiste pagina-element of de juiste tag hebt geselecteerd. (Als u een specifieke tag wilt selecteren, moet u de tagkiezer gebruiken, die zich in de linkerbenedenhoek van het documentvenster bevindt.)
Gebeurtenisnamen tussen haakjes zijn alleen beschikbaar voor koppelingen. Als u een van deze gebeurtenisnamen selecteert, wordt er automatisch een lege koppeling aan het geselecteerde pagina-element toegevoegd en wordt het gedrag aan deze koppeling gekoppeld in plaats van aan het element zelf. De lege koppeling is gespecificeerd als href="javascript:;" in de HTML-code.
Over gebeurtenissen
Elke browser biedt een reeks gebeurtenissen die u kunt koppelen aan de acties die in het menu Acties (+) van het deelvenster Gedrag worden weergegeven. Wanneer een bezoeker van uw webpagina ergens op de pagina tekst invoert of ergens op klikt (bijvoorbeeld op een afbeelding), genereert de browser gebeurtenissen. Deze gebeurtenissen kunnen worden gebruikt om JavaScript-functies aan te roepen die een actie uitvoeren. In Dreamweaver zijn vele gangbare acties beschikbaar die u met deze gebeurtenissen kunt activeren.
In het Dreamweaver Support Center op www.adobe.com/go/dreamweaver_support_nl vindt u namen en beschrijvingen van de gebeurtenissen die bij elke browser worden geleverd.
Welke gebeurtenissen worden weergegeven in het menu Gebeurtenissen, hangt af van het object dat is geselecteerd. Als u wilt weten welke gebeurtenissen een bepaalde browser ondersteunt voor een bepaald pagina-element, voegt u het desbetreffende pagina-element in uw document in, koppelt u een gedrag aan het element en kijkt u vervolgens in het menu Gebeurtenissen in het deelvenster Gedrag. (Standaard worden gebeurtenissen uit de lijst met HTML 4.01-gehaald en worden deze door de meeste moderne browsers ondersteund.) Gebeurtenissen kunnen uitgeschakeld zijn (ze worden dan lichter gekleurd weergegeven) als de relevante objecten nog niet op de pagina aanwezig zijn of als het geselecteerde object geen gebeurtenissen kan ontvangen. Als er andere gebeurtenissen worden weergegeven dan u had verwacht, moet u controleren of u het juiste object hebt geselecteerd.
Als u een gedrag aan een afbeelding koppelt, worden sommige gebeurtenissen (zoals onMouseOver) tussen haakjes weergegeven. Deze gebeurtenissen zijn alleen beschikbaar voor koppelingen. Wanneer u een van deze gebeurtenissen selecteert, plaatst Dreamweaver een <a>-tag rondom de afbeelding om een null-koppeling te definiëren. De lege koppeling wordt in het vak Koppeling van de eigenschappencontrole vertegenwoordigd door javascript:;. U kunt de waarde van de koppeling wijzigen als u deze in een echte koppeling naar een andere pagina wilt veranderen, maar als u de JavaScript-koppeling verwijdert, zonder deze te vervangen door een andere koppeling, verwijdert u het gedrag.
Als u wilt weten welke tags u kunt gebruiken in combinatie met een bepaalde gebeurtenis in een bepaalde browser, zoekt u naar de gebeurtenis in een van de bestanden in de map Dreamweaver/Configuratie/Gedrag/Gebeurtenissen.
Een gedrag toepassen
U kunt gedrag koppelen aan het gehele document (dat wil zeggen aan de <body>-tag) of aan koppelingen, afbeeldingen, formulierelementen en verscheidene andere HTML-elementen.
De doelbrowser die u selecteert, bepaalt welke gebeurtenissen worden ondersteund voor een bepaald element.
U kunt meer dan één actie voor elke gebeurtenis opgeven. Acties worden uitgevoerd in de volgorde waarin ze in de kolom Acties van het deelvenster Gedrag worden weergegeven, maar u kunt die volgorde wijzigen.
-
Selecteer een element op de pagina, zoals een afbeelding of koppeling.
Als u een gedrag aan de volledige pagina wilt koppelen, klikt u op de <body>-tag in de tagkiezer in de linkerbenedenhoek van het documentvenster.
-
Kies Venster > Gedrag.
-
Klik op de plusknop (+) en selecteer een actie in het menu Gedrag toevoegen.
Acties in dit menu die lichter gekleurd worden weergegeven, kunnen niet worden gekozen. Mogelijk worden deze acties lichter gekleurd weergegeven, omdat een vereist object niet in het huidige document aanwezig is. De actie Shockwave of SWF beheren wordt bijvoorbeeld lichter gekleurd weergegeven als het document geen Shockwave- of SWF-bestanden bevat.
Als u een actie selecteert, wordt er een dialoogvenster weergegeven met de parameters en instructies voor de actie.
-
Voer parameters in voor de actie en klik op OK.
Alle acties in Dreamweaver werken in moderne browsers. Sommige acties werken niet in oudere browsers, maar ze zullen geen fouten veroorzaken.
Opmerking:Doelelementen vereisen een unieke id. Als u bijvoorbeeld het gedrag Afbeelding verwisselen wilt toepassen op een afbeelding, heeft de afbeelding een id nodig. Als u geen id voor het element hebt opgegeven, geeft Dreamweaver er automatisch een voor u op.
-
De standaardgebeurtenis voor het activeren van de actie wordt in de kolom Gebeurtenissen weergegeven. Als dit niet de gewenste activeringsgebeurtenis is, selecteert u een andere gebeurtenis in het pop-upmenu Gebeurtenissen. (Als u het menu Gebeurtenissen wilt openen, selecteert u een gebeurtenis of actie in het deelvenster Gedrag en klikt u op de zwarte, naar beneden wijzende pijl die tussen de naam van de gebeurtenis en de naam van de actie wordt weergegeven.)
Gedrag wijzigen of verwijderen
Nadat u een gedrag hebt gekoppeld, kunt u de gebeurtenis wijzigingen waarmee de actie wordt geactiveerd, acties toevoegen of verwijderen en parameters voor acties wijzigen.
-
Selecteer een object waaraan een gedrag is gekoppeld.
-
Kies Venster > Gedrag.
-
Breng de wijzigingen aan:
Als u de parameters van een actie wilt bewerken, dubbelklikt u op de naam van de actie of selecteert u de naam en drukt u op Enter (Windows) of Return (Macintosh). Vervolgens wijzigt u de parameters in het dialoogvenster en klikt u op OK.
Als u de volgorde van acties voor een bepaalde gebeurtenis wilt wijzigen, selecteert u een actie en klikt u op de knop pijl-omhoog of pijl-omlaag. U kunt in plaats daarvan ook de actie selecteren en deze met knippen en plakken op de gewenste locatie tussen de andere acties neerzetten.
Als u een gedrag wilt verwijderen, selecteert u dit gedrag en klikt u op de minknop (–) of drukt u op Delete.
Een gedrag bijwerken
-
Selecteer een element waaraan het gedrag is gekoppeld.
-
Kies Venster > Gedrag en dubbelklik op het gedrag.
-
Breng de wijzigingen aan en klik in het dialoogvenster van het gedrag op OK.
Overal waar het gedrag op die pagina voorkomt, wordt het bijgewerkt. Als datzelfde gedrag ook op andere pagina's van uw website voorkomt, moet u het gedrag per pagina bijwerken.
Gedrag van derden downloaden en installeren
Er zijn vele uitbreidingen beschikbaar op de website Exchange for Dreamweaver (www.adobe.com/go/dreamweaver_exchange_nl).
-
Kies Venster > Gedrag en selecteer Meer gedrag ophalen in het menu Gedrag toevoegen.
De primaire browser wordt geopend en de Exchange-website wordt weergegeven.
-
Ga op zoek naar de gewenste pakketten door te bladeren of gericht te zoeken.
-
Download en installeer het gewenste uitbreidingspakket.
Zie Extensies toevoegen en beheren in Dreamweaver voor meer informatie.