Code schrijven en bewerken

Laatst bijgewerkt op 27 apr. 2021

Lees hoe u in de codeweergave kunt werken en haal het beste uit de coderingsmogelijkheden van Dreamweaver.

Er zijn meerdere manieren om met code te werken in Dreamweaver.

Je kunt een nieuw codebestand openen via het dialoogvenster Nieuw document en beginnen met het typen van je code.

Een nieuw codebestand maken in Dreamweaver

Terwijl u typt, worden coderingstips weergegeven om u te helpen bij het selecteren van code en om spelfouten te voorkomen. Krijg hulp bij CSS wanneer je die nodig hebt met de handige Quick Docs van Dreamweaver.

Je kunt ook code invoegen met het Invoegen-paneel of codesnelkoppelingen gebruiken zoals Emmet-afkortingen.

Als je merkt dat je hetzelfde stukje code meerdere keren kopieert en plakt, probeer dan deze tijdbesparende functies:

Het Snippets-deelvenster is van onschatbare waarde voor het snel maken en invoegen van vooraf opgemaakte codefragmenten in je code.
Meerdere cursors stellen je in staat om meerdere regels code tegelijk te maken en te bewerken.

Dreamweaver biedt ook een sterke set bewerkingstools die het navigeren door en wijzigen van je code tot een vloeiend proces maken.

Gebruik de zoeken en vervangen-functie van Dreamweaver om te zoeken naar tags, attributen of tekst in code.
Gebruik de Codenavigator om naar gerelateerde code binnen en buiten het huidige bestand te navigeren. Nog beter: gebruik de Snel bewerken-functie om code in gerelateerde bestanden te bewerken zonder het bestand zelfs maar te openen in een nieuw tabblad.
Klik met de rechtermuisknop op de code om een eenvoudig, relevant contextmenu te openen waarmee je de code direct kunt bewerken.
Gebruik de Tag inpakken om tekst in tags in te pakken.

Lees verder voor meer informatie over al deze codefuncties.

Code invoegen met het deelvenster Invoegen

Plaats de invoegpositie in de code.

Selecteer de gewenste categorie in het deelvenster Invoegen.

Klik op een knop in het deelvenster Invoegen of selecteer een item uit een pop‑upmenu in het deelvenster Invoegen.

Wanneer je op een pictogram klikt, verschijnt de code onmiddellijk op je pagina, of verschijnt er een dialoogvenster waarin om meer informatie wordt gevraagd om de code te voltooien.

Het aantal en type knoppen dat beschikbaar is in het deelvenster Invoegen hangt af van het huidige documenttype. Dit hangt ook af van het feit of u de codeweergave of de ontwerpweergave gebruikt.

De Emmet-toolkit gebruiken met Dreamweaver

Emmet is een insteekmodule voor snelle codering en het genereren van HTML- en CSS-code.

Gebruik Emmet-afkortingen in de codeweergave of codecontrole in Dreamweaver en druk op de Tab-toets om deze afkortingen uit te breiden naar HTML-opmaakcodes of CSS.

HTML-afkortingen worden uitgebreid in HTML- en PHP-pagina's. CSS-afkortingen worden uitgebreid in CSS-, LESS-, SASS-, SCSS-pagina's of binnen de style-tag in een HTML-pagina.

Hier zijn een paar voorbeelden die laten zien hoe u Emmet-afkortingen in de codeweergave kunt gebruiken. Voor gedetailleerde informatie en naslag, zie de Emmet-documentatie.

Notitie

Dreamweaver ondersteunt momenteel Emmet 1.2.2-afkortingen.

Voorbeeld 1: HTML-code invoegen met Emmet

Om snel HTML-code toe te voegen voor een ongeordende lijst met drie elementen, open je het HTML-bestand en typ je de volgende Emmet-afkorting in Codeweergave binnen <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Zorg ervoor dat de cursor direct achter de Emmet-afkorting is geplaatst en druk op Tab om de afkorting uit te breiden. Als alternatief kun je de hele afkorting selecteren en vervolgens op Enter drukken.

De afkorting wordt uitgebreid tot de volgende code:

<div>

<ul>

<li>Lorem Ipsum</li>

</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>

<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>

<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>

<p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>

</div>

Bijvoorbeeld 2: CSS-code invoegen met Emmet

Om CSS-code in te voegen voor het maken van een borderradius met leveranciersprefixen, open je je CSS-bestand en typ je de volgende Emmet-afkorting binnen een klasse:

-bdrs

Wanneer je op Tab drukt, wordt de afkorting uitgevouwen naar de volgende code:

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

Opmerkingen gebruiken in code

