Code bewerken in de ontwerpweergave

Laatst bijgewerkt op 27 apr. 2021

Gebruik dit onderwerp voor informatie over het gebruik van de Eigenschappencontrole om code te bewerken in de ontwerpweergave in Adobe Dreamweaver.

Met Dreamweaver kun je visueel webpagina's maken en bewerken zonder je zorgen te maken over de onderliggende broncode, maar er zijn momenten waarop je de code moet bewerken voor meer controle of om problemen met je webpagina op te lossen. Met Dreamweaver kun je code bewerken terwijl je in de Ontwerpweergave werkt.

Dit gedeelte is bedoeld voor mensen die liever in de Ontwerpweergave werken, maar die ook snel toegang tot de code willen.

Onderliggende tags selecteren in de ontwerpweergave

Als je een object in de Ontwerpweergave selecteert dat onderliggende tags bevat—bijvoorbeeld een HTML-tabel—kun je snel de eerste onderliggende tag van dat object selecteren door Bewerken > Onderliggend element selecteren te kiezen.

Notitie

Deze opdracht is alleen beschikbaar in de ontwerpweergave.

De <table>-tag heeft bijvoorbeeld normaal gesproken <tr> onderliggende tags. Als je een <table>-tag in de tagselector selecteert, kun je de eerste rij in de tabel selecteren door Bewerken > Onderliggend element selecteren te kiezen. Dreamweaver selecteert de eerste <tr>-tag in de tagselector. Omdat de <tr>-tag zelf onderliggende tags heeft, namelijk <td>-tags, wordt door opnieuw Bewerken > Onderliggend element selecteren te kiezen de eerste cel van de tabel geselecteerd.

Code bewerken met de eigenschappencontrole

Je kunt de Eigenschappencontrole gebruiken om de kenmerken van tekst of objecten op je pagina te inspecteren en bewerken. De eigenschappen die worden weergegeven in de Eigenschappencontrole komen over het algemeen overeen met kenmerken van tags; het wijzigen van een eigenschap in de Eigenschappencontrole heeft over het algemeen hetzelfde effect als het wijzigen van het overeenkomstige kenmerk in de Codeweergave.

Notitie

Zowel de Taginspector als de Eigenschappencontrole laten je de kenmerken van een tag bekijken en bewerken. Met de Taginspector kun je elk kenmerk bekijken en bewerken dat is gekoppeld aan een bepaalde tag. De Eigenschappencontrole toont alleen de meest voorkomende kenmerken, maar biedt een uitgebreidere set bediening voor het wijzigen van de waarden van die kenmerken, en laat je bepaalde objecten bewerken (zoals tabelkolommen) die niet overeenkomen met specifieke tags.

Klik in de tekst of selecteer een object op de pagina.

De eigenschappeninspector voor de tekst of het object verschijnt onder het documentvenster.Als het eigenschappenpaneel niet zichtbaar is, selecteer Venster > Eigenschappen.

Breng wijzigingen aan in de kenmerken in de eigenschappencontrole.

CFML bewerken met de eigenschappencontrole

Gebruik de Eigenschappencontrole om ColdFusion-opmaak in de Ontwerpweergave te inspecteren en wijzigen.

Klik in de eigenschappencontrole op de knop Kenmerken om de kenmerken van de tag te bewerken of nieuwe toe te voegen.
Als de tag content bevat tussen de openings- en sluitingstags, klik je op de button Content om de content te bewerken.

De knop Content wordt alleen weergegeven als de geselecteerde tag geen lege tag is (dat wil zeggen als deze zowel een openings- als een sluitingstag heeft).

Als de tag een voorwaardelijke expressie bevat, breng je wijzigingen aan in het vak Expressie.

Overzicht van de Snelle tageditor

Je gebruikt de Quick Tag Editor om snel HTML-tags te inspecteren, invoegen en bewerken zonder de Ontwerpweergave te verlaten.

Als je ongeldige HTML invoert in de Snelle Tag-editor, probeert Dreamweaver deze voor je te corrigeren door sluitende aanhalingstekens en sluitende punthaken in te voegen waar nodig.

Om de opties voor de Snelle Tag-editor in te stellen, open je de Snelle Tag-editor door op Control-T (Windows) of Command-T (Macintosh) te drukken.

De Snelle tageditor heeft drie modi:

  • De modus HTML invoegen wordt gebruikt om nieuwe HTML-code in te voegen.
  • De modus Tag bewerken wordt gebruikt om een bestaande tag te bewerken.
  • De modus HTML invoegen wordt gebruikt om nieuwe HTML-code in te voegen.

  • De modus Tag bewerken wordt gebruikt om een bestaande tag te bewerken.

  • De modus Tag rondom plaatsen wordt gebruikt om een nieuwe tag rondom de huidige selectie te plaatsen.