Een opmerking is beschrijvende tekst die u in de HTML-code invoegt om de code toe te lichten of om andere informatie te bieden. De tekst van de opmerking is alleen zichtbaar in de codeweergave en wordt niet weergegeven in een browser.

Opmerkingen toevoegen aan uw code

Als u opmerkingen wilt toevoegen, typt u eerst de tekst van de opmerking. Je kunt vervolgens je cursor op het invoegpunt plaatsen en op het pictogram Invoegen in de werkbalk klikken om het submenu Opmerking toepassen te openen.

U kunt ook tekst selecteren en omzetten in een opmerking. De geselecteerde tekst wordt opgenomen in een commentaarblok.

U kunt opmerkingen toevoegen met verschillende syntaxisopties. Selecteer de juiste syntaxis en Dreamweaver voegt de tags voor u in. Het enige wat je hoeft te doen is je opmerkingstekst invoeren.

Je kunt ook de sneltoetsen Ctrl+/ (op Windows) of Cmd+/ (op Mac) gebruiken om opmerkingen toe te voegen.

Als u de sneltoets gebruikt zonder tekst te selecteren, wordt de opmerking toegepast op de huidige regel. Als je tekst selecteert en de sneltoets gebruikt, wordt de opmerking toegepast voor de geselecteerde tekst.

Opmerkingen uit uw code verwijderen

Als u code-opmerkingen wilt verwijderen, selecteert u de code en klikt u op het pictogram Commentaar verwijderen op de werkbalk. Je kunt ook de sneltoetsen Ctrl-/ (op Windows) of Cmd-/ (op Mac) gebruiken om opmerkingen te verwijderen.

Schakelen tussen code-opmerkingen

Om te wisselen tussen tonen en verbergen van opmerkingen in codeweergave, druk je eenvoudig op Ctrl+/ op Windows of Cmd+/ op Mac voor de geselecteerde opmerking of regel.

Meerdere cursors gebruiken om tekst op meerdere plaatsen toe te voegen of te wijzigen

Voeg cursors op meerdere plaatsen toe of selecteer meerdere secties van code en bewerk deze gelijktijdig door de functie Meerdere cursors van Dreamweaver te gebruiken.

Notitie

Kopiëren en plakken en zoeken en vervangen werken niet met meerdere cursors of meerdere selecties.

Meerdere cursors of selecties toevoegen

Je kunt op verschillende manieren meerdere cursors toevoegen, afhankelijk van je vereisten.

Als je dezelfde tekst op meerdere plaatsen wilt toevoegen zonder bestaande tekst te vervangen, voeg je meerdere cursors toe.

Als u bestaande tekst wilt vervangen, kunt u meerdere selecties doen. Je kunt doorlopende regels tekst, niet-doorlopende regels tekst of beide selecteren en er cursors aan toevoegen.

Om meerdere cursors of meerdere selecties in dezelfde kolom toe te voegen op opeenvolgende regels:

Houd de Alt-toets ingedrukt en sleep vervolgens verticaal. Wanneer je verticaal sleept, worden cursors toegevoegd aan elke regel waar je overheen sleept.

Tekst bij cursor over meerdere regels toegevoegd

Als u doorlopende tekstregels wilt selecteren, drukt u op Alt en sleept u diagonaal. Wanneer je diagonaal sleept, selecteert Adobe Dreamweaver een rechthoekig blok tekst binnen die selectie.

Selecteer en bewerk meerdere regels tekst tegelijk

Notitie

Om snel cursors toe te voegen of meerdere regels in een selectie op te nemen, gebruik je de sneltoets Shift+Alt+Omhoog of Shift+Alt+Omlaag.

Zodra je de cursors hebt toegevoegd (of tekst hebt geselecteerd) op meerdere plaatsen, begin gewoon met typen.

Als je meerdere cursors hebt, wordt nieuwe tekst toegevoegd.

Als je content hebt geselecteerd in meerdere regels tekst, dan wordt de geselecteerde tekst vervangen door de nieuwe tekst die je invoert.

Om meerdere cursors toe te voegen in verschillende kolommen over regels:

Om cursors toe te voegen aan niet-doorlopende regels tekst, druk je eenvoudig op de Ctrl-toets en klik je op de verschillende regels waar je de Cursor wilt plaatsen.

Cursors toevoegen op meerdere onderbroken tekstregels

Om niet-doorlopende regels tekst te selecteren, selecteer je wat tekst, houd je vervolgens de Ctrl-toets (Windows) of Cmd-toets (Mac) ingedrukt en maak je verdere selecties.

Om cursors toe te voegen aan het begin/einde van elke regel:

Selecteer meerdere regels tekst en druk op de pijltjestoets links of rechts.

Om cursors toe te voegen in voorafgaande of volgende regels voor een selectie:

Druk op Shift+Alt+pijltjestoets omhoog/omlaag en druk vervolgens op de pijltjestoets rechts.

Om doorlopende en niet-doorlopende regels tekst te selecteren:

Je kunt deze technieken combineren om zowel doorlopende als afzonderlijke regels tekst te selecteren binnen een enkele selectie.

Selecteer eerst de niet-doorlopende regels tekst, druk vervolgens op Ctrl-Alt (op Windows) of Cmd-Alt (op Mac) en sleep om een set regels toe te voegen aan de bestaande meerdere selecties.

Selecteer zowel ononderbroken als onderbroken tekstregels

Hulp bij CSS in Dreamweaver met het Snelle documenten

Tijdens het werken met CSS-, LESS- of SCSS-bestanden in Adobe Dreamweaver kun je snel meer informatie krijgen over CSS-eigenschappen of waarden.

Plaats je cursor binnen een eigenschap of waarde en druk op Ctrl+K. Dreamweaver opent documentatie van het Web Platform Docs-project.

Je kunt tegelijkertijd meerdere inline-editors en documentviewers openen.

Om een enkele inline editor of documentkijker te sluiten, klik je op de "X" in de linkerbovenhoek of druk je op Escape terwijl Quick Docs de focus heeft.

Om alle inline editors en documenten te sluiten, plaats je je cursor terug in de hoofdcode-editor en druk je op Escape.

Code analyseren

Dreamweaver ondersteunt linting (code analyseren op potentiële fouten) voor HTML, CSS en JavaScript.

In het deelvenster Uitvoer wordt een lijst van de fouten en waarschuwingen weergegeven die door linting worden gedetecteerd. Zie Linting voor code gebruiken voor meer informatie.

Bovendien geeft Dreamweaver ook een snelle voorvertoning van fouten in de kolom regelnummer van de onjuiste regel. Het regelnummer wordt in rood weergegeven om aan te geven dat het fouten bevat. Wanneer je eroverheen zweeft, wordt een korte beschrijving van de fout weergegeven.

Opmerking: Alleen de eerste fout in de regel wordt weergegeven. Als de regel slechts één waarschuwing bevat, wordt de beschrijving van de waarschuwing weergegeven. Als de regel een waarschuwing en een fout bevat, wordt alleen de beschrijving van de fout weergegeven.

Tekst omsluiten met code met de functie Tags rondom plaatsen

Gebruik de functie Tags rondom plaatsen in Codeweergave om specifieke regels tekst met een tag te omsluiten. In de weergave Design of Live kun je deze functie gebruiken om objecten met een tag te omsluiten.

Selecteer tekst in de weergave Code of een object in de weergave Design en druk op Ctrl+T op je toetsenbord.

Er verschijnt een pop-up waarmee je kunt kiezen uit een aantal HTML-tags.

Selecteer een tag in het menu.

Als u in codeweergave werkt, wordt de geselecteerde tekst omsloten door de tag. Als je werkt in de weergave Design of Live, wordt het geselecteerde object omsloten door de tag.

Code bewerken met het contextmenu Codering

Gebruik het contextmenu van Dreamweaver om je code snel te bewerken.

U opent het contextmenu door te klikken met de rechtermuisknop (Windows) of met ingedrukte Command-toets (Mac). De volgende opties zijn beschikbaar:

Snel bewerken

Klik op deze optie om de modus Snel bewerken te openen. In deze modus biedt Dreamweaver inline context-specifieke code en gereedschappen waarmee u snel naar de codeselectie wordt verwezen die u nodig heeft. Voor meer informatie, zie Snel bewerken.

Knippen, kopiëren, plakken

Klik op deze opties om snel tekst te knippen, kopiëren en plakken zonder het menu Bewerken te hoeven openen.

Zoeken en vervangen, Volgende zoeken, Vorige zoeken

Klik op deze opties om snel tekst te zoeken en vervangen zonder het menu Zoeken te hoeven openen.

Nieuw fragment maken

Gebruik deze optie om codefragmenten te maken die u kunt opslaan voor toekomstig gebruik. Selecteer de code en klik op Nieuw fragment maken om van de geselecteerde code een fragment te maken. Zie Werken met codefragmenten voor meer informatie.

Verwant bestand openen

Klik met de rechtermuisknop op een link/scripttag en klik op gerelateerd bestand openen om het bestand te openen.

Stijlblad koppelen

Voeg een bestaande CSS-stijlblad toe aan je pagina.

Selectie samenvouwen

Het submenu Selectie bevat verschillende codebewerkingsopties die je kunt gebruiken op een geselecteerd stuk code, zoals regel- en blokopmerkingen omschakelen, selectie uitvouwen en samenvouwen, inline CSS converteren naar regels, CSS-regels verplaatsen en code afdrukken.

Code-navigator

Klik op deze optie om naar gerelateerde codebronnen te gaan, zoals interne of externe CSS-regels, includes aan serverzijde, externe JavaScript-bestanden, bovenliggende sjabloonbestanden, bibliotheekbestanden en iframe-bronbestanden. Zie Naar gerelateerde code navigeren voor meer informatie.

Hulpmiddelen voor coderingstips

Het submenu Code Hint Tools brengt de Kleurkiezer, URL-browser en lettertypelijst binnen handbereik.

Codeblokken inspringen

Terwijl je code schrijft en bewerkt in de codeweergave of de code-inspector, kun je het inspringingsniveau van een geselecteerd blok of regel code wijzigen door het naar rechts of links te verschuiven met één tab.

Het geselecteerde codeblok inspringen

Druk op Tab of
Druk op Ctrl+] of
Selecteer Bewerken > Code inspringen.

Inspringing van het geselecteerde codeblok ongedaan maken

Druk op Shift+Tab of
Druk op Ctrl+[ of
Selecteer Bewerken > Code niet inspringen.

Naar gerelateerde code navigeren

In de codenavigator wordt een lijst weergegeven met codebronnen die betrekking hebben op een bepaalde selectie op uw pagina. Gebruik deze lijst om naar gerelateerde codebronnen te gaan, zoals interne of externe CSS-regels, includes aan serverzijde, externe JavaScript-bestanden, bovenliggende sjabloonbestanden, bibliotheekbestanden en iframe-bronbestanden. Wanneer u in de codenavigator op een koppeling klikt, opent Dreamweaver het bestand dat het relevante stukje code bevat. Het bestand wordt in het gebied met verwante bestanden weergegeven als dit is ingeschakeld. Als u verwante bestanden niet hebt ingeschakeld, opent Dreamweaver het geselecteerde bestand als een afzonderlijk document in het venster Document.

Als u in de codenavigator op een CSS-regel klikt, wordt u direct naar die regel gebracht. Als het een interne regel van het bestand is, wordt de regel in de gesplitste weergave weergegeven. Als de regel zich in een extern CSS-bestand bevindt, opent Dreamweaver het bestand en wordt de regel in het gebied voor verwante bestanden boven het hoofddocument weergegeven.

Je kunt de Codenavigator openen vanuit de weergaven Ontwerp, Code en Gesplitst, en ook vanuit de Code-inspector.

Voor een video-overzicht van het Dreamweaver-engineeringteam over werken met de Codenavigator, zie www.adobe.com/go/dw10codenav.

Voor een tutorial over werken met Live View, gerelateerde bestanden en de Codenavigator, zie www.adobe.com/go/lrvid4044_dw.

De codenavigator openen

Alt+klik (Windows) of Command+Option+klik (Macintosh) ergens op de pagina. De Codenavigator toont koppelingen naar de code die het gebied beïnvloedt waarop je hebt geklikt.

Klik buiten de codenavigator om deze te sluiten.

Notitie

Je kunt de Codenavigator ook openen door op de Codenavigator-indicator te klikken. Deze indicator verschijnt bij het invoegpunt op je pagina wanneer de muis twee seconden inactief is geweest.

Navigeren naar code met de Codenavigator

Open de Codenavigator vanuit het gebied van de pagina waar je in geïnteresseerd bent.

Klik op het stukje code waar u naartoe wilt gaan.

De codenavigator groepeert gerelateerde codebronnen per bestand en geeft de bestanden in alfabetische volgorde weer. Stel dat CSS-regels in drie externe bestanden invloed hebben op de selectie in uw document. In dat geval geeft de codenavigator deze drie bestanden weer plus de CSS-regels die relevant zijn voor de selectie. Voor CSS die betrekking hebben op een gegeven selectie, werkt de codenavigator net als het deelvenster CSS-stijlen in Huidige modus.

Notitie

Als u de muis boven CSS-regels houdt, geeft de codenavigator scherminfo weer over de eigenschappen in de regel. Deze tooltips zijn nuttig wanneer je onderscheid wilt maken tussen veel regels die dezelfde naam hebben.

Het symbool van de codenavigator uitschakelen

Open de codenavigator.

Selecteer Symbool uitschakelen in de rechterbenedenhoek.

Klik buiten de codenavigator om deze te sluiten.

Om de Code Navigator-indicator opnieuw in te schakelen, Alt+klik (Windows) of Command+Option+klik (Macintosh) om de Code Navigator te openen en deselecteer de optie Indicator uitschakelen.

Ga naar een JavaScript- of VBScript-functie

In de Codeweergave en de Code-inspector kun je een lijst bekijken van alle JavaScript- of VBScript-functies in je code en naar elke functie springen.

Bekijk het document in Codeweergave (Weergave > Code) of de Code-inspector (Venster > Code-inspector).

Voer een van de volgende stappen uit:

Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) ergens in de codeweergave en selecteer het vervolgmenu Functies in het snelmenu.