Notitie

In welke modus de Snelle tageditor wordt geopend, hangt af van de huidige selectie in de ontwerpweergave.

In alle drie de modi is de basisprocedure voor het werken met de Snelle tageditor hetzelfde: open de editor, voer tags in of bewerk tags en kenmerken en sluit de editor vervolgens.

U kunt door de modi rouleren door te drukken op Ctrl+T (Windows) of Command+T (Macintosh) terwijl de Snelle tageditor actief is.  

Code bewerken met de Snelle tageditor

Met de Snelle tageditor (Bewerken > Snelle tageditor) kunt u snel HTML-tags invoegen en bewerken zonder de ontwerpweergave te verlaten.

Een HTML-tag invoegen

Klik in de Ontwerpweergave op de pagina om het invoegpunt te plaatsen waar je code wilt invoegen.
Druk op Ctrl+spatiebalk (Windows) of Command+spatiebalk (Macintosh).

De Snelle tageditor wordt geopend in de modus HTML invoegen.

Snelle tageditor in de modus HTML invoegen
Snelle tageditor in de modus HTML invoegen

Voer de HTML-tag in en druk op Enter.

De tag wordt ingevoegd in je code, samen met een bijpassende afsluitende tag indien van toepassing.

Druk op Escape als u de editor wilt sluiten zonder wijzigingen aan te brengen.

Een HTML-tag bewerken

Selecteer een object in de ontwerpweergave.

Je kunt ook de tag die je wilt bewerken selecteren via de tagselectie onderaan het documentvenster.Voor meer informatie, zie Code bewerken met de tag selectie-.

Druk op Ctrl+spatiebalk (Windows) of Command+spatiebalk (Macintosh).

De Snelle tageditor wordt geopend in de modus Tag bewerken.

Voer nieuwe attributen in, bewerk bestaande attributen of bewerk de naam van de tag.
Druk op Tab om vooruit te gaan van het ene attribuut naar het volgende; druk op Shift+Tab om terug te gaan.
Notitie

Standaard worden wijzigingen toegepast op het document wanneer je op Tab of Shift+Tab drukt.

Om de Quick Tag Editor te sluiten en alle wijzigingen toe te passen, druk je op Enter.
Als u wilt afsluiten zonder verdere wijzigingen aan te brengen, drukt u op Escape.

Plaats de huidige selectie in HTML-tags

Selecteer niet-opgemaakte tekst of een object in Ontwerpweergave.
Notitie

Als u tekst of een object selecteert dat een HTML-begintag of -eindtag bevat, wordt de Snelle tageditor geopend in de modus Tag bewerken in plaats van de modus Tag rondom plaatsen.

Druk op Control+T (Windows) of Command+T (Macintosh), of klik op de knop Snelle tag editor in de Eigenschappeninspector.

De Snelle tageditor wordt geopend in de modus Tag rondom plaatsen.

Voer een enkele openende tag in, zoals strong, en druk op Enter (Windows) of Return (Macintosh).

De tag wordt ingevoegd aan het begin van de huidige selectie en een bijpassende sluitende tag wordt ingevoegd aan het eind.

Als u wilt afsluiten zonder wijzigingen aan te brengen, drukt u op Escape.

Gebruik het hintmenu in de Snelle tag editor

De Snelle tag editor bevat een attribuuthintmenu dat alle geldige attributen van de tag die je bewerkt of invoegt weergeeft.

Je kunt ook het hintmenu uitschakelen of de vertraging aanpassen voordat het menu verschijnt in de Snelle tag editor.

Om een hintmenu te zien dat geldige kenmerken voor een tag weergeeft, pauzeer je kort tijdens het bewerken van een kenmerknaam in de Quick Tag Editor.Er verschijnt een hintmenu met alle geldige attributen voor de tag die je bewerkt.

Op dezelfde manier kun je een hintmenu zien met geldige tagnamen door kort te pauzeren tijdens het invoeren of bewerken van een tagnaam in de Snelle tag editor.

Notitie

De voorkeuren voor coderingstips van de Snelle tag editor worden beheerd door de normale voorkeuren voor coderingstips. Voor meer informatie, zie Voorkeuren voor coderingstips instellen.

Voer een van de volgende stappen uit:
  • Begin de naam van een tag of kenmerk te typen. De selectie in het menu Coderingstips springt naar het eerste item dat begint met de letters die je hebt getypt.

  • Selecteer een item met de toetsen Pijl-omhoog en Pijl-omlaag.

  • Zoek een item met de schuifbalk.

Druk op Enter om het geselecteerde item in te voegen of dubbelklik op een item om het in te voegen.
Om het hintmenu te sluiten zonder een item in te voegen, druk je op Escape of ga je verder met typen.