Notitie

Het vervolgmenu Functies verschijnt niet in de ontwerpweergave.

Eventuele JavaScript- of VBScript-functies in de code worden weergegeven in het vervolgmenu.

Notitie

Als u de functies in alfabetische volgorde wilt weergeven, klikt u met de rechtermuisknop en ingedrukte Ctrl-toets (Windows) of met ingedrukte Option- en Control-toets (Macintosh) in de codeweergave en selecteert u het vervolgmenu Functies.

Klik in de code-inspector op de knop Codenavigatie ({ }) in de werkbalk.

Selecteer een functienaam om naar die functie in je code te springen.

JavaScript uitpakken

De JavaScript Extractor (JSE) verwijdert (bijna) alle JavaScript uit uw Dreamweaver-document, exporteert het naar een extern bestand en koppelt het extern bestand aan uw document. De JSE kan ook gebeurtenishandlers, zoals onclick en onmouseover uit uw code verwijderen, en de JavaScript voor deze handlers onopvallend aan het document koppelen.

Let op de volgende beperkingen van de JavaScript Extractor voordat je deze gebruikt:

De JSE haalt geen script-tags uit het hoofdgedeelte van het document (behalve in het geval van Spry-widgets). In sommige gevallen levert het extern maken van deze scripts onverwachte resultaten op. Standaard vermeldt Dreamweaver deze scripts in het dialoogvenster JavaScript extern maken, maar ze worden niet voor extractie geselecteerd. (U kunt ze desgewenst handmatig selecteren.)
De JSE haalt JavaScript niet uit bewerkbare gebieden van DWT-bestnden (Dreamweaver-sjabloonbestanden), niet-bewerkbare gebieden van sjabloonexemplaren of Dreamweaver-bibiotheekitems.
Nadat u JavaScript met de optie JavaScript extern maken en onopvallend koppelen hebt verwijderd, kunt u de Dreamweaver-gedragingen in het deelvenster Gedrag niet meer bewerken. Dreamweaver kan het deelvenster Gedrag niet controleren en vullen met gedragingen die eerder onopvallend zijn gekoppeld.
U kunt de wijzigingen niet ongedaan maken nadat u de pagina hebt gesloten. U kunt de wijzigingen echter wel ongedaan maken zolang u in dezelfde bewerkingssessie bent. Kies Bewerken > Ongedaan maken JavaScript extern maken om de handeling ongedaan te maken.
Sommige zeer complexe pagina's werken mogelijk niet zoals u verwacht. Wees voorzichtig met het uitpakken van JavaScript uit pagina's met document.write() in de hoofdvariabelen en globale variabelen.

Voor een video-overzicht van het Dreamweaver engineering team over JavaScript-ondersteuning in Dreamweaver, zie www.adobe.com/go/dw10javascript.

De JavaScript Extractor gebruiken:

Open een pagina die JavaScript bevat.

Klik op Tools > JavaScript externaliseren.

Bewerk indien nodig de standaardselecties in het dialoogvenster JavaScript externaliseren.

Selecteer Alleen JavaScript externaliseren als u wilt dat Dreamweaver JavaScript naar een extern bestand verplaatst en naar dat bestand verwijst in het huidige document.Deze optie laat gebeurtenisafhandelaars zoals onclick en onload in het document staan en houdt Gedragingen zichtbaar in het deelvenster Gedragingen.
Selecteer JavaScript externaliseren en onopvallend koppelen als je wilt dat Dreamweaver 1) JavaScript naar een extern bestand verplaatst en ernaar verwijst in het huidige document en 2) gebeurtenisafhandelaars uit de HTML verwijdert en ze tijdens runtime invoegt met JavaScript. Wanneer je deze optie selecteert, kun je Gedragingen niet meer bewerken in het deelvenster Gedragingen.
Schakel in de kolom Bewerken alle bewerkingen uit die je niet wilt maken of selecteer bewerkingen die Dreamweaver standaard niet heeft geselecteerd.
Standaard toont Dreamweaver de volgende bewerkingen, maar selecteert ze niet:
- Scriptblokken in de kop van het document die document.write()- of document.writeln()-aanroepen bevatten.
- Scriptblokken in de kop van het document die functiehandtekeningen bevatten gerelateerd aan EOLAS-verwerkingscode, waarvan bekend is dat het document.write() gebruikt.
- Scriptblokken in de hoofdtekst van het document, tenzij de blokken alleen Spry widget- of Spry dataset-constructors bevatten.
Dreamweaver wijst automatisch ID's toe aan elementen die nog geen ID's hebben. Als deze ID's je niet bevallen, kun je ze wijzigen door de ID-tekstvakken te bewerken.

Klik op OK.

Het overzichtsdialoogvenster biedt een samenvatting van extracties. Bekijk de extracties en klik op OK.

Sla de pagina op.

Dreamweaver maakt een bestand SpryDOMUtils.js en een ander bestand dat de verwijderde JavaScript bevat. Dreamweaver slaat het bestand SpryDOMUtils.js in een map SpryAssets op uw site op en slaat het andere bestand op op hetzelfde niveau als de pagina waaruit de JavaScript is verwijderd. Vergeet niet beide afhankelijke bestanden naar uw webserver te laden wanneer u de originele pagina laadt.

Snel bewerken

In plaats van je codeomgeving vol te proppen met allerlei deelvensters en pictogrammen, plaatst de modus Snel bewerken in Dreamweaver contextspecifieke code en tools inline, zodat je snel bij de benodigde codesectie kunt.

Je kunt de modus Snel bewerken openen door:

Met de rechtermuisknop op een codefragment te klikken en Snel bewerken te selecteren in het contextmenu dat verschijnt
Druk op Ctrl+E (op Windows) of Cmd+E (op Mac)

Modus Snel bewerken met HTML-bestanden

Plaats in een HTML-bestand de cursor binnen een klasse of een id-kenmerk (naam of waarde) of in de tagnaam. Snel bewerken toont u CSS, SCSS en LESS-regels in uw project die overeenkomen. Je kunt deze regels direct inline bewerken, zonder ooit de context van het HTML-bestand te verlaten.

Wanneer meerdere regels overeenkomen, navigeer je ertussen met de lijst aan de rechterkant (of gebruik Alt+Pijltje omhoog/omlaag).

Om direct vanuit de inline editor een CSS-regel te maken, klik je op Nieuwe regel of druk je op Ctrl+Alt+N (op Windows) of Cmd+Opt+N (op Mac).

Modus Snel bewerken met JavaScript-bestanden

Plaats in een Javascript-bestand de cursor op een functienaam. Snel bewerken toont je de hoofdtekst van de functie (zelfs als deze aanwezig is in andere bestanden waarnaar wordt verwezen door een require()-instructie).

Snel bewerken gebruiken met CSS-, SCSS- of LESS-bestanden

Wanneer je Snel bewerken opent met je cursor binnen een kleurwaarde, kun je de Kleurkiezer openen en snel de kleuren in je CSS-code wijzigen.

De kleurkiezer openen in een CSS-bestand

Plaats in een CSS-, LESS- of SCSS-bestand de cursor op een cubic-bezier()- of steps()-overgangstimingfunctie en Snel bewerken toont een grafische overgangscurve-editor.

Vooraf gedefinieerde timingfuncties ease, ease-in, ease-out, ease-in-out, step-start en step-end zijn ook geldige uitgangspunten.

Het manipuleren van een Bézier-curve met Snel bewerken

Refactoring van code

Refactoring van code is het proces waarbij bestaande computercode wordt geherstructureerd zonder het externe gedrag te wijzigen. Hierdoor wordt de code beter leesbaar, beheerbaar en begrijpelijker en kunnen fouten makkelijker worden opgespoord. Dit wordt gebruikt wanneer de code dubbele code, lange methoden of grote klassen bevat. Foutopsporing in de code verloopt sneller doordat kleine functies en de juiste vervanging worden gebruikt.

Met JavaScript refactoring kun je functies hernoemen en de scope van een Variabele instellen, zodat je deze kunt aanroepen vanuit een codeblok waarin deze is gedefinieerd.

Notitie

Refactoring van code is nu alleen beschikbaar in .js-bestanden.

Refactoring van JavaScript

U kunt refactoring van code toepassen in HTML-, PHP- en JavaScript-documenten. Wanneer je rechtsklikt op het codegebied in Dreamweaver, verschijnt de optie Refactor in het vervolgkeuzemenu.Refactor bestaat uit de volgende opties:

Naam wijzigen
Extraheren naar variabele
Extraheren naar functie
In Try-Catch plaatsen
In voorwaarde plaatsen
Omzetten naar pijlfunctie
Getters/setters maken

Raadpleeg de volgende secties om de functionaliteit van elke refactoring-optie te begrijpen:

Naam wijzigen

Naam wijzigen wordt gebruikt om alle exemplaren van de naam van een variabele of functie in Javascript-code te wijzigen. Het selecteren van een variabele door klikken en slepen is niet nodig om te refactoren.