Schakel het hintsmenu uit of wijzig de vertraging voordat het verschijnt

Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Coderingstips.

Het dialoogvenster Voorkeuren voor Coderingstips verschijnt.

Om het hintmenu uit te schakelen, deselecteer je de optie Coderingstips inschakelen.

Code bewerken met de tagkiezer

U kunt de tagkiezer gebruiken om tags te selecteren, te bewerken of te verwijderen zonder de ontwerpweergave te verlaten. De tagkiezer bevindt zich op de statusbalk, onder in het documentvenster, en toont een reeks tags.

Een tag bewerken of verwijderen

Klik in het document.

De tags die van toepassing zijn op het invoegpunt verschijnen in de tagselector.

Klik met de rechtermuisknop (Windows) of Control-klik (Macintosh) op een tag in de tagselector.
Als u een tag wilt bewerken, selecteert u Tag bewerken in het menu. Breng je wijzigingen aan in de Quick Tag Editor.Voor meer informatie, zie Code bewerken met de Quick Tag Editor.
Als u een tag wilt verwijderen, selecteert u Tag verwijderen in het menu.

Selecteer een object dat overeenkomt met een tag

Klik in het document.

De tags die van toepassing zijn op het invoegpunt verschijnen in de tagselector.

Klik op een tag in de tagkiezer.

Het object dat de tag vertegenwoordigt, wordt op de pagina geselecteerd.

Notitie

Gebruik deze techniek om individuele tabelrijen (tr tags) of cellen (td tags) te selecteren.

Schrijf en bewerk scripts in ontwerpweergave

Je kunt werken met client-side JavaScripts en VBScripts in zowel Code- als Ontwerpweergave, op de volgende manieren:

  • Schrijf een JavaScript of VBScript script voor je pagina zonder ontwerpweergave te verlaten.

  • Maak een koppeling in je document naar een extern scriptbestand zonder ontwerpweergave te verlaten.

  • Bewerk een script zonder ontwerpweergave te verlaten.

    Voordat je begint, selecteer je Weergave > Visuele hulpmiddelen > Onzichtbare elementen om ervoor te zorgen dat scriptmarkeringen verschijnen op de pagina.

Een clientscript schrijven

Plaats het invoegpunt waar u het script wilt.

Kies Invoegen > HTML > Script.

Selecteer het script in het venster waarin u bestanden selecteert.

Notitie

U hoeft hierin geen openende of afsluitende script-tags op te nemen.

De scripttag voor het geselecteerde bestand wordt ingevoegd in het document.

Een script bewerken

Selecteer de scriptmarkering.
Klik in de eigenschappencontrole op de knop Bewerken.

Het script verschijnt in het dialoogvenster Scripteigenschappen.

Als je hebt gekoppeld aan een extern scriptbestand, wordt het bestand geopend in Codeweergave, waar je je bewerkingen kunt maken.

Notitie

Als er code tussen de scripttags staat, wordt het dialoogvenster Scripteigenschappen geopend, zelfs als er ook een koppeling naar een extern scriptbestand is.

Geef in het vak Taal JavaScript of VBScript op als de taal van het script.
Geef in het pop-upmenu Type het type Script op, aan de kant van de klant of server-side.
(Optioneel) Geef in het vak Bron een extern gekoppeld scriptbestand op.

Klik op het mappictogram of de knop Bladeren om een bestand te selecteren of typ het pad.

Bewerk het script en klik op OK.

ASP server-side scripts bewerken in Ontwerpweergave

Gebruik de ASP Script Property inspector om ASP server-side Scripts te inspecteren en wijzigen in Ontwerpweergave.

Selecteer in Ontwerpweergave het visuele pictogram voor de server-taal tag.
Klik in de ASP-script eigenschappeninspector op de knop Bewerken.
Bewerk het ASP-serverscript en klik op OK.

Scripts bewerken op de pagina met behulp van de Property inspector

Selecteer in de Eigenschappeninspector de scripttaal in het pop-upmenu Taal of typ een taalnaam in het vak Taal.
Notitie

Als je JavaScript gebruikt en niet zeker bent van de versie, selecteer dan JavaScript in plaats van JavaScript1.1 of JavaScript1.2.

Geef in het pop-upmenu Type het type script aan, client-side of server-side.

(Optioneel) Geef in het vak Bron een extern gekoppeld scriptbestand op. Klik op het mappictogram om het bestand te selecteren of typ het pad.

Klik op Bewerken om het script te bewerken.

JavaScript-gedrag gebruiken

Je kunt eenvoudig JavaScript (klantzijde) gedragingen koppelen aan pagina-elementen door het tabblad Gedragingen van de Tag-inspector te gebruiken. Voor meer informatie, zie Ingebouwde JavaScript-gedragingen toepassen in Dreamweaver.