Voer de volgende stappen uit om te hernoemen in JavaScript:

Markeer of plaats de tekstcursor in de code die gewijzigd moet worden.

Klik met de rechtermuisknop op de geselecteerde tekst en selecteer vervolgens Refactor > Rename. Je kunt ook de sneltoets Ctrl + Alt + R gebruiken op Windows OS, of Command + option + R op macOS om te hernoemen.

Er verschijnt een multi-cursorweergave, zodat u alle exemplaren van de variabele kunt wijzigen. Bij multi-cursorverbeteringen wordt het volgende exemplaar van de huidige selectie geselecteerd. Retype een unieke Variabele- of functienaam om de huidige naam te vervangen.

Extraheren naar variabele

Gebruik Extraheren naar variabele om een expressie met een variabele, een lokale variabele of constanten in JavaScript te vervangen door een expressie te selecteren en erop te klikken met de rechtermuisknop. Selecteer vervolgens Refactor > Extraheren naar variabele. Je kunt ook Ctrl + Alt + V gebruiken op Windows OS en Cmd + Alt + V op macOS.

Extraheren naar functie

Gebruik Extraheren naar functie om een expressie te vervangen in de aanroepen van een functie binnen een parameter. De standaardwaarde van de nieuwe parameter kan worden geïnitialiseerd in de hoofdtekst van de functie of doorgegeven via functieaanroepen.

Voer de volgende stappen uit om te refactoren met Extract to Function:

Selecteer een willekeurige expressie of een set van expressies in JavaScript.

Extraheren naar functie — Een expressie selecteren

Klik met de rechtermuisknop en selecteer Refactor > Extract to Function. Je kunt ook Ctrl + Alt + M gebruiken op Windows OS of Cmd + Alt + M op Mac OS.

Selecteer de doelomvang om de functie te extraheren uit het pop-up menu dat op het scherm wordt weergegeven.

De uitvoer hangt af van het geselecteerde doelbereik. De doelomvang kan bijvoorbeeld een constructor, de geselecteerde klasse of een globale functie zijn.

De kenmerken van Extract to function zijn:

Het bepaalt de parameters die moeten worden doorgegeven op basis van identificatoren die beschikbaar zijn in de selectie of in de geëxtraheerde omvang.
Het identificeert de retourparameters van de functie op basis van identificatoren waarvan de waarden zijn gewijzigd in de selectie.
Het maakt ook een functie met een unieke naam.

De volgende screenshots tonen de uitvoer op basis van de respectievelijke geselecteerde doelomvang.

In Try-Catch plaatsen

Gebruik In Try-Catch plaatsen voor een uitzondering in een codeblok die als fout wordt weergegeven nadat het programma is gecompileerd. Deze functie plaatst het codeblok in een Try-Catch-blok. Dit codeblok wordt gemarkeerd als een uitzondering tijdens het uitvoeren van het programma.

Selecteer of plaats de cursor bij de code, klik met de rechtermuisknop en selecteer Refactor > Wrap in Try Catch. Als je de cursor op een positie plaatst, vindt het de omliggende statements, anders controleert het of de code uit statements bestaat of niet. Als er statements zijn, dan verpakt het de code in een Try Catch-blok.

In voorwaarde plaatsen

Gebruik Wrap in Condition voor een expressie in code om alleen te compileren voor een specifieke conditie.

Selecteer een expressie in de code, klik met de rechtermuisknop en selecteer Refactor > Wrap in Condition.

Omzetten naar pijlfunctie

Een arrow-functie is een expressie die geen eigen functie-eigenschappen heeft zoals this, arguments, super, of new.target. Deze functie-expressies zijn voor expressies die geen methode zijn en kunnen niet worden gebruikt als constructor.

Plaats de cursor in een functie, klik met de rechtermuisknop en selecteer Refactor > Convert to Arrow Function.

Notitie

Als het geselecteerde statement één parameter heeft, dan verschijnt de parameterstructuur als param => {statements}.
Als het geselecteerde statement nul of meer dan één parameter heeft zoals param (param1, param2) dan verschijnt de parameterstructuur als param (param1, param2) => {statements}.

Getters/setters maken

In JavaScript kan een setter worden gebruikt om een functie uit te voeren als een opgegeven eigenschap een wijziging vereist. Setters worden meestal gebruikt in combinatie met getters om een soort pseudo-eigenschap te creëren. Je kunt geen setter maken voor een eigenschap die een daadwerkelijke waarde heeft.

Plaats de cursor bij een lid van een objectexpressie, klik met de rechtermuisknop en selecteer Refactor > Create Getters/Setters.

Tips voor probleemoplossing

De volgende tabel biedt tips voor probleemoplossing voor bijbehorende foutmeldingen die op het scherm worden weergegeven vanwege onjuiste selectie van code:

Functienaam	Foutbericht	Tip voor probleemoplossing
Naam wijzigen	Geen expressie op de opgegeven positie	Plaats de cursor op of voor de naam van een variabele of functie.
Extraheren naar variabele	Selectie vormt geen uitdrukking	Selecteer een expressie (uitdrukking) in de code voordat u refactoring op de code toepast.
Extraheren naar functie	Het geselecteerde blok moet een reeks instructies of een uitdrukking vertegenwoordigen	Zorg dat u een blok selecteert met een reeks instructies of een expressie.
In Try-Catch plaatsen	Selecteer geldige code om in een Try-Catch-blok te plaatsen	Zorg dat u code selecteert voordat u de refactoringoptie In Try-Catch plaatsen toepast.
In voorwaarde plaatsen	Selecteer geldige code om in een voorwaardeblok te plaatsen	Zorg dat u een expressie selecteert voordat u de refactoringoptie In voorwaarde plaatsen toepast.
Omzetten naar pijlfunctie	Plaats de cursor binnen een functie-uitdrukking	Zorg dat u de cursor binnen een functie-expressie plaatst voordat u de refactoringoptie toepast.
Getters/setters maken	Plaats de cursor op een lid van een objectuitdrukking	Zorg dat u de cursor op een lid van een objectexpressie plaatst voordat u de refactoringopties Getters/setters maken toepast.

Tekst zoeken en vervangen

Je kunt de zoek- en vervangfuncties van Dreamweaver gebruiken om te zoeken naar elk type tekst, code of witruimte in je site of map.

U kunt zoeken in zowel de tekst als de opmaakcodes of de zoekopdracht beperken tot de weergegeven tekst in de ontwerpweergave of tot alleen de code.

U kunt ook krachtige patroonherkenningsalgoritmes (reguliere expressies) gebruiken voor geavanceerd zoeken en vervangen.

Als u de gewenste tekst eenmaal hebt gevonden, kunt u deze vervolgens vervangen door de tekst, code of witruimte die u hebt opgegeven.

Zie Tekst zoeken en vervangen voor meer informatie.

Voorvertoning van afbeeldingen en kleuren in Codeweergave

Nadat je relevante code voor afbeeldingen en kleuren hebt ingevoegd, kun je ze direct in Codeweergave bekijken.

Voorvertoning van afbeelding

Plaats uw muis op een afbeeldings-URL naar een voorbeeld van de afbeelding in de codeweergave weer te geven. Je kunt een voorvertoning bekijken van afbeeldingen waarnaar wordt verwezen als een van de volgende:

url();
data-uri()
Waarde van het src-kenmerk van de img-tag

Dreamweaver geeft ook voorvertoningen weer van op afstand gehoste afbeeldingen.

Als Dreamweaver geen voorvertoning kan weergeven voor externe paden, wordt het bericht 'Kan afbeelding niet laden' weergegeven.

Je kunt een voorvertoning bekijken van de volgende afbeeldingstypen:

JPEG
JPG
PNG
GIF
SVG

Voorvertoning van afbeeldingen in de codeweergave

Kleurvoorvertoning

Houd de muis boven kleurwaarden om een voorvertoning van kleuren in de codeweergave. Ondersteunde formaten zijn:

Hexadecimale kleurwaarden van 3 en 6 cijfers: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Vooraf gedefinieerde kleurnamen, zoals olijfgroen, blauwgroen, rood.

Kleurvoorvertoning is beschikbaar in alle documenttypen voor de bovenstaande kleurformaten.

Voorvertoning van kleuren in de codeweergave

Klik met de rechtermuisknop op een waarde en selecteer Snel bewerken om de kleurkiezer te openen en een andere kleur te selecteren.

Notitie

Om voorvertoningen voor afbeeldingen en kleuren uit te schakelen, vink je de optie Weergave > Opties codeweergave > Assetvoorvertoning uit.

Code afdrukken

Je kunt je code afdrukken om deze offline te bewerken, archiveren of distribueren.

Open een pagina in de codeweergave.

Selecteer Bestand > Code afdrukken.

Geef afdrukopties op en klik vervolgens op OK (Windows) of Afdrukken (Macintosh).

Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.

De app openen

Codekleuren aanpassen

Coderingstips en codeaanvulling

Leren

Leer met stapsgewijze zelfstudievideo's en praktische begeleiding, rechtstreeks in de app.

Community

Neem deel aan discussies, vind antwoorden, leer van experts en deel je kennis.

Adobe Home

Krijg toegang tot uw favoriete Creative Cloud-apps, services, bestandsbeheer en meer.